Please help creating a transparent gif image

[pman]

Hi,

Would you be able to help me creating a transparent image in Photoshop? I did some googling and all I can find is how to make the surrounding area of an image transparent. What I'm looking for is creating an actual transparent image.

Here's what I'm after. I want to use an image as the background of a table on a web page. This table will have alternating colors. So, I want to create two colors of small transparent images that will be used on the table rows, so that the table's background is still visible.

It should be pretty simple, but I'm really not so good with Photoshop. I can make a colored rectangle transparent, but when I export it as a gif file, it's not transparent anymore and I don't want to use png file.

If you could help, it'd be great. Thanks.

[mitzs]

Pman, I am not sure if I understand your question completely but I'll give it a go.

First is there some special reason that you can't save your image as a jpeg?

Second, I don't know if this is the right way, but it is how I would try it.

You need to put each image on it own layer, my reasoning for this is because over in the layers panel you will need to use the fill slider to turn your image transparent. If you use the opacity it will lighten everything while the fill will only affect what is on the layer.

Again, I don't know if that is the right way, but give it a go and let me know how it works out. If I am wrong one of the more exp members here will jump in and give you another solution. ;)

[micke]

I'm not sure what you want to do...

If you mean you want a transparent background, open a new doc and specify the backgound color as transparent. Place your images in and use layer masks (or many other ways) to edit the images.

I'm not sure if this is what you want. Do you need to make clipping paths?

micke

[pman]

Hi, I guess I didn't explain it properly. Let me try again.

I have an image in photoshop, that is transparent. I just used the opacity option from the layer pallete.

Now, when I export this image as gif file, it doesn't stay transparent anymore. Meaning, if I place that image somewhere, I want to be able to see through the image and see whatever is behind the image.

Does this help? Let me know. If not, I'll try to find an example from the net.

[NEMESIS]

I think what you looking for is png-24 format. I think that GIF supports only full transparency around some object not half transparent object.

[pman]

Hi,
I don't mind using png format, but IE doesn't render png properly.

I actually found an example of what I'm trying to do. See the link below:

http://icant.co.uk/csstablegallery/index.php?css=8#r8

The main content is a table. At the bottom, the table has a background image of a mouse. The alternating rows are using a transparent gif image so that you can see through those rows and see the mouse in the background. Here is the link to that transparent gif file.

http://www.hadseldesign.com/tableshow/tealbg.gif

Any suggestions on how this gif file may have been created?

[mitzs]

ok, right off the bat from my MS Word days, your mouse looks like a water mark to me with the opacity drop down. The lines just look grid lines to me with the type on top. Again you could do each one on it own layer and drop the fill if it is to dark, or you could try a test sample of a few of them, and try changing your blend mode above the layers panels to multiple that might blend everything together. As far as gifs and online. That is over my head. :p

[NEMESIS]

Simply made lines in Photoshop on transparent background and when Save for Web and Devices choose GIF but check Transparency checkbox so it can save it with transparency. Otherwise you will get GIF with white background, pretty jpeg alike with gif extension. So key is to check transparency.

Also concerning PNG and Internet Exploder :D problem then you could find a hack for it. Is simple Java Script. Just google for Internet Explorer transparency hack.

Cheers ;)