Infographic: The Missing Guide to File Types

By on May 2, 2016 in Tutorials
Infographic: The Missing Guide to File Types

As the market begins to consume an increasing amount of digital assets it is important to know what you are buying and how to make the most of a file type in its application.

Different file types serve various purposes, each with its own advantages and disadvantages. The pros and cons of a particular file type are what may make it more useful over another. To illustrate this, a PNG file may not be the best choice when you are looking to keep file sizes low and have an image that has full coverage (meaning no transparent pixels). In this example a JPEG would be the better choice, since it can be outputted at a smaller size.

In addition to outputted file types, each program a graphic designer may use will have a default file type. These default file types, like PSD’s or Ai files, will allow for manipulation of the original asset and are often referred to as “working files”.

This buyer’s guide will focus on a few of the most common programs a graphic designer will use along with their more frequently outputted file types. Keep in mind this is a buyer’s guide, so it will be geared towards what a buyer may want to know before purchasing digital goods.

For a detailed description of each file type, read the definitions below this infographic.

FileTypes-01Save

Programs

(.ai) Adobe Illustrator

Adobe Illustrator is a vector based program, which, in it simplest form, uses bezier curves to create shapes. There is a substantial advantage to being a vector based program, and that is thanks to the scalability of the working file. A vector working file can easily scale from one square inch to ten square feet, with no image quality loss. Logos, for example, should always be made in vector form, since a logo’s application can range in sizes from that of shirt tag, to the side of a airplane.

Main Feature: Scalability.
Common outputs: JPEG, PNG, PDF, SVG

(.psd) Adobe Photoshop

Photoshop is synonymous with the modern graphic designer and is a powerful digital tool. At the core of the program, it is raster based and conforms to a pixel grid. Its uses range from photo retouching and digital painting to web design and app design. A raster working file is great for highly detailed imagery in addition to working within a specified pixel dimension.

Main Feature: Pixel Perfection.
Common outputs: JPEG, PNG, GIF

(.indd) Adobe InDesign

Adobe Indesign is the premier desktop publishing software and is used predominantly for print projects. Indesign is best for when projects will have a lot of copy, and may span multiple pages, in addition it will give the designer the largest amount of tools and functions for typesetting. Print projects are ideal candidates and should almost always be created in Adobe InDesign. The INDD working file will often come in a package along with the project’s fonts, images, and other working files that were used. For example, your INDD working file may have utilized external files like a PSD, the external files remain editable, but will need to be linked to the INDD file so that updates are reflected in real time.

Main Feature: Print Layouts
Common output: PDF

File types

(.jpeg) Joint Photographic Expert Group

A JPG is a very common image file type, versatile and compact. It is used for a variety of applications, so keep in mind its core features to know when it is the needed file type. A JPG is great for when both the final dimensions and the intended use is known. For example, the pixel dimensions of a Facebook profile header on a desktop viewport is 851x315 (width x height), meaning you would want to have a JPG that matches those dimensions.

A JPG can also be outputted at different quality levels. The advantage to this is that the weight of the file can be controlled, keep this in mind when a file is intended to be passed around. A website mockup could be sent as low quality jpg, speeding up email transfers and avoiding going over an emails maximum file size.

(.png) Portable Network Graphics

A PNG is also an image file type, and can often carry a little more digital weight than a JPG; however, the lossless compression and transparent backgrounds make up for the con of the additional megabytes.

A lossless file type allows the image to be passed around digitally, through email for example, and have zero degradation of the image's visual quality. Along with that, a PNG can also have a transparent background. That quality is helpful for when you want to use a logo, for example, and you intend to overlap that logo onto an established background, avoiding the disruption that a rectangular JPG would cause. Look at the logos used on many websites, they will likely be PNGs so that they can adapt to their surroundings better with transparent backgrounds.

(.gif) Graphics Interchange Format

The unanimated GIF image file type is becoming slightly antiquated since larger file transfers are becoming faster and easier to access. A GIF’s main advantage is its small file size, but the compromises of its restricted color palette do not make it a good choice for static images.

A static GIF might not be as commonly needed, but thankfully there is a resurgence of quality animated GIF’s, albeit some more questionable than others.

(.svg) Scalable Vector Graphics

The Scalable Vector Graphic is accurately named, and currently has fairly specific uses. Like the Ai working file, a SVG is a vector image, but unlike the Ai working files, a SVG is code not an image file. In fact the SVG is comprised of XML files that dictate its vector shape, color, placement, and so on. This allows both a vector editing program and a developer with knowledge of the XML language to edit the outputted look of the image.

For example, web developers are beginning to use SVG files on websites in replacement of a vector based image. Logos, icons, illustrations and more are being replaced with SVGs, which can help decrease production time when on the fly changes are made.

(.pdf) Portable Document Format

In my experience, a PDF is very commonly used when the file could or does have a printed version. Forms (interactive or not), brochures, annual reports, books, posters, and any document that could be printed is usually transferred as a PDF. This is because the PDF, when outputted by Adobe Illustrator or Adobe InDesign, has a huge range of options, giving it a lot of control over its compression, file size, printer settings and more. A PDF can also carry additional data like vector paths or originals image files, and can remain text editable when needed.

PDFs can be small when needed, but when keeping the highest fidelity, the file size can also quickly increase. Large PDFs will be common when they are outputted for print, since the highest quality will be wanted. Additionally, be aware that you may be sent small PDFs initially as drafts, but before going to print, double check with who ever created it if that file size and quality is “print-ready.”

It should be obvious that this list is not a comprehensive gathering of all file types, rather an introduction to common file types you may encounter when interacting with digital creatives. Knowing when to use a certain file over others can avoid headaches, wasted money, and lost time.


Products Seen In This Post:

Free lettering worksheets


Download now!

img

Download now!

Getting started with hand lettering?

Download these worksheets and start practicing with simple instructions and tracing exercises.

5 Comments

  1. creatifolio
    • Staff

    This is awesome! This will be super helpful as a reference to point to when helping customers. Thanks so much! :)

  2. kristinshaffer

    great article! here comes my dumb question--- when looking at a file for purchase that states it is a "vector illustration", compatible with Adobe Illustrator, yet also comes in EPS and JPG format... why can't I just put this JPG image into Photoshop?

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →