Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Although Illustrator is mainly used in a print production workflow, in conjunction with applications like Adobe InDesign, it can also be used as a Web design tool as well. As a matter of fact, I design a lot of graphics inside of Illustrator that go on the Web, and in this movie, I am going to show you how to take the graphics you design in Illustrator, and save them out in a Web-friendly format. Now, there are a lot of ways that you can do this, and you can exactly split up the graphics into multiple parts by utilizing something called slicing, but I just want to take you through the basics of saving for the Web.
So let's say, for instance, I created this banner for a blog, and I want to save this out as a single image. I am going to go up the File menu, and I'm going to choose Save for Web. You can also hold down almost the entire left side of your keyboard, and hit the letter S to get this to come up. The actual keyboard shortcut is Alt+ Shift+Control, or Option+Shift+Command on the Mac, and pressing the letter S. That's a whole lot of letters, so I usually just go to the File menu, and choose Save for web. If you've used previous versions of Illustrator, you may be used to that saying Save for web and devices.
It's now been simplified to simply Save for web. Once you open up the Save for web dialog box, you'll see that you're able to view your file as the Original, as an Optimized version, and also in a 2-Up display. The 2-Up display gives you a representation of the original file on the left, and then the optimized version over here on the right. This is going to be great for judging the amount of quality degradation that you experience when you're compressing things for going out on the Web. In this case, we are not going to see a whole lot, because this is a pretty simple graphic, but I'll go through some of the changes and you can look between the two to see if you notice anything as we go along.
So I've got my original file on the left; my optimized on the right. The optimization settings right now are set to GIF. In my opinion, GIF is not the preferred format for a big graphic like this. Also, since this has a gradient, GIF is probably not the best idea either. When you're dealing with complex effects, like gradients, drop shadows, and things like that, you want to make sure that you're using one of two things: either a JPEG, or a PNG file. In this case, I'm going to come up here and drop this down, and I'm going to select JPEG. Once I select JPEG, you're not going to notice too much of a quality difference here, but underneath, I have the ability to adjust the quality with these settings.
For instance, I can choose whether or not I want it to be a Low, Medium, Very High, or Maximum resolution JPEG. By default, it's set to just High, but watch the file size if I jump from High to Medium. You can look at the file size right down here; right now it's 39.31K. If I jump to Medium, it knocks off almost 19K. But you will also notice right here that I get some serious pixelation, and artifacts happening inside the graphic. Watch the difference. Keep your eyes right here on the R. I'll switch from Medium to High.
Did you see it clear up? Again, Medium, pixelated; High, not so pixelated. So I think I'm willing to sacrifice that extra 19K. You can also adjust the Quality setting. This sacrifices image quality for better compression. So if you happened to drag this to the left, you're compressing it more, and turning back the quality. If you drag this to the right, you're compressing it less, maintaining the quality, but you're also increasing the file size. You can also choose whether or not you want to blur to reduce some artifacts in the image.
So if you start to see those little pixelated things in there, you can actually turn up the Blur a little bit to eliminate them. The problem is, you will also blur things like text. That's not good. You can also choose whether or not it's a Progressive download. That basically means that you're going to download the image in multiple passes. So instead of the graphic loading all at once online, it will actually load in steps. In this case, I am just going to leave it unchecked. Directly underneath here, you can adjust the size. Now chances are, you've designed your Web banner or Web graphic to be the correct size right off the bat, but if you're repurposing some artwork that might have been used for print, for instance, you may want to come down here and rework this.
In order to change the size, all you have to do is enter in new Width, or a new Height value. It's automatically linked to each other, so changing one automatically changes the other in proportion. You can also scale it based on a percentage. Over to the right, it will always tell you the original size, so you can always get back to it if you need to. Finally, down at the bottom, you can click Save, and it will bring you to the Save as dialog box. I will just simply pick my Desktop, and I'll call this Save for web, and I'll hit Save.
Once I do that, the graphic is now saved out in a JPEG format, low-resolution, of course, because we are taking it out on the Web, and I can then use it in any of my projects, like take it into Dreamweaver, or even put it into a DPS document inside of InDesign for use on a tablet, or a mobile device.
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.