Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Illustrator CS5 Web and Interactive Design, Mordy Golding shows how to create pixel-perfect graphics for use in web sites, video compositions, and mobile apps. This course covers a wide range of workflows, from creating online ad campaigns, web sites, icons, to taking art from Illustrator to Flash Professional. Sharing tips, tricks, and creative techniques along the way, Mordy provides insight and instruction for taking projects from initial concept straight through to production. Exercise files accompany the course.
While you can certainly design the way that a page will look on the web using Illustrator, you really don't want to use Illustrator to actually publish web sites. In fact, to really manage the entire process of working with web sites, Adobe Dreamweaver is a fantastic application. The nice thing is that you can, at least on some level, take things that you create inside of Illustrator and bring them into Dreamweaver. Unfortunately, there really isn't any incredible integration that you maybe see between Illustrator and Flash Catalyst, or Illustrator and Flash Professional, for example, as there is say between Illustrator and Dreamweaver.
Keeping that in mind, we can take some basic information that we have here inside of Illustrator and bring it into Dreamweaver as HTML. So let's see how to do that. I have here this document opened it's called site_design, and I've already created some slices here inside of this document, and now I want to simply export HTML. So I might be able to open this up inside of Dreamweaver, and this could even be like a head start. You want to get started with some kind of web design inside of Dreamweaver. You can kind of get the idea in your head about what the design is going to look like here inside of Illustrator, and then you have a head start when you think about Dreamweaver.
It also might be a great way just to simply convey your ideas to maybe a developer who is building your web site. Of course, the method I'm showing you now also could be useful if you're trying to build an HTML e-mail. So I am going to make sure that this artboard is currently my active artboard, the page design. I am going to go to the File menu, and choose Save for Web & Devices. Let me zoom out just a little bit over here, and you can see that I have all the slices that I've created. You have some user slices, but you also have the auto slices that Illustrator had to create automatically.
I'll come here and click on the Save button. Now, I want to put these files into a folder, so I'm actually going to go ahead now and kind of scroll down here. Let's go to chapter 09 here, Using Dreamweaver, and I am going to create a new folder here. I am going to call this one table because we're going to export this site in both a table-based layout using HTML, but also later in another movie we're also going to create one using CSS. But for now, I am just going to click on the Create button, and I have a new folder called Table. I can choose whether or not I want to export HTML and images, just the images itself, or HTML Only.
In this case, I really want to have the whole thing basically exported, so I'm going to choose HTML and Images. I also want to make sure that where it says slices, I want to export all of my slices. Now, for Settings, right now I could choose Default Settings. If I just click over here on Other, for example, you can see that you can choose between how you want the HTML to actually be written out of Illustrator, and you can also specify exactly how you want your slices named. But in this case, you remember we are exporting our artwork, and our slices are going to be turned into an HTML table.
So I am going to click OK to accept those default settings, and now I'm going to click Save. So let's take a look at what we have now. I'm actually going to switch over to Dreamweaver. I am going to choose File > Open, and let's navigate over here to the exercise files. Let's go to Chapter 09, Using Dreamweaver, open up the Table folder, and I am going to open up the site_design.html file, which we just created, and we'll see what that looks like here inside of Dreamweaver. So I can see that the entire page design came in. Remember, these are all images here. This is not selectable text, but all the artwork is just kind of sliced up into these regions as a table.
If I go to the Split view over here, I can actually see the tables, and you can see the table data for the rows that have been created here. So this is one way to take content that you create inside of Illustrator and bring into Dreamweaver so that at least you have the HTML to kind of get started working on the design here.
Find answers to the most frequently asked questions about Illustrator CS5 for Web and Interactive 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.