September 12, 2010

Web designers rejoice! Adobe releases HTML5 pack for Illustrator CS5

If you use Illustrator for web design, and if you consider yourself on the cutting edge of web design, life just got a whole lot more interesting. Adobe has just released an HTML5 Pack for Illustrator CS5 that introduces some advanced SVG support, support for the HTML Canvas tag, and support for export to CSS3.

Adobe released the Adobe Illustrator CS5 HTML5 Pack as a technology preview on Adobe Labs (you can get it here) so it isn't a full-blown solution -- it actually takes a bit of grunt work to get it installed. Then again, HTML5 and CSS3 aren't anywhere near complete or fully supported across all browsers, either. Consider this a peek into the future, and a GREAT way to experiment on your own, and live on the blistering edge of web design and development.

So what exactly does the Illustrator CS5 HTML5 Pack bring to the table? Here's a quick overview:

Parameterized SVG
You can 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.

Multi-screen SVG
You can 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. 

Mark objects as canvas in SVG
You can 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.

Export named character styles as CSS
You can 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.

Export artwork appearances as CSS
You can 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.

Include selected Graphic Styles as CSS in SVG
You can 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.

Where can I learn more?
So according to the double rainbow guy, what does all of this mean? At the very least, it's a peek into the future. With our continued feedback to Adobe, we're sure to see more robust tools coming to Illustrator and other great applications. Adobe released a similar HTML5 Pack for Dreamweaver a while back, and recently, Adobe actually rolled those features into Dreamweaver CS5 proper with a recent update. One can assume that something similar will follow here as well.

You can get all of the details on the Adobe Illustrator CS5 HTML5 Pack on the Adobe Labs webpage, and you can find a press release from Adobe here. You can also participate in the dedicated discussion forum here.

Of course, if you're a web designer who needs to brush up on some Illustrator skills, my Illustrator CS5 Essential Training course at Lynda.com or my Real World Illustrator CS5 book should cover the basis. To add to all of this excitement, my latest Lynda.com title, Illustrator CS5 for Web and Interactive Design is going live later this month (9/27).

If you'd like more information on HTML5, check out James Williamson's excellent HTML5 First Look title at Lynda.com as well.

Got questions? Let's talk! Leave a comment or send me an email.

11 comments:

Anonymous said...

This would be a great topic to cover on Fridays With Mordy. Yahya!

james williamson said...

Thanks ever so much for the plug. I'm taking a look at this as we speak!

Simon H. said...

This is very cool, but out of interest why is Adobe focusing on Illustrator for this kind of web functionality? Wouldn't it make sense to implement something like this in Photoshop or Fireworks?

Alex Penny said...

Wonderful! Thanks!

Unknown said...

Yep, I'll definitely be covering this in an upcoming episode of Fridays with Mordy.

@simon - it's obvious that much of this pack revolves around SVG, which is something that only Illustrator currently supports (and has been doing so for a long time). Illustrator's existing architecture can support this far more easily than PS or FW. I don't think this means that Adobe isn't looking at rolling out similar functionality to other apps -- just that it was possible to roll this into Illustrator more quickly.

Anonymous said...

Hate to say it, but for SVG editing/creation Inkscape isn't the worst option by far, if you catch my drift.

Simon Hall said...

My Brother is a web developer and he is LIVID about this.

In his words "A web designer makes pretty pictures, a web developer turns them into proper websites that real people can use".

He's been looking forward to HTML5 becoming standard so as a web developer he can start getting artsy with his coding. But, web developers make proper websites, web designers do the pretty pictures! He he

Gato said...

HTML 5 is all good but ... but IE is 1 billion light years behind

Website Designing Company said...

In this regard, the HTML5 Pack brings a valid and solid workflow to the table, allowing designers to create their masterpiece in Illustrator, and at the same time, hand off something more useful than just a whole bunch of sliced up images to their developer.

smarDsign said...

Great piece. Thanks!

tampa personal injury law firms said...

Thanks for Sharing