• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 4. Creating Web Images > Creating Transparency

Creating Transparency

With Photoshop's GIF89a Export command, you can make any part of a GIF image transparent so that it blends almost seamlessly with the page. You can create your image on a transparent layer, make one or more colors transparent, or you can create an extra channel and make it transparent.

To make a layer transparent:

1.
Open an RGB image in Photoshop.

2.
Select the part of the image that you wish to export (Figure 4.36).

Figure 4.36. Select the part of the image that you wish to export as a GIF image.


3.
Choose Edit > Copy. Then choose Edit >Paste (Figure 4.37). (In Photoshop 4, choose Edit > Paste Layer.)

Figure 4.37. Choose Edit > Copy (left). Then choose Edit > Paste (right).


4.
Hide or eliminate all layers except the transparent one (Figure 4.38).

Figure 4.38. Hide all the layers except the transparent one by clicking on the eye icon to the left of the layer name. Note that transparency in Photoshop is displayed with a checkerboard (left).


5.
Continue from step 2 on page 64.

To make certain colors transparent:

1.
Create or open an indexed-color image in Photoshop.

2.
Choose File > Export > GIF89a Export.

3.
In the dialog box that appears, choose the eyedropper and click the color(s) in the image that you want to make transparent (Figure 4.39). You can also click colors in the color table below the image. Hold down Option (Mac) or Alt (Windows) as you click to restore colors to their original state.

Figure 4.39. If you export an indexed-color image, you can choose which colors should be transparent by clicking them with the eyedropper. Hold down Option (Mac) or Alt (Windows) to restore colors to their original state. (Note that the moon, because it is white like the background, is also made transparent.)


4.
The transparent areas of the image are displayed in the color shown in the Transparency Index Color box. Click in the box to change the color.

5.
Click OK and give the file a name.

Photoshop also lets you make certain areas transparent, regardless of their color. This is ideal for creating a transparent background without knocking out similar colors in the body of the image.

To make a selection transparent:

1.
Create or open an indexed-color image in Photoshop.

2.
Select the part of the image that you want to make transparent (Fig. 4.40).

Figure 4.40. Select the part of the image that you want to make transparent. In this example, the white background is selected but the white moon is not.


3.
Choose Select > Inverse (Fig. 4.41).

Figure 4.41. Choose Select > Inverse (left). Then choose Select > Save Selection.


4.
Choose Select > Save Selection (Figure 4.41).

5.
In the Save Selection dialog box that appears, choose New from the Channel menu and click OK (Figure 4.42).

Figure 4.42. In the Save Selection dialog box, choose New in the Channel menu and click OK.


6.
Deselect everything.

7.
Choose File > Export > GIF89a Export.

8.
In the dialog box that appears, choose the channel number in the Transparency From submenu (Figure 4.43). Press Option (Mac) or Alt (Windows) if you want to invert the selection.

Figure 4.43. Choose the desired channel in the Transparency From submenu. The transparent areas will be shown with the color chosen in the Transparency Index Color box. Notice that the moon will not be transparent, even though it is the same color as the rest of the transparent area (the background).


9.
Click OK and give the file a name.

Tip

Any part of an image that you mark as transparent is replaced by the color specified in the Transparency Index Color box. This is one reason it's better to use the Export option and leave the original image intact.


Tip

To ensure that anti-aliased edges look good, make sure the image's original background color (now transparent) matches the page's background color (see page 98).


  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint