Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Illustrator is a great tool for designing for the web and mobile devices. The vector graphics you create in Illustrator are perfect for multi-screen distribution, because they're able to be scaled and exported at any size without losing quality. That being said, you still export them in a web friendly format. In order to do this, you're going to have to use the Save for Web command. This dialog box has been completely reworked and streamlined in CS6. Let's go ahead and open that dialog box up now and then we will switch back and forth from CS5 to CS6 to showcase some of the differences. So I will go up to the File menu, and the first thing you are going to notice is it's no longer called Save for Web and Devices.
It's simply Save for Web. Once the dialog box opens, you'll notice here several things have been removed. Let's jump over into CS5. One of the main differences in CS5 versus CS6 are the formats in which images can be exported in. You will notice here that you have GIF, JPEG, PNG-8, PNG-24 as well as SWF, SVG, and WBMP. In Illustrator CS6, SWF, SVG, and WBMP have all been removed.
You'll also notice in CS6, that the 4-Up preview that you see here in CS5 has been removed. You'll only be able to view your objects 2-Up in Illustrator CS6. You'll also notice that Device Central is nowhere to be found in the CS6 dialog box. In CS5, it was down here in the bottom right-hand corner. But now in CS6, Device Central has been retired. You'll also notice a significant difference over here on the right-hand side, whereas in CS5, you had things like the Color Table, Image Size, and Layers all inside of individual tabs. In CS6 you now have the Color Table and Image Size upfront in their own respective panel areas, and the Layer section has been removed entirely.
You'll also notice in CS6 that there are no Internet Speed options. They've all been removed as well. So has the HTML Export option. But at the bottom left-hand corner of the CS6 dialog box there's a small button that says Preview. If you click this button, it automatically launches your default web browser and allows you to preview your images in an HTML mockup. This is how you get that HTML export back, simply launch that up and then save the file to your hard drive. That's how you get around that being removed. You'll also notice that in CS6, Export Slices is now inside of this dialog box right here at the bottom right-hand corner, whereas in CS5 it was a completely separate command altogether.
There is one new addition to the Save for Web command in CS6 that is quite useful in my opinion, and that's the fact that the Image Size options now update in real time. Let's switch over to CS5 for just a moment. If I were to resize the image here using the Image Size tab, I would have to make my change, in this case, let's make it 340, and then I would have to hit Apply. Whereas in CS6, if I come in and I type out 340 and press the Tab key, it automatically updates without me having to hit an Apply button or anything like that.
All in all, the Save for Web command equates more to addition by subtraction than anything else, but it's still the best way to get your vector artwork out of the Illustrator and into a web-friendly format.
Get unlimited access to all courses for just $25/month.Become a member
117 Video lessons · 42824 Viewers
119 Video lessons · 54181 Viewers
65 Video lessons · 14439 Viewers
113 Video lessons · 82865 Viewers
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.