Photoshop Tutorial

Blending the Edges for Transparent Images

In this tutorial you will learn how to use Photoshop to get rid of jagged transparent GIF image edges. This takes some time so, if you don't have any, I have included a quick and easy way to get similar results at the bottom.

Here is the image on a tiled background with jagged white images.

Here is what it will look like when you are done.

This all depends on the existing background color of your image. Most logos, or artwork from companies come with white and black versions.

This tutorial covers how to work with an image that has a white background.

This is the original graphic.

The background image is.

1. In order for the new border to blend into the background tiled image you need to find the color that is the average of the background image. This can be done by applying the Gaussian blur in the filters menu in Photoshop. This tool has 1 option, set it to 50% and apply 3 times to the image. Then use the color picker to select this image.
2. Convert you existing image to RGB if not already done. Duplicate the layer twice. This will give you 3 layers total. Make your bottom layer the background and use EDIT>>FILL>>Foreground color.
3. Since this logo is not just black and white we will have a few extra steps.
4. Use your selection tool and magic wand set to anti-alias, 2 colors to select all the black text. It is ok to have white in your selection just make sure the color parts of your image are not selected.
5. On your second layer, click delete to get rid of the text from one layer.
6. 
   Use SELECT>>INVERSE to reverse the selection. Switch to your top layer, and hit delete.
7. With your top layer selected, this is the layer with the blue colored bar, select "Color" from the layer blending drop down menu. Play around with these options, other blending methods may work better with your background/image color combination.
   
   Your edges will blend in with the gray, the white will seem to become transparent.
8. The process is similar with the layer that has the black text but here we can use a different layer blending option. Here we nee to select the multiply setting. This will keep the gray background color and the black of the text but the white (and the edges) will blend into the gray.
9. After both layer blending option shave been set your image should look like this.
   
10. At this step you can crop your image to size and flatten it.

    Convert to Indexed Colors from Image>>Mode>>Indexed Color..

    If using Photoshop 5 use Export>>GIF 89a Export.. Select the gray background color to be transparent than save the file.

    If using Photoshop 6 follow the usual steps to make your image transparent.

    Save as a GIF.

    You are done.

The quick and easy way.

1. Start with same process as before. Step 1 from above.
2. Select the background average color you created.
3. Select your pain bucket tool from the toolbar.
   
4. Make sure your image is in RGB mode.
5. Then just fill in the white areas with the background color until there is no white edges left.
   
6. Convert the image back to Indexed Color as described above.
7. Make the gray transparent and save.