VECTOR VS. PIXEL BASED GRAPHICS
Generally, designers will work in Illustrator to design your logo. Adobe Illustrator is a vector based program, rather than a pixel-based program like Photoshop. Vector-based images can be resized both larger and smaller without diminishing the quality. On the other hand, pixel based images do not resize well. As you can see in the example below, the vector-based Illustrator file (top) is created with just a few points and a mathematical formula determines the curves and lines in between. The pixel or bitmap based Photoshop file (bottom) looks digitized and has blurry edges when resized from a low resolution file.
Your final logo artwork will probably be an Illustrator eps (Encapsulated Post Script) file. Now it’s likely that you do not have Illustrator, so you will not be able to open the file. But that’s OK. You only need to be able to place the finished eps file within documents or provide it to vendors for such things as business card printing, signage, etc.
FILE TYPE: EPS
An Illustrator eps file is the gold standard for your logo files. In fact, if your logo designer says they are working in Photoshop, you are probably not going to get files that will be universally useful for you, your printers, your other vendors, etc. And it will in fact cause problems for you in the future, if not immediately. Whenever you have a reason to pass along your logo to a professional, give them the eps version, unless another format is specifically requested.
The benefit of an eps file is that it can be sized up or down without restriction and without deteriorating the image quality. It also has a transparent background so that the logo can be placed in any situation without a problem. A jpeg, on the other hand, will always have a white box as the background of the logo. Professionals such as graphic designers, web designers, printers and sign makers can convert the eps file to whatever size and format they need.
The problem is often that you may not be able to place an eps file in documents such as Word or Powerpoint files. Whenever you are working on something that requires your logo, always try to use the eps file first. If the software does not let you place or import an eps, then you will be forced to use an alternative format.
FILE TYPE: JPEG
Jpegs are the most common image types that many of us are familiar with. They can be easily placed within Word and other software programs. There are two common problems with jpegs files: they do not resize well, and they have a background fill (such as white). Therefore jpeg images need to created with their end use in mind.
Here are some examples. If you are creating a jpeg for a large, printed poster, then the file should have a resolution of 300 dpi, it should be set up four-color (CMYK rather than RGB), and should be at a large enough size that it does not need to be resized very much upon placement in the layout program. On the other hand a web graphic should be saved at 72 dpi, and in rgb format. The size should be close or exactly what it will be on the web page. If you are placing your logo on a black background, for example, you’ll need to create a jpeg with a black background.
As you can see, it’s easy to end up with a large library of these images because you need one for every specific usage. And, you may not have the tools to make all these variations. You’ll need to start with the eps file to create the jpegs in these various formats, and your designer may need to be the one to do that for you.
FILE TYPE: GIF OR PNG
Gifs and png files are an alternative to jpeg, but allow for a transparent background. However, they have essentially the same limitations because they are also pixel based. You will again need to create the file with the correct size and resolution for the end usage.
DEVELOPING A LIBRARY OF FILES
Whenever we design a logo for a client, we provide a large library of final electronic files. The key files are the Illustrator eps files, and we usually provide them in Pantone (PMS) color, four color, grayscale, black, and white versions. That handful of eps files are the most critical.
Then, we build a whole library of jpeg and gif files. We create a wide range of files in different sizes and resolutions to span most of our clients needs. As you can imagine, this is a large library of files. It is not uncommon for us to provide up to 100 different variations for them.
WHAT IS A VECTOR? WHAT IS RASTER?
We can start making sense of the issue by clarifying the difference between the two major image types – raster and vector.
Raster images use many colored pixels or individual building blocks to form a complete image. JPEGs, GIFs and PNGs are common raster image types. Almost all of the photos found on the web and in print catalogs are raster images.
Because raster images are constructed using a fixed number of colored pixels, they can’t be dramatically resized without compromising their resolution. When stretched to fit a space they weren’t designed to fill, their pixels become visibly grainy and the image distorts. This is why altered photos may appear pixilated or low resolution. Therefore, it is important that you save raster files at precisely the dimensions needed to eliminate possible complications.
Vector images, alternatively, allow for more flexibility. Constructed using mathematical formulas rather than individual colored blocks, vector file types such as EPS, AI and PDF* are excellent for creating graphics that frequently require resizing. Your company logo and brand graphics should be created as a vector and saved as a master file so you can use it with smaller items such as your business card and letterhead, but also on larger surfaces, such as your corporate jet. When necessary, always create a JPG or PNG for use on the web from this master vector file. Just be sure to save the new raster file in the exact dimensions needed.
*A PDF is generally a vector file. However, depending how a PDF is originally created, it can be either a vector or a raster file. Whether you opt to flatten the layers of your file or choose to retain each one will determine the image type.
HIGH RESOLUTION OR LOW RESOLUTION?
To determine whether your raster images are a suitable resolution for a specific application, you need to check their pixel density. Units of measurement such as dots per inch (DPI) or pixels per inch (PPI) refer to the number of pixels in one inch of the image. These measurements become important when you attempt to use raster images in specific places, such as on the web or in print publications.
The web, for instance, displays 72dpi (72 dots or pixels per inch) – a relatively low pixel density. Raster images with a low DPI like 72dpi look nice and crisp on the web. But this same low DPI image may not be suitable for printing on a brochure or packaging. To correctly print an image, it should be at least 300dpi, a much higher pixel density than the web displays. Resizing a low DPI image pulled from the web to fit the dimensions of your print project won’t work because the same finite number of pixels only get bigger and begin to distort. For example, let’s say you want to print your logo at 2″x3″ on a brochure. If have a 72dpi jpg of your logo and it’s 2-inches by 3-inches, it will need to be “stretched” to more than 3 times the size to get it up to 300dpi. That 72dpi logo may look great on your computer monitor, but when it prints at 300dpi it will look pixilated. Instead you should use a vector version of your logo (.EPS or .AI) or create a raster (JPG) with the exact dimensions desired and at 300dpi.
DIFFERENT IMAGE FILE EXTENSION TYPES AND THE BEST USE FOR EACH
JPG (or JPEG) is a raster image that is often used for photographs on the web. JPGs can be optimized, when saving them out of photoshop, to find the perfect balance of small file size and high quality. On the web, you want your images files to be as small as they can be so your site loads quickly, but large enough to still appear crisp and not pixilated. A JPG can’t have a transparent background so they are always in the shape of a rectangle or square with a solid background.
Best use = rectangle or square photos and photographs on your website.
PNG is another raster image type. For the general marketer, the main difference to understand between a PNG and JPG is that a PNG can have a transparent background and is generally larger and higher quality. Therefore a PNG is ideal for saving logo files for websites because they can be placed over a colored background.
Best use = logos, icons and other images where a transparent background is preferred.
A GIF is another raster image type. A GIF is formed from up to 256 colors from the RBG colorspace. The fewer colors and shades contained in an image, the smaller the file size. Therefore a GIF is ideal for images that use just a few solid colors and don’t have gradients or natural shades. You wouldn’t want to use a GIF for a photograph.
Best use = simple web graphics such as web buttons, charts and icons.
A TIF (or TIFF) is a large raster file. It has no loss in quality and therefore is primarily used for images used in printing. On the web, because of load time, you generally want to use smaller images such as JPG or PNG.
Best use = images and photographs for high quality print.
An EPS file is a vector file of a graphic, text or illustration. Because it is vector it can easily be resized to any size it needs to be. An EPS file can be reopened and edited.
Best use = master logo files and graphics and print designs.
An AI file is a proprietary, vector file type created by Adobe that can only be created or edited with Adobe Illustrator. It is most commonly used for creating logos, illustrations and print layouts.
Best use = creating logos, graphics, illustrations.
Editing vector files and saving “in outlines”
Vector files such as AI and EPS can remain editable so you can open them back up in Illustrator and edit any text or other elements within the graphic. With images that contain text that are saved as a JPG, PNG or GIF, you would not be able to reopen and edit the text.
At MODassic we often create files in Illustrator and save an AI file as our master file, but then also save an EPS version, “in outlines” which is used in production and sent to print.
Saving in “outlines” is a term that you will hear when sending files to print. If a printer doesn’t have a font you used in your design and the vector file is not saved in outlines then when they open the file the text won’t have the desired look as it will default to a different font. Saving something with “outlines” basically means you are locking the text so that it’s no longer technically a font but instead made up of vector shapes that form your letters. This is important when sending graphics to print. Saving a file in outlines makes your text no longer editable which is why at MODassic we keep the AI file as an editable master and then save an EPS as the locked final artwork which we send to print.
Working with images can be confusing, but bearing these key facts in mind will eliminate much of the hassle and of course we’re always here to help or answer any questions.