Beginners' Guide to Adobe Photoshop CS

1 Create a new file (set size and resolution)

Click File > New. Create a new image of any size you desire by setting Height and Width
values in pixels. If you are doing high resolution work (for print) set the Resolution to 300 or
600 pixels/inch (300 is best unless your image is to be used for professional brochure/poster
printing). If you are creating an image for the web, set the Resolution to 72 pixels/inch.

2 Adobe Photoshop's Undo option

At any time you can press Ctrl+Z to undo your last action. Remember this.
You can also undo more than one action by using the History palette (opened by clicking
'Window' > 'History'). This window will detail every action as you make it. Clicking back onto a
past action in its list will "roll-back" your file to that point. Remember this too.

3 Using Adobe Photoshop's Layers window

The Layers window shows the various layers that your image is made up of.

Web Support Unit

Page 1 of 8

To make a new layer, click the New Layer button, as shown by the red arrow.
To work on a different layer, click on that layer. The eyeball will appear next to that layer. To
hide a layer click on the eyeball so that it disappears. Click again to unhide it.
You can drag layers up and down the list. Layers that are higher up the list will appear "on
top" of layers further down the list.
Remember create a new layer for each part of your image. This allows you to go back and
edit the layers individually. Every Adobe Photoshop novice at some time makes a
masterpiece, only to find out that they did it all on one layer, and now they can't remove those
nasty pink clouds they put on it...

Selection and Manipulation

4 Learning about Selection
One of the most important concepts in Adobe Photoshop is Selection.
This is the Rectangular Selection Tool.
Use this tool on your image to select an area of the image. This lets Photoshop know that
that's the area you want to work on.

5 Adding to a Selection and making a square

To add to a selection, hold Shift before dragging.
To make the selection exactly square, start dragging, then hold Shift.
You can press Ctrl+D to "deselect" and remove the selection at any time.

Web Support Unit

Page 2 of 8

6 Elliptical Selections and subtracting Selections

Hold down on the Selection Tool on the Toolbar, and choose the Ellipse.
To move the selection, just click inside it and drag.
Holding Alt while selecting subtracts that area from the selection. I've done that with the
Ellipse Selection Tool.

Other relevant Adobe Photoshop selection tools

Lasso Tool Allows you to draw an irregular selection area with the cursor freehand.
Magic Wand Selects an area of one colour. You can vary the Tolerance setting to
include more or less shades of that colour.

Colouring Your Selection

7 Choosing a colour
Now that you know how to select an area in Adobe Photoshop, we can look at some tools that
can do something with that area.
Before we get started on colouring your selection, you'll need to pick a colour.
This part of the Toolbox is where you select your colours. The top square is the
foreground colour. If you use a brush or paint bucket, it will apply this colour.
The bottom square is the background colour. It has various purposes, but it's
also a good place to store a second colour that you're using.
Click on either square to change its colour.
Click the arrow to swap the two colours.
Click the little squares to reset the colours to black and white.

8 The Paint Bucket and Gradient tools

These two tools share a button in Adobe Photoshop CS. To select the one that is "hidden",
click on the visible icon and hold it down.

Web Support Unit

Page 3 of 8

Solid Colour Fill

On a new layer, just click the Paint Bucket tool inside the area of your selection to fill it
with the colour you've selected.
Gradient Fill
Click and drag from one area to another to fill the area. The point where you started to
click will be the colour of your foreground colour, and the point where you took your finger off
the mouse button will be the colour of your background colour. The area in between will
gradually change from one colour to the other.

In this case, I went from corner to corner, with the default white and black selected.

9 The Text Tool

Just select it and then click wherever you want text to appear. Choose a font, colour, and
size, and start typing. Other text options can be changed using the Character/Paragraph
palette:

10 The Move Tool

Use this tool to drag things around. If you have a selection, it will drag the contents of the
selection. If not, it will drag the contents of the layer you're on.

Blending Options & Special Effects

11 Adding Effects
Now that you know the basics, it's time to start adding some easy special effects. To
demonstrate Adobe Photoshop's special effects, here's an unembellished button for a
website. Each part of this image is on a separate layer.

Web Support Unit

Page 4 of 8

12 Key Adobe Photoshop Blending Options

In the Layers list, right-click on the layer to which you want to
apply the effect and select Blending Options. This is a picture
of the left-hand portion of the Blending Options window that
will appear.

Drop Shadow
Selecting this option will make your layer cast a shadow on
layers below it.

Bevel and Emboss

Makes the layer like a block of gold bullion - raised in the
centre, with edges that slope down. (This is a good effect for
creating buttons.)

Texture
Makes the surface of the layer look like it's made of wood,
stone etc. Use the "Overlay" setting.

Stroke
Stroke is just another word for "outline". A Stroke is useful to
make an object stand out from its background. For a softer
alternative, use Outer Glow.
Other than using some of the Blending Options, nothing else
has been done to this button (below). Have a go at replicating
it.
Then feel free to experiment with the other blending options available.

