Design

The Design Cloud Dictionary of File Types

The Design Cloud Dictionary of File Types
Leah Camps
1st September 2021

If you’re not a trained graphic designer, deciphering the code of file types can be a tricky task and one that you might not always have time for. The catch is, you really need to be making sure that you’re exporting your graphic design tasks in the right format so that they have the best possible effect. Different sizes of design and placements have widely varying requirements, and knowing what you need is crucial. Since we help businesses all over the UK with graphic design, we thought we’d make it a bit easier by compiling this Design Cloud dictionary of file types (and when you’re best to use them!)

 

confused file types

Raster File Formats

  • Raster file formats use a pixel grid (each pixel in the grid is assigned a colour to create the final image)
  • Since they work on a pixel grid, Raster File Formats cannot be enlarged without becoming pixelated
  • Most commonly, work completed in Adobe Photoshop would be exported in a raster file format

 

What is a raster file format? In general, most images used across the web are raster file formats. They are simply images that are made of a grid of pixels ( which is sometimes called a Bitmap.)

The issue raster file formats like PNG and JPEG pose is that they cannot be enlarged without looking pixelated, so you wouldn’t use this file format to design a logo that needs to be used on a business card and a billboard, for example. Let’s have a closer look at some of the raster file formats you’ll come across most commonly…

 

woman making frame gesture with hands

JPEG

JPEG…Or should it be JPG? The answer? The only difference between them is one letter! JPEG stands for Joint Photographic Experts Group. JPEG files use a lossy form of compression, which basically means that some data in the file will be eliminated so that the file size can be reduced. The result of this is often a lower quality image. Because you can achieve smaller file sizes with JPEG,  you’ll often see these used for the likes of product images on an e-commerce site, since the smaller file size allows for faster loading on a web page.

PNG

Portable Graphics Format, or a PNG, is a lossless file format. That means that they are the perfect choice (and the most popular) for high quality compressed images, and most prefer to use these for graphics like product images on the web. Another feature that makes a PNG a favourite raster file format is that they offer transparency, so you can use them when you need an image without a background.

GIF 

GIF literally stands for Graphics Interchange Format, and is a lossless file format. That basically means that you can compress the file size without altering the quality of the image. The main limitation of the GIF file type is that it is limited to only 256 colours so you definitely don’t want to be using this for any high quality, complex graphic design. You’ll probably be most familiar with GIF’s when you see them like this…

 

 

via GIPHY

 

…that’s because they are the most common file type to use for animation! You can use the GIF file type when you need a smaller file size, or if you need transparency so that you can place your image over another background graphic.

PSD 

PSD stands for Photoshop Document, and it’s used when you have multiple layers of graphics in one file. A PSD file is mainly used to save a working file of a raster graphic that you can come back to later on to edit if needed within Adobe Photoshop. For example if you’d created a template for a product image, you’d save a PSD file so that you can edit layers to advertise new products in the future.

TIFF

A TIFF is a Tag Image File Format, and it’s a good option for those images that you intend to edit after or that you want to print on a large scale since they are designed to preserve quality. You wouldn’t use a TIFF file if you needed a smaller file size since they don’t compress, but instead, a TIFF file offers you features like transparency and multiple layers that can be used within Adobe Photoshop.

TIFF files are commonly used in print for larger high quality images. but are very rarely used for web.

 

Vector File Formats

  • Vector file formats work on a mathematical formula system rather than a pixel grid, so they can be scaled up as much as needed without losing their quality
  • Most commonly, you would use Adobe Illustrator to create vector images

 

Vector file formats are loved by graphic designers for work like logos that will be placed on large billboards, type that needs to work on a book cover and a large flyer, and basically any other image that needs to work on a big scale. You can scale a vector file format up or you can shrink it down without needing to worry about pixelation! Let’s have a closer look at vector file formats here…

 

woman holding board orange bg

PDF

You might be familiar with a PDF, or Portable Document Format, since it’s a very common file type marketers use for anything from ebooks to online menus. PDF’s are the perfect choice for this since they allow others to view a clear graphic online and allow you to limit editing. You can also use PDF for traditional marketing materials since they allow for very high quality print. Most often you’ll see PDF’s used for materials like brochures, ebooks, menus and pricing lists online.

PDF’s will display at the correct resolution on countless different screen sizes, and both Adobe Illustrator and Photoshop allow you to export as a PDF. For the best PDF editing, you’ll need to use a tool like Adobe Acrobat.

 

EPS

EPS stands for Encapsulated PostScript and is a file type which is used for vector graphics, or sometimes a combination of both raster and vector data. You’re best to use an EPS for a stand-alone graphic that you want to be able to scale up at a later date, for example an icon or a logo. The fantastic thing about the EPS file type is that it can be displayed at any size and maintain the original flawless quality.

SVG

The file format SVG gives us a clear clue to it’s proper use in the name… Scalable Vector Graphics. SVG’s are an XLM-based markup language that describes two-dimensional graphics. It’s been said that ‘SVG is, essentially, to graphics what HTML is to text.‘ SVG files can even be edited in both design software or text editors! And, just like the name suggests, SVG’s can be resized to any size without losing any of their quality.

AI 

The AI file type, or Adobe Illustrator file, is much like the PSD file type in that it allows you to keep multiple layers, tags and data so that you can edit the file in the programme at a later date. A top tip from us? Always remember to save your AI file (even before you’re finished with your vector graphic) so that you have a reference you can go back to later should you need any changes. So regardless of whichever way you choose to export your work, keeping a working file like an AI file type will give you the power to make changes whenever you need down the road.

 

We hope you’ve found this guide to file types useful and that it helps you to make your graphic design even more impactful. For more articles like this one, take a look at the Design Cloud blog! Plus, if you’re ready to hand over your graphic design to the team at Design Cloud for a flat rate monthly fee on one of our unlimited graphic design plans, just get in touch today.