A Smooth Graduated Tint

Is it possible - am I missing a trick?

[markd]

Hello all

I am trying to achieve a smooth graduated tint to use as a background on a page which will be part of a frameset.

The left frame will, in effect, be a 'strip' with the graduation running vertically down the page ie. a grey at the top graduating to a white at the foot.

The way I am approaching this at the moment is to set the full size of the 'strip' (w=458 px l=1883 px) in Fireworks and create a linear graduation between the 2 colours and then export a small slice of the full width (approx. 30 px) which will then repeat horizontally across the page.

Obviously, when viewing in the browser my nice smooth graduation is stepping badly. I have tried saving both as .giff and .jpg, saving the whole strip rather than a small slice, generating the graduation in Photoshop, all with no joy.

I know that the removal of colours etc. will step a graduation, but wondered if there was another technique I could use?

Thanks in advance.

[sarkye]

out of curiosity markd, are you previewing this graphic as a *background* to a page or cell? or have you put the image *on* the page...

sounds like your browser is possibly resizing the graphic to fit the page and your gradient is getting squished.

if not, I'm talking out of my ear and I'll think some more

::added:: also, are you saving with 256 colours? I just played a little and did see a step with less than that, at 256 colours I got a beautifully smooth gradient.

[tedster]

Agreed. I just used Photoshop to create a 1x1883 strip with 128 colors and it looks OK to my eye.

[joshie76]

There was a bit of a discussion on gradients in this thread [webmasterworld.com] that might help.

J

[markd]

Thanks for the great advice everyone!

Sarkye, I am adding the gradient graphic as a page background, as opposed to a background to a table cell.

I have saved it with 256 colours, but still getting the step!

Will treble check everything - glad it's Friday!

Mark

[joshie76]

Could it be your windows colour settings? Photoshop will cleverly dither your gradients to give you a better representation of the gradient you've drawn if you have low colour settings, however it seems the browser doesn't do such a good job of this.

Check your display properties (right click on the desktop and choose properties) and have a look at the 'colors' option on the settings tab.

Josh

[markd]

Ah ha! Thanks Josh!

My settings were on High Colour 16bit, I've changed it to True Colour 24bit and it looks a lot better!

I wonder which (if any) are the default settings for Windows? Just thinking that if most of the visitors to the site will see 16 bit it may not be worth using the tint at all.

Thanks for your help.

[Marshall]

markd,

In place of a gradient tint, why not use a texture or small lines like I have on my site (see profile) or geometric shapes that you find on others? Something not over powering, but enough to break up the background.

[markd]

Thanks Marshall

That's a nice effect on your site, particularly the colours you have chosen to create the 'lined' background - definitely worth a consideration as an alternative to the graduation!

[tedster]

> I wonder which (if any) are the default settings for Windows? Just thinking that if most of the visitors to the site will see 16 bit it may not be worth using the tint at all. <

Most stats I see show around 50% of users at 16 bit color, and 35% or so at 24 bit or 32 bit.

When you get into gradients, color depth is a concern. Also 16 bit color can make for some surprising mismatches between image colors and background colors if you only check your design at 24 bit.

I think it's very worth while to give the 24 bit visitor some eye candy - as long as it isn't "budd ugly" on a 16 bit viewing.

There's an interesting page for checking various stats at W3 Schools [w3schools.com].

[pageoneresults]

If you are using Photoshop, utilize the noise and blur tools to eliminate the banding effect.

[tedster]

Add Noise + Blur, that's an interesting approach. Something of a workaround for dithering, isn't it? And you can also use dithering when you reduce colors in the gif to minimize visible banding.

However, I think both methods generate a bigger file size. You also must take a wider strip in both cases to get your file to tile nicely. Even then you might need to do some repair work with the Offset filter to keep the edges from showing.

But with a straightforward, non-dithered gradient gif, you only need a 1 pixel width. You can get a file of about 1kb in size that looks fine to my eye.