Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.