Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Two Methods for the Web
To shape bullets or button images for the Web, you will probably want to use a process that is similar to that suggested in the simple method for print: Delete the outer portion of the image. Once this is done, there are two choices: to use no transparency and have the background you deleted match the color of the background of the page, or to use transparent GIF properties.
Mimicking Transparency
Without using transparency, you need to match the area of the image that you delete to the background color of the Web page. What this does is create a situation in which the background of the page and the background of the image blend seamlessly.
The color-matching is simple to do if the background is a solid Hex color. (See Special Edition Using Adobe Photoshop 6, pages 563-566, for more on Hex colors.) Just select the background color in the background swatch, load the selection, invert it, and delete. This process fills the background with the same color as the background of the page. All you need to do from there is to remove the alpha channel, and save the image as a GIF or JPEG file.
This method is very good for use with blends and drop shadows because it doesn't cut them off—as long as you create the drop shadow in the image with the background color of the image to be the same as the background of the page. You also have the advantage of being able to save the image as a JPEG file, so there can be better color retention. JPEG files do not actually support transparency, so this method is as close as you can get.
WARNING
Be careful when selecting a level of compression because JPG is a lossy compression (that is, the image will degrade more with more compression).
Using Transparency Properties
The second method really follows the same procedure as the first, but you go one step further. When saving the image, export as a GIF89a file, which allows you to choose a color (or colors) from the image to use as transparency colors. In other words, the colors will be in the image, but the browser will see through those colors you select as if they weren't there.
NOTE
To use this method, you have to convert the image to Indexed Color mode prior to attempting the export.
When you go to export the GIF (choose File, Export, Gif89a Export…), you get a palette that allows you to choose whatever colors you want to use as the transparency colors (see Figure 3). Simply choose the colors from the available palette by clicking on the colors at the bottom of the dialog box. To see what this will look like on the Web page, change the transparency color to the background color of the page (double-click the swatch after choosing your first transparent color to change the transparency color).
){kind=link}
The GIF89a export dialog box allows you to select colors to use for transparency before the image is saved.
NOTE
You may need to load the GIF89a Export plug-in from the Photoshop installation disk. It is located in the Photoshop installation disk (Goodies, Optional Plug-ins, Photoshop Only, Export). Just copy the plug-in to the Plugins folder in the Photoshop home directory.