• Choose Start | Programs | Adobe Photoshop 6.0.

Screen Layout

On opening Photoshop, you will see the following four items: Menu bar, Options bar, Tool bar, Layers Palette. These will be used for shortcuts in many of the activities.

Menu bar - Click any of the words on this row to see a menu of options in that category - File and Edit are some of the commonly used for saving and opening files; copying and pasting images.

Toolbox - The toolbox contains tools that let you type, select, paint, draw, edit, move, and view images. Below are some of the tools that you will use in this teaching reference.

Rectangular Marquee tool - Used to select sections of a graphic

Move tool - Used to nudge a selection

Crop tool - Used to cut down the dimensions of a picture

Paintbrush tool - Used to draw and touchup an image

Paint Bucket tool - Used to fill in a selection

Type tool - Used to add text

Rectangle tool - Used to make a rectangle

Eyedropper tool - Used to select a specific color in a photo

Zoom tool - Used to magnify an image

Tool Options bar - Most tools have options that are displayed in the Tool Options bar. These options change as different tools are selected.

Layers Palette - Layers provide a powerful way for you to organize and manage the various components of your image. By placing an element on a separate layer, you can easily edit and arrange that element without interfering with the other parts of the image.

Choose File | New.

• Set the the width and the height from inches to pixels which are standard dimensions for web images.
• For this image, set the width and height to 600 and 100 respectively.
• Click OK.

• Click the Create a New Layer in the Layer Palette
• Click on the Type tool
• Click on Set Foreground Color to bring up the Color Picker dialog box
  
• Check Only Web Colors
• Select your favorite color and click OK
• In the Options bar, set the font to Arial Black and change the size to 48pt
• Type Photoshop

• On the Menu bar, choose Layer | Layer Style | Drop Shadow
• Check Bevel and Emboss
• Click on Stroke to highlight it and set the Size to one pixel
• Choose the stroke color by clicking on the colored box.
• Click on a dark grey color for your stroke (I used Hex 333333)

Note: By using a dark grey instead of black to stroke you images, you get a smoother clearer image.

Here is an example in photoshop of text with all the effects we have just mentioned.

Here are several options for saving an image in Photoshop.

• File | Save - saves a file, repeated use of Save will overwrite the original file with changes
• File | Save As - saves a file with a new name and in a new location; you then are working on the new file you just named
• File | Save for the Web - When using this option, it optimizes your file for web use

The Crop tool reduces the size of a picture.

• First, select File | Open and locate the Photoshop 6.0 Samples folder
• Select the Bear.psd and click Open
• Click on the Crop tool in the Tool Box
• Click and drag to select the area around the bears head
• If you are unhappy with your selection, press the ESC key and try again.
• Once the head is selected, press the Enter key to crop

• Select Layer | Layer Style | Inner Glow in the Menu bar
• Set the Opacity to 100%
• Set the color of the glow to white
• Set choke to 5% and the size to 30px
• Click on OK.

You should see something like this.

• Select File | Save for Web
• Click on OK
• Label you picture smokey.gif and click on Save

• Select File | New
• Create the new image 200 pixels by 100 pixels
• Select Layer | New | Layer
• Click and hold on the Rectangular tool in the tool box until a small menu pops up
• Select the Rounded Rectangular Tool
• Click on the Set Foreground Color tool to bring up the Color Picker dialog box and set the forground color to a light grey. (I used Hex CCCCCC)
• Click and drag to make a rectangle simular to the example to the right

• Hold the Ctrl key and click the Create a New Layer button in the Layer Palette. This will create a new layer under your existing layer.
• Hold the Ctrl key down and click on Shape 1. This will select the contents in Shape 1 in Layer 1.
• Select Select | Modify | Expand
• Set the Pixels to 2
• Click on your gradient tool in the tool box
• Press D key to set the forground and back ground to black and white
• Click and drag your mouse from the bottom of the image to the top

• Click on Shape 1 in the Layers Palette
   
• Select Layers | Layer Style | Inner Glow
   
• Set the Blend Mode to Normal
   
• Pick a color for your button. Make sure the color you chose is not too dark or too light.(I used Hex 6666CC)
   
• Set your choke to 15 and Size to 20

• Create a new layer
• Click on the Paint Brush tool in the Tool Box
• Set the brush size to 13px
• Click once in the upper left corner of the box
• Click on Filter | Blur | Glaussian Blur
• Set the Radius to 2.3 pixels

Now you have a nice shine on your button.

• Press "D" on your keyboard to set the foreground color to black and the background color to white.
• Press "X" to switch the forground and the background colors making the foreground color white!

• Create a new layer
• Click on the Type Tool in the tool box
• In the Options Bar, set the text to Arial Black and set the foreground color to white in the tool box Color Picker.
• Click inside the button and type Home.
• To make the text clearer, add a Stroke and set the pixel size to 1 with a dark gray color. Make it just like you did in activity four with the photoshop text.

You have learned the basics of creating graphics to be used on a web site. There are no rules for designing graphics, so you can take what you have learned today and customize it for your needs.