Great places for images:

• http://www.freeclipart.com
• http://www.freefoto.com

Welcome! Photoshop is such a great tool for creating and editing images for the Internet. I’ve been designing web pages since 1995 and Photoshop has been there for every project. I hope that you will find this information useful and learn enough to make your own really unique websites. Please feel free to e-mail me at quinn@tqnyc.org with any questions you and your team encounter.

In this workshop, we learn the following:

1. Photoshop Tools & Basics
2. Organizing Image Files for Editing & Publishing
3. Preparing Images for the Internet
4. Downloading Images from the Internet
5. Scanning Images & Taking Digital Photographs
6. Creating Original Buttons & Icons for Your Web Pages
7. Creating Web Site Designs & Templates with Photoshop

Choosing Tools Move your mouse over a tool without clicking. A name and a small letter will appear. The letter in parentheses is the shortcut key for that tool. Click on an icon in the Toolbar to select a tool. Move your cursor over the image. Notice that the cursor’s icon changes when you switch tools. Type the letter “M” or “Z”. Notice that you have selected either the Marquee tool or the Zoom tool.

Secondary Tools All tools with a small triangle at the bottom right of their icon have embedded tools similar in function to the main tool. Move your cursor over these tools and hold down the mouse button to select embedded tools.

OPTIONS & PALETTES The options related to each tool are located in the top bar as shown above. This option bar will change according to the tool in current use. By default, palettes open in groups, as shown on the left. Depending on the resolution of your monitor screen, there will be 3 or 4 groups. The small triangle to the right of the name tabs opens each palette’s pop-out menu of palette commands. Showing and Hiding the Palettes & Toolbar To bring a palette to the front of its group click on the name tab. To show/hide all palettes and the Toolbar press the TAB key. To show/hide all palettes except the Toolbar press SHIFT + TAB. To make individual palettes close or reappear choose Window > Palettes > Show/hide.

The Status Bar File Information for the active document window is displayed at the bottom left of the Photoshop application window. Look for the Status Bar. If it does not appear at the bottom of the application window, choose: Window > Show Status bar By default, the status bar tells you: The current zoom setting The file size (in K or MB) ¥ File size of bitmap image ¥ File size including extra channels, layers, or additional information .

Use the Paintbrush Tool

1. Choose the Paintbrush tool from the Toolbar.
2. Place the cursor anywhere inside the image window and drag.

The Eraser Tool

1. Choose the Eraser tool from the Toolbar.
2. Drag the cursor anywhere in the image.

Observe the results: the eraser draws with the current background color*.

*When working with layers, eraser will clear pixels to reveal under lying layers.

Pick a Color Using the Eyedropper Tool

Choose a foreground color using the Eyedropper Tool

1. Click on the Eyedropper in the Toolbar.
2. Place the cursor anywhere in the document window
   and click to sample a color from the picture.

Look at the color pickers in the Toolbar and on the Color palette. You have just selected a new foreground color. Choosing colors from a photograph can help you pick a palette for your website.

Pick a Background Color Using the Eyedropper Tooli

Use the Eyedropper tool to choose a background color

1. Hold down the ALT key and use the eyedropper tool to sample a new color.

Look at the color pickers in the Toolbar and on the Color Picker palette. You You have just selected a new background color. Now you can switch between foreground and background colors when ainting.

Another Way to Get at the Eyedropper tool:

1. Choose the Paintbrush from the Toolbar.
2. Hold down the ALT key and position the cursor in the document window. The Paintbrush temporarily becomes an eyedropper.
3. Still holding down the ALT key, click over a new color in the picture.
4. Release the ALT Key: the Paintbrush returns.

TRY IT OUT Make “bouquet.tif” a work of art. Use the paint brush and the ALT key to select colors from the flowers and paint over them. *ROTOSCOPING: tracing is an artform and a great way to introduce the use of brushes and palettes. Also, this is an excellent way to use images of famous people while adding an artistic touch. Try this with a portrait, it’s FUN.

Select the Elliptical Marquee

1. Zoom in on the daisy in the lower right that has a red-orange center and yellow edges.
2. Hold down on the Marquee icon in the Toolbar. Four tools pop-out. The current tool, the rectangular marquee, has a bullet next to it.
3. Click the Elliptical Marquee.

Use the Elliptical Marquee

1. Position the mouse over the picture and drag diagonally. By default, the Marquee draws the selection from the edge of the oval, beginning from the point where you begin to drag.
2. Choose Select > Deselect shortcut= (CTRL+D)
3. Position the cursor in a different area of the picture, hold down the ALT key
   and draw a new selection. With the ALT key depressed, the Marquee draws from the center. -> Deselect
