g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor


Optimizing Your Banner for the Web in Adobe Illustrator CS2

Project Information-- Skill level-Beginner AdobeR Illustrator R CS2

In the last tutorial, we finished the web banner. Now, you are ready to optimize it with the AdobeR Save for Web optimizing feature. This Save for Web feature in IllustratorR works much the same way as it does in PhotoshopR.

But just what is optimizing? When you create an image and click File > Save, the image is saved in the Illustrator file format (.ai) by default. This is a good idea because you might want to return to the image at a future time and make changes to it. However, this Illustrator file format results in a very large image file which is too large to be used on the web. We need to do two things. First we will convert the image into a file format that can be used on a webpage. The three most common choices are JPEG, GIF and PNG. Most images created in Illustrator are vector graphics and therefore can probably be saved in GIF format. However, I have found that the gradient and the drop shadow look much better when I use the JPEG format. So for this tutorial, we will convert our banner to JPEG. Secondly, we need to reduce the file size to as small as possible for use on the web. But there is a tradeoff. When you reduce the size of the image file, you also lower the visual quality of the image. We need to find a nice balance between file size and quality. For this simple tutorial, we will choose between the built-in High, Medium and Low settings for the JPEG format.

1. Open your banner into Illustrator. If you have been following along with the last few tutorials, your banner should be ready to be optimized when you open the image into the program.

2. Save for Web. From the Menu Bar, click File > Save for Web which will open the Save for Web dialog box. At the top, you will see four tabs which will give you four different views of your image. The Original tab will show the image in its default Illustrator format before it is optimized. The Optimized tab will show you how your image will look after it is optimized at the format and compression quality of your choice. But we haven't made that choice yet, so click on the Optimized tab.

3. Start with JPEG format and High quality. In the panel on the right, you will find the section labeled Preset. There you will see some drop-down menus. The first menu on the left contains the Optimized File Format choices. Set this to JPEG. The menu under that contains the Compression Quality choices. Set this to High. Leave the other settings at their defaults.

4. Check the details. Under the Preset section is a few more tabs. Click on the Image Size tab. The finished banner image should still be 468 x 60 pixels. Under that, verify that the Anti-Alias and Clip to Artboard checkboxes are not checked. If these boxes were checked, it would effect the finished size of our image.

5. Choosing a quality setting. Now look at the bottom of the large panel containing the image. There you will find the information about your optimized image. First it tells you that the image will be converted to JPEG format. Under that is the projected file size and download time. Click on the 2-Up tab and it will show you both the original image and the optimized image. But we want to take a look at how our image will decrease in quality at the Medium and Low compression quality settings. Click on the 4-Up tab and you will see four versions of your image. Click on the second panel and set the Compression Quality to High in the drop-down menu. Click on the third panel and set the Compression Quality to Medium. Finally, click on the fourth panel and set the Compression Quality to Low. As you can see, the file size and download time are reduced for the Medium and Low settings. Now you need to compare the visual quality of these three versions and choose for yourself which quality setting is best for your project. Click on the panel for the quality setting of your choice. Finally, click Save to open the Save Optimized As dialog box. Give your final image a name and save it in the location of your choice.

AdobeR product screen shot(s) reprinted with permission from Adobe Systems Incorporated. AdobeR, PhotoshopR, PhotoshopR AlbumTM, IllustratorR, InDesignR, GoLiveR, AcrobatR, CueR, Bridge, DreamweaverR, FlashR, FireworksR, ContributeTM and FlashPaperTM are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.
Add Optimizing+Your+Banner+for+the+Web+in+Adobe+Illustrator+CS2 to Twitter Add Optimizing+Your+Banner+for+the+Web+in+Adobe+Illustrator+CS2 to Facebook Add Optimizing+Your+Banner+for+the+Web+in+Adobe+Illustrator+CS2 to MySpace Add Optimizing+Your+Banner+for+the+Web+in+Adobe+Illustrator+CS2 to Del.icio.us Digg Optimizing+Your+Banner+for+the+Web+in+Adobe+Illustrator+CS2 Add Optimizing+Your+Banner+for+the+Web+in+Adobe+Illustrator+CS2 to Yahoo My Web Add Optimizing+Your+Banner+for+the+Web+in+Adobe+Illustrator+CS2 to Google Bookmarks Add Optimizing+Your+Banner+for+the+Web+in+Adobe+Illustrator+CS2 to Stumbleupon Add Optimizing+Your+Banner+for+the+Web+in+Adobe+Illustrator+CS2 to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Digital Art and Design Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
Multiple Artboard Template in Photoshop CC

Design & Bind Your Creative Portfolio - Skillshare

Using Artboards in Photoshop CC

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor