Cool

Vector drawing created in Freehand and pasted into
Photoshop then saved at 272 x 272 pixels.


Section of the image enlarged 540% in Photoshop.
Notice the jagged edges and dark lines.


Section of the image enlarged 540% in Freehand
then pasted into the Photoshop file. By enlarging
the vector image rather than the raster image I
was able to maintain the smoothness of the shapes.


This enlarged portion of the sun in the logo illustrates
how bitmaps are mosaics of squares.

Since we released the logos on Monday, I've received a number of questions regarding file formats. The .gif files I made for the Web are pretty easy to use, but many of you are also incorporating logos into your print projects, and aren't sure which version to use when. To help you choose the best format for your project, here is a bit of background on the differing file formats and some recommendations on their use. Follow the links within the text to learn more about each of these formats.

Vector Files: Resizable line drawings appropriate for printed applications

Vector Graphics, created by drawing programs, are defined mathematically. Whether you draw a circle, a line, or the letter A, the program defines your shapes by factors such as X,Y coordinates, line width, curve radius, etc. If you draw a small circle in a vector-based drawing program you can shrink it or enlarge it without any loss of definition. As you enlarge it the program will recalculate the data keeping your circle smooth at any size.

Graphic artists typically use vector drawing programs such as Adobe Illustrator and Macromedia Freehand to create line art such as logos and illustrations. Vector programs can be used to layout printed documents such as space ads and street banners, or to export graphics that are imported into page layout programs such as InDesign and animation programs such as Flash.

Vector Versions of the Case Logo

The Case logos were created in Adobe Illustrator and saved as .eps (Encapsulated PostScript) files that you can import into a page layout program for use in printed materials. These are the most appropriate files to use for projects that will be commercially printed. When you import them into a program such as InDesign or Quark you can then make the logo either larger or smaller without loss of resolution. These logos have a transparent background and can thus be placed on a variety of colored backgrounds. Note: If you import these files into a Word Processing program such as Microsoft Word, the logos will only print properly if outputted to a Postscript device. If you need to import the logo into a Word document you may prefer a different format.

Bitmapped/Raster Files: Photographs, color gradients, line art for use in onscreen applications such as the World Wide Web and PowerPoint

Raster graphics, commonly referred to as bitmaps, are defined by pixels. Imagine your picture is a chessboard in which each square (pixel) is defined as a certain color. On screen these squares are usually defined by a combination of values for Red, Green and Blue. Thus, when you look at a photograph or raster image you are really looking at a mosaic. It the mosaic is composed of sufficiently small squares, and these squares come in a large enough variety of colors, then your image will look smooth. Computer monitors that display more pixels per inch and 24 bit or higher color produce more realistic images than older monitors. Bitmapped images can be shrunk, but they cannot be enlarged to any great degree. If you enlarge a bitmapped image you are in effect just creating a picture with larger squares. When working with raster art always start with the highest resolution available.

It is also worth noting that raster images to be displayed on screen are measured in pixels rather than inches or centimeters. This is important to remember because it means the image will appear in different sizes on different computer monitors. If I'm editing a 72 x 72 pixel image in Photoshop, I can define that image to be 72 pixels per inch. But if I take a real ruler and hold it up to my screen I will see that the image is actually smaller than one inch. That is because my monitor displays more than 72 pixels per inch. If I look at the same image on a low resolution monitor my ruler may measure the picture to be an inch or even larger. While pixels per inch are a relative notion on screen they are important for printed applications. If using a photograph in a brochure you will want it to have a resolution of at least 300 pixels per inch. On your desktop printer you may find a range of 125 -225 pixels per inch works well. (Consult your printers documentation.)

Bitmapped versions of the Case Logo

Bitmapped logo files are available in .gif, .jpg, .wmf and .png formats. These are packaged in sets downloadable as .zip files. Your best option for printed matter will be .eps files followed by .jpg for positive images and .png for reversed images.

Graphics Interchange Format (.gif)

Logos and banner photos for use on Case Web sites are distributed in .gif format via the Banner Logos and Photos page in the Web Toolkit. This format works well for logos because it retains crisp edges and compresses cleanly. One can also create .gif images with transparent backgrounds which can be useful in many applications. This format is not recommended for color photographs as it only supports 256 colors per file. Logos for other uses are also available in .gif format via the Case Logos page. These should only be used for low-resolution applications, and not on Case Web sites.

Joint Photographic Experts Group (.jpg, .jpeg)

Logos are distributed in .jpg format via the Case Logos page. This format is suitable for applications in which the images won't be enlarged, such as MS Word documents. Note: The JPEG format does not allow for transparent backgrounds, so reverse versions of the logo are not available in this format. JPEG is the preferred format to use when displaying photographs onscreen.

Windows Metafile (.wmf)

Logos are distributed in .wmf format via the Case Logos page. Technically .wmf files are vector format but they can also include bitmapped images. This format tends to be less crisp than the .jpg files, but does support transparent backgrounds. Use only in low-resolution applications.

Portable Network Graphics (.png)

Logos are distributed in a .zip file in .png format via the PowerPoint Assets header on the Word and PowerPoint Templates page. This format compresses cleanly, offers the best transparency support and works well when using reversed logos against a colored background.

In Conclusion

If you have a print project, your best option will be to use the .eps files, for Web sites use the .gif files in the Web Toolkit, and for PowerPoint presentations use the .png files.

If you are developing your own print documents, Adobe Photoshop, InDesign and Illustrator are all available from the Software Center. If you need professional design assistance, please contact Creative Services.

 Email This Post