Getting Started With Design: File Types & Applications

Digital media is everywhere, but when you are the one creating content the number of options can be overwhelming. Do you design in vector or raster? Are your edits non-destructive? What type of file do you export? Should you do more than one, and does it even matter?

Yes, yes it does. Well, sometimes …

What program are you using?

There are primarily two different types of graphics design programs: ones that work in Vector and ones that work with Raster. Both have their merits but the primary differences are which file types are available for export. You can always rasterize a vector file but you can’t go the opposite direction.

Vector artwork in its most basic form is a map of lines and shapes. This can be resized up or down forever without any of the content getting “fuzzy”.

Rasterized images on the other hand are basically a flat photo. Stretching it large enough causes details to become “fuzzy”, while resizing it down has no adverse effects … except that it will stay that size forever. If a 1000 x 1000 px rasterized image is reduced (and saved) to be a 500 x 500 px, it can never go back to its original size or it will be “fuzzy”. It would approximately be the same result as trying to increase the 1000 px image to 2000 px.

To use an example, removing blocks in a lego tower will forever make that tower shorter. Rather than putting those extra legos to the side imagine if you threw them away as soon as you removed them from the tower — that is how raster images work. It is a destructive workflow that can’t be undone once the changes are saved.

Vector on the other hand is quite different. We are essentially using the best silly putty in the world that can change size and shape an unlimited amount of times without “damaging” it. It can scale up and down, changes can be made non-destructively, and be exported into a variety of formats that are either vector or raster!

So why would anyone work in Raster over Vector? There are many specific reasons and use cases — namely working with photos or other forms of media that weren’t originally designed from scratch using lines and shapes. But the purpose of this article is to learn about the differences in file types, so let’s dig into that.

This is an exaggerated effect of artifact compression

JPG / JPEG: This is arguably the most common file type. It is a flat, lossy image. This means that there will always be a white background on it from edge to edge (unless the image itself fills the full resolution), and it has various levels of “compression” that can introduce artifacts. Working with JPEGs is destructive, but it is a common filetype that is accepted everywhere. JPGs can be very small due to their compression, however it is important to note that some graphics programs do not allow you to control the level of compression introduced.

(this is actually a JPG screenshot of what a PNG looks like when designing)

PNG: This is a file with a transparent background. Here it is represented by a checkerboard background but can also appear black or white depending on how different programs represent transparency to the user. This means that you can lay one PNG on top of anything else and only the content of the PNG will appear, and not any type of background. You can not lay a JPG on top of anything else without a large white square covering up what is underneath it.

GIF: An animated file type that is usually not compressed by default. GIFs may also be static images, but are typically used to send a short, looping string of images. This can be a video snippet, several sprite sheets linked together, or a variety of other content.

TIFF: This format was created in 1986 and was last updated in 1992. TIFF files can be extremely large, high quality images that are used in the publishing industry among others. It is common in high resolution scanners, some photography situations, and layout / publishing / printing environments.

PDF: Originally created by Adobe in the 90s, PDFs have come a long way through a series of iterations. On the face of it, PDFs are a simple way to export and share documents that have been “flattened” and are no longer editable. With advancements in its technology PDFs can include interactive fields, buttons, checkboxes, electronic signatures, and rich media content embeds (photos, videos, graphics, etc.) Designers & photographers will often send proofs as a PDF to better protect their work prior to being paid. PDFs can be heavily compressed and are always flat. Using graphics from a PDF will usually result in low quality and is much more difficult to “magic erase” the background than when working with JPGs.

SVG: An SVG is a vector file type that is extremely small without any compression whatsoever. SVGs support 2D graphics, animations, and interactivity on the web. SVGs can have their formatting and capabilities further extended by web developers. When designing content for the web or mobile many developers may request a single SVG rather than a series of pre-sized PNGs or JPGs. A single SVG can be scaled up or down without quality loss. This makes it faster to load with a higher quality than PNGs.

EPS: While created as a vector file extension for Adobe Illustrator, it has been adopted by many other Vector based graphics programs. An EPS file can easily be passed between designers regardless of the programs that they are using; allowing for uncompressed, non-destructive workflows. You can typically make a series of changes in your vector design without locking yourself or others into those changes permanently.

PSDs can save change history in some cases*

PSD: An Adobe Photoshop format, PSDs are a layered file type that support 2D and 3D designs.PSDs are typically destructive in nature because you are working with raster. This means that if you make a series of edits to a PSD, save it, and pass along that file to another designer they will (in most cases) not be able to undo the changes you have made. This is not necessarily a limitation of the format but a caveat to the workflow of the application.

EXR: This open source, rasterized file format supports high dynamic range. What does that mean? You can read more about EXR here. Admittedly it is not a format I have ever really worked with across photo, video, or graphics design.

HDR: Stands for High Dynamic Range. Many modern devices support HDR, which displays a much larger and wider color gamut than standard display formats.

What should you use for your next project?

Is it a photo? JPG/JPEG

Is it a graphic to be used for Web or Mobile? SVG if vector, PNG if raster. If you don’t know the difference but have the option to export as SVG do that; the file size will be smaller and you don’t have to send the developers more than one copy in different sizes. If you send them a raster image inside an SVG they will tell you to resend it as a PNG.

Are you sharing this file for someone else to work on? Or are you going to make changes to your design later? EPS
While PSDs are great, not everyone uses Photoshop. More third party applications outside of the Adobe ecosystem can open and work with an EPS vs a PSD file.

Are you working with 3D artwork or perspective? PSD
While you can save 3D models and perspective in an EPS file, most other applications will not be able to work with those features natively.

Is it for print larger than a sheet of printer paper? EPS if you are sending it to a print shop or another designer. TIFF if you are sending it so someone who does not work with graphics like an assistant, admin, intern, etc.

Is it for print on a standard 8.5" x 11" printer paper? EPS if it is going to another designer or print shop, PDF if it is going to anyone else that does not work with graphics like an assistant, admin, intern, etc.

What program should you be using?

This is highly subjective. If you don’t mind spending the money I highly recommend Adobe Creative Cloud. For a single price you get access to over two dozen programs for Windows and Mac that have companion apps for Android and iOS when you are on the go. If you are a student or teacher you can get a discount on their full suite of services. If you only need access to a single application (or two) then you can get a single app license for roughly $10/mo, but note that you are still locked into an annual contract.

If you only need PDF software you can download Adobe DC/Reader for free.

If you are designing in vector using basic shapes and layouts you can get Adobe XD for free (which now supports a wide array of plugins to enhance your workflow).

Affinity Designer and Affinity Photo offer great secondary choices for a low, one time fee of $50 each. Affinity Publisher is Serif’s answer to InDesign and looks great (currently in Beta). They also offer fully featured mobile versions of these applications for tablets as well at a reduced print point.

There are many great Free and Open Source choices as well. Gimp is a long time fan favorite, along with many web versions of these applications such as Polarr, Gravit, and Vectr (along with many others).

Invision Studio is also an application I wanted to mention, though in Beta it gives users access to a powerful suite of Vector design tools. Aimed towards designers specializing in UI/UX, it includes the added bonus of being able to prototype your designs into interactive mockups. If you work in basic vector shapes I would recommend checking it out.

*Please note that I have no affiliation with any of these companies. These recommendations are my own and do not represent the opinion of any employer I previously or currently work for.