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:
Original logo

Zoomed in to show JPEG artifacts and fixed anti-aliassing to the white background:
Original logo, enlarged

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:
Photoshop layer palette with logo

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:
Adding a Layer Mask in Photoshop

Step 3 – Edit the Mask

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

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

The image should be greyscale, looking like this:
Layer Mask preview

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:
Adjusting curves to improve Layer Mask contrast

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:
Adjusting contrast on the graduation

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:
Layer palette showing mask and preview

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

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:
Select the name in the logo

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:
Name, after colouring in

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:
Graduation, after colouring in

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:
The final PNG

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!

Share and Enjoy

  • Digg
  • TwitThis
  • LinkedIn
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Ping.fm
  • Slashdot
  • email
  • Print
  • PDF

Leave a Reply