Photo Manipulation with Adobe Photoshop

13- Open a Photo for editing
Photoshop offers two useful ways of opening an existing graphic/photo file for editing.
1) File > Open (or Ctrl + O), browse to the file you require, select it and press Open.
OR
2) Use the File Browser window. This will show you thumbnails of the images available
in every folder. To open an image double-click on its thumbnail.
The File Browser window can be access in two ways:
File > Browse (or Shift + Ctrl + O)
Web Support Unit

Page 5 of 8

Use the Toggle File Browser icon:

14- Zoom
Open a photo file.
Press (Ctrl and +) to zoom in. Press (Ctrl and -) to zoom out.
Alternatively use zoom slider on the Navigator palette (Window > Navigator).
You can also control which area of an image you have in your workspace by dragging the red
box around on the thumbnail image in the Navigator palette.

15 Transformation (resize, rotate, distort)

To transform an object, first select the area to apply the transformation to (make sure you are
on the right layer too!). To select all press Ctrl + A (or Select > All).
Next press Ctrl+T (or Edit > Transform > and select the type of transformation you require).
Use the box "handles" which will appear around your selection to push/pull/twist your
selection around. You will notice that the cursor changes to different arrow types to indicate
what transformations it is in the correct place to perform. Try moving your cursor to different
places just outside your selection.
Use the Shift key while expanding or shrinking an image to maintain the image's height and
width ratios. This stops the image distorting.
When you are happy with the transformation which you have made to your image object,
press Enter to apply the transformation. Or, if you are unhappy, press Esc to cancel.
To deselect your image press Ctrl + D (or Select > Deselect).
An alternative method of resizing your image, with pixel precision or by percentage, is to use
Image > Image Size. Try this out too.
(Tip: to prevent distortion make sure 'Constrain Proportions' is ticked.

16 Cropping
Select the crop tool.
Make a selection on your image where you wish to crop it. (If you need to adjust your crop
selection, you can move it using the box handles around the outside.) Press Enter to crop, or
double-click in the centre of the selection.

Web Support Unit

Page 6 of 8

17 Save graphics for web use

If you want to use your completed graphic on a web site, it is best to use PhotoShop's Save
for Web feature to generate an efficient file for web use (i.e. one that will be quick to
download, and of a suitable file type for inclusion in web pages, .gif or .jpg).
First save your file as Photoshop's native format (.psd). This will retain all of your layers, and
will be editable if you wish to amend your graphic at some point in future.
File > Save (or Ctrl + S) > select a location for your file, name it appropriately > press Save.
Next click File > Save for Web.

Click the "Optimized" tab as this will show you a preview of the image as it will look with your
selected web settings (on the right hand side) applied (see below).

Generally the rule is save photos as JPEG (.jpg) and non-photographic images as GIF (.gif).
By changing the various colour/quality/dither settings you can decrease the final file size of
your web graphic. (Keep an eye on any excessive image degradation by checking the
preview image). You are aiming to get the file size as low as possible, without losing the
integrity of the image being saved. Photoshop helpfully gives you the expected file size, as
well as the expected download time on the slowest type of dial-up internet connection, in the
bottom left-hand corner. Keep an eye on this too:

As a quick indication, for a large photo image, web-ready, around 30K is the maximum to be
aiming for (ideally try to get your file MUCH smaller!). Aim for file sizes under 10K, if possible.
Small is good!

Web Support Unit

Page 7 of 8

Graphics from Screenshots (Screen Captures)

1) Open Photoshop, and once it has loaded, minimise the program.
2) Next bring up on your screen the program (and file, if appropriate) which you want to
capture (in Word / IE / PowerPoint / Access / Excel etc). In theory you can capture
images from ANY program.
3) Once the screen is showing everything exactly as you want it to appear in your
screenshot image, (if needed with menus expanded or text highlighted etc), then you
can press the "Print Screen" key (which is usually situated either next to the function
keys or above the arrow keys or with the number keypad).

4) Next, switch back into PhotoShop.

5) Go to File > New. This will bring up the new file dialogue box, which should be
displaying its intent to create a new image of exactly the dimensions of the screen
resolution which you are currently using (e.g. 1024 x 768, 800 x 600 etc). Press OK.
6) Once you have your new blank file canvas opened, go to Edit > Paste (or press
CTRL+V). This will paste your screen capture into your file for example:

7) Now you can either save the file and use it exactly as it is, or you can add layers /
explanatory text / crop the image and so on, until the image is as you finally want to
present it.
Note: Screen captures taken in this method will not be able to retain an image of the
cursor or mouse pointer. If it is important that a cursor or mouse pointer be shown in your
screenshot, you will need to add it to your Photoshop image separately, on a new layer.

Useful Further Photoshop Tutorials

http://www.pegaweb.com/tutorials/web-design-and-adobe-photoshop-tutorials.htm

Web Support Unit

Page 8 of 8