How do I optimize a gradient?

I'm trying to create the image from the Dreamweaver tutorial in issue 28 of Practical Web Design magazine. I've managed to create it, but am having problems optimizing the container background. This consists of a square filled with blue. A new layer is then added and a black foreground-to-transparent gradient is dragged about 100 pixels down from the top. This layer's opacity is then changed to 40%. Could somebody please help me with how I then optimize this image. Do I use Gif? And if so, do I need Transparency checked (I'm using Photoshop). If not Gif then what? JPEG or PNG? Or do I use an alpha channel - I don't really know anything about these! Please could somebody help me with how to do this, thank you.

Hi rabbitsfeat,

Well, I haven't seen the tutorial you mention, but you don't need transparency on. Transparency is used in a gif when you want to knock out certain colours. In this case, although the black layer has transparency within Photoshop, because all you're trying to do is create a blue square with (presumably) a dark blue fade at the top. There's no transparency inherent in the final gif.

You should be able to do this as a gif or jpeg. It's a judgement call between the two when you're doing these fine gradients I find. It's whichever looks nicest at the smallest file size!

Hope that helps,

Simon
ELATED : )

--
ELATED : )
http://www.PageKits.com
Professional Website Templates