December 23, 2008

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 :)

42 comments:

Anonymous said...

This is absolutely fantastic. I recently took a course in web design that used Dreamweaver as the main piece of software.

The transition from Illustrator to Dreamweaver was nothing but frustration, more articles would be great.

Reggie Fairchild said...

Dear Dreamweaver Team, Mordy is right. Support for native Adobe Illustrator files is a must. With the work around through PhotoShop that Mordy describes, it's obvious that Adobe has all the code to do it. Someone needs to stitch it together. You could release it in an intermediate release. Thanks!

Unknown said...

Sam - thanks. I too was initially frustrated by DW until I started getting my head wrapped around CSS. But even today, I don't feel nearly as comfortable in DW as I do in other design applications. I just completed a video training title on using Illustrator for web design, so I hope to add more stuff on the subject here.

Reggie - thanks for the encouragement! I think it's less about Adobe being able to do it (they can do anything!), and more about priorities. According to research that the DW team did, most DW users create their design work in Photoshop, and so that's why the support is there. But I believe that research is flawed because most DW users were probably Macromedia users from the start -- everyone uses Photoshop, but those they interviewed may have been Fireworks or FreeHand users. Additionally, I believe that more web designers use Photoshop because they think that's all there is. If the DW team would add support for Illustrator and make a big splash about the support (as they did when they added PSD support), many people would see that Illustrator has some pretty powerful reasons for web design as well.

Anonymous said...

Very interesting article, I totally agree about the need for Illustrator smart objects and are surprised they weren't added at the same time. I prefer using Illustrator for design work, with its pixel perfect placement - actually, that was one function I really liked in GoLive. I will try out your Photoshop tip in the mean time. Thanks!
Rachel

Brandon Whitesell said...

Thanks for this post! Getting sliced layout into dreamweaver from illustrator has long been the speedbump in my workflow. I do most of my design work starting in illustrator and always feel unnecessarily backwards when starting a web project out of existing print work. Thanks of rht forehead slapping "ahah!" moment with your PSD workaround (work-through?).
Put me down for More Illustrator Support in Dreamweaver, Please.

Anonymous said...

quote:
'Additionally, I believe that more web designers use Photoshop because they think that's all there is. '

This is interesting, if it's true, maybe adobe should try to do something to change that fact?

And of course, +1 vote for Illustrator native support in DW, and ty for nice tip Mordy

The Geezer said...

Hi great couple of articles about AI and the web - the only thing is that I started a reasonably complex web design as normal and then drew out a lot of slices and exported as ID Divs but the export kept on failing because 'an assertion has failed'. I couldn't find any reference to this or document on Adobe's site.
The fix was to export as a PSD and then continue from there. Bit of a shame though as it adds another step in the process. Also the delay to open and close Photoshop. I'm using CS4 by the way..

Unknown said...

Rachel + Brandon - thanks for the comment! Let's hope Adobe adds Illustrator smart object support in CS5.

Maeda - couldn't agree more :)

Sauceman - Hmmm.. never heard of that. Can you send me the file?

The Geezer said...

How do I email you the file?

Unknown said...

On the upper right side of the page (under the image of the book), there's an email link.

Anonymous said...

thanks ur information

it very useful

Anonymous said...

Hi Mordy,
Thanks for this tip. I had no idea! I come from a background using Freehand, then Illustrator, and love vector programs. They allow so much more control when drawing anything. I am much more comfortable in that realm, even though Photoshop is awesome for other things. I will try this out, and maybe mention it to my Illustrator teacher...
Janis

Anonymous said...

Funny having come from Dreamweaver and Fireworks into Illustrator and Photoshop - I find Illustrator and Photoshop confusing to use.

You are right the simple solution is to drop your illustrator objects into Photoshop - as the roundtrip editing between Photoshop and Dreamweaver in CS4 is great. Fireworks has been doing this for years already. I wonder if Fireworks is going to end up in the bin with GoLive - I hope not but there is too much overlap?

Andrew said...

Hi Mody, everyone,

I hate to rain on the parade, but relying on Illustrator to write your CSS is going to end in tears.

The trouble is (and has been since ImageReady) that the CSS that Illustrator writes is very very inflexible - it uses something called Absolute Positioning (AP Divs in Dreamweaver talk) to layout the page.

AP Divs only work under certain, unreliable circumstances. As a Adobe authorized trainer of Dreamweaver and somewhat of an expert on CSS I urge you not to go this root. Sooner, rather than later, you'll find that the AP Div's don't work as you hoped.

Fireworks however has a more robust method of exporting to CSS which uses Float Based layouts (the preferred method) and although even this implemtation isn't without it's problems it's a safer way to go then using Illustrator.

btw, it's not like I'm saying don't use Illustrator at all - slicing is in itself invaluable - but don't bet the business on Illustrators CSS export...

The Geezer said...

Interesting point, when I use this feature, I go straight into BB Edit or Text Wrangler and change all the AP stuff to 'position: absolute;'.
I have looked over the web to see if there are any real problesm with using the absolute positioning to elements reather than float or relative and can't find anything conclusive.

If you know of any big no-no, please flag it up, even if its just a link to a page dealing with this.

I did have a problem with AI failing to export a sliced up page with html and Mordy asked me to send it to him but I haven't heard anymore...

If you do use the AI and hand code route is quite a quick way to make designs that scale properly adn which *mostly* work on different browsers.

You can also get round all the faux columns stuff more easily...

Unknown said...

