If you are using a browser, you can click on this separator wherever you see it to return to the Contents

Open pads and maneuver them on the screen

1.	Launch Photoshop and open an image to manipulate. For now, use one of the samples. On many Windows computers these are at: c:\Program Files\Adobe\Samples (Any sample will do.)
2.	Close all the "pads" on the screen. (Pads, also known as "palettes" are the small windows with options that appear by default on the right-hand side of the screen. A pad is illustrated to the right.) Click the X button in the upper left of each. Near the top of each pad is a series of tabs. Clicking the tabs lets you see a different selection of options or information. Tabs in the illustration at right are Navigator, Info, and Histogram.
3.	Pull down the Window menu and find the items labelled "Show...". These are menus to put tabs on the screen. There are 19 tabs in Photoshop CS, listed in alphabetical order in the second subdivision of the Window menu (shown at right).
4.	On the menu, select the tabs for: History Layers Navigator When Photoshop opens a tab, it generally opens associated tabs in the same pad. For example, when I open History, Actions comes along; when I open Layers, Channels and Paths are opened; when I open Navigator, Info and Histographs appear as well. This is OK, except that the three pads take up a fair amount of real estate on the screen. The next step lets you reduce the number of pad and keep just the tabs you want...
5.	Clear unwanted tabs out of the Navigator window by dragging the Info and Histograph tabs out and dropping them on the main Photoshop desktop. They will form pads of their own there. Hint: drag by putting your pointer over the top-most part of the tab, where its name appears on the label, with the left mouse-button held down. Drag the Layers tab from its window to the Navigator pad. Drop it right next to the label of the Navigator tab. In the same way, drag the History tab into the Navigator's pad. Close all the unwanted pads by clicking the X button in the upper-right corner.

Identify and use Tabs

Navigator

Use the help menu to find out how the Navigator tab works. Experiment with the open image by zooming in and moving to different parts of it.

Layers

This tab allows you to see and deal with the layers in an image. Photoshop uses layers to separate parts of an image that you want to manipulate individually. (Layers are dealt with in more detail in Module D15h, "Layers in Photoshop".)

History

