Custom Search

Making a graduated background

Having a full block colour background is not as pleasing on the eye as one that gradually changes.

When you load an image as a background to a web page you are designing it is repeated. Therefore if you make a narrow strip that changes colour steadily from left to right you will land up with a full page that has a gradually changing colour.

You have to make the image wide enough to fill the screen - 2000 pixels is usually more than enough.

Open Fireworks. Set up a rectangle 2000 pixels by 20 and use the rectangle tool on gradient fill - alter the two colours at the extremes to get the effect you require.

Here is a small sample:

You can then make it less intense by changing the transparency.

When you are happy with the fill you can make the file even smaller (therefore quicker to load!) by changing it to only a couple of pixels in height.

To get a graduation of colour down the page you set up the same graphic - but then rotate it 90 degrees before saving it.

It is usual to call a background somename_bg.... if you search on the web for _bg.jpg you will get a lot of background images!

Final Point: Do not save the graphic as a gif - it must be a jpg for the quality of graduation to be smooth enough to be pleasing to the eye.