masochismtango

Photoshop Tutorial: Masking Logos from the Web

// August 24th, 2009 // Creative

Often I seem to have a need for a low-res company logo that I want to use against some colour that isn’t their web site’s normal background – eg. when creating mobile interfaces:

Most companies don’t seem to give out vectors of their logos, so if you can’t find one you usually end up in Photoshop trying to cut one out – and it was never 100% obvious to me how to replace the fixed anti-aliassing with nice alpha transparency.

Aside: Powerpoint 2007 does now make a nice attempt at letting you remove picture backgrounds, but it doesn’t fix the anti-aliassing and it breaks down when it encounters JPEG artifacts.

So, finally, I decided to work out how to do it properly.

Step 1 – load the logo into a new Photoshop Document

The original logo, nabbed from the web, which was (inexplicably) a JPEG:

Zoomed in to show JPEG artifacts and fixed anti-aliassing to the white background:

Load into Photoshop, and paste into a new Photoshop document (don’t work within the original JPEG) – this is the layer palette after the import:

Step 2 – create a new Layer Mask

In the layer palette, click on the “circle inside a rectangle” icon; the layer preview should now show a second empty rectangle to the right of the logo preview itself:

Step 3 – Edit the Mask

Select all and Copy the current picture, then shift to the Channels tab:

Click on the eye icon next to the Layer Mask channel, and unselect the eye next to the RGB channel:

The image should be greyscale, looking like this:

Any pixel that is white in the layer mask will be fully opaque in the layer, anything that is black will be fully transparent, and any grey will be translucent. So, with our current mask, the white background will be visible but the logo itself will be almost transparent. Hit ctrl+I to invert the Layer Mask colours:

That’s better, but the logo will still be partially transparent. We need to boost the contrast of the mask, to make the text white on black (with a little grey anti-aliassing round the edge of the text, which will become nice transparency). Go to Edit menu > Adjust Curves:

Note that we are deliberately ‘clipping’ – forcing the grey to go fully white, by making the curve hit the top of the box. You can also clip a little on the black end (bottom left) to force JPEG artefacts on the background to disappear (not shown here).
The text now looks good, but the graduation on the right is not so nice – we need to boost the contrast else it’ll disappear completely. Select just that part with the lassoo tool and then Edit > Adjust Contrast:

Step 4 – Remove the Old Anti-Aliassing

We now have a logo with a properly transparent background – to see it, reselect the RGB channel and unselect the Layer Mask channel. You should switch back to the Layers tab and select the actual left-hand layer preview – instead of the right-hand mask preview – now:

Zoom in a bit for the next stage – the image should look like this:

The anti-aliassing is now using alpha blending, but the pixels being blended are still much lighter than the logo itself – so it will still not work properly against different background colours. This is now easily fixed though – select the name like so:

Then select the text colour, choose a large flat paintbrush, and paint over the whole logo. The edges should darken to the text colour, like this:

The name will now blend properly, look a little crisper around the edges, and we have also painted over all the JPEG artefacts to create solid colour – bonus! Next we do the same to the graduation on the right:

Step 5 – Export as PNG-24

We now have a crisper cleaner version of the logo. All that remains is to export in a useful format which will actually preserve that alpha blending – which has to be PNG-24. File menu > Save For Web > PNG-24, with transparency. Voila:

For most of my day-to-day purposes, this is “good enough” – though obviously for full high resolution print work, you’re going to have to hassle their marketing department for a vector!