Create Web Content in Illustrator, Part 1

Beth Wood

Create Artwork to Scale
As you work with web images, you’ll realize that you typically shouldn’t resize images on a web page. In most cases, resizing can distort images, making them appear further rasterized. This is why you should create or scale content in Illustrator to the final size you plan to use on the web page after the image is optimized (1:1). So, if you want to create a button for your web page, and the button needs to be 150 pixels wide, make it 150 pixels wide in Illustrator, rather than scaling it in a program such as Adobe Dreamweaver.
To gauge the size, make sure that you can see the rulers onscreen (View > Rulers), and use the Transform panel and other methods to determine object size.
Balance Image Quality with File Size
Limiting your graphics to small file sizes is essential to distributing images on the Web. With smaller file sizes, web servers can store and transmit images more efficiently, and viewers can download the images more quickly. You can view the size and the estimated download time for a web graphic in the Save For Web & Devices dialog box (choose File > Save For Web & Devices).
Choose the Best File Format for Your Graphic
This can be a rough rule to follow, in some cases. When you create artwork in Illustrator, eventually you’ll need to optimize it for use on the Web, unless you’re using the art in some other way, such as converting it to portable document format (PDF) and posting the PDF file. So you’ll need to choose from one of the three main file types for graphical web content: JPEG, GIF, or PNG.
Here are a few guidelines for deciding which file format is best for your artwork:
GIF. If the artwork has less than 256 colors (such as in a simple button), or you need the artwork to have generic transparency (in which one color is transparent, such as the background of an object), then GIF is your format. Examples of artwork typically saved as GIF:
* Buttons
* Page objects (squares, lines)
* Simple logos
* Icons
* Background objects (without complex gradients)
* Objects with rounded corners
* GIFs are compressed using a lossless compression.
JPG. JPEGs can have millions of colors and are very useful for saving images such as a company photograph. If your artwork doesn’t require transparency, has a range of colors (complex gradients, shadows, and so on), then JPG is optimal. Examples of JPEG-worthy content:
* Art containing photographs
* Artwork with complex gradients and/or textures
* JPEG images are compressed using a lossy compression.
PNG. Similar to GIF, the PNG format uses a lossless compression. It also has the ability to save content with up to 24 bits of color. Most people save artwork in the PNG format if alpha transparency is involved (things like drop shadows).
Part 2: Hands On
Now that you have a few best practices in mind, it’s time to start saving Illustrator artwork for the Web. In part 2 of this series, I’ll show you how to create and save a button in the correct file format to be used on your web page. I’ll skim through the artwork creation (shapes, text), focusing on the best practices and optimizing the artwork.
© 2010 Pearson Education, Inc. All rights reserved.
 

Previous 1 2