Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
This course reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups with the strong layout and color management tools in Adobe Illustrator. Author and Adobe Certified Expert Justin Seeley covers topics such as building responsive layouts with artboards, producing custom color palettes and swatches for web graphics, and making vector shapes and text that seamlessly scale. The course also explores adding drop shadows and other live effects, setting up interface elements such as forms and tabbed interfaces, optimizing and exporting different types of graphics, and speeding up your workflow with reusable image sprites and Smart Objects.
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.
Find answers to the most frequently asked questions about Illustrator for Web Design.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.