Illustrator and Dreamweaver Integration

As a core graphics program, Illustrator is used in just about every type of design workflow. Of all the applications found in Adobe Creative Suite (every edition), Illustrator has the most robust support when it comes to integration and file support. Illustrator is much like a universal bottle opener, supporting formats like AI, PDF, EPS, FXG, SVG, SWF, PSD, TIF, DXF, DWG, EMF, WMF, and just about any other 3-letter extension you can think of. When it comes to working with other applications, Illustrator has direct support with major applications like Photoshop, InDesign, Flash, Flash Catalyst, Fireworks, Acrobat, After Effects, Premiere Pro, and heck, even Flex (Illustrator can create Flex skins).

A closer look at that list reveals a gaping hole... Dreamweaver. One of the big features added to the CS4 version of Dreamweaver was support for Smart Objects, or the ability to place native Photoshop files directly into a Dreamweaver layout. Oddly, native Illustrator support is missing from that feature, leaving Illustrator users to find other ways to get graphics into their layouts.



Adobe's now-defunct GoLive did have its limitations, but support for native Illustrator files wasn't one of them. But all is not lost, as there are still a variety of ways to use both Illustrator and Dreamweaver hand in hand. In this article, I present two ways to do so.

CREATING CSS LAYOUTS WITH ILLUSTRATOR
If you're paying attention to anything that's going on in the world of web design, you know that web standards, such as CSS-based layouts, are all the rage. And for good reason. The limitation of table-based layouts become immediately apparent when you consider that the web browser as we know it is fading from view, and we are accessing web content on all types of screens and devices. That being said, there are all types of layouts that work for various tasks. At times, I can quickly visualize in my mind where I want to go -- and others require a bit more work. I like to sketch out my layouts in Illustrator as it's so easy to make changes and experiment with ideas.

I use regular rectangles with different fill colors and NO STROKES to indicate the regions in my layout. These regions will eventually become DIVs in my CSS layout. I use no strokes to avoid any possible antialiasing issues. I use the Transform panel to quickly and precisely adjust the sizes and position of the rectangles. I then select my rectangles and choose Object > Slice > Make to convert all of my rectangles to slices.

You may stop me there and cry "Hey Mordy! Slices create HTML tables! Why would you want to do that?" And the answer is quite simple. Illustrator has a feature called Save for Web & Devices. Not many people realize that this feature was once a full-blown separate application called ImageReady (oh, the memories). As such, Save for Web & Devices has a lot of "hidden" functionality that you have to dig for. One of those hidden gems is CSS support.



Once my slices are created, I choose File > Save for Web & Devices. I don't care about what file format to use for the images, because I won't use the images at all -- all I want is for Illustrator to use the slices I created to generate CSS DIV tags for layout. If you double-click on any slice with the Slice Select tool in the Save for Web & Devices dialog, you can assign a name to each slice -- a name which will eventually become the DIV ID for that region. Click Save and then from the Save Optimized As dialog box, choose "HTML Only" for the Format and from the Settings popup menu, choose "Other...".



Now the fun begins. You're now accessing tons of settings that once belonged to the full-blown ImageReady application. In the HTML panel, check the "Output XHTML" button, then switch to the Slices tab. For the Slice Output method, choose Generate CSS. Click OK, and then Click Save to create your HTML file. Opening the resulting HTML file in Dreamweaver will reveal a layout with all of your regions set up as AP DIVs (Absolute Position DIVs), giving you a head start on your layout. At this point, you can simply drop images or graphics into any of your DIVs. If only you could drop native AI files right into those DIVs...

ILLUSTRATOR SMART OBJECTS IN DREAMWEAVER
OK, denial has run its course and I've now entered the acceptance phase. Dreamweaver snubbed us and doesn't support Illustrator Smart Objects -- Dreamweaver and Photoshop are obviously having a big party and Illustrator wasn't invited (I'm sure the invite just got lost in the mail or got caught in a spam filter somewhere). But that's OK, because Illustrator can sneak into the party anyway. Sure, DW doesn't support AI smart objects. But PS does. SCORE.

Place your Illustrator art into Photoshop as a smart object, and then place the PSD into your Dreamweaver layout. Want to edit the file? Click the Edit button in Dreamweaver to open the PSD in Photoshop. Then double click the Vector Smart Object in Photoshop to open the file in Illustrator. Make the required edits and save the Illustrator file. Save the Photoshop file. Return to Dreamweaver, and everything updates. SWEET. It's like Photoshop is a revolving door. Wham bam thank you ma'am -- you've just been served. It may sound like a lot of extra steps, but in reality, it's just one more double-click than a standard Photoshop smart object.

In closing, by using Illustrator in this way, you have the benefit of using Illustrator art in pixel form via Photoshop (GIF/JPG/PNG), while you can still dump the art into Flash or Flash Catalyst for vector art (SWF). If you'd like to see more support for Illustrator in future versions of Dreamweaver, please speak up and leave a comment here. I'd love to send the folks on the Dreamweaver team a few wishes for what I'd like to see in the new year :)