Introduction to Photoshop: Tutorial 2

Privacy Bit

You know the dance!! . . . .The words and opinions expressed in this article are merely those of the author, and as such do not in any way represent group beliefs held by any other associated person/group/association mentioned throughout the tutorial.

Please feel free to distribute this tutorial as freely as you wish, however please do not alter it in anyway before doing so. If you have any questions/comments/suggestions, please feel free to contact me on m.wells@wam-design.co.uk.

Introduction

This tutorial aims to build on the first tutorial written by myself (Introduction to Photoshop Basics). In the first Tutorial we covered the basic layout of the work area, and the basic tools, and functions associated with each.

In this tutorial I will start off by looking at the gradient tool, we will then look at layer masks and use this newly gained knowledge to make something extremely simple, but which should help to re-enforce all the knowledge gained to date. So really this tutorial will provide you with a few more of the fundamentals and some practical experience. After this tutorial you should be confident enough to start playing with the program a little more, and as such future releases will cover more specific functions/effects.

Also note I am using Photoshop CS2, the differences between older products should be minimal to around version 5. If you are unsure though please contact me and I will be happy to advise on your specific problem.

Shouts must also go to the following peeps for proof reading and helping me out with my grammar ;). Shelly (graphics whore :P) & Edit (CT admin)

Tools

Gradient Tool

The gradient tool (see right) is a very powerful tool in Photoshop, and has a multitude of uses when creating artwork/designs etc. In keeping with my previous tutorial I will mention that the Gradient tool button (on the tools palette) hides underneath it the Paint Bucket tool (or Fill tool).

First thing to note when you select the Gradient tool, are the options now presented to you on the Options Toolbar. You will notice a small thumbnail of a gradient; this represents what your gradient would currently look like. To modify your gradient (you more than likely will want to!) simply click on the image. This opens up the Gradient Editor (see pic. below).

At the top you can see the gradient presets, you can select these, and even create your own . .wow! Underneath these presets is a big fat thumbnail representing your current gradient . .now this is where you can really unleash your creativity.

If you select one of the multi-coloured presets you will see more little blocks (technically called “stops” but I’ll refer to them as blocks) appear just underneath the gradient image, and more than likely one block either end, just above the image of the gradient. The blocks underneath represent colour points i.e., each block represents a separate colour in the gradient, you can easily add a point by clicking just under the gradient, you can also remove a point by clicking it, and dragging it directly downwards. Points can even be repositioned within the gradient by clicking and dragging them to wherever you wish their new home to be!

The blocks on the top are opacity blocks, when you select one of these blocks you can change the opacity of the area of gradient it lives above by changing the value in the “Opacity” box just below the gradient image.

When you click on one of the ‘blocks’ you will notice two smaller diamonds appear either side of the block, this allows you to adjust how the colour of the block, and the colour of the adjacent block are mixed, try changing the position of on of these diamonds and notice how it changes the mixing of colour in the gradient. Once a block is selected you can also select its colour by clicking on the ‘Colour’ box, which in turn will open the colour picker panel.

*Note if you make a trendy looking gradient and you’d like to save it, simply name the beast in the Name text field, and then hit the New button (cunning huh ;) )*

So now you’ve got your gradient all set up you can exit back to the canvas and put it to use. To the right of the gradient image in the Options Bar you will see 5 butons, these vary the manor in which your gradient will be drawn on your canvas. The images below show the 5 different styles with a simple gradient of black to orange to black, dragged from the left of the screen to the right. The best way to appreciate what each does it to make a gradient and go ahead and play with each one.

The other options for the Gradient tool on the Options bar are fairly self explanatory, Mode sets the blending mode of the gradient, you may or may not of played with layer blending modes yet, but if not don’t worry about them for now as we will approach them in a later tutorial. Next to Mode you can adjust the transparency of the gradient before you apply it on your canvas, and you can also use the checkboxes to reverse the gradient, use dithering (should always be ticked except for specific uses) and preserve transparency (again leave selected unless there is a specific reason).

*We will be making a quick use of the gradient tool later in this tutorial when we cover masks aswell*

Summary

Ok, so you've played with the gradient tool, but what are you going to ACTUALLY use it for? Well if you just use Photoshop for recreational artwork etc . . .gradients make great backdrops, transitional areas etc etc. If you use Photoshop for Web-Design, gradients are immeasureably usefull. Web-Design now adays has moved away from the graphicaly complex sites made up of a giant image sliced into its various components and pieced together in a table . . we now spend much more time on lowering the number of images on the page to a bare minimum, and the images we do use are to be as small as possible. So getting to the point, gradients provide a graphical change in one direction (e.g. look at the banner at the top of the page, it goes from light to darker blue from top to bottom). Now by taking that gradient and making it the full height, but just one pixel wide, that one image can then be repeated side by side along the full length to achieve exactly the same effect, but the image used is tiny . . .

So with the Gradient tool covered click here to progress onto the next section where we will cover Masks . . .