In this exercise, I am going to introduce you to a command under the File Menu, that goes by the name Save for Web & Devices. And its purpose is to allow you to export graphics for inclusion on a website. You can also use it to email an Artboard to somebody if you like, because it really does get the file sizes down to their absolute minimum. So there's one of two ways you can go; you could either export an illustration as an image file, that is a pixel-based image. And that might be a JPEG image if you're working with a continuous tone image, or one that has a lot of gradients and smooth transitions, as does this piece of artwork.
Or if you've got a low color high contrast piece of art, then you can export it to GIF or PNG, and we'll see how that works. You can also export the graphic as a scalable vector file, either to the SVG or SWF format. So I am working inside of that file called Ghost Robot with PDF.ai, that's the version that I added the metadata to, and it's found inside the 12_exporting folder. And the thing to note about Save for Web & Devices is it allows you to export just one Artboard at a time, so you want to make sure to select the Artboard that you're going to be working with.
In my case, I want to export the Magazine cover, the very first Artboard. So go ahead and click inside that first Artboard to make it active. Then go up to the File Menu and choose Save for Web & Devices or mash your fist and press the S key, so it's Ctrl+Shift+Alt+S on the PC or Cmd+Shift+Option+S on the Mac. Now, you may wonder what's going on here, Save for Web, that's the part we are going to be focus on, but then there's & Devices. What is that & Devices about? Well, down here in the lower right-hand corner of this ginormous dialog box that comes up on screen, you'll see this Device Central button, and if you click on it, then you can preview your illustration on a cell phone screen.
And Device Central offers you a wide array of different cell phone models, basically everything except Apple's iPhone. And you can take a look at those if you like. However, I am going to focus on the Save for Web attribute of this dialog box, which is everything but that button. Now, up here in the upper-left hand corner of the screen, you will see four tabs, and they are Original, Optimized, 2-Up and 4-Up. Right now we're looking at the Optimized view. And what Optimized means is we are seeing the graphic that we will actually export.
In this case, in the GIF format, because GIF is selected by default, and in case you're wondering why I am pronouncing it GIF when it is so obviously GIF, there it is GIF. Well, the folks who originally created that file format at CompuServe, they called it GIF, so I'm just following their lead. Anyhow, the Optimized view is showing me the GIF graphic. If I want to see the original version of the illustration, that is not subject to any compression settings, then I would click on Original right here. But you have to take Original with a grain of salt, because it's not actually zoomable.
If I press Ctrl+[Plus] in order to zoom in on that graphic, Cmd+[Plus] on the Mac, you'll see big pixels, because once you zoom in beyond a 100%, big pixels is what you get. So you don't get the kind of clarity that you see outside in the illustration window. So it's not really exactly Original, but you are seeing a color accurate version of the image, and that's very important. Let me show you what I mean by that. I'm going to switch to the 2-Up display, so that I can compare two different versions of my illustration, and I'll click in the left-hand side to make sure that it's set to Original, which it is. So that's my Original view over on the left.
And if I click in the right-hand side, I can see that this is the GIF version of the graphic, so one of many Optimized versions that I might establish here inside this dialog box. But notice the colors, do you see side-by -side here that the colors are actually growing more garish on the right-hand side, and this is most obvious when I switch from Original over to Optimized. Watch the colors, especially along the borders of this graphic, when I switch to Optimized, they become more saturated. So what in the world is going on there? Well, if you go over to the Optimized fly out Menu, on the far right-hand side of the screen, you'll notice the command that says Convert to sRGB.
It's turned on by default. If you turn it off, your colors are going to drop. This is a very misleading feature by the way. What it makes you think is that, that's the right thing to do, because now you are not going to make your color so garish. So here's the Original version of the illustration, which is color accurate, once again, and then here's the Optimized version, which also looks nice and accurate. So obviously I should not have Convert to sRGB turned on. Wrong, that's actually not true. You should have it on. So I am going to switch over to the 2- Up display so we can see them both, and I am going to turn Convert to sRGB back on.
Here is the deal, try to wrap your mind around this one. Even though this is a CMYK illustration, which is ultimately academic for our purposes, when we are seeing the RGB version, which we are here inside of the Safe for Web dialog box, we are seeing that image in the Adobe RGB space, which is an elevated saturation color space. Now, the reason we're seeing the colors in Adobe RGB is because that's the working RGB space that we chose way at the outset of this series using the Color Settings command under the Edit Menu.
Over here on the right-hand side, because your Web Browser is not set up to display Adobe RGB colors, those colors are going to decline in terms of their intensity. So the colors need to be elevated and that's what happens when you convert the colors to sRGB. They appear oversaturated, because Illustrator then turns around and displays the colors in your chosen working space, which is Adobe RGB, which is a mistake on Illustrator's part, it shouldn't do that, it should actually show the colors in sRGB, but it doesn't, and as a result it gives us this misleading preview here.
Now, if you were to go back to the Edit Menu and choose the Color Settings command and change that first RGB option back to sRGB; the way it is by default, then you wouldn't see these elevated saturation values. However, you would only be doing that for your own sake, psychologically in other words, because it doesn't make a lick of difference. Now, just to demonstrate that this is true, even though you are going to see elevated color saturation here, you definitely do want to turn on Convert to sRGB. Let me go ahead and show you a couple of versions of this graphic here.
I am going to go ahead and open two variations of the graphic, both saved as JPEG images incidentally, and I'm viewing the images as unprofiled images, which is the standard way to go inside of Firefox. So over here on the left-hand side, we're seeing the image converted to sRGB, and as a result we have accurate colors. So I'll go ahead and move this Browser window over a little bit, so you can see the original color accurate view of the image in the background. That is the view, by the way, inside of the Save for Web dialog box and you can see that the colors match, between the Original view and the one that's been converted to sRGB.
Compare that to the same graphic which was not converted to sRGB, notice that the colors are extremely drab as a result. So we're losing a lot of punch and color intensity inside of our graphic. So despite what we are seeing on screen, Convert to sRGB is definitely the way to go. Now, something else I want to show you. If you Zoom in on this graphic, we've got a lot of dithering going on, this noisy color in the background, don't worry about that for a moment, that's the function of GIF. We are going to ultimately go with the JPEG format for this graphic.
But notice if you Zoom in on the word BOO right there, that we have some iffy edge transitions. So instead of seeing a nice line, the way we do along the bottom of the letters, it's basically a one pixel line, we're seeing a kind of three pixel line, so we are seeing a dark line in the center and then we're seeing a row of light pixels over on the right-hand side and a row of light pixels over on the left-hand side as well. Then the first O in BOO, is just a total mess over here on the right-hand side.
And if you Zoom in on this frame edge, you'll see that where we really want just a single line right there, we've got a double line going on. And how do we take care of that? Well, what we need to do is, before we visit Save for Web & Devices, we need to go ahead and investigate the image inside of the pixel grid, and I am going to show you how to do that, as well as a new way to align your artwork to that pixel grid, in the next exercise.
Author
Released
5/28/2010- Creating great art using basic tools
- Brushing and building organic artwork
- Scaling and rotating path outlines
- Creating and formatting text
- Drawing articulated paths with the Pen tool
- Combining paths with Pathfinder operations
- Printing and exporting to the web
Skill Level Beginner
Duration
Views
Q: I was not able to locate my saved shortcuts and cannot locate the folder I created to place the preferences into. The Illustrator steps are clear and using the search function I should be able to find the folder, but it cannot be located. How can I find the shortcuts file on a Mac?
A: To search for the shortcuts file on a Mac, press Cmd+F. Then change the option that says "Kind" in the top-left corner to System Files by choosing "Other" and selecting "System Files" from the menu.



