How to Create Transparent Background Images for the

Internet Using Adobe Photoshop

What Is a Transparent Background?

• A transparent background simply means that you cannot see the background color of the image in your browser. There is a background color but it isn't visible on the web page. The background color of the web page simply replaces the background color of the image.

Example of a Transparent Image

The Toolbar• The marquee tools let

you select rectangles and ellipses.

• The lasso and polygonal lasso tools let you draw both straight-edged and freehand segments of a selection border. With the magnetic lasso tool the border snaps to the edges of defined areas in the image.

The Toolbar Cont.• The magic wand tool lets

you select a consistently colored area without having to trace its outline.

• To change between the different lasso and marquee types, click and hold the mouse over the appropriate icon. Select the tool you want and release the mouse button.

Selecting the Areas to Be Made Transparent

• Select the area(s) that you want to make transparent. If you are using the lasso tools, you must double click the mouse when you are done tracing the image.

Guide to Making the Selection• You can add to a selection by holding the shift key

down and clicking the area you want to add. Also you can subtract an area from a selection by holding down the alt key and clicking the areas you want to subtract. By holding down the ctrl key you can select an area intersected by other selections.

• If you are using the magnetic lasso, make sure to click the mouse multiple times while tracing the image to set points, especially around corners.

Exporting the Images for the Web

• Select the areas you want to make transparent.

• Under the help menu, click on export transparent image wizard.

Exporting the Image Cont.

• Click on I have selected the are to be made transparent, then click on next.

Image Export Wizard• Click on online, then next.• There are two option for the image format.

PNG format is sharper and smoother than the GIF format, but it may not work in older browsers.

Image Export Wizard• Select interlaced to create an image that

displays as low-resolution versions in a browser while the full image file is downloading. Interlacing can make downloading time seem shorter and assures viewers that downloading is in progress

Other Useful Tools

• Under the edit menu there is an undo option.

• Use zoom to make a selection easier.

• Use erase to erase certain areas that you do not want.

Things to Remember

• If possible, the image background should be a single color for easier selection.

• The color designated for the background should not be used elsewhere in the image or used extensively elsewhere in the image.

• Photographs do not work well as transparent images since it is hard to define a single color.

For More Help

• Photoshop has an extensive help menu.• There are numerous books available in the

library and bookstores.• Some schools offer classes in Photoshop.