Topic awaiting preservation: semi-transparent GIFs (Page 1 of 1)

So I'm trying to make these semi-transparent GIFs. As you all know, GIFs only support binary transparency, so true alpha transparency is out of reach.

What I'm trying to get is the illusion of a semi-transparent GIF through the use of dithered pixels.

For example:
Let's say I use the paint bucket and fill a layer with white set to 50% opacity. I want to output that layer as a GIF and (ideally) have the white pixels form a kind of miniature checkered pattern, so when it's placed on top of a colored background, It gives the illusion that it's semi-transparent. Know what I'm saying?

The example above is relatively simple, because I can simply define the a checkered pattern of pixels and fill the layer. But what I'm looking for is a bit more complex. Say, semi-transparent gradients. So the white pixels would be packed tightly on one end of the image, and gradually "loosen" as they reach the other end.


I've been looking around both Photoshop and Imageready, and I can't find a feature that will do this. The default output for GIFs is to render all semi-transparent pixels to full opaque. I tried using the "dissolve" layer blend mode, and while it works, it produces a very uneven texture, not the very uniform pattern I'm looking for.


So... have I not been looking hard enough? I'm sure there's something out there that can do this. Help?



[This message has been edited by ozphactor (edited 07-30-2003).]

not exactly sure what you're asking but from what I'm hearing I've done the same. 1 layer the gradient you want, the next layer filled with the checker pattern you talked about, ctrl+click to select the checkerboard, click gradient layer to select it then hit delete. Is that what you're after?

I've actually done this before for a a background and it worked nicely. You have be careful of the colors you're using behind the pattern and the gradient itself or the text on top of said background can be affected negatively. All in all the checkerboard transparency is not the best option for a background behind text.

Jason

The only way I can think of on how to make a 'regular' pattern in PS, is to make a transparency channel first (you control-click the layer , which then makes a selection of that layer... where the layer is 100% visible, the selection will be 100%. on 40% visibility, it will be 40% selected and so on)

If you have everything you need merged on one layer, make a new layer, fill it with pure black, then contol-click on the merged layer to get it's selection, and fill that selection with white. (so the black layer is now white where the layer is, and black where it isn't.)

You can then use save for web to export this image. The export settings are:

2 colors (black and white, no transparency)
and a dithering method to your liking. most likely, 'pattern' is what you want, since you indeed wanted a regular pattern.

Export the GIF, remember where you saved it. This is going to be our map for the transparent GIF. Black pixels will become transparent, white pixels 100% visible.

Then, we go back to the merged layer. right now, several pixels are not 0% or 100% visible. To fix that, you need to duplicate the layer, then merge the duplicate and the original together again. the idea of this is, that all pixels that are (say) 20% visible, will become 36% visible after one merge, 49% visible after the second, 73% visible after the third, and so on, until all pixels are 100% visible. Then we paste in the GIF we've exported, which will work as our 'transparency map'. Switch to the 'channels' palette (it's right next to the 'layers' tab), and control-click one of the red, green or blue channels. If you control-click a channel, 100% white pixels will be 100% selected, and black pixels will be unselected.

Now that we have our selection, turn the 'transparency channel' layer invisible, Inverse the selection (CTRL-SHIFT-I or click [select>invert]) and press 'delete' to delete all pixels that are unnecessary.

And there you have it.

I tried it myself, and I got this: (click it to see it on a white background)

OR. if you want something completely different, try the thing I've described in this thread.

If you think of this kind of thing as a mask, it becomes easier to find a solution, here's how I'd go about doing it...

1. Make a channel for the transparency of the main image.
2. Copy that channel to a new document but copy it into the new document as a layer, not a channel.
3. Convert that document to a 2 colour black and white image, use error difussion or pattern dithering to get the graident like effect.
4. Copy that dithered black and white image back into your main document and use it as a layer mask.

What kind of BG will this image be sitting over ozphactor?

Thanks for everyone's help. I followed the directions and in the end, I got what I wanted.

I made this simple gradient:



Nothing much, but I at least I know how to now.

mahjqa: that's a very nice dragon wing you have there (That is what it is, right?). Yeah, that was the effect I was going for.

theguest: I'm planning to use it on a solid color background. I plan to change the background color a lot, and I didn't want to seperate images for the gradients. And I also like the "dithered" effect.


Thanks again. I can always rely on you guys for answers.



[This message has been edited by ozphactor (edited 07-31-2003).]

You could also try a halftone pattern, followed by levels, then convert to bitmap and use as a channel.
The advantage of starting with a halftone is that it's designed to show a shape with dithering.

Yo, Drac; that's basically what I described.

Very intersting trick. it will let me do many thing i did not thought of. Too bad it is a bit more tricky to do in photopaint, but still works =P

Btw, cross pattern seems a bit more suitable



[This message has been edited by Alevice (edited 08-01-2003).]

Crap, does not seem to be working...

[This message has been edited by Alevice (edited 08-01-2003).]