When it comes to creating graphics for the many different screen sizes in use today, designers and developers have a variety of choices at their fingertips, including Photoshop and Fireworks. More and more however, designers are looking to Illustrator, as well. With the Illustrator CS5 release, Adobe added finer control over antialiasing, which results in great-looking pixel-perfect artwork. With its vector-based editing environment and ability to integrate with virtually any other Adobe application, Illustrator offers a wide range of benefits for web and interactive designers.

In the past, the titles I recorded covering the use of Illustrator for web design were filled with workarounds to address the shortcomings of using Illustrator for that kind of work. With the new features that Adobe added to Illustrator CS5 however, I was able to refocus the majority of my latest course—Illustrator CS5 for Web and Interactive Design—on workflow. The course covers how to best use the creative toolset and powerful production tools in Illustrator to crank out high-quality pixel- and vector-based web content quickly and efficiently. For example, the title has dedicated chapters focused on using Illustrator hand-in-hand with other applications including Photoshop, Fireworks, Dreamweaver, Flash Professional, and Flash Catalyst.

With the public interest in mobile apps, many designers are tasked with creating content for all kinds of screen sizes, and also for generating the numerous icon sizes. Through the generosity of the fabulous visual designer Jon Hicks, I’ve included his template for designing icons for Apple’s iOS in the course.

If you’re a web designer or even a developer who likes to dabble in the world of design, you’ll find a tremendous amount of relevant information in Illustrator CS5 for Web and Interactive Design. If you’re a relatively new user of Illustrator in general, I’d recommend the Illustrator CS5 Essential Training course.

A bright future for Illustrator in web design

Adobe recently released extended functionality for Illustrator via the HTML5 Pack for Illustrator CS5 technology preview (you can download it on Adobe Labs). This pack adds the following six capabilities to Illustrator CS5:

• Designate certain attributes (i.e., fill, stroke, opacity) as variables right from the Appearance panel in Illustrator. When saved as SVG, developers can easily change the variable definition to “reskin” or modify the art. You can even create global variables.

• Create multiple artboards in Illustrator at various sizes, for example to design art for different screen sizes. You might do this to create different designs for mobile, tablet, and desktop versions of a design for example. You can then save your file as SVG and include all the different artboards. Illustrator creates an HTML file and a CSS file, along with separate SVG files for each artboard. The CSS uses media queries to detect the screen size and automatically serves up the correct SVG image.

• Select an object on the Illustrator artboard and then choose Object > HTML5 Canvas > Make. These elements are rasterized and included as canvas elements when saved as SVG, giving developers the ability to control the elements via JavaScript.

• Define character styles in your Illustrator document, and then export those character styles as a valid CSS file. You can do this directly from the Character Styles panel.

• Select an object in Illustrator and export valid CSS directly from the Appearance panel. Of course, if you mockup an entire page in Illustrator, you can simply select all of it and export it to a single CSS file. IDs are picked up from the Layers panel (so you want to name artwork carefully), and Illustrator can export Fill, Stroke, Opacity, and Absolute Position, and Dimensions.

• Select styles from the Graphic Styles panel and choose to have them exported when you save your file as SVG. What’s really cool is that you can include styles even if they aren’t applied to your artwork. This would allow you to deliver multiple styles to a developer within a single SVG, and even programmatically swap styles.

With the current trends in the world of web and interactive design, it’s obvious that Illustrator is going to play a large role in future web workflows. Adobe added powerful SVG support to Illustrator nearly 10 years ago, and today’s renewed interest is driving the product even further with support for the HTML5 Canvas tag and CSS3.

In the coming weeks, I will be recording an additional chapter of videos covering the new features included in the HTML5 Pack for Illustrator CS5. These videos will then be added to Illustrator CS5 for Web and Interactive Design course. Stay tuned for information on when that will be available.