Having your logo sit on a website colored background (or a photograph) is relatively easy, as long as you have access to the correct formats.

A lot of our technical posts have to do with clients and their own publishing efforts – answers to “what file do I use for..” sort of questions – be it for websites, self-published brochures or manuals, as well as the issues they frequently run into. One of the most common questions we get at the studio involves transparent backgrounds – when logos can “sit” on color fields or photographs and allow the color field or photograph to show through where the logo isn’t. We’ve touched on this before, but there’s been a recent uptick in inquires, so probably time to revisit this concept in layperson terms, and take a look at some of the issues involved. Here’s ultimately what we’re after:logo-icon-on-transparent-backgroundThe pink X represents the image, or bounding box – the minimum image area that your logo needs to “sit in.” Wherever there’s a “hole” in the logo – think of them as doughnut holes if you will – the background it’s sitting on will “peek” through. Simple stuff.

Your logo assets.

For all of this to work, this post assumes you have your logo in all the correct formats.eps, .ai or .pdf (print,) as well as .jpg and .png (web & electronic.) We’re also going to have to differentiate between the media you want to use your logo in – be it headed for real world printing or to be featured on electronic screens such as websites. It also presupposes you have at least a passing knowledge of these design formats (if you don’t currently have your logo setup in this fashion, our logo repair service can help.) We’re going to use a couple of recent projects from the shop to illustrate what we’re talking about.

Transparent backgrounds in various formats.

Technically speaking, there are several file formats that can have your logo sitting on a transparent – clear or neutral – background. Vector logo formats – .eps, .ai & .pdf – have this feature by default (unless your logo is sitting on a colored box in the file.) In terms of raster (bitmap) formats for websites – .jpg, .png, .bmp (we’re going to ignore.gifs as they’ve been largely rendered obsolete by the superior .png) only .pngs can feature alpha channel transparency (alpha channel transparency means the entire image sits on a transparent image box where index color transparency means that one color has been turned off.)

What if you only have a .jpg of your logo?

Whether it’s from business owners cobbling together their own logos, ready-made logo services that don’t supply vectors or designers that haven’t delivered them, we get a lot of inquiries about “turning” .jpg logo art with backgrounds, into anything that doesn’t have one, usually for use on a webpage. We’re also asked if there isn’t an automated (see cheap & fast) way to do this without having to create new logo assets from scratch. In absolute terms there is – we can take a .jpg file of a logo and simply export or “save as” into a .png format. But first, we have to REMOVE the background from the image and we can try doing that automatically with software – Photoshop is the industry standard for such things but we also use Fireworks – and a tool called the “wand”, a feature that allows designers to quickly select large areas of the same color using a cursor. Let’s take a .jpg version of our logo which looks something like this:logo-white-backgroundWe can then use our software to “wand” the white background to select it, resulting in a dotted selection mask that looks similar to marching ants:selecting-background-with-wandWe can simply delete (or “cut”) the background out, leaving the logo sitting on a transparent background like so:deleting-background-with-wandWe can “save as” or export that artwork as a .png with transparency turned on and Bob, as they say, is your Uncle, right? Well, not exactly. When we drop that version of the art onto a colored background, here’s the mess we end up with:transparency-with-deleted-backgroundOh dear. Here’s what’s happened: the software tried like hell to remove the background, but gets confused at the edges of art where it tries to figure out where it ends and the background starts. This has to do with something called aliasing – the jagged, or saw-toothed appearance of the pixels that make up curved or diagonal lines on a monitor (if your logo is perfectly perpendicular and horizontal you’ll have much better results, but truth to tell, few logos are structured in this way.) The software also didn’t auto-select the various bits and pieces inside the letters (those have to be selected by hand – usually by holding down the shift key while using the wand tool.) Should probably point out here that it’s quite possible for .pngs to have backgrounds too – unless the background was transparent to begin with and it was exported with the transparency feature turned on – and the exact same thing will happen if we try to remove the background in this manner. Generally speaking and for optimum professional results, we need to start off with a vector version of your logo and export it as a PNG on a pristine transparent background.

Specialty formats for various uses.

In many cases, a straight conversion from vector to transparent .png is fine but there are times when a few design tweaks are going to improve results. Let’s use this recent logo repair & cleanup example to see what’s what:repaired-logo-exampleOn the left is the low resolution .jpg version of the design as supplied by the client. On the right is how the vector version looks, once we’d cleaned it up, added pristine fonts and changed the colors to Pantone friendly. As we’ve already noted, vector versions of any logo can have transparent backgrounds in their native form, so exporting .pngs with clear backgrounds is a snap. Like so:
transparent-logos-chart1It’s adequate sure, but the world map in the tank is getting a little lost on the black background and the grey type is starting to fade a bit. As we have access to vector versions of the design, we can quickly change colors and add elements to create a version of the logo specifically for dark backgrounds. In this case it means adding a white mask to the interior of the scuba tank and changing the “members” type to white. Like so:
transparent-logos-chart2Now that’s more like it. Keep in mind that these little tweaks add to number of your brand asset files and the management of same, so keeping file names as descriptive as possible is critical. Let’s take another look at the Walther’s logo we were working with earlier. We already have a transparent .png to play with, but what about the entire logo on a black background? Simple. We go back to our vector version, change some bits and pieces to white, export new .pngs and we’re off to the races. Like so:logo-white-text-modification-transparentAs we did with our earlier version, we can tweak the version for dark backgrounds even further, filling in the W in the icon and the ampersand in the tagline with white:logo-white-element-modification-transparentThis is all relatively easy to do as long as there are vector versions of your logo available (if you don’t have any – and pardon the shameless plug – we can alwayscreate some for you.)

Exceptions to the rules.

There are some exceptions to what you’ve just read (there always are) and these come into play if your logo features a trailing gradient that blends into nothingness. This is an example of what we’re talking about.gradient-on-transparency-logoSetting up a logo like this properly involves a few steps that would require an entire post of their own but luckily, we got you covered, with this tutorial on using transparent gradients in logos. Worth a looksee if you’re a designer and into such things.