Transparent GIFs in Photoshop

By Nick Ustinov

This is a very simple way of achieving transparency for GIF images for Web pages.

When opening a new image check transparent background (not white or background color).

Create your image. Sometimes it's helpful to add a layer of color as a "stand in background" so you can see what your image looks like against the color you will use. (In this case "pink")

Once you have created your image, delete or turn off your "stand in layer" so that the image itself is sitting on the gray and white checks (e.g. the transparent background).

Goto: File/Export/Gif89a

Click on the grey Transparency Index Color box (the square) - this will bring up your color picker. Select the color of your background, or in the case of a textured/patterned background the prominant color, and click OK.

Set pallete to ADAPTIVE. Preview the image using the least number of colors as looks good. Generally an image looks just as good at 128 as it does at 255 and this will decrease the file size.

Preview your image again. If satisfied with it, save it.

This article first appeared in November 1998.

Contact the WebDeveloper.com® staff

Last modified: 20

Refresh Daily
Join Editor-in-Chief David Fiedler The Editor With No Time and find truth, justice, and a clue or two.

[ Site Map ]

ActiveX / VBscript

Browsers

CGI / Perl

Database Connectivity

Design / Graphics

E-Commerce

HTML-Advanced: DHTML, CSS

HTML / Site Authoring Tools

Intranet/Groupware

Java

JavaScript

Multimedia: Audio / Video / Streaming Technologies

Refresh Daily: Editorial Column

Security

Servers & Server Tools

Site Design / Graphics

Site Management / Marketing / Log File Analysis

Tutorials

VRML / 3D

XML