Podcast: Play in new window
Transparency aka mask, clipping path or Alpha Channel are all ways to describing a way that allows an images to have appear on top of a background.
dropping an image onto a page will more often then not place the graphic in the middle of a white or black box. this usually doesn’t help you as you want it to merge into the background so text or other objects can flow around it’s edges. this could be for your logo, an object, text or photograph where you just want the object and nothing else. fortunately, there are lots of ways toadd transparency to any image.
here is an example of an image that has a Alpha Channel. it allows the character to be on top of any background. you don’t have to do anything to make that happen if the software you are using supports the format. in this specific case the file has been saved as a PNG. this format is one of several that supports alphas. if the software doesn’t support it then the image will still appear in the dimensions of the image.
if you search for “background remove tool mac” or background remove tool windows” you will either find very few solutions or lots and lots of solutions. part of this is because Mac users are generally graphic artists or designers that know without thinking how to use Photoshop to get this job done. on Windows side of things PowerPoint is the reason why there are so many solutions for knocking out the specifics.
the cool thing about the techniques that we talk about in the podcast and also list here is that it works everywhere. you don’t have to be on a Mac or using Windows. the techniques apply for photographs, 3D, filmmaking, game creation, print no matter what kind of tools you are running or OS you use. the show is slightly partial to Mac but that’s because of where it was originally going to run.
transparency’s technical term is Alpha Channel. it’s just another layer on your image. the layer is usually invisible to you and it can be ignored by your software if Alpha Channels are not supported. an Alpha defines the edges of your art. it tells the app what can show through even if it’s an area in the middle of the image. Alpha Channels can do other tricks as well. the best part is that once you have one it’s usually automatic to use where ever your image ends up.
there is one very simple rule about transparency as defined by Alpha. and that is
Black shows Through
the easiest (and possibly worst) way to make Transparency is to use the Magic Wand tool in Photoshop. it’s problem is that it makes a gross selection based on how similar colors are to each other. it can work well enough when there is a very hight contrast between the background and object. the problem is that lots of detail can be lost in the select because of subtlety. the Magic Wand will cut off hair leaving what looks like a hair helmet. here’s are the steps:
- open Photoshop
- make your image a layer and not a background by double clicking the layer in the palette.
- select the background using the Magic Wand tweeking the Tolerance
- delete selection
- note the checker board
- save as PSD
- import into another app
it’s pretty easy to make “make a mask” using Photoshop. the idea is that you can capture all the subtle details using a check list of steps. the thing is these steps are not obvious. and it requires some practice to get really great results every time. here are the steps more or less that you will DIY a channel mask:
- pick the most contrasted channel
- could be R, G or B but most likely is, umm, R G or B
- depends on what colors are in the object
- duplicate it
- get rid of the noise around the object
- now make a selection
- invert it
- shrink by 20-30 pixels
- make it black
- use levels to bring up the rest to black
- use the burn tool to bring up the fine details
modern software has “smart” tools built-in to help you remove the background from an image. Photoshop Elements has a Magic Eraser. it works remarkably well but problem is that it’s not awesome. Photoshop Magnetic Lasso needs doesn’t like dark and dark. the Pen tool in Photoshop is an exercise in tedium. the CS4 Masks Panel is Magic Eraser plus plus.
and then there are more than a few plug-ins that help you remove backgrounds. these tools can do a remarkable job in a short time. don’t let the price be a factor in making a selection. the time savings of doing using it compared to doing it manually may totally offset the cost.
Color on computers have always been limited by memory and the displays themselves. B&W by comparison is really easy and cheap. a raster display has a limited number of lines vertically that contain a few hundred bits of data. all the bits or rather dots drawn on the screen every 1/30th to 1/60th of a second. in the case of an Apple II it could draw 280×192 which translates into an 8K memory footprint.
the problem was there were only a few colors that they Apple II could display in this mode. there were 6 total. Woz tricked NTSC to display them using these rules. any pixel could be black or white. odd coordinates could be green or blue. even coordinates could be violet or blue. drawing green next to blue would change the color to orange. meaning this is “not really any bit graphics”!
the Apple II GS took advantage of a more modern display. which allowed it to, in addition to supporting all graphics modes of previous Apple II models, display 4096 possible colors. this is a 12-bit palette. this was a big big improvement over what the IBM PC had with it’s CGA dislays. CGA used NTSC tricks to get more colors. but CGA color text sucked. it flashed when it redrew.
the Mac II (and somewhat later on other PCs) was the beginning of modern graphics on computers. when the Mac II came onto the scene only 8 bit color was supported at first because of limitations with the video card speed and limited memory. two years later Apple released 32 bit QuickDraw that supported 24 bit color cards. these could be very expensive costing nearly the price of what the Mac cost. Color in QuickDraw defined the future. it supported 1, 2, 4, 8, 24, 32 bit screens.
1 bit is black and white
2 four colors
4 supports 16 colors
8 bits gets you 256 colors
16 is 16K (thousands of colors)
24 allows for full color aka Millions of colors
32 adds the alpha channel to the millions. known as Millions +
You don’t need to know this:
color is made up of three colors: red, green and blue. each channel is a 8-bit layer. if you look at the R, G or B layer it will be a gray image. combining the layers makes the color. the display using the gray layers to change the intensity of the light emitting from gun or LED.
the forth channel called Alpha is also a 8 bit gray map. it can look gray like the other layers but usually it looks distinctly BLACK and WHITE.
there are two types of Alpha channels. straight (usually from the midwest) is the type of Alpha Channel we’ve been taking about this whole time. the other type is a Pre-Multiplied alpha which takes into account the RGB channels. this type of Alpha can eliminate the “edge” you might see on on some backgrounds.
which brings up edges you might see when you drop an image on a background. there are reasons why edges appear: it’s a badly made alpha, it’s the wrong alpha, straight Alphas sometimes renders wrong. or in the case of a 1 bit alpha (aka mask like we used to make for Director) there are pixels outside of the actual image.
sometimes an image will looked “washed out” when it’s dropped in. the problem might not be evident as “it looks good in the 3D program!” most of the time when you export it will do it correctly. but in After Effects you have a choice. and if you choose wrong (aka guess) it won’t look right. for example if you need to render PreMultipled if you are making Gas Clouds.
if you are making an image with an alpha you need to save it into a image format that supports a transparency layer. lot of formats that support transparency. but what’s import is what DOESN’T: JPEG doesn’t have a clue about 8 bits of invisibility.
but no matter, because there are lots of other choices.
- PSD (photoshop)
- note that Keynote can deal with this format for the most part.
- Photoshop PDF
of all of those choices PNG is your format of choice for multimedia delivery. PNG is supported by “the web” so you can use it in your web pages without fear of it looking wrong.
if you have to support older browsers you have to use “fake channels” to get a knocked out background. the venerable GIF (pronounced GIF as in GIFT) lets you define a color that is trasnparent.
for Quicktime Movies only a few CODECS support saving an Alpha channel! Animation and PNG both support color space of Millions of Colors +. to this day none of the play back CODECS support alphas.
[ad#720 bottom banner]