Loosing gradients when saving items as a transparent gif..

H
Posted By
harryllewelyn
Mar 14, 2007
Views
1800
Replies
7
Status
Closed
This has happened on my Windows version (work), and my OSX Version (personal).

Basically, when I go to save a slice as a transparent .gif for the web, it doesnt come up as a gradient, it just comes up as either black block where the gradient woudl be, or a white block.. I have put this down to the Matte setting in the save for web bit, but how do I get my gradients back!
Related Tags
gradient item loose save transparency

Must-have mockup pack for every graphic designer 🔥🔥🔥

Easy-to-use drag-n-drop Photoshop scene creator with more than 2800 items.

RK
Rob_Keijzer
Mar 14, 2007
Are you trying to retain partial transparency? (a gradual transparency wedge), then that won’t work.

GIF only has one bit for a pixel to tag it transparent or solid (on/off).

Try PNG format instead. That has eight bit (256 levels) of transparency. Might run into compatibility problems though, because not all browsers might support it.

Rob
C
chrisjbirchall
Mar 14, 2007
Gifs are not too hot on gradients anyway, due to the restricted range of colours.

You’ll be better off creating your gradient against a background the exact same colour as your web page BG, and saving it as a Jpeg.
JJ
John Joslin
Mar 14, 2007
Unless the background is a gradient! 😉
P
Phosphor
Mar 14, 2007
Also, some gradients can be converted to GIF format that looks virtually identical to the PSD. Hard to tell without seeing the one you’re trying to convert.

If it MUST be a GIF, and it MUST display what looks like partial transparency, have a look at the brilliant solution offered by forum regular Ed Hannigan. It might work for you:

<http://www.sover.net/~hannigan/lucyinthesky.html>
H
harryllewelyn
Mar 15, 2007
Ok, I’ll take a look Phos 🙂

The thing is, it has worked before.. But now I dont know what’s happened to it! Yeah, it must be a .gif as .png isnt supported by IE..

I usually do just set the background colour as the background colour of what it is gradienting into, but with stuff like patterened backgrounds that doesnt work.. Also, when the background is an image, it doesnt work properly unless you get the top image lined up exactly with teh backgorund image..
P
Phosphor
Mar 15, 2007
How about showing a mockup of what you’ve done already, and maybe post links to the individual components.

It’s tough to offer much further advice without actually seeing what you’re working with and what you’re trying to do.
P
Phosphor
Mar 15, 2007
".png isnt supported by IE.. "

It can be, but you’ll have to add a javascript to your pages or your CSS.

Have a look here to see how:
<http://homepage.ntlworld.com/bobosola/>

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

Related Discussion Topics

Nice and short text about related topics in discussion sections