Join Justin Seeley for an in-depth discussion in this video Exporting HTML from Illustrator, part of Illustrator for Web Design.
One of the best ways to showcase any web site mockup that you created for a client is to export it out as a HTML for them to view and actually maybe interact with a little bit. Unfortunately, in Adobe Illustrator CS6 they have actually removed the HTML export feature from the Save for Web Dialog box. In previous version of Illustrator, you could just go to File > Save for Web and you can actually choose in there to export out the HTML and the images that you were exporting. In this version of Illustrator though, that's simply not possible, unless you know this little workaround. So that's what I'm going to show you how to do right now.
So the first thing I need to do is go to the File menu and choose Save for Web. And once I have this done, it's going to open up, and it's going to load up all the slices and individual objects and things like that. Well, in order to get the HTML that I need in order to make this work, I need to come down here to the bottom and I need to click Preview. That's going to preview it in your default browser. Mine happens to be Google Chrome. And so when I open this up, you can see it's a full rendering of this. It's also got some information down at the bottom, which you can ignore. But for now, it's got basically everything that I've rendered out as HTML.
In order to save this, I need to go to the File menu and choose Save Page As. I am going to navigate to my desktop. I'll create a new folder and I'll call this Mockup, and then I'll just save this. Now I'm going to open that document. So I go to File > Open, Mockup/color_share, open it up. And when you open it up, it's going to look blank, and that is because there are no images in here. It's actually referencing images that have not been exported yet. If I right-click and choose View Page Source, you can see here that it's got all the divs outlined and it's referencing images--PNG files in fact--that have not been exported yet.
So what I need to do is go back into Illustrator, into the Save for Web Dialog box, and export those out. So in order to do that, I'm just going to pick the PNG format. You could pick any format you want, but you need to stick with that format from beginning to end. So when you first come in here, pick something like GIF or JPEG. You don't have to individually optimize these because this is just for demonstration purposes. This is not actually a web page. And so once I'm done with this, I'll click Save. It will ask me where you want to save it. I'll put it in my desktop, inside the Mockup folder, and hit Save.
Now changes are it's going to stick it in a folder called Images, just like this, and if I navigate out to my desktop, you can see there is the Images folder. I'm just going to take all of these graphics and move them into the parent folder, just like so, and then I'll move that file to the trash. I don't need that images folder anymore. And now watch what happens when I go back to my web browser. And I'll refresh the color_share.html. There it is. Everything is back in there. You could then open this up in Dreamweaver and remove this stuff from the bottom if you wanted to, but it gives your client an idea of exactly what their web page is going to look like in an HTML document.
Again, there's no interactivity. There's no way to click. There's nothing really happening in here. This is not even editable text, but this is a great way to show your mockup as it would be on the web in a nice easy-to-see format for your client or whoever you might be working with. This is also great to send this off to a developer to say okay, this is what I would need it to look like. Make this look correct with the right HTML and CSS behind it. And so once you've done that, that's how you get around the no HTML export feature inside of Adobe Illustrator CS6.
- Customizing a web workspace
- Decoding the mysteries behind screen size and resolution
- Working with Pixel Preview and anti-aliasing
- Coloring web graphics
- Renaming and grouping layers
- Working with shapes and symbols
- Creating wireframes on a grid
- Styling text
- Creating image sprites
- Simulating web pages with artboards
- Optimizing and exporting your work
Skill Level Appropriate for all
Q: Where can I learn more about graphic design?
A: Discover more about this topic by visiting <a href="../../../discover/graphic-design">graphic design on lynda.com</a>.