Creating a Gif for a background

[Magicalwonders]

Hello Folks,

I am attempting to create a Gif that I can use as a background in the header of my website. A couple of questions have arisen, and I'd be grateful for some advice.

The header will be about 100 -150 px high and will stretch 100% across the screen. I intend to make the tile the same height as the header, but am uncertain as to what to specify for the width. The tile will be repeated across the page but am not sure what the consequences are of choosing different widths, other than file size. Any recommendations would be appreciated.

My second problem is in the creation of the gif itself. What I am aiming for is a solid colour at the top of the header which fades halfway towards the bottom, and then gets stronger becoming a mirror image past the half way point. The end result will give the illusion (hopefully) of looking at a round bar going across the screen.

I have not been able to find any tutorial on the net that describes how to do this. So if anybody can help or suggest an easy peasy graphics package that will do the job, I'd be grateful.

Many thanks,


Myles

[Magicalwonders]

O.K. I've managed to sort out how to create my image. All I'd like at this stage now is some advice on the tile width.

I was going to go with a tile 5px wide, but I can get an even smaller file size by reducing this to 1px width. Anybody see a problem with this? Will it take that much longer for the page to load or is this not really an issue?

Any advice would be appreciated.

Thanks

Myles

[Kevey]

The width you choose will affect the look of the tiled image if the image changes on the horizontal plane. It sounds like you are looking for a gradient with one repeat to make it mirror itself. I am not familiar with every software package, but in PSP for example you can choose the number of repeats in the gradient. '1' would sort of make the round bar you are talking about.

1px wide is fine for a gradient. In my experience it will look uniform across the page. The delta between load times will be next to nothing assuming it is optimized for the web.

[Magicalwonders]

Thanks Kevey,

I don't have PSP but I'm managing to create the tile in Fireworks using the "styles" feature.

1px wide is fine for a gradient. In my experience it will look uniform across the page. The delta between load times will be next to nothing assuming it is optimized for the web.

Are you referring to the size of the graphic being optimised (I was thinking of using a gif) or is there something else I need to consider?

Many thanks for taking the time to advise.

Myles

[Kevey]

I am saying that if you compared a 1px wide x 150px high gif image to a 5px x 150px there wouldn't be much difference in load times as the files would be xtremely small to begin with.

gif is fine, but causes some people issues when using them for gradients...but you can easily try and see how it comes out...can't hurt.

[WebJoel]

no smaller than this is, I might even use a *jpg to get those 24-million colors into play. A *gif being limited to 256 colors often comes up 'patchy'... a gradient that is 150-pixels tall just might surpass those 256 color-changes...