How to Create a Gradient in Photoshop for Your Web Page

Sometimes, a simple solid background just won’t do. Maybe you want to spice things up a bit and add more color. A gradient background can help. It lets you transition between two or more colors. Creating one in Photoshop only takes a few minutes.

There are a number of gradients you can create in Photoshop, but I’ll focus specifically on creating a linear background for your Web page. I’ll show you how to crop an area of the gradient, optimize it so it loads quickly, and then add it to your Web page.

Creating the Gradient for Your Web Page

Select the Gradient tool to create a gradient background for Web page.Step 1: Create a new document by clicking “File” and “New” in Photoshop. Enter a width of “1000px” and height of “500px” in the New Document dialog box. Set the canvas color to white and click “OK.”

Step 2: Select the “Gradient” tool (G) from the Tools panel. This enables/opens the Gradient Options bar in the toolbar. The gradient bar is prefilled with your background and foreground colors.

Step 3: Click the gradient in the Gradient Options bar to edit the gradient and its colors.

Use Gradient editor to customize colors of gradient for Web page background.

The Gradient Editor opens. The gradient bar has four markers (stops):

The top markers on the left and right of the gradient are known as Opacity Stops. They manage where the opacity on the gradient starts and ends.

The bottom markers on the left and right are known as Color Stops. They manage where the colors within the gradient start and end.

Manage gradient for your background in the Gradient Editor dialog box.

You can add additional color and/or opacity stops to the gradient. To do so, simply click (directly above or below on the gradient) where you want to set the marker.

Use color stop or opacity stop to customize where color and opacity changes in gradient.

You can also remove additional color and/or opacity stops you’ve added. To do so, click the stop you want to remove and drag it out of the way.

Step 4: Click the left or right color stop to modify its color. Go to the “Stops” section and click the “Color” button. This opens the Select stop color dialog box. Pick a color and click “OK.” Repeat this step to modify additional color stops on the gradient.

Step 5: To set the opacity of a gradient (optional), click the opacity stop you want to modify. Go to the “Stops” section and drag the “Opacity” level to the transparency you want to set. A lower opacity makes the gradient more transparent, while a higher opacity makes it less transparent.

Choose the Linear Gradient option to create a linear gradient for Web page.Step 6: Click “OK” once you are satisfied with your gradient.

Step 7: Select the “Linear Gradient” button from the Gradient Options bar.

Step 8: Click, hold and drag your mouse over the canvas to apply the gradient. The first color in the gradient is applied where you first click the canvas. It then transitions into the additional colors in the gradient. Play with the transition until you’re pleased with the results.

Step 9: Select “File” and “Save” from the menu. To save a raw version of the Photoshop file, name the file “mygradient” (or whatever you want) and change “Format” to “Photoshop (*.PSD;*.PPD)” in the Save As dialog box. Click “Save” and return to the gradient.

Preparing the Gradient for Your Web Page

Step 1: Select the “Single Row Marquee” tool to create a background we’ll repeat on the Web page.

Use single row marquee to set horizontal gradient for Web page.

Step 2: Click anywhere on the canvas to select a tiny area of the gradient.

Step 3: Select “Image” and “Crop” to crop the image to its new size.

Step 4: Select “File” and “Save for Web & Devices” from the menu. The Save for Web & Devices window opens.

Step 5: Choose the “4-Up” tab to view the gradient in different optimization settings.

Step 6: Choose a “JPEG” format from the right. Then select the pane that contains the optimized gradient you want to use on your Web page.

Step 7: Click “Save” to save the optimized gradient. This opens the Save Optimized As dialog box.

Choose where you want to save the image, such as the folder containing your website’s images. Name the optimized gradient in the “File name” text field and click “Save.”

Step 8: Close Photoshop.

Adding the Gradient to Your Web Page

There are a number of ways to apply the gradient to your Web page. For example, you can:

– Link to the gradient within a CSS file
– Create a style that links to the gradient in your HEAD tag

The option to a background image directly into the BODY tag is deprecated, so it’s not included.

Option One: Linking to the Gradient within a CSS File

Step 1: Use a text editor to open the CSS file where the gradient will be applied.

Step 2: Add the following code to the BODY selector to repeat the gradient horizontally and vertically. (Be sure not to overwrite any existing code within the BODY selector, however).

body {
background-image:url(‘mygradient.jpg’);
}

To repeat the gradient vertically instead, use:

body {
background-image:url(‘mygradient.jpg’);
background-repeat:repeat-y;
}

Step 3: Save your changes and publish the CSS file and gradient background to the Internet.

Option Two: Creating a Style That Links to the Gradient in Your HEAD Tag

Step 1: Use a text editor to open the HTML file where the gradient will be applied.

Step 2: Add the following code between the HEAD tag to repeat the gradient horizontally and vertically:

<style type=”text/css”>
<!–
body {
background-image:url(‘mygradient.jpg’);
}
–>
<style>

To repeat the gradient vertically, use:

<style type=”text/css”>
<!–
body {
background-image:url(‘mygradient.jpg’);
background-repeat:repeat-y;
}
–>
<style>

Step 3: Save your changes and publish the HTML file and gradient background to the Internet.

Be Sociable, Share!
This entry was posted in Web Page Design and tagged , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CommentLuv badge