Chrome Nameplates
Example


(Mask)

Step 1 (Mask)

In Photo-Paint or any graphics program create a negative mask with the desired letters, logo, or whatever. Save this image. Note: the figures in steps 1-5 are 50% of their actual size.

(Emboss)

Step 2 (Emboss)

In Photo-Paint create a new image and flood fill with a light blue. Next load the image from Step 1 as a "Transparent Mask" and apply the filter called "The Boss" to emboss the letters as shown.

(Paint Letter Faces)

Step 3 (Paint Letter Faces)

Create an irregular mask that covers the top half of the letter faces, and flood fill the bottom half with a vertical color gradient. Invert the the irregular mask, and fill the top half with a very light blue-gray.

(Fill Background)

Step 4 (Fill Background)

Remove both the irregular and transparency masks from the previous steps and flood fill the background with a light gray. The value of this gray should be similar to the value of the background color it will eventually be viewed against. The default background color of most browsers is a 75% Gray (R=192, G=192, B=192 or "C0C0C0").

(Drop Shadow)

Step 5 (Drop Shadow)

The Photo-Paint "Magic Wand" tool is used to create another mask from the background color. This mask is then inverted to cover the letters and converted to a transparency mask for use by he "Drop Shadow" filter, which is then applied. The image is then cropped to remove any unwanted border and re-sampled by 50% to get the image to the desired size.

(Reduce Colormap)

Step 6 (Reduce Colormap)

This image was then saved in the TARGA bitmap format to transfer to PaintShopPro. I used PaintShopPro to reduce the colormap to 16 colors. There is obviously visible degradation in image quality with this tiny colormap (note the color banding). However, this reduction has several benefits. The first benefit is a smaller GIF file, which will download faster and won't tax the patience of potential viewers. Another benefit is that many people either have 8-bit display adapters which can only display 256 colors simultaneously, or keep their display adapters configured in 8-bit mode for optimum performance. In either case, large colormaps can use up available color slots very fast and result in some rather odd colors being used on the later images on a page. Some browsers can do a pretty good job dithering colors in 8-bit mode, but this feature is not universal or universally enabled when supported.

(Transparent GIF)

Step 7 (Save as a Transparent GIF)

The color index of the background color is noted. This color index is then set as the transparent color when saving the image as a 'GIF' file, giving the final result as shown.

Internet Link Exchange
Member of the Internet Link Exchange

URL: http://www.snaught.com/JimsCoolIcons/FAQ/ChromeExample
Last Modified: Aug 3, 1996

[Jim's Cool Icons]