New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Illustrator CS5 for Web and Interactive Design
Illustration by

Using the Save for Web & Devices feature


From:

Illustrator CS5 for Web and Interactive Design

with Mordy Golding

Video: Using the Save for Web & Devices feature

When designing graphics for the web, you're going to need to export your files in formats such as GIF, JPEG, or PNG, for example. The way to do that from Illustrator is to go to the File menu and to choose the setting here called Save for Web & Devices. This actually brings up an entire full-screen dialog box, which in reality is its own application. Many years back Adobe is to have a separate application called ImageReady. It was an application built specifically for optimizing web graphics. However, Adobe quickly realized that people who are using Photoshop for web design need to export their graphics quickly. People using Illustrator need to export their graphics quickly as well.
Expand all | Collapse all
  1. 6m 56s
    1. Welcome
      1m 33s
    2. Choosing Illustrator for web and interactive design
      2m 54s
    3. Illustrator and the web design workflow
      2m 7s
    4. Using the exercise files
      22s
  2. 40m 9s
    1. Pixel dimension vs. resolution
      4m 14s
    2. Pixel Preview mode and anti-aliasing
      5m 39s
    3. Taking charge of anti-aliasing
      5m 27s
    4. Choosing the right color management settings
      7m 25s
    5. Setting up important preferences
      6m 22s
    6. Setting up a workspace optimized for web design
      11m 2s
  3. 54m 5s
    1. Using the Web document profile
      3m 39s
    2. Creating custom document profiles
      9m 38s
    3. Using Illustrator's free web templates
      2m 33s
    4. Creating a sitemap or wireframe
      2m 50s
    5. Setting up an entire web site
      9m 33s
    6. Setting up a grid
      10m 37s
    7. Setting up an online ad campaign
      8m 13s
    8. Setting up icons for iOS
      2m 24s
    9. Setting up mobile content with Adobe Device Central
      4m 38s
  4. 32m 22s
    1. Understanding web-safe colors
      11m 50s
    2. Limiting the Color Guide to web-safe colors
      4m 53s
    3. Using Recolor Art to convert art to web-safe colors
      4m 54s
    4. Getting color inspiration from Adobe Kuler
      6m 48s
    5. Using Recolor Artwork to modify colors across a site
      3m 57s
  5. 56m 54s
    1. Using the Save for Web & Devices feature
      6m 44s
    2. Understanding the GIF file format and its settings
      10m 20s
    3. Understanding the JPEG file format and its settings
      7m 39s
    4. Understanding the PNG file format and its settings
      3m 21s
    5. Understanding the WBMP file format and its settings
      1m 18s
    6. Understanding the SWF file format and its settings
      4m 13s
    7. Understanding the SVG file format and its settings
      3m 41s
    8. Adjusting the dimensions of a graphic
      4m 46s
    9. Optimizing files to a specific file size
      4m 5s
    10. Modifying Save for Web & Devices output settings
      6m 51s
    11. Previewing content in Adobe Device Central
      3m 56s
  6. 56m 6s
    1. Setting point type in Illustrator
      4m 11s
    2. Setting area type in Illustrator
      5m 20s
    3. Formatting text quickly with paragraph styles
      14m 39s
    4. Overriding formatting with character styles
      3m 2s
    5. Controlling text anti-aliasing
      4m 50s
    6. Simulating the CSS box model
      11m 14s
    7. Adding cool reflections to text and graphics
      8m 26s
    8. Applying settings quickly with Graphic Styles
      4m 24s
  7. 35m 56s
    1. Understanding the concept of slicing
      3m 22s
    2. Creating slices manually
      4m 26s
    3. Creating slices from guides
      2m 45s
    4. Creating slices from objects
      7m 33s
    5. Understanding the different slice types
      4m 20s
    6. Applying settings to slices
      9m 20s
    7. Creating hotspots with image maps
      4m 10s
  8. 23m 35s
    1. Exporting static SWF files from Illustrator
      3m 35s
    2. Animated SWF: Converting Illustrator layers to SWF frames
      4m 3s
    3. Animated SWF: Using blends to define motion
      8m 35s
    4. Animated SWF: Adding static artwork to an animation
      3m 24s
    5. Animated SWF: Controlling time within an animation
      3m 58s
  9. 17m 13s
    1. Preserving slices and structure with PSD export
      6m 10s
    2. Working with Photoshop Smart Objects
      4m 35s
    3. Sharing color swatches between Illustrator and Photoshop
      2m 52s
    4. Generating an animated GIF file with Photoshop
      3m 36s
  10. 7m 28s
    1. Exporting HTML from Illustrator for use in Dreamweaver
      3m 31s
    2. Exporting CSS and DIVs from an Illustrator layout
      3m 57s
  11. 12m 37s
    1. Moving art between Illustrator and Fireworks
      6m 25s
    2. Using dynamic shapes from Fireworks
      3m 48s
    3. Sharing color swatches between Illustrator and Fireworks
      2m 24s
  12. 16m 7s
    1. Building files for use in Flash Catalyst
      4m 28s
    2. Creating a new Flash Catalyst project from an Illustrator file
      3m 40s
    3. Copying and pasting artwork between Illustrator and Flash Catalyst
      2m 4s
    4. Roundtrip editing between Illustrator and Flash Catalyst
      3m 36s
    5. Creating Flex skins for use in Flash Builder
      2m 19s
  13. 19m 48s
    1. Understanding symbols: The lifeblood of Flash
      4m 58s
    2. Symbols: Understanding 9-slice scaling
      4m 18s
    3. Setting text that will be used in Flash Professional
      3m 5s
    4. Moving artwork between Illustrator and Flash Professional
      7m 27s
  14. 1m 6s
    1. Goodbye
      1m 6s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Illustrator CS5 for Web and Interactive Design
