The Complete Guide to File Types

 
Guide-To-File-Types-Header (1).jpg
 
 

Today's blog post is an extra-good one because we're giving you the lowdown on all of the different file types under the sun. If we had a dollar for every time our clients sent a PDF instead of the source file, we'd be two really wealthy gals. From JPEGS to ZIP files, we've got you covered on descriptions, uses, and differences between each. Let's begin! 

VECTOR VS. RASTER

First off, we’d like to officially lay out the difference between a Vector and a Raster file. This is extremely important to us, as designers, and you’ll soon see why:

Vector: Vector images are made up of points and paths, not pixels. This means that they are resizable without losing quality, unlike images that are made up of pixels.

Raster: Raster images are made up of pixels, tiny dots of individual colors that make up an image as a whole. When resizing raster files, you can always downsize, but never enlarge. The resolution of a raster image determines the largest size the file can be. The larger a raster image becomes, the farther the pixels are separated, resulting in a pixelated, fuzzy image.

Designers always prefer logo files to be made and exported as vectors so that they can be resized without losing quality. Raster images, however, are far from useless - we’ll get to that later.


Let’s talk a little more about Vector files.  

PDF: PDF’s are for print-based designs. Exporting a vector file as a PDF flattens all fonts, images, colors, etc., into a print-ready file. PDFs are also universal files, meaning you do not need specific design software to open or whether you’re on a Mac or PC. Note: PDFs are only true vector files when exported from vector-based software, such as Adobe Illustrator. A PDF exported from Photoshop, for example, will be a raster.

AI: This is the native file used by the Adobe Illustrator application. Adobe Illustrator is the most prevalent vector-based design software on the market. These files will open up with all points, paths, colors, & fonts (assuming you own the fonts). This file is completely modifiable, and is used as the starting point of which all other files are exported.

SVG: A web-optimized file format that is supported by vector-based programs such as Adobe Illustrator. Since they are vector-based, they will scale infinitely for websites, which is great if you are designing across multiple platforms (which you should be). SVGs are also lightweight in file size, which means they load incredibly fast.

EPS: The EPS file format is the predecessor of the PDF. These are also native vector files exported from Adobe Illustrator and contain all points, paths, colors & fonts modifiable if opened in vector-based software.

 

Raster (Pixel) Files

 

JPEG: Meet the most popular file type out there. JPEG stands for "Joint Photographic Experts Group" – who knew? It's most commonly used with digital cameras, to store photos, and it also makes for an amazing compressed file. There are 16 million different color possibilities in each JPEG, because they are made up of Red, Green, and Blue pigments, also known as RGB. Though JPEGS are easy to use, some drawbacks include getting "blocky" over time and it doesn't allow for a transparent background. Which leads us to...

PNG: The grand ol' .png. What would we do without you? In case you were wondering, PNG stands for "Portable Network Graphics." These are great for saving out logos, graphics, and designs that require a transparent background. Like the JPEG, the PNG compresses the image down to make it more user-friendly. This is probably the file type we use the most often, when we need to save out graphics to send to our clients! 

GIF: Okay, we're pretty much positive that you have all heard of this one. However, if you've been living off the grid for the past five years, we forgive you. What you may not know is that GIF stands for "Graphics Interchange Format." This is a graphic that allows animation or quick slides that loop endlessly. These are great to use if you'd like to use animation, but don't want to create an entire short film. It's basically the in-between of a JPEG and a video.

TIFF: A Tag Image File Format, commonly known as a TIFF, is a file made to exchange rasters between applications. It's also used to store the most high-quality images. To be quite frank, we don't use this file option often. However, it's great for when you need to compress an image, but don't want to sacrifice quality!
 

What’s a Source File?

If you’ve ever worked with a design studio or perhaps, a local print, you’ve probably heard the term “source file.” What exactly is a source file? This is the raw Photoshop, Illustrator, or InDesign file with layers ready to use, photos linked, the whole shabang. Basically everything you could ever need to resize, edit, and transform the original file. Source files can only be edited in their native program – for example, Adobe Illustrator, Photoshop, InDesign, you get the picture. In our book, the source file is gold and we rarely send these to our clients, to protect our designs! Below, we’ll give you some information on each different file type, how to get them prepped to send, and the differences between the three.

AI: First we’ll tell you about an .ai file, because it’s our personal favorite and the one we use the most. As you probably know, AI stands for Adobe Illustrator. The beautiful thing about Illustrator is that all the files are in vector format, meaning you can enlarge or shrink them to any size and they won’t lose their quality.

When requesting an AI file or sending one over, there are a couple things to keep in mind. First, if the fonts are not outlined, you’ll have to send over the font with the source file or else it’ll probably switch your beautiful design to Myriad Pro, yikes. Second, you’ll want to make sure all of the images you use are embedded – the photos won’t transfer over to someone else Illustrator, unless you link them to the original source.

INDD: Next, we have the .indd file, which stands for InDesign Document. This program is wonderful for creating marketing materials, like brochures, manuals, lookbooks, and more because of its fabulous guides and master pages. The most common file type to convert an INDD file to is PDF.

Like the AI file there are a some things to keep in mind. When working with INDD files, you’re guaranteed to hear the phrase “packaged.” This means that when you’re sending the source file over, they expect everything to be in there, including fonts, images, etc. To package a file, just head up to “File” and select “Package.” This will guide you through all the elements that need to be linked. Don’t forget to use spell check!

PSD: Last we have the PSD and you guessed it, it stands for Photoshop Document. If you’ve ever stepped foot into Photoshop, you’ll know that it works in “Layers.” If you’ve never had the pleasure, we’ll explain. Each element added to your design in Photoshop is a different layer. Which means, a PSD file allows those layers to still be manipulated after a project is complete.

Packaging Photoshop files is really similar to the above files. You’ll want to go to “File”, then “Package”, which will lead you through the linking process once again. We’ve found it easiest to convert the text layers to shapes or to send over the fonts with the file (be sure to check licensing document!)


Font Files

If you see an file ending in .ttf or .otf, it means you have a font file on your hands. While both are extremely similar, each has specific capabilities that are good to be aware of. Shall we get into it?

OTF: An .otf file stands for OpenType Font. This means the font file allow glyphs, which are embellishments, add-ons, ligatures, alternate characters – you get the gist. If it came down to a competition between an OTF and a TTF, the OTF would be the easy winner, because it’s essentially an extension of a TTF and has more capabilities. That being said, most designers don’t always need a letter with accent mark when they write out piña colada, because it’s fairly simple to make one yourself!
 

TTF: Here we have the .ttf file, which stands for TrueType Font. Like the OTF, the TTF file was a joint effort between Apple and Microsoft in the early 1980’s – collaboration at its finest. They both needed a format that would work seamlessly for both of their systems, when it came to printing and the TTF was born. This meant specific fonts could be downloaded and read by most default printers.  Unlike the OTF, the TTF only includes the basic alphabet, but honestly, this works just fine when it comes to design.

Other

ZIP: Back in 1989, there was a brilliant man named Phil Katz, who created the original zip file, which was called PKWARE back in the day. We personally have him to thank for making it oh-so-simple to send over logo packages. A zip file does exactly what you think it would do – it zips up the various files included in a folder. This makes it simple to your recipient a nicely packaged folder, instead of sending them a million different files. To make a folder a .zip file, you’ll locate the file or folder that you want to zip, press and hold (or right-click) the folder, select “compress.” A .zip file will then appear! Told you it was easy.

 

L + P