If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Creating Web Graphics for Web : How to Add Gradient using Adobe Photoshop Elements

Step One: Access the Gradient Tool

To add a gradient effect to the background of your header just follow these steps:

Step 1.1: Open Photoshop Elements, then go to FILE> OPEN and choose header.psd from the “My Web Site” folder.

if you have no file saved, follow this steps: Create New File

a.  Click File then select New.

b.  Choose Blank File

c.  Type 650 for width

d.  150 for height

e.  72 dpi for the resolution

f.  Color mode RGB

g.  Background Contents  — White

h.  Click Ok.

Step 1.2: The file will open in Elements and you will see this:

Step 1.3: Unlock the background layer.

At this time you will have one layer called “Background” and it will be locked, so you need to put your mouse on the layer itself (shown below) and double click twice quickly to turn it into an editable layer.

When you’ve double clicked on it, an options box will appear and you need to change “Layer 0″ to “background”, like this:

When it’s unlocked you will see the lock icon is now gone from next to the word “Background” in the layer menu:

If you want to add the gradient as the ONLY effect on the header then make sure you are on the layer marked BACKGROUND.

Step Two: Accessing the Gradient Tool

Now go to the TOOLBAR and select the GRADIENT tool:

That brings up the GRADIENT TOOLBAR. From here you are going to choose a PRESET GRADIENT, or CREATE YOUR OWN.

USING PRE-SET GRADIENTS:

Step 2.1: In Section 1 of the screen capture below you need to click the little down arrow to bring up the PRESET gradients.

Step 2.2: The PRESET GRADIENTS you will see the first time you open Photoshop Elements will look like this:

Step 2.3: Choose a gradient from the default list, OR click the arrow on the right hand side to bring up the OTHER gradient options.

Step 2.4: When you have the gradient selected you need to take the gradient tool and drag it from left to right (starting just outside the edge of your graphic image) or top to bottom, whatever you prefer.

TIP: Hold down the SHIFT key when you are dragging the gradient tool and you will make a nice straight gradient effect.

TIP: If you only drag partway down the image or partway across, the gradient effect will look different.

Gradient Effect from Left to Right:

Gradient Effect from Right to Left:

Gradient Effect from Top to Bottom:

Gradient Effect from Bottom to Top:

I suggest you play around with the tool a little bit to find the effect you like.

Or, if you want to experiment with using a specific gradient color scheme, go to the section below to discover how to create your own custom gradients.

*************

Want more tutorials on creating web graphics?

Incoming search terms for the article:

• gradient photoshop
• 650 width for html emails 72 dpi height