In the History pad, Photoshop keeps a record of what you do. You can use that to undo a series of actions. A series of actions can also be saved so it can be played back. (This module does not cover saving and playing back actions, but you can read about it in Photoshop's Help.)

Experiment with tools

Create a new "canvas" with the menu selection File > New. (In Photoshop, an image is contained in a "canvas".) In the New dialog box, indicate a Width of 400 pixels and a Height of 300 pixels. (If the unit of measure isn't pixels, use the drop-down list to select pixels.) Make sure the Mode selector is set to RGB Color.

Open the built-in Help system.

Experiment with tools for creating graphics. For each:

1. Select one of the tools shown below.
2. Look the tool up in the Help system (Help menu's "Help Topics") and read about how to use it. You may have to use the "Find" tab and type in the name of the tool (one word only) to get enough detail about how to use it.
3. Use the tool in the new window with its default settings.
4. Click on the tool's Option menu bar and try different settings.

These tools are the ones used for creating lines, shapes, and filled areas. Experimenting with them is the best way to learn how they work. In the window you just created, use try each of these tools to see how they work.

Plan to discard the canvas and start over again when you're ready to start the next part of the assignment. 

	Paintbrush
	Pencil
	Rectangle, Rounded Rectangle, Ellipse, Polygon, Custom Shape, Straight Line Important: before using any of these tools, it is strongly recommended that you select the "filled area" button in the toolbar (circled in the figure below). Otherwise, Photoshop creates a separate layer for each shape, and these are somewhat trickier to work with. .
	Eraser
	Text
	Fill and Gradient fill - first, use a marquee tool to select an area. The fill will be limited to that area.
	Set the Foreground and Background Colors, and change them to make your "experiment" interesting.  Tip: if you use the "filled area" button on the shape option bar as suggested in the tip above, you can set the color for individual shapes before drawing them. If you use the default "shape-layer" option, selecting a new color will change all the shapes in the active shape-layer.

When you're done, delete your experimental drawing (unless you'd like to save it). It's not for credit.

Make Drawings

When creating a Web page, it's often helpful to have little shapes that you can use for several purposes. We'll use Photoshop's tools to make a gallery of small images for use in Web pages, including .

Start by creating a new canvas (File > New) with the following characteristics (see illustration at right): Name: Gallery Preset: 800 x 600 (you can use the drop-down list to select this) Background Contents: Transparent Note: transparent backgrounds are displayed in graphics programs with a checkerboard pattern of white and light grey squares. When you put an image like this on a Web page, the checkered areas disappear and the background of the Web page shows through.

 

When the canvas is ready, create the following, being careful to make the details precise, since your work will be graded on the care with which you use the tools:

1. Identify your Work

Use the Text Tool from the Tool Palette to enter your name, class and section number for identification. Use red, 14-point, "Arial Black" font and move it in the upper right-hand corner with the Move tool.

Save the file on your disk, using a name like Gallery

2. Separator Lines

1. Create a new layer by clicking on the Layers tab, then clicking the new layer button at the bottom (circled in the illustration).
2. Pick a foreground color, either with the Color Picker from the Tool Palette, or in some other way if you prefer.
3. In the new layer ("Layer 1") use the rectangle tool to create a long, thin rectangle.The rectangle should be almost as wide as the canvas, but only about the height of 1 square on the checkerboard background.
4. Make4 more long, thin rectangles like the first, using a different color for each.
   Save your file (using the same name).
5. Use the Marquee tool to select a long, thin rectangular area the size of one of your separator lines (a little less than the width of the canvas, and about the height of one checkerboard square). Use the menu choice Edit > Fill, and in the dialog box that comes up, choose Patterns, then a specific pattern that looks interesting to you. Photoshop will fill the marqueed area with that pattern.
6. Make four more separator lines, using the same technique with different patterns.
   Save your file.
7. Make another marqueed area the size of the ones you just did, but this time, select the Gradient Fill tool. Drag the pointer within the marquee to specify the length and angle of the gradient pattern, and see what you get.
8. Make four more lines with gradient fills, but choose different fills and/or angles from the Options bar above.
   Save your file.

3. Candy Bullets

"Bullets" are the small circles or other shapes found on the left side of many lists. "Candy" bullets are interesting, colorful little images that can be used instead of those dull, boring circles.

1. Create a set of10 simple, round "candy bullets"
   • From the Tool Palette, select the ellipse tool. (It may be under the rectangle tool.)
   • Choose a different foreground color for each of the 10 bullets, using the Color Picker (or other method, if you prefer)
   • As you draw each ellipse, constraining it to be a perfect circle by holding down the <Shift> key while you drag the mouse.
   • These circles should fill about one square on the checkerboard background, no more than 4.
     Save your file.
2. Create a set of10 square "candy bullets"
   • From the Option Bar, select the rectangle tool.
   • Choose a different foreground color for each of the 10 bullets, using the Color Picker (or other method, if you prefer)
   • As you draw each rectangle, constraining it to be a perfect square by holding down the <Shift> key while you drag the mouse.
   • These rectangles should fill about one square on the checkerboard background, no more than 4.
     Save your file.
3. Create a series of 10 "candy bullets" using Photoshop's Custom Shape Tools.
   • Select the Shape Tool from the tool palette.
   • On the Options bar, select the Custom Shape Tools option
   • Pull down the shape selector and select one of the available shapes that looks like it might work as a bullet
   • Choose a color using the Color Picker (or other method)
   • These shapes should fill no more than 9 squares on the checkerboard background. Smaller is better, unless the shape is too hard to recognize in a smaller size.
     Save your file.

4. Arrows and "Home" image

1. Create an arrow
   • Create a new layer in the Layers tab.
   • With the Custom Shape Tool selected, pull down the shape selector from the options bar and select a thick arrow. (Color doesn't matter for these, because we will be changing their appearance later.)
   • Drag to create an arrow 8-10 squares long and 5-6 squares high in the new layer.
2. Copy the arrow and create two more
• Marquee the arrow, copy it, and paste it twice. You should now have 3 identical arrows.
• Marquee the second arrow. On the Edit menu, select Transform > Rotate 180°. The second arrow should now be pointing in the opposite direction.
3. Turn an arrow into a "home" button
• Marquee the third arrow. On the Edit menu, select Free transform. Using the mouse, rotate the arrow so that it is pointing upward. Then squash it down until it is the height of the other arrows, 5-6 squares high. Stretch it to make it a little wider until it looks more like a house.
  Save your file; we'll be enhancing the arrows in a moment, using ImageReady.

5. Three-Dimensional Candy Bullets and Styles

Switch to Image Ready using the button at the bottom of the Tool Palette. Image Ready and Photoshop have some overlapping features, but also a number of different ones.

1. Create a set of 10 round, 3-D bullets
   • Create a new layer in the Layers pad.
   • Choose a foreground color.
   • Select the ellipse tool and create a round bullet about 1 square in size. (Hold down the <Shift> key while you drag to keep the ellipse round.)
   • Using the Layer menu, select Layer styles > Bevel and emboss
   • Click OK in the styles dialog box, or experiment with the options if you like
   • Draw 9 more bullets of different colors in the same layer. They should have the same styles, and you can adjust the styles at any time to modify their appearance as a group.
     Save your file.
2. Give the arrows a "stylish" look
   • In the Layers tab, find the layers that contains the arrows and "home" image. Merge the three layers into one:
     • Click one of them in the Layers tab.
     • Hold the <Shift> key and click each of the others. The layer labels in the Layers tab should all be selected (darker color).
     • From the Layer menu, select Merge Layers.
   • Bring the Styles tab to the top of its pad. (Use the Window menu to open Styles if you don't see it.)
   • Scroll through the styles in the tab to see what's available. Click on some of your favorites and observe the effect they have on your arrows. Pick your favorite and leave the arrows that way.
     Save your file.
3. Add 3 more arrow layers with different styles
   • In the Layers tab, make sure the layer with your arrows is selected.
   • From the Layer menu, select Duplicate layer. This will create a copy of the layer right on top of the arrows layer, so it may seem that nothing happened.
   • Use the Move tool from the Tool Palette to move the new arrows away from the old ones.
   • From the Styles tab, select a different style for the new set of arrows.
   • Repeat the duplication and style selection twice more, until you have four sets of arrows, each in a different style.
     Save your file.

6. Navigation Buttons

1. Create a button figure
   • Create a new layer in ImageReady's Layers pad.
   • Using the Pill Rectangle Tool, create a rectangle 15-16 squares long and 4-5 squares high.
   • Choose a style from the Styles pad and apply it to the "pill" rectangle.
2. Label the button
• Select the Text Tool and type "Home" somewhere in the rectangle. This will create a new layer.
• Choose a font and size for the text. (You can do this in the Character tab, which you may have to open from the Windows menu if you don't see it.) Choose a font that is clear and readable - not necessarily fancy - and size it to be large enough to read.
• From the Styles tab, choose a style for the button that is attractive, but clear to read.
• Center the text in the rectangle:
  • Select the "Home" text layer and the rectangle layer by clicking the Home layer in the Layers pad, holding the <Shift> key, and clicking the rectangle layer. Both should be dark-colored.
  • Select the Move tool, but don't use it. Instead, in the Tool Options bar, click the Align Layer Vertical Centers button; then click the Align Layer Horizontal Centers button. This should automatically place the word "Home" in the center of the rectangle. You should now have a nice-looking button, occupying two layers.
    Save your file.
3. Duplicate the button and re-label
   • Make sure both text and rectangle layers are (still) selected in the Layers tab (shown by a dark colored background).
   • From the Layer menu, select Duplicate Layer. This should create a copy of both layers.
   • Since the copy is right on top of the original, you'll need to move it. With both layers still selected, get the Move tool and move the new layers away from the first. Hint: an easy way to move objects is to use the keyboard arrow keys. To move more rapidly, hold the <Shift> key as you use the arrows.
   • With the two buttons separate, you'll need to type a new label for the new button. Double-click its layer in the Layers tab,and this will let you type in a new label. The second button should be labeled About Us.
     Save your file.
   • Repeat this process with the buttons until you have a total of five buttons:
     • Home
     • About Us
     • Products
     • Customer Support
     • Site Map
       Save your file.

Email the image as an Attachment

Email the file gallery.gif to your instructor as an attachment.

Reminder: For each email you send, please use the Subject line to identify the message by including your name, class, section, and the exercise. For example:

Sarah Strong, INP152 sec.99, D12h

Audience: This is for people who have learned the basic techniques of opening Photoshop and identifying its tools, and want to learn more about using the tools for basic image work.
Objectives: When you successfully complete this lesson, you will be able to...

1. Open pads and maneuver them on the screen
2. Identify and use the following:
1. Tool options bar
2. Brushes
3. History
4. Navigation
5. Shape tools
3. Select foreground and background colors
4. Change size of an image
5. Crop an image
6. Change brightness and contrast of an image
7. Demonstrate ability to create, modify and manipulate text.
8. Create single and multiple pixel graphics for use on the web (such as arrows, bullets and rules).
9. Save a file in a non-Photoshop format

About this document...
Module D12h: This document is part of a modular instruction series in computer technology. For more information, see the overview or the list of modules in this series, D: Desktop Publishing and Computer Graphics. This document has been used in the following classes: INP 143 / INP 152

Author: Laurence J. Krieg
Institution: Internet Professional Department, Washtenaw Community College
History: Original D21g: June 2000; Renumbered D12h Sept. 2002; This revision posted  Monday, 31-Aug-2009 11:47:55 EDT
Copyright © 2004, Laurence J. Krieg, Washtenaw Community College

Instructors: You may point to this file in your Web-based materials.
Students: you may make a copy for your personal use.
All other uses: contact the author, Laurence J. Krieg for permission.