March 21 2017

Essential Guide to Design File Types

Know your file typeAs an agency managing multiple digital and print design projects, we’re always talking about file formats with clients – specifications, uses, requirements, etc.


As experts in design best practices, we support clients with multiple branding and marketing solutions, providing logo files, images, campaign materials and much more. We’ve created this guide to help clarify questions about how specific files are used and how we all can work together to ensure you’re satisfied with your deliverables.

Jump to these file types: GIF | INDD | JPG | PNG | PSD | TIF | AI | EPS | PDF

First, let’s talk about some categorical terms that always are used during design projects. Knowing this design lingo helps all of us communicate clearly so expectations are met quickly.


CMYK vs. RGB

cmyk versus rgb

It might sound like a legal dispute between multinational conglomerates, but these are the two primary color models used for everything in design.

  • CMYK is a four-color printing process that stands for Cyan, Magenta, Yellow and Key (or black). These colors represent the four inks combined during the printing process.
    • Used for: Physical printed materials
  • RGB is a light-based color model that stands for Red, Green and Blue, representing the three primary colors of light that combine to create other colors found in monitor screens and television.
    • Used for: Web, mobile devices, film, video – essentially everything that appears on a screen

Raster vs. Vector

Computer graphics can be created as either raster or vector images, and both have unique, specific uses. 

raster versus vector images

A raster image is a grid of pixels, or dots, you can see when you zoom in, and each pixel is a specific color. These images exist in one size, or resolution, so if you try to enlarge these images, you’ll often blur them. This is known as pixilation. And it happens because your software is using the surrounding pixels to guess which image data is missing.

  • Used for: Photographs, digital art and web graphics

A vector graphic is a series of mathematical calculations from one point to another that form lines and shapes. Vector graphics always look the same, even when you zoom in, so they can be scaled to any size without compromising their quality because they’re based on mathematical formulas. You can print vector graphics as large as possible and still maintain their high quality.

  • Used for: Logos, icons, typesetting (fonts) and digital illustrations  

Within the raster and vector categories, there are several types of files with unique characteristics.

Raster image types include:

GIF

  • Stands for: Graphics Interchange Format (debate exists whether it is pronounced jif or gif)
  • What it is: A GIF can be an image or animation file that’s compressed to reduce the amount of colors and image information, which reduces the file size.
  • Use when:
    • You want to create web animation, because GIF images hold all animation frames and timing information in one file. Animations are typically created in Photoshop and exported as a GIF.
    • You need transparency, because GIF images can be layered over any background.
    • You need a small file with a limited number of colors for simple icons and web graphics.  
  • Don’t use when:
    • You need a photograph-quality image, because GIFs have a limit of 256 colors. Photos typically contain thousands of colors and will appear flat and less vibrant when converted to a GIF.  
    • You need to print an image, because the GIF’s color limit reduces the image’s depth. Turn to a TIFF, PSD or JPEG when you need to print photos.
    • You need a layered, editable image. GIFs are a flat image format, meaning all edits are saved into one image layer and can’t be changed. Consider a PSD for a fully editable image.

INDD

  • Stands for: InDesign Document (pronounced as single letters i-n-d-d)
  • What it is: InDesign is the industry-standard program from Adobe for page layout and typesetting. An InDesign document is fully editable with multiple layers and objects.
  • Use when:
    • You’re working on page layouts for booklets and brochures.
    • You’re designing marketing and branding materials, such as business cards, letterhead and postcards.    
  • Don’t use when:
    • You need to manipulate or retouch images.

JPEG/JPG

  • Stands for: Joint Photographic Experts Group (pronounced jay-peg)
  • What it is: A flat, compressed image file that will always have a solid color background, usually white. There are varying degrees of compression: low compression produces a higher quality image with a larger file size, while high compression produces a lower quality image with a smaller file size. The more you compress the image, the more pixilated the image becomes.
image compression
  • Use when:
    • You need online photos and artwork to be downloaded quickly.
    • You want to print photos and artwork. A high-resolution file with low compression can be edited for printing.
  • Don’t use when:
    • You need a web graphic with transparency because of JPEGs’ solid color background. GIFs and PNGs are recommended for transparency.
    • You need a layered, editable image because JPEGs are flat. Consider a PSD file instead.

