HTML 5 Pack for Illustrator

If you head over to Adobe Labs you can download a preview version of an extension which adds HTML5 support for Adobe Illustrator CS5.  There are two different ways you can leverage this support: SVG and CSS3

SVG: Scalable Vector Graphics

HTML5 means support for SVG or vector graphics on the web.  This is great for targeting multiple screen sizes.  Your graphics can scale and resize without distortion since they are still vectored.  Most current browsers have some support for SVG, however Internet Explorer is sill lagging behind.

With this plugin in Illustrator CS5, graphical elements can be converted to Canvas objects and exported as SVG:

1) Select an object

2) Choose Object > HTML5 Canvas > Make.

Converting an object to a Canvas element will give you the opportunity to access it through JavaScript.  This may apply to navigation, animation, or some sort of interactive functionality

3) Once your design is finished and you’ve converted interactive elements to a Canvas, choose File > Save As and change the file type to SVG.

4) Use the object tag to add the element into your code in Dreamweaver

CSS3: Third Time’s a Charm

The other advantage of the HTML5 plugin is support for CSS3.  After creating a layout in Illustrator, rather than exporting all your graphical element and repositioning everything in Dreamweaver, you can simply export the CSS rules.

1) Select everything you want to export.

2) In the Appearance panel, click the options button and choose Export Selected as CSS.

3) Save the CSS file in your site and apply it to your current page.

If you open the CSS file, you’ll see nice, clean CSS code that can be utilized throughout your site.  For more information on the Illustrator CS5 HTML5 Pack, check out this video on tv.adobe.com.

Comments are closed.