Logo File Formats - what they are and why you need them!

When you hire a designer to create your logo you'll receive a few file formats to ensure you have the highest quality version for any visual communication needs in the future.

I'll cover all the file formats you should receive when your logo design is complete, they all have different purposes to achieve a high quality finish no matter what's being produced. Depending on whether it's required for print or web, file size needing to be low for fast uploading or to appear on clothing, there are a variety of file formats that are more suitable for reproduction. Let's break it down:


Print file formats

Printing needs a CMYK format, this is the ink breakdown (Cyan, Magenta, Yellow & Key, or Black) and the colours are mixed, much like paint is

  • .ai (Adobe Illustrator raw file format)

  • .eps (Encapsulated PostScript)

  • .pdf (Portable Document Format)

  • .svg (Scalable Vector Graphic)

These are all vector files, meaning they are scalable without any loss in quality. They are created using a mathematical format utilising points on a grid. These are the highest quality file formats and because of that, they're too large for the web. .ai Cannot be opened unless you have Adobe Illustrator but some programmes are able to open .eps files. .pdf Files are a good way to send logo files to printers, allows printers to open the file if they don't have the latest version of Adobe Illustrator.


Web/digital file formats

Website and screen (digital) formats need RGB, low res but high quality files. RGB (Red, Green & Blue) are made up of light, this can sometimes cause a surprise when you see a logo on a screen compared to a printed piece of literature – you're comparing light to paint and there's a lot that can change the look of ink even down to the paper used and the finish (glossy, matt, etc.). You can achieve a high level of vibrancy when using light so unless you're wiling to pay extra for a guaranteed finish (by assigning a Pantone Colour) then there's an acceptable amount of compromise between screen and the page

  • .jpg / .jpeg (created by the Joint Photographic Experts Group but has been shortened by removing 'experts' in the extension)

  • .png (Portable Network Graphics)

  • .gif (Graphics Interchange Format)

Apart from the .gif, which is a bitmap raster format, these are all raster files, this mainly means that because they're made up of coloured squares, pixels, there is a loss in quality when resizing. These are normally used for web design, except for .jpg which is great for keeping file sizes low by converting a layered Photoshop file into a flattened .jpg. So let's look at the variety between the uses of the files:


Differences

  • .ai

  • CMYK | Single Colour | Reversed for a dark background

  • Single colour - white - black

  • Transparent background

  • Useful for print

  • can be scaled to any size without any loss in quality, from stamp size all the way up to on the side of a bus

  • I recommend that the designer keeps a version with any text being saved as a font but supply a version where the text has been 'outlined' for the client or printer. This will avoid the text shifting and moving if the font file is slightly different from one computer to the next

  • Highest quality

  • Can only be opened if you have Adobe Illustrator and it's the same version as the one saved

  • .eps

  • CMYK | Single Colour | Reversed for a dark background

  • The original high quality file format, now that the raw Adobe Illustrator has been developed either file is widely accepted by printers and other service providers. The only notable difference is that a .eps is an open-source file format which means you can open in in more programmes other than just Adobe Illustrator, for this reason you should get both formats

  • Again, this is a vector format which makes it scalable with zero loss in quality

  • .pdf

  • CMYK | Single Colour | Reversed for a dark background

  • This is optional and useful in sending to suppliers so it can be opened and editable but only when saving a .pdf from an Adobe Illustrator file

  • .pdf Is normally a final file prepared for print, a completed piece of artwork that has the logo embedded but it can be a logo saved if helpful for a printer or other service provider

  • .svg

  • CMYK | RGB | Single Colour

  • Transparent background

  • Like a .gif this format can have animation applied

  • You may need HTML5 skills when it comes to editing and adding animation features

  • The file is based on XML, which means all the info regarding the image’s color, shape, lines, curves, and text is stored in the readable text files, useful for web developers

  • The image can be modified any way and it won’t lose the initial quality

  • Can be opened in many programmes, even in a web browser

  • You can edit the file, add animation and other effects using the CSS or Javascript

  • Improves your website’s Google (and other search engines) image search results due to embedded text (code)

  • Low file size (quick to upload on a web page), very high quality

  • .jpg

  • CMYK | RGB | Single Colour (not a white logo because it will be flattened)

  • Used as a flattened logo, unless you have a coloured background, the background will be white

  • Great for keeping a file size small but if you save the same file over and over there will be a loss in quality. It's barely noticeable but worth bearing in mind when you resize to a specific set of pixel dimensions

  • .png

  • RGB | Single Colour

  • Transparent background

  • Good for logos utilising gradients, shadows and detail but the file size is usually higher because of this, may take longer to upload on a web page

  • .gif

  • RGB | Single colour

  • Flattened file format, white background

  • Should only be used for very simple, graphic logos

  • You logo can also be animated with this format - animated gifs are a unique way to show your logo with very simple animation


If you want to read up further on file formats, click on the following links:

15 Things You Must Know About Logo File Types

What is a Vector File

Design Tips: What is SVG file and how to use it?




If you would like to discuss having a logo designed, feel free to email me at caroline@mysteryhare.com or call me on 07525246734



ILLUSTRATION    |    GRAPHIC DESIGN    |    ABOUT   |    BLOG    |    CONTACT   |    TERMS & CONDITIONS   |    FAQs   |    THE PROCESS

© 2020 Mystery Hare   |   Website designed by Mystery Hare with Wix