I'm trying to create a background graphic using Photoshop's gradient tool. (The gradient will be the left border of the background where the text links will be.)

This works fine ... until viewed at 480x640, when it breaks up into patterns and spots.
Obviously I want it to be a smooth gradient! I know this can be done (maybe not in Photoshop?) because I've seen it.

Anyone know the secret???

It sounds like when you're going down to 640x480, you're also going down to 256 color (screen size resolution has no real effect on color resolution). And at 256 color, it's nigh on impossible to get a smooth gradient of two widely divergent colors.

My guess is that you're not reducing to the Web-safe 216-colour palette, an option available on Photoshop. Using any other palette for Web graphics will cause dithering on 256-colour/640X480 monitors. However, I have to tell you, as Claire has already pointed out, that a gradient is highly unlikely to work at 216 colours. You'll get choppiness--lots of it. You might want to try a more stylized gradient effect, with one colour merging smoothly, but not seamlessly, into the next--perhaps in a pattern. For instance, you could separate each colour field with a squiggly line, so it looks like strips of overlapping torn paper. (Just a thought--lame example, I know).

Thanks for the info and all the tips!

Claire, you're right about my switching to 480x640 and 256 colors. (Oops!)

Ratty, I haven't used the Photoshop web-safe palette. (Oops!)

Anyway, I will give it a go ... but I do wonder how our friend TJ2 did it at valleyc21.com ... a very smooth yellow-to-white gradient that doesn't disintegrate at 480x640/256 colors. Looks like some blurring might have been used, or ... TJ2, are you there?

[This message has been edited.]

In general--the paler the colours, and the closer they are together, the smoother the look. Yellow to white is a safer bet than, say, red to green.

Ah, thanks. I think I'll go about it a different way (without a gradient!).

Hello - sorry, I was not ignoring you Diane. I was gone on vacation. Isn't that amazing - I actually got to leave twice this summer - although, I had to almost kill myself by working overtime in order to leave!
Okay now to the subject - I can't take credit. My partner made it and I believe she used image composer. I tried for many hours to make it in photoshop and gave up! The vision was there but I couldn't make it happen!! My partner is on vacation, but when she returns I will make her write down the instructions on how she did this and will post them for all to see!!!
I wish I could take credit, but I can't on this one. --And if anyone knows how to do this in Photoshop - please post it. I too kept getting lines and patterns no matter what I did!

I'm dying to know how she did it too, because I couldn't do it no matter what! Lines and patterns got worse as I went on!

Thanks for your help, TJ2!

You won't get any lines or patterns if you reduce the colours to the 216-colour Web palette when you do the colour-reduction prior to converting to .gif format. Also, whenever reducing the colours, remember to turn dithering OFF if it is available as an option.

Ratty, thank you so much for this! This is what comes of using recorded "actions" in Photoshop when you're still pretty new at it -- you might bypass available options, like selecting palettes, dithering, etc. I continue to learn!

I also found that it helped to add a layer of the same color on top of the gradient layer -- if I then turned down the opacity of the upper layer so that it was more transparent, the gradient could still be seen but the spottiness is gone at other resolutions. (Although it gives another problem ... it converts the deepest color to another color altogether ... so I suspect this is where the 216-color palette comes in.)

Thank you so much ... there is just so much to know, and it helps to get tips from the pros. Much appreciated!!

Good idea about the layering--I hadn't even thought of doing it that way! Glad I could be of some assistance....

Alright, so this thread was started about five years ago, but it's asking the exact question I want to know. Does anyone out there now know how to get a smooth gradient from photoshop to a compatible web format? I'm using photoshop 6 if that helps, and also am using the web safe palette.

gradients can be a bit tricky when saving for the web. In general a jpg will preserve the smoothness better than a gif.

If it has more than one area i.e. gradient and some solid colours it may be necessary to play with slicing the image and saving each slice appropriately.