Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Mordy Golding demonstrates how to be more productive, efficient, and creative by taking advantage of Adobe Illustrator to create pixel-perfect web graphics and interactive Flash content. Illustrator CS4 for the Web investigates the pros and cons of pixel- and vector-based web graphics, demonstrates efficient workflows, and explores the creative options available in Illustrator. Mordy also covers design techniques, such as creating typography that works well on screen, adding reflections, and making Flash animations. He discusses new Illustrator CS4 features, including using multiple artboards, bringing art into Dreamweaver, and utilizing Flash Catalyst. Exercise files accompany the course.
You know at first glance, the Save for Web feature inside of Illustrator appears pretty simple. I mean, it allows you to take your files and optimize them for GIF, JPEG or any of the other file formats that exists for the web. But there is really tons of functionality that's hidden deep inside of Save for Web and if you are willing to go there, there's lots of great things that you can do using the Save for Web feature in Illustrator. But just a little disclaimer, before we get started. Some of the functionality that I'm about to show you matters most to web developers or programmers and not necessarily to designers. Let me show you what I mean. I have this web layout that I've created. All my slices are done and I'm ready to go and publish this page. So I'll go to the File menu and I'll choose Save for Web & Devices. Let's say for now that I'm willing to take auto Default Settings for all these slices and I'm ready to save my document. So I go over here to the Save button and Illustrator ask me when do I want to save all my content. I'll throw this off to the desktop in my computer, and where it says Format down here, I don't just want the images themselves, I also want the HTML. This way I get an HTML page with the table inside of it and also all the images that appear inside the cells of those tables.
As far as slices go, I obviously want all the slices to be included and here's where the fun begins. Underneath the Settings pop-up menu, I'm going to choose Other. Well, that brings up a dialog box called Output Settings. If you think there is a lot of information to look at, try clicking on this pop-up menu and see that there are actually four different panels within this one dialog box. This first one here is called HTML and what it allows you to do specify exactly how Illustrator writes the HTML file that you create. For example, you may want to choose XHTML. In doing so, you can also choose how Illustrator formats the HTML as well as specify how the code is written. There is a whole another setting here for the slices themselves. If you're doing your website design on your own or you're working with a web developer, this setting is actually one of the most important where it says Slice Output.
Now until now, we've been discussing how Illustrator creates the slices using an HTML based table. But I also mentioned that nowadays more and more people are moving towards the Web 2.0 standard and using CSS layouts as they can form to standards based design. If you want to export your artwork using CSS rather than an HTML table, just click on this one button right here. Rather than cells in a table, Illustrator will automatically create divs for each of the slices that you've defined. Additionally, you can choose Background. This allows you to specify a background image for the HTML page that you're creating. Finally, there is an option here for saving files. For example, if your artwork has lots of slices inside of it, Illustrator will use these settings for how it names each of those slices.
Since most web servers are hosted on UNIX machines, it's always great to choose the UNIX option for File Name compatibility. Finally, you may notice that every single time that you save images out of Save for Web, it puts into a folder called Images. You can easily change the name of that folder by changing this word right here. So as you can see, there is a ton of information here for Save for Web. Now you don't have to worry about coming to these dialog boxes every single time you want to export a file, because you can save all these settings as a preset. Any time that you save a setting, it appears in this pop-up list right here. Now if there are some settings here in this dialog box that confuse you, you may want to reach out to your web developer or someone else that you deal with for your web programming.
There are currently no FAQs about Illustrator CS4 for the Web.
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.