6h 20m Intermediate Sep 24, 2010

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.

Topics include:
  • Getting perfectly sized pixel graphics from Illustrator
  • Setting up preferences in Illustrator for web design
  • Creating custom document profiles
  • Getting great color on the web
  • Understanding web graphic file formats (GIF, JPG, PNG, SWF, and SVG)
  • Setting great-looking type
  • Slicing artwork for various tasks
  • Creating Flash animations directly from Illustrator
  • Working with Photoshop Smart Objects
  • Exporting HTML and CSS from Illustrator
  • Integrating with Flash Catalyst
Subjects:
Web Web Graphics Interaction Design Prototyping Web Design
Software:
Illustrator
Author:
Mordy Golding

Using the Save for Web & Devices feature

When designing graphics for the web, you're going to need to export your files in formats such as GIF, JPEG, or PNG, for example. The way to do that from Illustrator is to go to the File menu and to choose the setting here called Save for Web & Devices. This actually brings up an entire full-screen dialog box, which in reality is its own application. Many years back Adobe is to have a separate application called ImageReady. It was an application built specifically for optimizing web graphics. However, Adobe quickly realized that people who are using Photoshop for web design need to export their graphics quickly. People using Illustrator need to export their graphics quickly as well.

So rather than maintain that as a separate application, Adobe took ImageReady and built it kind of as a plug-in that exists within Illustrator and within Photoshop as well. The reason why this is important to note is because even though we're looking at one dialog box right now, there are so many different settings that are hidden inside of this panel. So throughout this chapter we're going to start to cover all the settings that are found within this Save for Web & Devices dialog box. Now, let's take a look at some of the different features that are found inside of this dialog.

For example, on the far left, we see there are actually some tools. This is actually the first clue to let us understand that this is really a separate application. After all it has its own tools as well. We have the Hand tool here which allows us to actually kind of grab the artwork and view different parts of it. We have a Slice Select tool which allows us to select slices. We have a Magnifying Glass or Zoom tool that allows us to zoom in or if you hold down option key or the alt key we can zoom out, and we also an Eyedropper tool to allow us to sample colors and when we get deeper into this chapter, we'll understand when that's going to come into play.

Now across the top of the screen we've several tabs. The first tab is called Original. This is what our original file looks like, as if I were reviewing it inside of Illustrator. The Optimized version is showing me what my file would look like when displayed inside of a web browser using the settings that I'm going to going to specify. But perhaps the most important part of this dialog box are about the 2-Up and the 4-Up versions. You'll see one of the most important aspects of optimizing web graphics is finding the perfect balance between file size, how small you can actually make your file, and the quality of its appearance, meaning how good it looks on your screen.