PNG

  • Stands for: Portable Network Graphic (pronounced as single letters p-n-g)
  • What it is: A PNG is similar to a GIF but features more color depth to produce a more vibrant image. 
  • Use when:
    • You need high-quality transparent web graphics.
    • You need a small file, because PNG files can condense in file size. This feature makes PNGs the ideal image file type for web graphics.
PNG transparency
  • Don’t use when:
    • You’re working with photos or artwork. PNGs can easily handle high-resolution photos because of its color depth, but that leads to enormous file sizes. For photos on the web, go with a JPEG instead.   
    • You’re working on a print project, because PNGs are optimized for screens. Use a JPEG or TIFF instead.  

PSD

  • Stands for: Photoshop Document (pronounced as single letters p-s-d)
  • What it is: This document is produced by Photoshop, the industry-standard program from Adobe for digital image manipulation. The document is fully editable with multiple layers and image adjustments. A PSD is also used in conjunction with InDesign, specifically as an image file linked to an INDD file.
  • Use when:
    • You need to manipulate and retouch images.   
    • You’re creating web-based graphics.
    • You are creating image-based artwork for other Adobe software, such as InDesign.
  • Don’t use when:
    • You’re working with large print-based graphics or typesetting printed materials directly from Photoshop.

TIFF

  • Stands for: Tagged Image File Format (pronounced “tif”)
  • What it is: TIFFs are compressed image files at extremely high quality. 
  • Use when:
    • You need high-quality print graphics, because a TIFF is along the best formats available. If you’re printing photos, especially at large sizes, use a TIFF.
    • You are making a high-quality scan of documents, photos and artwork, because a TIFF provides the best original file to work from.
  • Don’t use when:
    • You’re working with web graphics. Use a JPEG or PNG when you need to display high-quality images online.
Vector graphic types include:

AI

  • Stands for: Adobe Illustrator
  • What it is: This file is produced by Adobe Illustrator, the industry-standard program for developing vector graphics. The document is fully editable with multiple layers and objects.
  • Use when:
    • You’re creating vector graphics, such as logos.  
    • You’re creating illustrations or icons.     
  • Don’t use when:
    • You need to manipulate or retouch images.

EPS

  • Stands for: Encapsulated Postscript (pronounced as single letters e-p-s)
  • What it is: An EPS is an image format that can use both vector and raster image data. It typically includes a single design element that can be used in a larger design.
  • Use when:
    • You need to send a vector logo to a client, designer or printer. The EPS file will always appear at the correct resolution, no matter the size.  
  • Don’t use when:
    • You’re dealing with photographs or artwork. An EPS can handle raster images, but this image file is for vectors primarily. Use a PSD, TIFF or JPEG with a photo project instead.
    • You need to display an image online. Export to JPEG, PNG or GIF first.

PDF

  • Stands for: Portable Document Format
  • What it is: This image format displays documents and graphics correctly, no matter the device, application, operating system or web browser. 
  • Use when:
    • You’re ready to print. As the near-universal standard, printers typically request PDF files to send a final design into production. Check with your printer to find out how they’d like you to prepare your file.
    • You want to display documents on a website. You wouldn’t use a PDF for a single icon or logo, but it’s great for posters, fliers, magazines and booklets because PDFs keep your entire design in one packages that’s easy to view, download or print.   
  • Don’t use when:
    • You need to edit your design. Edit your raster images with Photoshop and vector graphics with Illustrator. When you’re done, combine those into a PDF for easy viewing.  

We're here to help

ZAG Interactive’s design experts can help you understand the various formats and which ones should be used with which types of projects. Whether you need assistance in branding & positioning, website design or integrated marketing, trust ZAG Interactive to help you become fluent in the language.

  • Website

posted by
Jennifer Poole
Jennifer Poole

ZAG Interactive is a full-service digital agency in Glastonbury, CT, offering website design, development, marketing and digital strategy to clients nationwide.
Related Article
Social Media Glossary – Understanding Social Media from A to Z