Could someone please explain how I go about exporting my Adobe illustrator CS4 file into HTML & CSS? - (Not just Html tables!)

Help greatly appreciated.


3 answers


You hand code it :) or you hand it over to a front-end developer to take care of it for you. I strongly discourage automatic HTML/CSS generation for anything other than a rapid prototype or HTML e-mail.

Answered almost 10 years ago by Kevin Crawford
  • Also, on another note...when designing for the web, it is best to be working in raster format (photoshop) rather than vector (AI, InDesign). When sizing down vector design files handed to me from creative, things can get a little blurry. So, if possible, use Photoshop for web design. You can always import "Smart Objects" from AI for illustrations and other elements better suited to AI. Kevin Crawford almost 10 years ago

I agree with Kevin, I think the issue you'll run across is that automatic html/css generators tend to look different in different browsers, or tend to have issues behaving the way you want dynamically (that is, if you add more text than the comp shows, what container grows? If the user is looking at your site using a widescreen monitor, will it resize, or will the background fill that gap?)

Since you're coming from illustrator, I would say your best bet would be to use Dreamweaver.

  • Start a new HTML file, and create an associated CSS file.
  • Slice your images using illustrator, and be sure to save them for the web (rgb color, jpeg, gif or png only, avoid png transparency if you're planning on complying with IE6 standards)
  • Create individual div containers that you need, and set the backgrounds to the images that you want to see. Then stretch them using design view to the appropriate place. You can also parametrically alter things like the width, height, float, and other behaviors as you see fit.
  • Test in all browsers and resolutions you can, and then go back and adjust your html/css as necessary. Be prepared to re-slice images when you realize things don't repeat or stretch the way you wanted.

If you have any html/css questions for those individual tasks, feel free to ask them here!

Answered almost 10 years ago by NateDSaint

What makes you think you can export from AI CS4 to HTML and CSS?

Even Fireworks CS4 isn't very good at that. (for anything other than a simple non-overlapping rapid prototype layout)

You would probably be better off following one of the PSD to HTML tutorials and slicing images from your AI file and building your page properly.

Answered almost 10 years ago by Tony Crockford