Photoshop Basics: Clipping Transparent Images

For web developers, especially in this almost-but-not-quite-post-IE6 age of universal 24-bit PNG acceptance, the one thing you’re likely to do more than any other, at least in regards to Photoshop, is to extract and save images with transparent backgrounds (AKA alpha channels). Whether you’re using GIF or PNG, there are several ways to do it, and several common issues you might have to deal with.

Quick and Easy

When you have well-constructed PSD files—with properly named and logically grouped layers, and all the elements in their own layers or layer groups—your designer has made your life a little easier. You should buy them a cookie.

The first two techniques work best with these well-made PSD files, as the first step in both is to hide any irrelevant layers. You should only see the layers for the element itself, as well as any layers that augment or affect it, such as if the element requires a separate shadow or adjustment layer.

If the element I’m working with fits the above criteria, the technique I use most often is to simply crop away everything except for the element itself. This comes in especially handy when you’ll need to alter it later. If the element is a common one that you might need to make several versions of, you could save this cropped image as a separate PSD file, and return to it later to create them. This has proven especially helpful for such things as image buttons, headers, and nav items, though I used to use it a lot more before the days of CSS @font-face declarations and open font licenses. Still, it’s a potentially handy trick to keep in mind.

The second technique is to make a selection around what you need to extract, then “copy from all layers” (Cmd-Shift-C), and paste (Cmd-v) into a new document. Using single-layer copy—regular ol’ Cmd-c—results in the loss of any layer effects.

The next technique requires a simpler element (with no cross-layer interaction) on its own layer. In this case, you may drag and drop the layer from the layer palette, or use the move tool to move the element itself, into an open document. This technique depends on which version of Photoshop you’re running, as well as on which window “layout” you’re using. For example, you can drag a layer from the palette into another window in multi-window mode, but you can’t do it in tabbed-window mode. (I’m probably not calling those by their official Photoshop names, but whatever, you get the idea.)

For these last two techniques, once the layer/element is placed in the new document, you can use one of the cropping techniques mentioned in my earlier Photoshop Basics post to trim unnecessary surrounding space.

More Difficult

If the element you need to extract isn’t itself transparent—if it’s been merged into another layer, or you’re working from a flattened file with no layers or an existing element that was saved without transparency—you have a harder row to hoe. In this case, there are two techniques I know which might help.

If you have a pre-existing non-transparent element, and it’s on a solid-color (hopefully white or black) background, you might be able to use layer blending options to selectively drop out the background color. This works best for images with limited color palettes, where there is little to none of the background color in the element itself. Black and white logos, line-art, or similar things work great with this trick.

If you’re unlucky enough to be working from something more complex, your only remaining option may be Photoshop’s powerful suite of masking tools, or, heaven forbid, the eraser tool. More recent versions of Photoshop have added some very powerful selection/masking tools, and have even added things like the “Refine Edge” tool, which help you do in minutes what previous Photoshop professionals worked hours to accomplish.

If you get to this point, and you are contemplating simply using the eraser tool to clean up an element or remove a background, please… STOP. The eraser may be fine for super-quick, one-off things, but if there’s even a remote chance you’ll have to return to the file for any reason ever again, I strongly, strongly suggest you use layer masks instead. With layer masks, you’re merely hiding parts of the image, rather than completely destroying those parts as you do with the eraser tool.

These last two cases are where you’d simply turn the file around and send it back to the designer with a slab of raw beef and a starving Rottweiler, along with a note that demands they either get you a useable PSD, or you tie the beef around their neck and let the dog loose.

The above should cover most of what you’ll see, as there’s little reason to use anything other than PNGs anymore, however…

You, Rastered!

Aliased White Matte on Black BackgroundFirst, if for some reason you’re stuck with the GIF file format—meaning a limited-palette raster image with no true alpha channel—and your designer is a masochist who likes putting complex backgrounds behind transparent elements, the key thing to remember is how your matte-color and anti-aliasing works. The big problem with transparent GIF images is fringe, which is the little “halo” around the edges of the image where it blends with the background or “matte” color. This matte color can be anything, but it has to be a solid color. If you use a transparent GIF with a white matte on a page with a black background, you’ll see the white fringe around the edge.

Gray Matte on Gradient BackgroundIn some cases, there’s just no avoiding fringe, and you may have to go back to your designer and ask them to redesign it to remove the complex background. However, if the background is a simple and subtle gradient, or if you have a complex background that is nevertheless fairly uniform in color, you might be able to get away with it.

If you know where on the gradient your image will sit, you can pick a matte color in the middle of that area of the gradient. You might get a little fringe on the top or bottom, but hopefully, if the gradient is subtle enough, it won’t really be noticeable.

Likewise, if your complex, say patterned background is fairly uniform in color, picking a happy medium between the major colors might give you fringe that is nearly undetectable.

If you find these methods helpful, or if you have your own methods of dealing with extracting transparent images from Photoshop layouts, please let us hear about it in the comments!