Learning Adobe Photoshop CS4By Greg Bowden

Guided Computer Tutorialswww.gct.com.au

Drawing ShapesChapter 4

PUBLISHED BY

GUIDED COMPUTER TUTORIALSPO Box 311Belmont, 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.

© Guided Computer Tutorials 2009 4-1

Chapter

4Drawing 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.

4 Select OK to start the document.

Drawing Normal ShapesPhotoshop 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.

3 Set the WIDTH to 800 pixels, the HEIGHT to 600 pixels and the BACKGROUND CONTENTS to WHITE.

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 20094-2

Learning Adobe Photoshop CS4

5 Click on the COLOUR button in the OPTIONS BAR.

7 Select OK to accept the new colour.

B Rectangle Styles

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

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.

6 Use the COLOUR slider to select a colour, click on a shade and the rectangle will be filled with the new colour.

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.

© Guided Computer Tutorials 2009 4-3

4Drawing Shapes

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 20094-4

Learning Adobe Photoshop CS4

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

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

6 Select OK to replace the TEXTURES styles with the PHOTOGRAPHIC EFFECTS styles.

7 Apply some of the PHOTOGRAPHIC EFFECTS to the rectangle.

9 Click on the STYLE PANEL MENU icon again and select RESET STYLES.

10 Select OK to return the styles to the DEFAULT STYLES.

© Guided Computer Tutorials 2009 4-5

4Drawing Shapes

C Creating Buttons

Buttons have become a vital part of web sites. Photoshop allows you to quickly produce professional looking buttons.

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.

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

3 Expand the LAYERS panel and use its bottom border to increase its height.

2 Collapse the PANEL GROUP if it is expanded.

© Guided Computer Tutorials 20094-6

Learning Adobe Photoshop CS4

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

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.

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.

© Guided Computer Tutorials 2009 4-7

4Drawing Shapes

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.

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.

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.

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.