How to Design a Gradient Background in Photoshop ~ Photoshop Tutorial

A gradient background made from an image provides a colorful background for any web page, however there are several problems with this kind of background that you need to consider, as shown below. This technique is usually only available in a graphics program like Adobe Photoshop or Macromedia Fireworks. If you don't want to use images you may prefer to try a more advanced technique by Using CSS3 to Design your Background Without Images

What is a Gradient Background?

A gradient background is a variation of similar colors arranged from lightest to darkest or visa-versa which can be linear (horizontal or vertical) or a circular gradient or in a more complex arrangement like a rainbow of colors. It can then be used as the background for a web page or within boxes, like under a menu.

A typical Blue Gradient Background

web page with blue gradient background

A linear gradient image, with colors that merge horizontally, can be about 5 pixels high and as long as the page is wide. The image below is a shortened version of a blue gradient background which will be set to repeat down the page until it fills up the page:

See below for instructions on how to design a gradient background.

Problems with using a gradient background on a webpage

The text needs to be a different shade than all variations of the background or it won't show up on the page.
A gradient background has to be provided in an image format and the color on one end of the image is darker than on the other end which means you cannot allow the image to repeat or the image will repeat with the darker edge on the lighter edge (see sample below).
A gradient background image has to be the same width or height as the page or the image will repeat with the result above.
The image needs to be saved as a .jpg or older computers using only 256 colors (or the image saved as a .gif) will not see evenly blended colors from one shade to the other but different shades of color placed next to each other.
Although the image itself may be only a few Ks after it repeats across or down the page several times it takes up more memory so a gradient background is not a good idea on a memory intensive site (lots of pictures or long pages of text).
The web page or table or box with the gradient background needs to be set at a specific width, because if it's set at 100% the page will increase in size but the image will repeat to fill the space with the resulting dark edge next to a light edge as explained above.

Gradient Background Samples in Different Resolutions

Other Options for a Horizontal Gradient Background
to fit all Resolutions

You could provide an alternate plain color background matching one of the colors on the end of your image for problems mentioned above in CSS (in css you can apply both a background color and background image so where the image ends the background color takes over). Choose a web safe color or it may not display as you wanted in older browsers.
You could also apply the background color to the CSS and the image to a centered Table the width of the smaller resolution that you want to display, so the background will show where the image doesn't. The problem with a horizontal gradient background is that you can't match the colors on both ends.

If you think you can work around the above problems then try a gradient image as follows:

Designing a gradient background image

In order to design a gradient background you need a graphics program that produces gradient colors (I designed this gradient background in Photoshop).

Step 1:

Select "file/new" and set the width you have chosen for the new image and about 5 pixels for the height and set the background as transparent. For an 800 resolution page make the image 760 picels wide to allow for the scroll bars on the browser and for a 1024 resolution make the image 984 pixels wide.
.

Step 2: decide on colors

Now you need to decide on the colors --if you are using black text on the page you don't want the darkest shade to be so dark that the text won't show up and the same if you are using light colored text for the lightest end of the background. See the sample background at on the right (or top of page); notice how the text on this sample page almost dissapears on top of the darker background on the left side so a lighter blue or white would have been a better choice.

Step 3: select the image

Select the image with the retangular marquee tool

Step 4: activate gradient tool

Click on the gradient tool (in Fireworks 8 it is behind the Paint Bucket tool)

Step 5: choose gradient colors

Make sure your "gradient tool options" box is open and ,if not, select "window/show options" or double click on the gradient tool (this may be slightly different on your version of Photoshop but there should be a box with graduated colors in it now. These colors are determined by the colors you have selected for background and foreground.

Choose different colors for background and foreground and watch the gradient change--keeping in mind what was said above about dark text on a dark background and visa-versa. There are different options of how to arrange the colors in the gradient options window (dark to light or light to dark and different textures) so play around with those till you get the result you want.

For more advanced options choose "help/help contents" and under "Find" search for "gradient fill" and read the instructions (the sample on this page was designed in normal mode, 100% opacity, linear fill with dither selected to prevent banding of the colors.

Step 6: fill the image

Place the pointer/cursor inside the image in left corner and drag to the right and the fill should now be aplied to your image. If it doesn't work make sure the options window is still active and try again, or use your "help" for further instructions.

Step 7: saving the image

Now save your image. Sometimes, if you view the background on diffrent computers or browsers you will see the different colors separated. This is called banding. A gif is limited to 256 colors unless you select dithering, which will prevent banding. If you choose to save the image as a .jpg select millions of colors instead of thousands. If your background is still banded try adding a tiny bit of noise to the image.

Step 9: enter code on page

Change the code in the body tag as follows:
<body background="images/bluegradient.jpg">

If you are using CSS put the following code in the body portion of your CSS file which will tell the browser to repeat the image downwards and to the right:
background-image: url(images/bluegradient.jpg);

To prevent the background image from repeating to the right and only repeat downwards add this code after the above text:

background-repeat: repeat-y;

To fill a table cell with a gradient background make the image the width of the cell and add the following code to the table cell:

<td background="images/bluegradient.jpg">

Now view your page and enjoy!

If you'd rather have a plain colored background with texture check out the Web Design Backgrounds and Texture Tips page.

Gradient Bars as a Border on a Web Page

The same technique as mentioned above was used to make the following gradient bars that frame the top and left side of a logo on a webpage. Once you have the horizontal gradient bar finished then flip it to vertical view and then join them at the top left corner using either table cells or div boxes.

If you prefer to not use a gradient background see the
Background Textures page for free texture images or this tutorial on
how to set up 2 backgrounds on a webpage.

About K-Sora

Travelling is my life

Photoshop Tutorial