Generally, the better your image is going to look or display inside of a web browser, the larger its file size will be. At the same time, if you try to reduce the file size to really small, you can sacrifice image quality, which ultimately gives you, the designer, a chance to make a decision. What's more important to you? Graphics that look better or graphics that display faster when viewed in a browser? Now there are a couple of things to think about here. We may not think immediately that these images are really so big, but sometimes they have several different images on a page, and if I add up all the images on the page, I may have a larger file size, meaning it'll take a long time for someone to download the entire page.

Alternatively, people are now accessing content from mobile devices. Those devices even though sometimes they're advertised as having 3G or 4G speeds, may not always be in an area where they have a good connection, so it is always important to keep in mind how large your file size is. As we go throughout this chapter, we are going to discuss the different file formats that you can use to export your web graphics, which ones work best in the different conditions, and most importantly, how to keep your file sizes down while getting the best possible image on the screen.

What the 2-Up and the 4-Up versions allow you to do is actually compare the same file, but under different export conditions, meaning I could take let's say this window right here, which is what my original looks like, and then I can click on this one. Notice that it's set to a GIF file. I can click on this one down here and set it to JPEG and this allows me to compare what these images might look like. I can also see exactly what file size each of these are going to export at, so I can start to make these well-informed decisions about how big my file size is going to be and how it's going to actually look or appear inside of a browser.

So as you can see here on the far right, I have the different settings that I could use to apply to these images and Illustrator lets me export art inside of GIF, JPEG to different PNG formats, SWF or Flash, SVG, and Wireless Bitmap. We'll go through all of these settings throughout the chapter but I wanted to show you where they are. Finally, Illustrator has three additional panels here on the bottom: a Color Table panel which depending on which file format you use, will show you which colors are inside of the file; the Image Size panel, which gives you information about exactly the number of pixels or the pixel dimensions that your artwork is going to be exported at; and in addition you have a Layers panel which under certain conditions, for example when using SVG, you can choose to export certain CSS layers.

Now I want to point out two other aspects of this dialog box that are incredibly important, and they're probably the things that you're going to be using the most. The first thing is down here in the bottom. It's a little button here which says Preview in Default Browser. If you click on this button, this actually launches your web browser in your computer and displays the artwork inside of a browser. This gives you the best possible preview of what your artwork is going to look like. I'll switch back to Illustrator and you can click on this little button here on the side and choose Edit List, and here you can actually choose to add any browsers that you have, meaning you're able to actually simulate or test this content in a variety of different browsers, be it Internet Explorer, Firefox, Safari, so on and so forth.

So that's the first thing I wanted to point out, I'm going to click Cancel here. The next thing is that if you look over here towards the top of the screen, there is a Save button, which of course allows you to actually save and create the different GIF or JPEG files that you are working on over here, but there is also another button here called Done, and this is going to be very important, because this allows you to actually save the settings, meaning memorize which settings are applied to different slices and when you click on the Done button, you'll return back to your document to work. This means that each time that you launched the Save for Web & Devices dialog box, you don't have to go through all of the different settings.

For example, maybe you went ahead and set up all of your slices, have all the settings correct, and then all of a sudden you found the typo. Well, you'll click on the Done button, go back into your Illustrator document, make that type change, go back to Save for Web & Devices, and you're right where you left off. So that's an overview of the Save for Web & Devices dialog box and the feature itself and for the remainder of this chapter, we're going to talk about the different file formats you can use and the variety of different settings that you can actually apply through the Save for Web & Devices dialog.

Find answers to the most frequently asked questions about Illustrator CS5 for Web and Interactive Design.


Expand all | Collapse all
please wait ...
Q: In the chapter 5 movie, "Simulating the CSS box model," the author details the CSS box, but names the inner portion the margin and the outer portion the padding. This is reversed from what I’ve have seen elsewhere. Is this an error in the video?
A: This video does indeed contain an error where the author describes the margin and padding. The padding should be described as the area inside the border, and the margin the area outside the border.
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Illustrator CS5 for Web and Interactive Design.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.