4. Hold down ALT + SHIFT and draw another selection.
   When you hold down the SHIFT KEY, the Marquee is constrained to a circle.

Adding-to and Removing-from a Selection

1. Choose the Rectangular Marquee
2. Make a selection anywhere in the picture.
3. Hold down the SHIFT key, and make another selection.
   Notice how a tiny + sign appears next to the lasso icon. Your selection has been enlarged.
4. Hold down the ALT key and make a selection that overlaps the existing selection. Notice how a tiny - sign appears next to the lasso icon. Your selection has been reduced.
5. Click once outside the selected area to deselect.

Complex Selections with the Lasso Use the Magnifying Glass to zoom-in to about 300% on the large yellow flower on the left side. If the yellow flower is not in the center of your window, use the red box in the Navigator palette to put it there. Choose the Lasso Selection tool. In the Options palette set the Feather value to 1. Attempt to draw around flower. This is not an easy task. You could use SHIFT and ALT to add and subtract until you have succeeded in carefully outlining the flower. Okay, this is a pain-in-the-neck if you’re not a steady hand, right. So, let’s make this easy. Choose the Magic Wand Selection tool Click on the daisy’s petals. Notice how it selects a span of one color. Hold down SHIFT and key clicking until the majority of the petals are selected. Choose the Lasso again. Hold down SHIFT and trace around any pieces that have not been selected. Easier, right?

Move the selection outline

1. Select the Marquee tool.
2. Position the cursor inside the selection of the daisy.
   The cursor icon changes to look like an arrow next to a tiny selection marquee.
3. Drag. The selection outline moves but the image below is not affected.
4. Edit > Undo.

Use the Move Tool

1. Choose the Move tool.
2. Position the cursor over the selected flower.
3. The cursor changes to look like scissors.
4. Drag the selected flower. The flower is cut out and moved leaving a hole behind the color of your current background color.
5. Edit > Undo.

Copy + Paste Creates a New Layer

1. The yellow flower should still be selected.
2. Choose Edit > Copy.
3. Choose Edit > Paste. A copy of the daisy is pasted into a new layer in the same location.
4. Use the Move tool to drag the copied flower to a new position.
5. Open the Layers palette. The pasted flower is on a new layer.

TIP: MOVING SELECTIONS OR SELECTING OUTLINES

Use the arrows on the keyboard to “nudge” a selection a pixel at a time.
SHIFT + any arrow key to nudge 10 pixels at a time.

Note: because the flower is the only thing on layer 1, you do not have to select it before you move it. You are simply moving the entire layer , most of which is “transparent.”

TRY IT OUT Make an arrangement of daisies. Hit Edit>Paste Move daisy to desired location Repeat Experiment with Transform tools *HINT: all I used here was Edit> Transform> Flip Horizontal You could also, Rotate & Scale image for lots of daisy fun.

TIP: LAYERS AND FILESIZE
You can have many layers in a Photoshop document, but you pay for it in file size. Look at the status bar at the bottom of the application window. Note how the document size grows when you add layers.

Duplicate a Layer

1. Select a layer to duplicate (not the background), click to make it the active layer.
2. Choose Layer > Duplicate Layer, and Click OK.
3. In the Layers palette, there is now a new layer above the layer you selected, named “…copy.”
4. Use the Move tool to position the copy in a new place in your document window.

Merge Down

1. Make the “copy” your active layer.
2. In the main application menu choose Layer > Merge Down.

   This command merges the active layer with the layer below.

3. Look at the Layers palette. The copy layer is gone.
4. Use the Move tool on the layer. Both copies move together.

Merge the Visible Layers

1. Go to the Layers palette.
2. Click on the eye in front of the Background layer title bar to make the background invisible.
3. Choose Layer > Merge Visible.
4. Click in the first box in front of the “background” title bar to make it visible. Choose File > Save.

TIP: The MERGE>VISIBLE Layers do not need to be next to each other in order to be merged.

Flattening your Layers

Flattening Layers becomes necessary when you want to reduce the file size of your image or when you want to create a composite image from more than one layer. Remember to always save a PSD version of your file before you flatten an image!

Choose Layer > Flatten Image

This command merges all visible layers into the background layer.
Individual layers, type, & effects will no longer be editable!

Deleting Selected Layers

1. Select a layer in the Layers palette.
2. Choose to do any of the following:
1. Layer > Delete Layer from the main application menu.
2. Delete Layer from the menu on the Layers palette.
3. Click on the trash can icon at the bottom of the Layers palette.
4. Drag the layer’s name bar to the trash can at the bottom of the Layers palette.