amort - yes, I mentioned in the text of my post that the DIVs are exported as APs. I don't think anyone who is serious about CSS is relying on Illustrator. But that's today. The more we push Adobe to support what is really needed, the more of a chance we have to get something done. Your comment will hopefully help in that regard. Fireworks does some pretty awesome stuff with CSS today (like the 3-slice auto-repeat), and it would be great to see Adobe continue in that direction - in Fireworks and Illustrator.

Unknown said...

Sauceman - I did get your file - I just got caught up and haven't had a chance to respond. The Assertion error your getting is apparently tied to the fact that you're exporting CSS Layers. Turning that setting off makes the export work without error. But I don't know what specifically is causing the problem with the layer export.

Anonymous said...

Definitely one of my favourite posts already! I am trying to expand my humble webdesign qualities in a simple way; this seams like a good way to go. Cheers and please keep it coming :)

Deedles said...

Thank you so much for the article. Dear Adobe, please make it easy to use illustrator files with Dreamweaver!

Anonymous said...

Apparently, ImageReady is defunct, but they forgot to take out the comment code in the resulting html file that says "ImageReady Slices." Too funny!

Anonymous said...

Is this for CS4 or will it work in CS3? Just curious. I cant seem to get it to work in CS3?

Unknown said...

Dreamweaver CS3 didn't have support for Photoshop Smart Objects. But the CSS stuff should work fine...

Unknown said...

I have done the steps to take my slices to Dreamweaver & verified that the settings are at maximum 100% quality, But when bringing the images into Dreamweaver they seem low quality pixelized. Please let me know if there is a fix for this???

Christopher Aune said...

Yeah, I already dropped a snide remark to Adobe about the incompatibility between Illustrator and DW. In the Creative Design Suite they include Bridge, but it serves every other program, including Microsoft and Apple, except Illustrator. Gimme a break!

Anonymous said...

Just one question. I am always looking for an easier way to do something, I read this article, it started to sound pretty awesome, then I got to the part about how Illustrator converts this over to CSS in the form of AP div tags, and I have been doing a lot of reading as well as being a sophomore in college for Web Design and I have read and been told that AP div tags are virtually out of practice and that it is not a good idea to use them. If anyone could respond with there opinion on this topic I would appreciate it.

Rachel Marie said...

Hey there!

I wanted to just see if you Macgyvered, or can Macgyver, a way to do something. Here is my sitchy, I am creating a website for myself. I created a header using Photoshop and Illustrator, not your standard rectangular doo-dad, instead I have created a horizontal oval shaped header with some graphics inside, and I typed upon a curved path that follows the shape of the oval along the bottom. The text is what I would have as like a menu bar to navigate through the site. For instance, it is "home | portfolio | blog | contact....etc." So keep in mind that this text is on a curved path inside the shape of the header.

Well it looked sweet, I was super stoked, added a nifty little reflection to the bottom of it, and got it into DW. Then I realized, oh, I can't link this text! So I have this sweet menu bar to navigate through the site, but since it is part of the image, I can't link pages to each section of the menu. Are you pickin up what I am layin down?

Do you know how to possibly integrate the beauty of typing along a path in DW, or somehow being able to layer that text separately on top of the image to be able to create links for each one? Or am I way out there?

Thanks, Rachel

Unknown said...

Rachel,

What you describe sounds like it might be easier to do in Flash. The only thing you might be able to do is slice up your artwork so that you have regions that closely match up to the words -- but in such a case, you'd be working with an image, not selectable text (if that's ok with you).

ZACHERY said...

THANKS, THIS IS EXACTLY WHAT I WAS LOOKING FOR. IT IS GREAT

webmuseSF said...

Hello.... I have seen some of your videos of Lynda.com and found them very useful. I am wondering if I can overlap an image w/ text using this method. If yes.. I'll push forward and figure it out thru video tutorials. Many thanks for any help...

Unknown said...

Yes, you can set a DIV to have a background image, and then have text within the DIV. It's pretty standard practice and I'm sure you'll find plenty of tutorials that cover the technique with any good Dreamweaver training.

webmuseSF said...

Hi Mordy, Many thanks for your quick response. I am inspired to check this technique out more fully and get more training. Thanks again for taking the time.

layouts said...

This tutorial was PERFECT! Just what I needed. You explained everything. Great Job! Thank You. Bedankt. Aloha!

Philwebservices said...

Great post!

Keep up the good work...

Acid-Dose said...

Hello Mordy...just finished your lynda.com series on Illustrator and Dreamweaver Integration...got a pretty decent website designed and sliced and ready to be used in Dreamweaver...my problem now is where do i go from here...
I wish there was a follow up series of what to do next after importing your html page into Dreamweaver...the videos on lynda.com either start from scratch or from template. can you recommend a starting point or course to help ?

Anonymous said...

Thank you so much!! You're tutorial was a great help; much appreciated.

Noora said...

Does anyone know how to set up dreamweaver after you 'export to CSS' in the new Illustrator HTML5 pack?

Unknown said...

@NA-R Once you export CSS from Illustrator, you would probably copy and paste that code into your existing CSS files for your site. Or you can simply add it as an additional CSS file, and simply reference it within your code.

drew said...

mordy
having just purchased cs5 is there an easy way to get my illustrator cartoon into dreamweaver web page

Anonymous said...

you are the man! cheers!

bitty reilly said...

SUPER! thanks Mordy. it took me a few shots, but finally worked.

Adrian said...

Thanks so much!! Nobody talks about this theme! i was so desperate because i wasn´t aware of this new feature and it´s kind of weird to work with, but now that i know i think i just need time to getting used to =) logo design

web development India said...

Thanks for sharing the design tips here. Keep up the good work. All the best.