Closed Thread Icon

Topic awaiting preservation: semi-transparent GIFs Pages that link to <a href="https://ozoneasylum.com/backlink?for=9147" title="Pages that link to Topic awaiting preservation: semi-transparent GIFs" rel="nofollow" >Topic awaiting preservation: semi-transparent GIFs\

 
Author Thread
ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

posted posted 07-30-2003 08:05

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).]

JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

posted posted 07-30-2003 08:19

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

mahjqa
Maniac (V) Mad Scientist

From: The Demented Side of the Fence
Insane since: Aug 2000

posted posted 07-30-2003 12:42

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.

Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

posted posted 07-31-2003 04:07

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.

theGuest
Nervous Wreck (II) Inmate

From: Vancouver, BC Canada
Insane since: Apr 2002

posted posted 07-31-2003 04:32

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

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

posted posted 07-31-2003 05:59

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).]

Das
Maniac (V) Inmate

From: Houston(ish) Texas
Insane since: Jul 2000

posted posted 07-31-2003 19:27

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.

mahjqa
Maniac (V) Mad Scientist

From: The Demented Side of the Fence
Insane since: Aug 2000

posted posted 08-01-2003 14:09

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

Alevice
Paranoid (IV) Inmate

From: Mexico
Insane since: Dec 2002

posted posted 08-01-2003 18:47

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).]

« BackwardsOnwards »

Show Forum Drop Down Menu