Learning Adobe Photoshop CS4

By Greg Bowden

Chapter 4

Drawing Shapes

Guided Computer Tutorials

www.gct.com.au
PUBLISHED BY

GUIDED COMPUTER TUTORIALS

PO Box 311
Belmont, Victoria, 3216, Australia

www.gct.com.au

© Greg Bowden

This product is available in Single or Multi User versions.

Single-user versions are for single student or teacher use at any

particular time, just as a single text book would be used. If you intend
to use the notes with multiple students the single user version should
be upgraded to the multi-user version.

Multi-user versions allow the school or institution to print as many

copies as required, or to place the PDF files on the school network,
intranet and staff laptops. A certificate of authentication is provided
with multi-user versions. Bookmarks provide links to all headings and
sub-headings, and individual chapters are provided.

First published 2009

ISBN: Module 1 1 921217 69 3

Module 2: 1 921217 70 7
Module 3 1 921217 71 5

PDF document on CD-ROM

Every effort has been made to ensure that images used in this
publication are free of copyright, but there may be instances where
this has not been possible. Guided Computer Tutorials would
welcome any information that would redress this situation.
 Chapter

4
Drawing Shapes
Photoshop provides a range of shapes that can be used with photos or in the creation of
your own designs. These tools allow you to create web page buttons, borders for photos,
company logos, artistic designs and so on.

Starting a Blank Document

1 Load Photoshop or close the current file.
2 Display the FILE menu and select NEW.

3 Set the WIDTH to 800 pixels, the

HEIGHT to 600 pixels and the
BACKGROUND CONTENTS to WHITE.

4 Select OK to start the document.

Drawing Normal Shapes

Photoshop provides the normal drawing shapes such as rectangles, ellipses, polygons
and lines.

A Drawing Rectangles
1 The SHAPES TOOL is at the lower section of the TOOLS panel. It may contain a
rectangle, ellipse, line or custom shape depending on which tool was used last.

2 Click and hold the mouse button

on the SHAPES TOOL in the TOOLS
panel and select the RECTANGLE
TOOL from the pop-up list of tools.

© Guided Computer Tutorials 2009 4-1

Learning Adobe Photoshop CS4

3 The different shapes are also

displayed in the OPTIONS BAR at the
top of the screen.

4 Select the SHAPE LAYERS button in

the OPTIONS BAR, drag a rectangle
on the screen and it will be filled
with the colour displayed in the
OPTIONS BAR.

5 Click on the COLOUR button in the OPTIONS BAR.

6 Use the COLOUR slider to select

a colour, click on a shade and the
rectangle will be filled with the new
colour.

7 Select OK to accept the new colour.

B Rectangle Styles
There are numerous styles that can be applied to a shape.

1 Click on the arrow next to the STYLE

box in the OPTIONS BAR to display
the STYLE panel and select a style to
fill the rectangle.

4-2 © Guided Computer Tutorials 2009
 Drawing Shapes 4

2 Click on the arrow icon at the top

right of the STYLE panel to display
the STYLE PANEL MENU and select
TEXTURES.

3 Select OK to replace the current

styles with the TEXTURES styles.

4 Try some of the textures. If you

don’t like the effect simply press
CTRL+Z on the Windows system or
COMMAND+Z on the Macintosh
system to undo the effect.

5 Click on the STYLE PANEL MENU icon

again and select PHOTOGRAPHIC
EFFECTS.

© Guided Computer Tutorials 2009 4-3

Learning Adobe Photoshop CS4

6 Select OK to replace the TEXTURES

styles with the PHOTOGRAPHIC
EFFECTS styles.

7 Apply some of the PHOTOGRAPHIC

EFFECTS to the rectangle.

8 Try some other styles from the STYLE PANEL MENU. Some are suitable for
rectangles others are less effective.

9 Click on the STYLE PANEL MENU icon

again and select RESET STYLES.

10 Select OK to return the styles to the

DEFAULT STYLES.

NOTE: These styles can also be applied from the STYLES panel as you
did in the last chapter.

4-4 © Guided Computer Tutorials 2009
 Drawing Shapes 4
C Creating Buttons
Buttons have become a vital part of web sites. Photoshop allows you to quickly produce
professional looking buttons.

1 Select the ROUNDED RECTANGLE

TOOL from the OPTIONS BAR, draw
a small rectangle below the first
rectangle and it will have rounded
corners.

2 Collapse the PANEL GROUP if it is
expanded.

3 Expand the LAYERS panel and use its

bottom border to increase its height.

NOTE: i When adding effects to shapes it is handy to see more of the

contents of the LAYERS panel by having just it expanded.
ii Notice that there are now 3 layers in the LAYERS panel. One
for the background and layers for each shape.

© Guided Computer Tutorials 2009 4-5

Learning Adobe Photoshop CS4

4 There are two parts to a layer, the

layer thumbnail at the left and its
layer mask thumbnail at the right.

5 Any styles or effect are displayed

below the thumbnails.

NOTE: When you make a change only the shape in the selected layer
is altered.

6 Click on the STYLE arrow then click

on its PANEL MENU icon and select
GLASS BUTTONS from the style list.

7 Select OK to replace the styles in the

STYLES panel.

4-6 © Guided Computer Tutorials 2009
 Drawing Shapes 4

8 Click on some of the different glass

button options and just the rounded
rectangle should be adjusted.

9 Turn off the LAYER MASK

THUMBNAIL by clicking on it (its
white border is removed) and try
changing some styles. No changes
should occur.

D Creating a Rollover Button

Web sites often like to have a button change when the mouse is moved over it. This is
called a ROLLOVER button. We can easily adjust the current button to be different and
the two buttons could then be saved individually and imported into a web site.

1 Select the MOVE TOOL in the TOOLS

panel.

2 Hold down the ALT or OPTION key

and drag the button straight down
to create a copy of it.

NOTE: When creating ROLLOVER buttons you can use CANVAS SIZE
from the IMAGE menu to set the canvas to the size of the
required button.

© Guided Computer Tutorials 2009 4-7