Q: The instructions for installing the dekeKeys don't work on my computer (which is running Mac OS X Lion). Is there an update to these?
A: The dekeKeys distributed with this course will still work for Lion. You just need to add them to a slightly different folder than in previous versions of OS X.
Open a new Finder window and choose Go > Go to Folder. Type the following file path exactly as written below. Copying and pasting may result in an error.
~/Library/Preferences/Adobe Illustrator CS5 Settings/en_US
Move and/or copy/paste the dekeKeys to this folder and follow the rest of the instructions as outlined in the video, "Installing the dekeKeys keyboard shortcuts."
Related Courses
-
Deke's Techniques
with Deke McClelland154h 49m Intermediate
-
Introduction
-
Remapping OS shortcuts6m 56s
-
1. Making a Document
-
Managing artboards1m 20s
-
The Welcome screen3m 49s
-
Creating a new document7m 13s
-
Advanced document controls6m 52s
-
Auto-arranging artboards3m 42s
-
Rulers and artboards6m 40s
-
Saving a native AI document7m 25s
-
Closing all open documents2m 45s
-
-
2. Navigation and the Workspace
-
Using tools to zoom and pan5m 56s
-
Scroll wheel tricks2m 13s
-
The tabbed-window interface6m 17s
-
Closing all but one document3m 30s
-
Saving a custom workspace4m 57s
-
Hiding the bounding box4m 27s
-
Keyboard increments7m 15s
-
Cycling between screen modes5m 21s
-
3. Opening Documents and Getting Organized
-
Opening a document5m 2s
-
Introducing Adobe Bridge6m 6s
-
File-type associations4m 3s
-
Previewing and collecting8m 17s
-
4. Basic Line Art
-
Everything is anything1m 14s
-
Meet the line tools3m 30s
-
Saving large layer previews5m 50s
-
Creating custom guides5m 31s
-
Creating a heart using arcs3m 51s
-
Adjusting control handles4m 13s
-
Drawing a line segment4m 51s
-
Rotate, Fill, and Stack4m 37s
-
Drawing a looping spiral4m 41s
-
Tracing a template layer5m 1s
-
Selecting similar objects3m 32s
-
-
5. Geometric Shapes
-
The anatomy of a path1m 41s
-
Meet the shape tools3m 32s
-
Creating a compound path4m 29s
-
Drawing rounded rectangles3m 28s
-
Aligning to a key object3m 47s
-
The constraint axes4m 11s
-
Using the Flare tool5m 32s
-
-
6. Paint, Build, and Transform
-
Painting artwork from life1m 21s
-
Tracing a photograph2m 41s
-
Draw, Move, and Duplicate5m 27s
-
Rotating and duplicating6m 1s
-
Pressure-sensitive input4m 24s
-
Using the Shape Builder tool4m 57s
-
Establishing design groups5m 54s
-
When to rotate vs. reflect4m 55s
-
Simulating beveled edges6m 46s
-
-
7. Swatch, Stroke, and Stacking Order
-
The Document Color mode6m 20s
-
Introducing the Stroke panel4m 46s
-
Cap, Join, and Miter Limit6m 42s
-
Managing color swatches4m 55s
-
Filling paths inside groups6m 24s
-
Adjusting the stacking order7m 44s
-
Combining multiple fills5m 29s
-
Creating a tile pattern9m 2s
-
The new CS5 arrowheads5m 44s
-
Creating a callout line7m 1s
-
Width tool tips and tricks8m 47s
-
8. Working with Type
-
Next-generation text1m 19s
-
Making a margin guide5m 7s
-
Offsetting flush-left text4m 47s
-
Placing and threading text6m 18s
-
Working with point text7m 10s
-
Redefining paragraph styles6m 42s
-
Using the Glyphs panel6m 41s
-
Spell-checking text4m 24s
-
Updating a graphic style5m 43s
-
Creating type on a path7m 26s
-
Adjusting baseline shift4m 18s
-
-
9. Using the Pen Tool
-
Moving and deleting points7m 46s
-
Editing a path as you go7m 5s
-
Faking a spline curve5m 54s
-
Adding corners to a spline7m 15s
-
How control handles work10m 17s
-
Aligning open paths5m 38s
-
Splitting and joining paths8m 51s
-
Cusp points and miter limits6m 45s
-
Using the Convert Point tool4m 42s
-
Stacking clipped paths4m 28s
-
10. Pathfinder Operations
-
Unite closed, join open4m 46s
-
Switching shape modes4m 43s
-
Adding to a compound shape5m 32s
-
Outline Stroke and Unite3m 37s
-
Painting in the foliage5m 23s
-
Filling in and erasing away6m 31s
-
Painting more precise holes5m 17s
-
Adding in rough edges7m 53s
-
Contouring roots and limbs8m 56s
-
Filling in the limbs4m 19s
-
Using the Divide operation5m 46s
-
11. Printing a Document
-
Converting type to outlines8m 55s
-
Setting trim size and bleed6m 22s
-
Stroking a placed image4m 54s
-
Filling in your bleeds5m 34s
-
Troubleshooting weak blacks6m 36s
-
The General Print options5m 20s
-
Placement, scale, and tiling6m 39s
-
Trim and printer marks6m 23s
-
Warnings and document raster5m 21s
-
12. Exporting to the Web (and Elsewhere)
-
Saving a high-contrast GIF7m 18s
-
The versatile PNG format6m 33s
-
Saving a full-color PNG4m 47s
-
Placing an AI Smart Object7m 38s
-
Conclusion
-
Until next time1m 33s
-
- Mark as unwatched
- Mark all as unwatched
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.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Saving an illustration for the web