In this article (slash) tutorial we will explore Gradients in all their glory. Simply put, a gradient consists of two or more colors gradually blended together. They are often used to add depth to dull single-color filled backgrounds as well as doing a lot of other cool things. This technique is a fundamental part of graphic design and you probably already use them often enough but in this article we challenge you to return to the basics and maybe learn some new things that gradients can do for you. Also, if you’re new to this then this should be a good place to get a good grasp of how gradients should be approached.

Note: for this tutorial we will be using the “Gradient Tool” located on photoshop’s Tools menu, or by pressing the “G” key as a shortcut. There are however, many other ways to access and create Gradients, such as through Layer > New Fill Layer. Layer > Layer Style, and Layer > New Adjustment Layer… but using the Gradient Tool (G) allows for more control over your gradient placement(s) and plus its right there and easier to use!

Making Gradual Two Toned Gradients

A two colored gradient is the simplest gradient to create but is also, in my opinion, the best looking as it doesn’t add too much noise to a picture or background. They allow for easy contrast between the background and the foreground of an image, allowing you to “show off” the main part of your creation, whether it be a graphic or web page.

Remember in this article we are learning how to make better gradients. So we are going to set up some “rules” here and maybe explain a little more about how to pick the colors for gradients. I’ve seen some horrible looking gradient patterns… just look at some of the default photoshop presets and you should see my point. Any color can be made into a slick looking gradient but you have to pick a color close enough to the original to make the transition between the two colors work. Picking a bright red color to transform into a bright blue will always look bad but picking a dark colored blue to transform into a slightly lighter colored blue (see above) will always work and look nice. This is even easy to do so lets begin…

(you can skip this if you already know how to create gradients)Start by selecting the gradient tool (click image below), or by pressing your “G” key.

Now with the gradient tool selected lets open up our gradient editor by clicking in the middle of the gradient shown in your upper left screen (click image below):

Now with the gradient editor open you can begin to create (and edit) your own gradients. You also should see some of photoshop’s default preset gradients in the box above. You can see more of them by clicking the arrow on the top left of that box or by manually loading the .GRD file.Now lets make a gradient. We will start by choosing your first color. Do this by double clicking on the first left “stop” in the gradient editor (below):

This should open up a Color Picker dialog window for you to choose your first color. Pick what you like, or use what I used, color 0284d1 (copy and paste that into the color picker textbox labeled “#”). Either way, pick one and press OK. Next, click the right stopper (opposite side) and pick your next color… whether your going lighter to darker, or darker to lighter always make sure it is similar enough to blend without clashing. This should be pretty obvious as you test out different variations. You can choose the second color i chose 046ba9 to see the slight contrast between the two… although this doesn’t have to be such a small difference, you could make the color gap even larger depending on what you have in mind for its use.

Making A Better Gradient

Well thats the basics on creating a two color gradient but like i said before, we are here to discuss making better gradients. There are so many ways to make gradients its too much to cover everything here so we’re going to stick to a certain path by going over different techniques and try and cover the grounds that way. So lets begin already.

Lets talk about color tones and ways to choose them. Lets start with an experiment. Open up the gradient editor and double click your first stop. Now select a random color, any color and copy its hexadecimal code. Now close it and click the next stop (note: make sure they are far left to far right for this), now paste its hexadecimal code to have to same exact color selected. Now click one of the textboxes labeled “H S B” “R G B” “L A B” and “C M Y K”… for example, select ‘B’ in the HSB. Now hold down shift, and press your up key about 2 – 4 times (try this with other directions and selections). Chances are you have a perfectly good looking gradient. Easy, yes, fun? not really but you get the point. Stay close to the original color while making the different tones obvious. Now that we got that out of the way lets have a little more fun with gradients.

Techniques

There is all the hype going around about “Web 2.0.” It’s definition, which used to be pretty obvious is now getting a little more blurred as it grows on but we are going to use the term to describe what a lot of people call “Web 2.0 Colors.” They make for nice looking webpages and graphics that really stand out. Fortunately for us, this is a very basic concept and easy to re-create.

Lets start by using gradients in a slightly different manner. We’ll do it by creating a simple logo for a webpage. Follow these basic steps to begin…

• Start a new image (file > image > new).
• Select the size to be something around 380 x 170. (to give you room)
• Select the Text Tool (T).
• Press the “D” key to default the colors.

Now lets write a name for our logo. Call it whatever you please, i used the name of this site. Now choose a font. Almost any will do but i suggest something somewhat simple. Once this is done, rasterize your type layer by going to Layer > Rasterize.

Now we are going to make a gradient for our colors to use on our logo. Start by opening up the gradient editor. Click the first stop and choose your color, use something bright . I’m using a blue (# 0071b5) for the first color and using a darker blue (# 0284d1) for the second color.

Now place both stops in the center of the gradient (both at about 50%), see image below:

Now hold down Ctrl and click your text layer to highlight your text. With your text selected use the gradient tool (G) and drag the line slightly above the half way point of your text to create the gradient. Also you can do this by going to Layer > Layer style > Gradient Overlay. Either way It should look something similar to this….

Not very pretty yet but bare with me. Next go to Layer > Layer Style > Stroke and change the settings as followed…

Click OK to save. Now Duplicate the the layer. Hold down Ctrl and Select the new layer. Now select the gradient tool and go into the gradient editor. This time do the same type of gradient as the last but another color. I used red this time. Then do this all over again (duplicate layer etc. etc.) and make a new gradient. I used green for the third one. After this you should have a red, blue, and green text on 3 different layers. Now all you have to do is position them. You should have something kind of like this…

Note that I changed the background to black to better suit the colors. You can also add startbursts to the side or under it. Makes for a simple yet stylish Web 2.0 logo and is just one of the many things you can do with gradients.Sorry To leave you hanging here kids, but we will have to save more discussion and tutorials for next time! So just wait for Part 2 very soon.