Transparent Backgrounds

Over the time I've been with this forum, I've seen quite a few folks asking how to make the background of thier avatars transparent with Photoshop.
I finally got off my butt and typed up a quick and dirty tutorial for our transparently challenged members.
This is just ONE way of doing it. There are others which offer more options, but this is by far the easiest for Photoshop newbies. :)

You will need:
1. Photoshop 6, 7 or CS
2. An image, preferably 80 Pixels High and 80 Pixels wide if it's going to be your avatar.
3. The ability to read and use a computer. ;)

Okay, here we go...

Open your image in photoshop.

Use the magic wand selection tool to select the area you want to make transparent.
Click on the Help Menu and select "Export Transparent Image"
The transparency Wizard will open.
( Dont ask me why Adobe hid the transparency wizard in the Help menu. :rolleyes: )

Select the option that says "I have selected the area to be made transparent"
Hit the "Next" button.

Choose "Online"
Hit the "Next" button.

Select Gif (although .png's sometimes are clearer and have a smaller filesize. Play around and see which format is best for you.)
Hit the "Next" button.

Read the text and hit the "Next" button again.

Tick the "Preview" checkbox so you can see how your image will look.
Choose "Uniform"
Tick the "Transparency" checkbox. Notice the background of your image has become transparent.
In the Options area, select the page colour that the image will "sit" on.
For example, if the webpage is black, choose Black from the dropdown list.
If your not sure of the page colour just choose "None".

Dither: I usually choose "None" but use the preview image and see what setting suits you.
Click Okay.

Give the image a name and save it to the directory of your choice.
Click Okay.

Choose whether you want the image to be interlaced or not.
Interlaced means the image will display at low quality at first, then become clearer as the details are downloaded.
Non interlaced simply means the image will load from top to bottom.
Click Okay.

Click the Finish button and your done.

Happy Photoshopping! :)

In Fireworks, select "Index Transparency" from the export options (under Optimize), and then select the color that you want to be transparent. Alpha transparency isn't fully supported in most browsers, so don't use it. :)

In GIMP, use the transparency tool. :P

... Or you could click here.

I have an issue regarding this on a site that is under rebrand right now ( http://www.detectivz.com ) and I can't fix the logo with the transparenty.

gr8 work many thnx

thax

nice TUT thxx for the help

tnx man..i need it

You can also use the eraser, among other things.

Open your image.

Go to > Select > All

Go to > Edit > Copy

Go to > File > New

- When the dialogue box opens make sure the 'Background contents' box says 'Transparent'. Click OK.

Go to > Edit > Paste


You can close your original graphic now and work on your new one.

Select the Eraser Tool, (The 6th tool down on the left).

Just rub out the bits you don't want, you can adjust the size of the brush in the toolbar.

You can also use the Magic Wand to select areas, then press Delete.


When you've finished, save your graphic as a GIF or PNG. (DO NOT SAVE AS A JPG!) :)

good work many thnx

Excellent!
Thanks for this!

thanks