Branding 101: Your Digital Design Cheat Sheet

May 01, 2015


Designing a logo is a wonderful process. It gets you to really think deeply about your business, and truly understand what it is that makes it special. Sometimes it takes days, sometimes it takes less than 10 minutes. But regardless of the time you spent designing your logo, the final step you make is only really your first.

A logo is the most important tool in your brand toolbox – but like any other tool, it requires some understanding of how to properly use it. Going to printers, uploading the assets to Facebook, dealing with all those different file types – this can be frustrating without some basic terminology. How do you get the right shade of red printed out? What size do you need to so that it looks good on Facebook? Luckily for you, we’re here to help.

So, you want a specific shade of red, but the print shop shade is much different. Are they asking you to give them HEX/RGB codes, or provide more specifics? How do you see eye to eye with them?

A Hex(idecimal) color code, also known as a hex triplet, is a six-digit representation of a single color. Hex codes are the dominant form in which colors are defined and displayed on the web. To find the perfect Hex for your logo, just use COLOURlovers’ free online search tool.

RGB is another color model in which red, green, and blue are added together to produce other colors. The amount of color variations are endless, and each color is produced through mixing different amounts of R, G, and B – just like in the good old days. To find and choose the specific RGB you like, you can again use COLOURlovers’ free online search tool.

You’ve enlarged your business card’s logo to put on your brochure, but it doesn’t look good. Instead of seeing crisp, clean lines – you see blurry squares.

The fix here is simple: you need a vector file! This will solve all your resizing problems for good.

The two types of computer image are raster and vector. Most images file formats (.jpg, .png, .tif) are rasters: they’re made up of pixels – or those little blocks Space Invaders are made of – to form a complete image. Viewed at smaller sizes, this is fine, but it’s when rasters are magnified that you start seeing the little squares they’re made of. This looks unprofessional and risks changing the meaning of the image when it’s expanded and printed in a format that’s too large.

Vectors, on the other hand, are constructed through mathematical formulas. Unlike raster images, which come with a fixed amount of pixels, vectors are scalable. They’ll adjust as the image enlarges or shrinks, without losing image quality. Essentially, you get the versatility while maintaining your image’s integrity! Our favorite kind of vector file type is .eps because it works with a lot of programs, but .ai and .pdf also come in vector formats as well.

You probably aren’t going for a company logo that looks like this:

8-bit video game logo example

Example of a pixelated image

It’s especially important that a company logo be a vector file, so it can look good anywhere, at any size.

That said, you don’t always need to use a vector. While any designer would strongly recommend using vectors for master files (the files you copy and derive all your other images from) – the high quality of vectors can mean slower loading time for webpages. Webpages are generally shown on screens of small surface area, so there’s less of a need to magnify something. That’s why .jpg and .png files are best for webpages – they don’t even have to be 300 dpi!

DPI? What’s that?

Has a printing service ever sent your files back because they needed to be in 300 dpi for print? “But it looks good on my computer!” you think, “So what’s the problem?”

DPI stands for dots per inch (sometimes you’ll also see PPI, or pixels per inch). DPI is preceded by a number that indicates how many pixels are in one inch of your image. 72 dpi is enough for images that look good on websites; the small size of a screen will ensure that the image looks clear, and the lower resolution will mean faster loading time than a 300 dpi file will bring. 300 dpi images are recommended for print (on things like brochures and flyers – billboards and large posters should go with vectors!). 300 dpi should be used for print because printed matter shows more detail than electronic screens,and of course loading time isn’t a factor for printed things. Loading time is really important for webpages so people don’t get frustrated with your site, leave, and don’t come back. You may have noticed that an image you upload to Facebook looks less sharp than the original file; it’s because they’re lowering the resolution to keep load times short. Remember, you don’t need to upload a file that’s 3000 pixels wide and 3000 pixels tall for a Facebook profile picture!

And what might be the good dimensions for profile pictures?

Different social networks have different guidelines regarding image sizes. There are a lot of guides about what measurements you should use floating around on the web. We like this one from Sprout Social.

How do I find out what the measurements of my image are?

If you’re using a Mac, load the image in Preview, then click Tools, then click Show Inspector. This will tell you how many pixels wide and how many pixels tall your image is, as well as your dpi. If you’re on a PC, right-click on the image, then select Properties, and then Details.

Now you’re all set to put your best foot forward with your company’s logo in print, or digital!