logos-on-clear-backgrounds

Almost every logo will eventually end up on a background of some sort. Whether that background shows through a transparent image or the logo sits in a solid box comes down to format and how the logo is set up. We’ll also discuss doughnut holes.

We get asked a lot of questions when it comes to using logos on various things, but this one –

“When I put my logo on my website, it’s in a white box. How do I make it clear and the background show through?”

would certainly rank in the top ten. So much so, we figured it was time to put together a blog post on logos, backgrounds and those pesky white boxes that everyone wants to get rid of. The following presupposes you have a basic grasp of the difference between vector images and raster/bitmap images. It wouldn’t hurt if you also understood the differences between JPG and PNG formats either (for detailed information, see our client guide to file formats.)

Ready? Let’s have at it.

Backgrounds on web images.

Whenever you use a logo image on a website, it will almost always be in a raster format – either a PNG or a JPG (there’s another format, SVG, that’s just starting to reach widespread adaption, but we’ll leave that for another time.) Which one of those formats you use will determine how your logo image plays together with the background it’s sitting on. Both images have what we refer to as a “bounding box” – that’s the rectangle that is required for your logo to sit in. Here’s what that looks like:jpg-logo-bounding-boxThe takeaway on this is simple: if your image is a JPG format, it sits on a SOLID background – the format doesn’t support transparent backgrounds at all. What this means is that if your logo is to sit on a colored background, the background color of your logo image has to match exactly, otherwise we’re going to have a ghastly white box around your image. Like so:jpg-logo-image-on-colored-backgroundThe drawback to this approach is you’d need a version of your logo with a background color that matches ALL the permutations of every background you plan to have it sit on, a digital asset management nightmare if there ever was one. It also wouldn’t solve the issue if the background wasn’t a solid color – say a photograph or a texture – and lining that up in both the background and logo image would be, for all practical applications, impossible. Luckily enough, we have another format that’s better suited for these uses: a PNG. This format supports alpha channel transparency – that is, the logo image can sit on top of a transparent (or clear) background, and whatever background it’s sitting on can show through the empty space. That would look something like this:png-transparent-backgroundWhen you place this image format on any colored background, including photos and textures, the background will show through without any issue at all.png-transparent-photo-backgroundThere are some exceptions to this straightforward approach – when there’s a blend or gradient in your logo that “trails” off to nothingness (see below) but with an additional step we can compensate for that too.FCS-panther-logo-full-colorOne mistake people often make – even experienced designers who should know better – is in using the “wand” function on design software like Photoshop, to auto-select, “blow out” (delete) the background of a logo image and then “save as” the result to a PNG format with the transparent background turned on. That’s a slap-dash technique at best, and often results in a pixel ‘halo’ around the artwork when the software tries to “guess” where the active image ends and the background begins:wand-removal-of-backgroundTrouble is, the smaller the image is, the more noticeable the halo can be, so this produces pretty crummy images for web headers and the like. It is always, always, always advisable to return to your source vector file and create a pristine PNG on a transparent background right off-the-hop. If I’ve said it once, I’ve said it a thousand times – if you don’t have a vector version of your logo, get one made, if only for this purpose alone.

Compound paths, the doughnut holes of logos.

The previous couple of paragraphs are the brass tacks version of this treatise and suitable for about 90% of logo applications on websites and what have you. There are, however, some issues that are often overlooked in the production of “out of the can” PNG images from original source vector files. This involves something known as compound paths and is is a little more advanced than what we’ve already covered. For the sake of this exercise, we’re going to think of compound paths as “doughnut holes” – bits and pieces INSIDE your logo that allows the background it’s sitting on to show through (a strange metaphor to be sure, but the most apropos one I could come up with.) We’re going to use another recent logo from the shop to illustrate the concept.logo-design-image-fileAt their heart, all logo design files (if prepped properly) are vector objects. We cover vectors more fully here, but in essence they’re a bunch of point-to-point polygons that sit on top of each other.logo-design-vector-fileThe exception to that rule is when there’s a “compound path” in the logo – that’s a “hole” in the artwork that allows the background to show through. Think of a doughnut hole and you kinda get the idea (many logos have them in the typography portion – A, B, D, O, P are letters that often feature this “doughnut hole” already.) Accordingly, when we place a transparent PNG of our logo on a yellow background, here’s what we end up with:logo-on-colored-backgroundThat’s all fine and dandy – the compound path “hole” is in the ‘A’ just like it should be. But what if we wanted the background to show through where the ‘Tau’ symbol (the six Ts) is. Not a problem, we simply cut a hole out of the base artwork using the “trim” tool in Illustrator.logo-background-showing-through-selected-logo-areasWhen we create our PNG version from this vector, the transparency of the file also extends to the Tau symbol and when we place the image on a colored background, it’ll show through there too. Like so:background-showing-through-portions-of-logoAs you can see, by getting a little creative in where we cut our “doughnut holes” we can do all sorts of decent things with a logo, particularly when it comes to use on a website. Keep this in mind – playing around with files like this creates a lot of assets, so careful and descriptive naming of those files is really, really important.