Creating a Repeating Gradient

Let’s start by creating a repeating gradient background that displays dark green at the top, and then blends into a lighter shade of green. This background will be for a new client website: the San Simeon Software Group. They saw the work you did for Jonathan Bing and want you to create a website for them.

1. Fire up Photoshop. Select File ▶New from the menu bar. The New dialog box displays. Enter the following settings:
   • Width: 122 pixels
   • Height: 122 pixels
   • Resolution: 72 pixels/inch
   • Color Mode: RGB 8 bit
   • Background Contents: White
2. Press OK. A blank, new image window displays.
3. To create a gradient, double-click the foreground color on the toolbox. The Color Picker dialog box displays.
4. Define the RGB as 82, 121, 81. Then press OK.
5. Double-click the background color on the toolbox. The Color Picker dialog box displays.
6. Define the RGB as 145, 169, 144. Press OK.
7. Select the Gradient tool from the toolbox. This tool is located with the Paint Bucket tool. Select the small arrow at the bottom-right corner of the Paint Bucket tool icon to choose the Gradient tool, as shown in figure below.
   
8. Click the gradient drop-down field located in the options bar. The Gradient Editor dialog box displays.
9. Select the first gradient preset (it is the square that contains the green color you defined for the forground and background).
10. Click and drag your mouse within the blank image window. Click somewhere in the middle of the image window, and release the mouse before you reach the bottom of the image window, as shown in figure below.
    

    Tip

    Drawing a small gradient line creates a gradient that changes drastically from top to bottom. If you wanted a more subtle gradient, you would need to draw a longer gradient line.

    When you release your mouse, the image area fills with a green gradient, as displayed in figure below.
    
11. Select File ▶Save As from the menu bar. Save your image as grn-grad.png.
    You’re not done with this background image yet. If you were to pull it into a web page right now, it would repeat over and over, as displayed in figure below. This is known as tiling — which you definitely don’t want.
    

Don’t worry, though. We can fix this tiling problem by using a sliver.

Creating a Sliver

Nothing screams “amateur” more than visible tiles in backgrounds.

The way to solve background-tiling problems is through the use of a sliver, which is a 1-pixel high (or wide) image that can tile over and over. Slivers can tile because they blend into each other. Slivers are made by creating a 1-pixel high area on the right side and/or bottom of your image.

Not quite sure what I’m talking about? Let’s make a sliver to get a better understanding. Perform the following:

1. With your grn-grad.png file open, press Ctrl++ to zoom into your image. Do this until your image is magnified 600%. It’s easier to slice a 1-pixel area of an image when your image is zoomed.
2. Select the Crop tool.
3. At the bottom of your image, click and drag a 1-pixel high area, as displayed in figure below.
   
4. Press Enter. You’ve now created a sliver. Save your sliver as grn-grad-sliver.png.
   
   In this tutorial:
   

   1. Creating Web Backgrounds
   2. Types of Web Backgrounds
   3. How Backgrounds Work
   4. Creating a Repeating Gradient