Sunday, September 12th, 2010
Exciting news from Adobe; they’ve announced a new HTML5 Pack on Adobe Labs with support for HTML5, CSS3, and SVG:
Adobe is pleased to announce the availability of the Adobe® Illustrator® CS5 HTML5 Pack. This add-on for Illustrator CS5 15.0.1 provides initial support for HTML5 and CSS3, extends SVG capability in Illustrator CS5, and helps you easily design web and device content. In combination with the HTML5 features available in the Adobe Dreamweaver CS5 11.0.3 updater, these new tools allow web designers to take advantage of the latest advancements in HTML5.
While HTML5 and CSS3 will not be finalized for some time, and SVG support in browsers will continue to evolve, the extension provides support for a set of currently implemented features.
Some of the benefits of the HTML5 Pack:
- Efficiently design for web and devices by exporting Illustrator Artboards for unique screen sizes using SVG and CSS3 media queries.
- Create web widgets with Illustrator by generating dynamic vector art for data driven web work-flows.
- Take advantage of the latest enhancements to SVG and Canvas to generate interactive web content.
- Map artwork appearance attributes from designer to developer tools—export from the Illustrator Appearance Panel to CSS3 for streamlined styling of web pages.
Greg Rewis discusses it more in the video below:
Mordy Golding has a good description of some of the new features in this lab pack:
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.
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
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.
Great work Adobe!
Posted by Brad Neuberg at 5:15 am