ALWAYS SAVE A PSD version of your file BEFORE YOU FLATTEN AN IMAGE!

Once you give the Flatten command, layers, type layers and layer effects can no longer be edited.

WHY FLATTEN AN IMAGE?
To save disk space & RAM (Layers take memory!)
You must flatten an image before you can save it in other file formats such as:
JPEG or GIF for Web pages

TIP: MERGING AND FLATTENING LAYERS
Use the Layer Menu (in the main menu bar) or the pop-out menu on the Layers palette to merge selective layers, delete layers or “flatten” the image.

One of the most important things to remember while working in Photoshop is that you’re working with a set of tools. Before engaging in a task, make sure you’ve selected the proper tool. You wouldn’t hammer a nail with tweezers, right? The best way to learn Photoshop is to play.

While these tips and tutorials are based on version 6.0, many of the techniques and tools are the same for earlier and later versions of the software. If you’re using an earlier version, get a reference book (or download the .pdf version of the Manual) and you can look up the how-to for your version.

Moving Layers with the Control Key

You don’t need to activate the Move Tool to move layers around. Simply hold down the Control key (for Windows users) or the Command key (Mac users) and click and drag on your layer with the mouse. Be sure you’re in the right Layer!

Hiding the Palettes with the Tab Key

Are the palettes getting in the way? You can hide them temporarily just by hitting the Tab key. To bring them back, press the Tab key again.

Selecting All Pixels on a Layer

To select all the opaque pixels on a layer (as opposed to using Select All, which selects the whole layer), hold down the Control key (Windows) or Command key (Mac), and click on the layer in the Layers Palette.

Dragging Layers Between Documents

You can copy a layer from one document to another by clicking on it in the Layers Palette and dragging it across to the second document window.

Full Screen Mode

If you’re working on a large image such as a photo, you can maximize the available editing area by pressing the F-key to toggle between a full screen mode with and without menu bar, and normal editing mode. If you also use tip number 2 above, and the tool shortcut keys, you can do a lot of your work without a menu or palette in sight!

Nudging

You can get precise control over the position of your layers by using the arrow keys on the keyboard to nudge the layer around. Hold down the Control key (Windows) or the Command key (Mac) and use the up, down, left and right arrows to move the layer 1 pixel at a time. To move the layer by 10 pixels at a time, hold down the Shift key as well.

Choosing Colors Quickly

Press “I” to bring up the Eyedropper Tool, and then click on a color in your image to make that color the foreground color. Press the ALT key and click to make the color the background color instead.

Straight Lines and Geometric Perfection

You can often constrain movement of the mouse to the nearest 45-degree or 90-degree angle by holding down the Shift key while you click and drag with the mouse. This works on tools such as the Paintbrush Tool, Line Tool and Move Tool. Great for drawing straight lines! Also hold down the Shift key to make perfect circles and squares with either the Marquee tool or the Shape tool.

Step 1 Create new document 300×300 72dpi RGB

Step 2 Set colors to white foreground and black background

Step 3 Use the gradient tool to create a circular gradient

Step 4 Filter>Noise>Add Noise: check monochromatic “OK”

Step 5 Filter>Blur>Motion Blur: Angle 0, Distance 12

**After you try this once, go experiment

3

4

5

Step 6 Image>Adjust>Brightness/Contrast: bring the Contrast down and the Brightness up to your liking

Step 7 Select Type Tool>Type “METAL” or any other word, use a bold, solid font

Step 8 CTRL+click on the text layer in the Layer box to select pixel

9

10

11

Step 9 Click on Background layer Edit>Copy>Paste

Step 10 Hide text layer by clicking on the eye next to it

Step 11 Select the new layer “Layer 1″ >Layer>Layer Style> Bevel and Emboss: Outer bevel, play!

Step 1
Create new document 300×300 72dpi RGB

Step 2
Choose circular marquee tool, hold down “SHIFT” and create a circle, center cell in spacei

Step 3

Create New Layer

Step 4
Fill circle selection with color

Step 5
Layer>Layer Style> Bevel and Emboss: Inner bevel, play with settings

Step 6
Add text to the layer “click” in a different color. Then apply a Bevel to the text. Try Drop Shadow!

Step 1
Create new document 300×300 72dpi RGB

Step 2
New Layer. Choose the rectangular marquee tool, hold down “SHIFT”, create square

Step 3

Choose a foreground color. Edit> Stroke: 12 pixels, Center

Step 4
Layer> Layer>Layer Style> Bevel and Emboss: Inner bevel, play with settings

Step 5
Add text to the layer “WORD” in a different color. Then apply a Bevel to the text. Try Drop Shadow!

*You can create another layer, a square marquee the same size, fill with a different color