Design insights & tutorials.

Adobe Illustrator CS5 HTML5 Pack

Adobe recently announced the release of their HTML5 Pack for Adobe Illustrator CS5. It’s totally free for Illustrator CS5 users. Here’s a quick rundown from their site:

  • 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.

It’s interesting that this was released around the same time that Apple relaxed their rules about how iPhone and iPad apps can be developed, specifically in allowing tools like Adobe’s Flash-to-iPhone compiler found in Flash CS5.

In effect, Apple now allows Adobe use their Flash-based tools to develop apps, and Adobe releases tools to allow Illustrator CS5 users to develop non-Flash interactive content for the web — which in particular means developing interactive content for the iPhone and iPad. And of course for Android, since most Android phones still do not have the capability to run Flash content.

Note that this has nothing to do with Flash content displaying on Apple’s iOS devices, but interestingly offers an alternative to Flash for developing interactive web content. The two are only loosely related, but I find the shift in attitude from both companies very surprising and welcome.

I’m glad to see Adobe offering these tools and stepping up to the plate. Sure, they have a lot riding on Flash and would prefer creators to use their proprietary formats. But designers need to have tools to develop in whatever environment is applicable to their project. If a client wants HTML5, Adobe needs to offer the tools to do so before someone else beats them to it.

Adobe Evangelist Greg Rewis has an extended video demonstrating the use of the HTML5 Pack for use on the web. Looks pretty slick:

About the Author, George Coghill

George Coghill isa freelance humorous illustrator/cartoonist specializing in mascot cartoon character design & cartoon logos. His cartooning & illustration work can be seen at CoghillCartooning.com and at his cartooning and illustration blog. Be sure to follow me on Twitter here!
Discover More by George Coghill

Discussion

We want to hear what you have to say. Do you agree? Do you have a better way to approach the topic? Let the community know by joining the discussion.

  • Anton Ranestam

    Really cool, just what I needed! :)

  • http://simonh.me Simon H.

    I think that’s good news. I just hope that the pack will be updated as the HTML5 and CSS3 specifications have yet to be finalized.

  • Akarikuro

    this looks very cool
    btw i tried the multi artboard example but my images are not displayed
    did i miss something?

  • Adam

    That Adobe dude’s voice makes my throat hurt just hearing it. Must’ve had a crazy night of sports or wii the night before.

  • http://www.childmonster.com/ Childmonster

    Good article. I need it too

  • http://www.securityking.com Plastic Cards

    Thanks for sharing this, Great news HTML5 in CS5 and also being able to export layouts to CSS is great! CS5 is on my shopping list now!

  • http://www.craigfordham.net Lisa Thomason

    Amazing what you are able to do with a SVG file, Thank you for sharing

  • http://www.securityking.com Craig

    Great article on HTML5

  • http://www.cardsoftware.net Amanda Smit

    Fabulous this is a really useful CS5 HTML5 pack!

  • Pingback: Google Now Indexes SVG Images – Graphic design tutorials, freebies, & advice by working artists and designers. | GoMediaZine

  • coach handbags

    I wil try to …

  • http://twitter.com/download60s download60s

    thanks.. find more best tutorials here http://download60s.com
    Photoshop tutorial, from beginner to advanced. Including Photoshop text effect tutorials, photo manipulation tutorials, give you joomla templates,joomla extensions,wordPress theme,web templates,
    if you think i make a spam please remove this comment.
    thanks.. find more best tutorials here http://download60s.com
    You have good tutorials and i had post it on my website. http://download60s.com

  • http://www.havalimanirentacar.com/ Rent A Car

    I love Adobe Illustrator..
    Thanks for sharing..

  • Pingback: Ai to Canvas HTML5 Plug-in – Graphic design tutorials, freebies, & advice by working artists and designers. | GoMediaZine

  • http://pulse.yahoo.com/_VWVUXFTQH2A2YL2XT6LP5643XQ Johny Anderson

    What a great concept

  • http://www.nanomatik.gen.tr nanomatik

    Amazing what you are able to do with a SVG file, Thank you for sharing