Reviews, updates and in depth guides to your favourite mobile games - AppGamer.com
|
Tutorials
Exporting transparent images using Gif89...
Oct 18th 2005
|
Exporting transparent images using Gif89:
|
|
1.
The first step is to create your image. If you plan on using a dark background on
your webpage use a dark background in your Photoshop background layer.
For a light background use a light color in Photoshop. If you can do an
exact match of your web page background that is the best way. |
|
2.
Once you have your image all set up and finished in Photoshop there are a number of things you can do. In this tutorial we will cover one of the most common techniques. Go to your menu and select Image/Mode/Indexed Color. You will get a prompt asking you if it is ok to flatten the image and discard the hidden layers. So once you get to this step your image must be final. It is sometimes best to save a copy of your image before proceeding with this step in case you want to make changes later on. That way you will still have a workable copy to play with. |
|
|
|
3.
Next you will have a prompt for the Indexed Color settings. I usually use the Exact Palette, Forced Black and White, and have the Transparency Box checked. |
|
4.
Now that we are all set up lets go to the File/Export/Gif89 Export. Once we do this we are on our way to having a transparent image.
|
|
5.
Now we will get our Export Options Box. This is where we are going to have to use the eyedropper  tool to select what part of the areas we want to become transparent. Very carefully use the eyedropper and click over the colors that you want to get rid of. |
|
5. (continued a.)
Here is a close up of the original picture "before" I used the eyedropper on it. |
| 5. (continued b.)
Here is a close up of the original picture "after" I used the eyedropper on it. All I did was click on the background color that I wanted to get rid of and it was gone. Now if you are working with complex colored images it won't be quite this easy. Just take your time making your selections and use the zoom tool to zoom in on those hard to reach areas. |
|
6.
Here is the image on the color background it was meant to be on and you can't even tell it has transparent areas. |
|
7.
Here is the image on a black background. It still works perfect because the original color background of the image was dark enough that it still blends in with the black. And below it was our original image that was non-transparent... |
|
|
Latest Forums Clone YourselfThat is quit nice. But I think that can be more easy to do.. |
|
|
