PHOTOSHOP FOR THE WEB

Presented by Mickie Quinn

mickiequinn@hotmail.com

Using tutorial materials from:

www.umass.edu/acco/workshops/photoshop1/materials.html

acomp.stanford.edu/acpubs/subjdocs.html

Great places for images:
www.gettyone.com (these are copyrighted images with watermarks, but great for collaging)

www.freefoto.com (yup, that’s right, free and ready to download)

Welcome! Photoshop is such a great tool for creating and editing images for the Internet. I’ve been designing web pages for seven years and Photoshop has been there for every project. I hope that you will find this information useful and learn enough to bring back to your schools. Please feel free to e-mail me with any questions you and your ThinkQuest group 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

MAP OF PHOTOSHOP

TOOLBAR & EMBEDDED TOOLS

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.

PAINTING WITH PHOTOSHOP

Use the Paintbrush Tool Choose the Paintbrush tool from the Toolbar. Place the cursor anywhere inside the image window and drag. The Eraser Tool Choose the Eraser tool from the Toolbar. 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 Click on the Eyedropper in the Toolbar. 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 Tool 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 Another Way to Get at the Eyedropper tool: Choose the Paintbrush from the Toolbar. Hold down the ALT key and position the cursor in the document window. The Paintbrush temporarily becomes an eyedropper. Still holding down the ALT key, click over a new color in the picture. 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.

Making Selections Select the Elliptical Marquee Zoom in on the daisy in the lower right that has a red-orange center and yellow edges. 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. Click the Elliptical Marquee. Use the Elliptical Marquee 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. Choose Select > Deselect shortcut= (CTRL+D) 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 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 Choose the Rectangular Marquee Make a selection anywhere in the picture. 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. 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. 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?
Moving, Cutting and Pasting Layers Move the selection outline
Select the Marquee tool. Position the cursor inside the selection of the daisy. The cursor icon changes to look like an arrow next to a tiny selection marquee. Drag. The selection outline moves but the image below is not affected. Edit > Undo. Use the Move Tool Choose the Move tool. Position the cursor over the selected flower. The cursor changes to look like scissors. Drag the selected flower. The flower is cut out and moved leaving a hole behind the color of your current background color. Edit > Undo. Copy + Paste Creates a New Layer The yellow flower should still be selected. Choose Edit > Copy. Choose Edit > Paste. A copy of the daisy is pasted into a new layer in the same location. Use the Move tool to drag the copied flower to a new position. 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.