Knowing which file types you need for your endeavors can be a bit confusing, and understandably so–there are a ton out there. So, we thought it would useful to type up a quick blog post detailing all the most common file types in the design world, and their most approprate applications as it relates to you.
JPEG vs. PNG
We’ll start with the two most common file types for image exports–JPEG and PNG. The major distiction between these two is that the former is opaque whereas the latter is transparent. Basically, if you need your image to be overlaid atop another element for digital applications, and you don’t want a solid rectangle around the graphic element, you’ll need to implement a PNG. Furthermore, PNG’s are intended primarly for digital application as they are not comptaible with the CMYK color mode.* JPEG’s can be used for both print and digital. Assets that would be most appropriate for PNG export include logos, icons, buttons, and other UI elements. The best assets for JPEG export include web banners and images on the digital end, and then stickers, business cards, and flyers on the print end.
If your designer is working in a vector application, they should always provide you with the source files at the end of the project. Vector graphics are fantastic because they are infinitely scalable, and thusly you won’t have to worry about loss of quality, or reaching out to your designer if you need your logo increased from business card size to billboard size. The most common vector file types you should be aware of are .AI (Adobe Illustrator), EPS (Encapsulated Post Script), and SVG (Scalable Vector Graphic).
The first one, .AI, is reserved for files exported from Adobe Illustrator. These files have no direct use for digital implimentation, but are good to have on-hand in case further edits need to be made to your graphic. Also, your chosen printing company may request this file type in case they need to make adjustments themselves. Adobe has released any different versions of Adobe Illusrator over the years, so it’s importnt to ensure that the file you are receiving from your designer is compatibile with your version of Illustrator. If you don’t have Illustrator, it’s a great application to have in your arsenal and can be purchased on it’s own for just $9.99 per month.
An EPS is another, more generic, type of vector graphic. Unlike Adobe Illustrator files, an EPS can be opened in other vector-based programs, such as Sketch. It’s always good to have this file type on hand as well, just in case the Adobe software is out of your price range, or if you’re working with separate teams that use different softwares. Just like .AI files, an EPS can be back-saved to suit the appropriate application in which it will be opened, and just like .AI files, an EPS is not meant for direct digital implementation, but may be requested by printers as well.
SVG’s are the only vector files out of these three that have a use for direct implementation. They are fantastic for web design in the form of icons, logos, and text as they are infitenly scalable and thusly won’t lose quality when the user zooms in or out. Additionally, SVG files can be opened in any vector-based application, thus making them a very versatile file type, and a must for any project deliverables.
Possibly the most versatile file type mentioned in this post, you should absolutely always request a PDF from your designer. You’re probably already fairly familiar with PDF’s as their commonly used for online forms, whitepapers, and other digital documents. Similarly to .AI and EPS files, printers will often ask for a high-resolution PDF file, which your designer should know how to prepare properly for print implementation. This format can also retain editing capabilities for Adobe Illustrator and Photoshop, meaning you’ll still be able to make or request further edits to your graphic even without having one of the above source files. Lastly, PDF’s are just convenient–it’s easy for you and your team to create annotations for requested revisions, and it’s a simple way display your graphic assets to other parties. This file type is definitely a “must” when you are receiving your design deliverables.
A PSD is the source file derived from Photoshop. Similarly to the vector source files, a PSD is great to have on-hand in case further changes need to be made your graphic. Additionally, Photoshop is a popular application in which designers will draft wireframes for websites and apps. If you’re working with a developed not affiliated with your designer, it’s imperative that you not only request a design that is Photoshop file, but that you request one that has well-organized layers and that is easy to navigate. Photoshop is a wonderfully versatile application that your designer will used to create everything from photo manipulations to banner ads to web designs, so this file type will cross your path quite a bit when working with creatives.
Ah, GIF–you’re probably more familiar with the age-old debate regarding the pronuciation of this file type, but will give some quick notes to round out your knowledge on the matter. Similarly, to PNG’s, GIF’s can support transparencies, but not as many colors. Thusly, they’ll have smaller file sizes (great for increasing site speed) and are ideal for small buttons and UI elements. Of course, GIF’s are also the choice format for all of those fun animations we love so much. Yes, you can create your own memes with them, but in a more professional application, they are great for animated icons, web banners, buttons, and simple ainimated flourishes on your site. Also, it’s pronouced “GIF”… not “JIF”:)
If so, feel free to drop us a line and we’ll be happy to clear up any confusion. Obviously, this is just a small selection of all the file types that are out there, but these are most common in our day-to-day workflow, and we hope that this blog post will better educate you on what to ask for when working with a designer.
* CMYK stands for Cyan, Magenta, Yellow, Black and is the preferred color mode for print application. RGB (Red, Green, Blue) is intended for digital application.