Home
|
Tip o' the Week
Transparent GIFs
As we all know that the sooner your surfer sees your pics the happier he will be! One way to guarantee a faster download of images is to make the file size smaller and transparent GIFs can be a major step in the process of reducing file size.
What's a transparent GIF, you ask? A transparent GIF is an image in which one color in the image is made "clear" (aka: transparent, hence the name) so the background pattern or color of your HTML document shows through. This is especially useful when doing titles or text images where you have a lot of "blank" space surrounding an image or text that is supposed to match the background of your webpage anyway. Don't worry. This is nowhere near as difficult as it seems. It's all in a trick of Photoshop.
- First of all, make sure that what ever color you intend to make transparent is vary close to the actual color (or one of the colors) in the background of your page. This is important because in a text image, for example, the "background" of the image will get less transparent around the edges of the non-tranasparent part of the image. Photoshop does this so the image blends in smoothly with the background of your page. So, if you made an image of a ball on an orange background, saved it as a transparent gif with orange being the transparent color, and then put it on a page with a white background, you would see a faint orange fuzz all around the ball. This is not pretty, so make the background of your image as close as possible to the background of your page.
- Next, as with any image you plan on uploading to the web, change its color mode to "Indexed color." You can do this by flattening any layers you might have in your image and then going up to Image:Mode:Indexed Color. The program will then ask you to select a bit depth. Unless you have an image with over 300 colors, on a transparent gif it is pretty safe to leave it at the exact number of colors. I'll do a "Tip o' the week" bit depths in a few weeks.
- Now that you've converted your gif to Indexed color you can save it as a transparent gif. Go to File:Export:Transparent Gif. You'll get a thumbnail of your image over which your pointer will turn into the "dropper" icon. Simply click on any spot on your image that containing the color you want to make transparent and viola! everything on your image of that color will turn to gray indicating that it's now transparent. Simply, name, save and upload that baby. Your new image may be as much as half the file size of the original.
Note: Whatever color you have chosen to be transparent will be consistently so throughout the image. So, if you chose a white ball and put it on a white background, both the ball and the background will be transparent. In this case you might need to make the background just a hair darker or lighter so Photoshop recognizes it as a different indexed color.
If you have any questions feel free to e-mail me. Till next time...
Check out the awards this site has won!
|
Member of
|
