Making Sense of Your Brand's Logo & Identity Files
The branding process takes an extraordinary amount of time, effort, and collaboration between designer and client. But what about all those mysterious final files? Too often they're just passed on as an afterthought with little explanation of where and when to use them.
So when should you use which file type anyway? What's the difference between web and high resolution? What if you need to use your logo over a photo? What then? Well, that's exactly what I'm hear to share today. So bear with me, and I'll do my best to shed some light on all those shiny new brand assets you can't wait to use!
Organization
Odds are that your final files will come packaged in a massive zip file. Once you decompress it, hopefully there's a neatly organized little library waiting for you. Depending on your designer, the files may have a different hierarchy and structure organized by content, usage, and/or color. I vary my file structure a bit depending on how complex my client's identity system is. After all, the goal is to make it easy to find the files they need when they need them.
Creative Picnic - Final file organization
For example, my usual organization will look something like the image above. For Creative Picnic, the logo only comes in 3 colors—gold for most design needs, white for use over photography and other graphics, and black for the more official (and less fun) types of documents. For some brands, there may be more color ways in which the logo or brand files can appear, hence more files labeled accordingly and more robust organization.
To make things easier for my clients, I number my folders when I want to show a clear hierarchy (as you can see with the different logo variations above) and name my files clearly and consistently. A typical logo file name will be something like “Client-Name-primary-white.eps” which makes it easy to find the file needed and ensures that if it gets accidentally dragged somewhere else on your computer, you'll still know what it is and where it belongs.
Hierarchy
Now hopefully you've hired the right brand designer who has crafted an identity that's really easy to use and flexible for your needs. This means that you don't just have one logo. You have a whole system with variations that work best in diverse contexts. That's amazing! But which one should you use and when?
Learn where and when to use all those mysterious logo and brand identity files.
Brand Guidelines
This is where the brand guidelines your designer should have given you will come into play. The guidelines should establish the hierarchy of your identity and which graphics should be used with what frequency and in which contexts. Here's a run-down of the logo variations my clients can expect to see from me.
- Master Logo - The master logo is the one with all the things. Usually this one has additional elements like the date established, location, and/or other icons paired with the logo to make a special statement. This is your brand in all its glory, however it shouldn't be used most frequently. This type of lock-up is ideal for scenarios where it needs to make a big impression and has a decent amount of real estate to work with. Think signage, packaging, a postcard front, shopping bag, or brochure cover.
- Primary Logo - The primary logo is the MVP of your brand. It should be used most frequently, whenever space allows.
- Secondary Logo - This is the logo you'll use when the primary logo doesn't fit or feel right in a chosen context. If your primary logo is takes up more vertical real estate, maybe this one is more horizontal. This logo still feels cohesive and at home with the rest of your identity, but is used on more of an as-needed basis.
- Logotype - This term may apply to your primary and/or secondary logo, or your brand may not have one at all. Essentially “logotype” refers to a logo where the typography is the hero all on its own. Disney and Google are great examples of famous logotypes.
- Mark - The mark could be an icon/symbol that's part of the primary and/or secondary logo, or it may stand on its own as a totally separate brand element. I tend to use the mark to support the brand in places where the business name already appears (so as not to be repetitive) and/or where the full logo would be too large. Think social media avatar, website favicon, or one side of a business card. For some brands, the mark becomes a standalone element that's so strong it can stand alone and still be recognizable (Apple and Nike for instance).
- Secondary Marks - The secondary marks usually involve the mark and/or other supporting icons or text (date established, location, website, tagline, etc). These marks add an extra layer of depth to the brand, and can be implemented in interesting and fun ways throughout your swag and collateral items.
The brand guidelines should cover a host of other things as well, including your brand color palette and typography. But we'll save those topics for another day.
File Types
Now let's dig into the most common file types you'll likely encounter with your final logo and brand deliverables, and—most importantly—when to use them.
- EPS - This is a vector file, meaning its appearance is defined by a mathematical formula instead of a bunch of dots or pixels. This means that it has tremendous scalability and can be used everywhere from your business cards to a billboard while maintaining gorgeously sharp quality. EPS files are great for your print design needs, and (despite the file preview) EPS logo and brand files have a transparent background.
- JPG - This is a raster file, that's made up of tons of little dots or pixels that make up the image. JPG files with a high resolution (300 dpi AKA dots per inch) are great for print, but don't have the same scalability as vector files. Once a JPG is enlarged past its intended size, it will begin to break down and look pixelated or fuzzy (like the image below). JPG files can also be used for digital and web when saved with (RGB) and resolution (72 pixels per inch AKA ppi or 144 ppi for retina displays). JPG logo and brand files will always have a white background, which can limit their use in application.
- PNG - PNG is another type of raster file, which can only be saved in the web-ready color mode of RGB. Hence, PNG files should only be used for digital and web applications. PNG files usually have a transparent background, making them popular for use over photos, colored backgrounds, and other graphics.
Crisp vector file vs. pixelated raster file
Usage examples
Now let's take a look at some common ways you may consider using your logo and brand files, and I'll let you know which ones to use.
I need a logo file for the header of my website.
If your website header and background are white, you can use a web-resolution JPG. For colored or graphic backgrounds, use a PNG.
I want to have my logo engraved on gifts for my clients.
Anytime you're having your logo engraved or etched on anything, this will require a vector file. So send your EPS file. If you're printing your logo in color, be sure to also include the respective Pantone color (which should be included in your brand guidelines).
I need a logo file for the top of my letterhead, formatted for Microsoft Word.
A high resolution JPG is your best bet here.
I want to add my brand icons to my website.
If your website background is white, you can use web-resolution JPG files (I single these out by adding “-web” to the end of the file name or putting them in a “JPG-web” folder). For colored or graphic backgrounds, use PNG files.
I'm having my logo made into a laser-cut decal or sign.
Laser-cutting and engraving require the precision of vector files and signage requires their scalability, so go for the EPS. Be sure to include any respective Pantone colors (which should be included in your brand guidelines) if your signage will be in color.
I need to use my logo on purchase orders.
Since these are usually printed in only one color, use the black high resolution JPG file.
I'm making letterpress business cards. Which files do I use?
Letterpress, foil stamping, and other specialty print methods require the precision of vector files, so go for the EPS. Don't forget to include any respective Pantone colors (which should be included in your brand guidelines).
The logo on my website looks fuzzy on my phone and new laptop. What can I do?
This is because your phone and new monitor are retina displays, which double the amount of pixels per inch. This makes for a really crisp web experience, but will also make graphics saved at 72ppi look fuzzy.
So what can you do? If your website's on a site like Squarespace, you can hack your way around this by simply uploading a larger JPG or PNG file (essentially double the size of the original). Then you can scale it back down in your settings. However, some sites don't give you much control here so your options are limited and you'll need to consult a professional.
If you have a custom site or one where there's a developer platform to make adjustments to your site, your best bet is to hire a web designer or developer to switch your website's logo file and other fuzzy graphics to SVG files. These are vector files for web, which are not supported by a lot of plug-and-play sites outside the developer platform and require a bit of coding to implement.
I'm using my logo on a print advertisement or postcard over a photograph, so it needs a transparent background.
DO NOT USE THE PNG FILE HERE. They don't have the proper color mode for print applications (CMYK). EPS files have a transparent background too (even though the file preview doesn't show it), and will be the proper color mode for print applications like advertisements and collateral.
Happy branding!
Now that you've got all your final brand files and you know where and when to use them, you're ready to release that shiny new identity into the wild! The more you put it to work as it was meant to be used, the stronger and more recognizable your brand will become. And if you're in the market for a brand new identity that fits all the criteria above and will work wonders for your business, I know a girl you should talk to. Cheers!
