How to Create Color Gradient for Web Site Backgrounds

Gradients grab attention as Internet users surf around.

A gradient is one of those graphical designs that look far more intricate and complicated than they really are. With the aid of a couple of different computer programs, you can create gradient backgrounds for your Web site so that your Internet information really stands out. Creating a color gradient is typically a process of taking advantage of a software program's built-in color patterns, but it's also possible to make a gradient from scratch.

Things You'll Need

• Microsoft Publisher
• Adobe Photoshop
• Windows Paint

Instructions

With Publisher

1. Open Publisher. Click the "Blank 8.5 x 11" button on the "Available Templates" screen. Resize the page to the required background size -- unless you prefer a tiled, repeating gradient -- by clicking the "Page Design" tab. Click the "Size" button. Click "Page Setup." Enter the image dimensions into the "Width" and "Height" boxes -- Publisher does not have a pixel converter. Click the "OK" button.

2. Click the "Background" button on the right side of the "Page Design" tab's ribbon. Click "More Backgrounds." The "Fill Effects" window opens with the "Gradient" tab already enabled.

3. Click the "Preset" radio button under "Colors." Pull down the "Preset colors" menu, and choose a gradient. Make any changes to the transparency or shading, and click the "OK" button. The gradient is added to the background.

4. Click the "File" tab. Click "Save As." Enter a name for the file, and pull down the "Save as type" menu. Choose "GIF" or "JPG," in accordance with your Web site's requirements. Click the "Save" button.

With Photoshop

1. Open Photoshop. Click the "File" menu. Click "New." Type "Gradient" into the "Name" box. Type the dimensions for the background into the "Width" and "Height" boxes. Select "pixels" from the drop-down menu, and click the "OK" button.

2. Right-click the "Paint Bucket" tool on the "Tools" pane. Choose "Gradient Tool" from the fly-out menu.

3. Pull down the gradient menu, which looks like a black-to-white gradient on the toolbar at the top of the workspace. Choose a gradient pattern.

4. Draw a line across, from top to bottom or from corner to corner of the "Gradient" canvas. The gradient appears and fills in. Click one of the small boxes to the right of the gradient picker on the toolbar, and experiment with more lines, until you find the one that offers the ideal Web site gradient.

5. Click the "File" menu. Click "Save As." Pull down the "Format" menu, click either "GIF" or "JPG," and click the "Save" button.

Using Paint

1. Open Paint. Click the "Paint" button. Select "Properties." Type your preferred dimensions into the "Width" and "Height" boxes. Select the "Pixels" radio button, and click "OK."

2. Click the darkest color of your preferred gradient, such as a very dark blue, on the "Colors" section of the ribbon. If no colors appeal, click the "Edit colors" button and choose from there. Notice that the color appears in the "Color 1" box. Click the "Color 2" box. Choose the same color.

3. Click the rectangle shape from the "Shapes" section. Click the "Fill" menu, and choose "Solid color." Position the cursor on the left side of the canvas, and draw a rectangle from top to bottom. Don't worry if the rectangle extends into the blue Paint work area.

4. Select a slightly lighter shade of the same color, and draw another rectangle, directly to the right of the first, leaving no white space visible between the two. Continue adding rectangles as you work your way to the right side of the canvas, gradually choosing lighter and lighter colors.

5. Click the "Paint" button. Select "Save As." Type a name for the image. Choose "JPG" or "GIF" from the "Save as type" menu, and click "Save."

References

• Microsoft Office: Publisher 2010 Features and Benefits
• University of Washington: Painting
• Windows: Using Paint