Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Illustrator has a special feature that helps you export artwork for use on the Web. It's called Save for Web. And before I actually use it, I'm first going to click on an artboard to make it active. You see, when you have multiple artboards in your document, whichever is the active artboard is the one that gets sent into the Save for Web dialog box. I'm now going to choose File and then choose Save for Web & Devices. This brings up an entire dialog box where I have the ability to now optimize this artwork for the Web just the way that I needed.
If I want to save my file in a pixel- based Web format, I can choose over here things like GIF, JPEG, PNG-8 or PNG-24. I also have a WBMP or Wireless Bitmap format, although nowadays, I'm not aware really anyone who uses it. I'm going to choose JPEG for now, and you can see that I now have various options for how I want that JPEG to be created. One of the nice things about using Save for Web is I can choose 2-Up or 4-Up versions to compare the differences between exporting my file with different settings or even different formats.
For example, if this is my original piece of art, and I can click and drag on it to adjust its view, but then as I click on these other ones here, I could change their settings. For example, this one is set to JPEG at the maximum value. However, I'm going to click on this one right here and change this one to be Low. So I can compare the difference here between the maximum version of JPEG, which has nice and clean sharp lines here, versus the low quality version here, which does not look nearly as nice. However, I can see that this image right now, which is 100% Quality, has a file size of 90 K, while this one with only 10 of Quality is 12.5 K.
So as a designer, I have the ability to choose whether I want smaller file size or better appearance. Now, if I want to compare JPEG to GIF, for example, I can click on this one right over here and choose the GIF format. And what's great about Save for Web is that I can also choose vector-based Web formats like SWF. So if I click on this one right here and choose the SWF file format, which is Flash, I can very easily compare all these results. Once I'm done, I can click on the Save button, which brings up another dialog asking me what name I want to apply to this image, and I can even choose where it says Format to export both HTML and Images.
This will actually generate an HTML page that calls the image so I can see what it looks like in a Web browser. Speaking of Web browsers, if I really do want to see this image inside of a Web browser, I can come down to the bottom of the dialog box and click on this button to actually preview it in my Web browser. Notice that Illustrator both shows me the image itself right now as a SWF, and if I go down over here, it shows me the HTML needed to call that image as well. I also see basic settings, for example, Size, Dimensions and the File Format.
So if you need to export graphics for the Web right out of Illustrator, the Save for Web & Devices features can handle just about anything that you would need.
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.