Photoshop 5.5 Tutorials
Tip #15: Transparent GIFs Updated Feb. 6th, 2001
It is very easy to save an image as a transparent GIF.
|
For this example I will take a round button and and make it transparent over a flower background. The images used are below and you use them for this tutorial if you want to.
Background Image |
Button |
Step 1.
Open your background image in PhotoShop and also open the button or image you want to make transparent.
On your background image select the eyedropper tool (shortcut key I) and click on your background near the place the button will be once it is on your Website. This will make that color the foreground color. In the case where your background is not a solid color but rather an image like this flower, take an average between the darkest and the lightest color.
Then click on the foreground color. The color pallete will pop-up and the color you picked with the eyedropper tool. Make a note of the RGB value of this color. For this example the RGB value is R:229, G:110, B:164.
|
|
Step 2:
Go to your button image and cut the background out of it so you just have the button on its own layer. To cut the background out you can use the Magic Wand Tool or the Lasso Tool. Once you cut the background out it will look like the example below.
Hold the Ctrl key and click on the layer to make an marquee selection of the image.
 Select your image. |
Step 3: Copy (Ctrl – C) the image. Create a new window (Ctrl – N). The window will fit the image perfectly. If you need more space around the image for any reason, create the window the size you need. Then paste (Ctrl – V) the image in the smaller window.
|
Step 4: Now export your image as a GIF (File – Export – GIF89a Export...). Click on the transparency index color box, it should be Grey by default. I also recommend to NOT save your images over 64 colors.
|
This is an actual example on how both of my images would look together. I used the flower background as a cell background and added the button as a regular image.
To use a image background like in this example I recommend you use either a image without shadowing or a rectangular shaped button.
More shadows the image has, the most precisely you have to match the background color with the transparency index color. If you follow these simple steps you shouldn't run into any problems. |
|
|
Please rate this tip below.
1 represents poor and 10 is excellent.
|
|
