alpha channel issue for making transparent image

hi guys,

I have an image and i'd like to turn that into a transparent gif/png file for a website (has a changing bg color at random). The thing is i don't know how do this, and could use some help. What I tried so far is that I add to the original image an alpha channel which is the original image inverted, but that did not show me the checkered bg.

Anyway I added a faked impression of what i want to achieve. Thanks for any tips on how to make this work.

original image


and what i want to make in photoshop, so make it a transparent one.

I think u just have to select the white and then delete it...
There are some tutorials to select stuff over here: http://teamphotoshop.com/tut_photoshop/ps_tools.php
I think u can use the first one: magic wand. (in fact it's just click and press delete :D)
When u want to use a transparant picture like above (u see the blackground trough the picture) it might give problems. I'm not sure if this is what u mean, so plz: help me helping u :D

no, thats not what i'm lloking for. There IS a way to use the image itself as an alpha channel. This whay you can get nice opacity fadiing effects

CTRL+click the Channel you want to use. (In the Channels Palette)
If the image has just a background, double click on it to make it a layer (in the Layers Palette).
Select the layer and click on the layer mask icon (in the Layers Palette)
CTRL+I to Invert the Layer Mask

Any layer in Photoshop has an implicit alpha channel. So if you build your artwork using semi-transparent tools, anti-aliased tools, etc. the layer will have transparency information in it.

Now, the trick is getting it to work on a web page like it does in Photoshop.

First - .gifs won't work. They have no alpha channel, and if you are attempting semi-transparent effects on web page with a randomly changing background color then forget .gif.

From Photoshop you'll need to save your page out as PNG-24. This will preserve its alpha information, and the graphic will work find in all browsers _except_ Internet Explorer.

You see, IE doesn't support alpha channel enabled PNG files by default.

However, IE has the ability, it just has to be 'turned on', as it were. If you want to do that, see this page: http://koivi.com/ie-png-transparency/

Hope this helps,

Chris Perkins

SiteGrinder - a Photoshop plug-in for making XHTML 1.1 and CSS web sites - no slicing, better smaller faster sites: http://www.medialab.com/sitegrinder