Introduction to Adobe Photoshop

Computer Skills
LC Notebook Tab VI

IInttroducttiion n roduc on This class will teach you the basics of preparing a digital image for the Web. You will learn how to do the following: Open an image in Photoshop Zoom in and out and make a different part of the image visible Crop an image Adjust the brightness and contrast of an image Adjust the color balance and saturation of an image Resize an image Remove flaws from an image Select an area of an image Apply changes to a selected area Remove a selected subject from its background Add text to an image Save a file for future image processing Save a file for the Web

Note: This handout is based on Photoshop version 6.0. Many functions will be located in slightly different locations in other versions of Photoshop (such as 5.0, 5.5, or CS).

Photoshop 101 UM University Libraries

Partt II:: Basiic Photto Enhancementt Par Bas c Pho o Enhancemen Open a file: Go to the File menu, and click on the Open command. Find where you saved the image file. Select the image file name by clicking once on it. Click the open button. This will open the selected image. Click and drag the lower right corner of window to change the window size. Select a portion of an image: Selecting an area of an image has two purposes: to apply changes to the selected area instead of the whole image, and to separate part of an image from the background to give it a different background or to move it into another image. There are several methods of selecting; in this class you'll learn how to select with the rectangular marquee tool and the lasso tool. Other options you can explore on your own or in the Intermediate class are selecting with the magic wand tool and quick mask mode. Selecting with the Rectangular Marquee Tool Select the rectangular marquee tool . Click and drag with the mouse around the rectangular area you wish to select. To undo your entire selection and start over, click on an area outside the selection or go to the Select menu and choose Deselect. Selecting with the Lasso Tool Click on the lasso tool in the toolbar. Outline the area you wish to select by clicking and dragging around it with your mouse. Remember to always connect the ends of the lasso. Shift-click and drag to select an additional area; be sure lasso has a + (plus). Alt-click and drag to deselect an area; be sure lasso has a - (minus). To undo your entire selection and start over, click on an area outside the selection or go to the Select menu and choose Deselect. Save a selection: If you have created a precise selection that you would like to use again, you can save it and have it available to use again in the future. Go to the Select menu and select Save Selection. This will bring up the Save Selection window.

Photoshop 101 UM University Libraries

In the name box, type a short name for the selection. Make sure the New Channel button is clicked, and click the OK button. To load a saved selection: Go to the Select menu and select Load Selection. This will bring up the Load Selection window.

Click on the down arrow in the Channel box to reveal a list of the saved selections. Click on the name of the selection you have saved, and click the OK button. To zoom in and out of an image: Click on the zoom tool in the toolbar. This will change the contextual menu (under the main menu bar) to that of the zoom tool and change your pointer to the magnifying glass. Click on the image to zoom in on that section of the screen. To zoom out, right click on the image and select Zoom Out or Alt-click on the image.

Photoshop 101 UM University Libraries

You can also zoom in on a specified area of the picture by clicking in the corner of the desired area, and while still holding the mouse button down, dragging a box around the area you wish to zoom in to. If you want to see a portion of the zoomed in area that is off the screen, switch to the hand tool and click and d rag the image to reveal the section you want to see. To quickly get back the original size of the image, click the button. To automatically resize the window to the zoom level selected, click the button or hit Control 0. To view the image as it would appear printed, click the button. These options are also available by right clicking on the image. Note: Fit on Screen is usually the best view for working on an image. Actual Pixels view is best for determining the true size of the image when you want to resize it for a Web page. To crop an image: Select the rectangular marquee tool .

Click and drag with the mouse around the area you wish to keep. Click and drag the border to move the box around to select the appropriate area. Go to the Image menu, and select the Crop command. To adjust brightness and contrast: Go to the Image menu, and select Adjust and then Brightness/Contrast.

This will bring up the Brightness/Contrast control window.

To increase brightness or contrast, move triangles to the right of the center point.
Photoshop 101 UM University Libraries 4

To decrease brightness or contrast, move triangles to the left of the center point. If the Preview button is clicked, you can see your changes as they are made. Check your image before clicking the OK button to make sure that the image looks correct. Click OK to apply changes or Cancel to go back to the unchanged image. To adjust color balance: Go to the Image menu, and select Adjust and then Color Balance.

This will bring up the Color Balance control window.

Move the triangles under Cyan/Red, Magenta/Green, and Yellow/Blue to change the color balance. If the Preview button is clicked, you can see your changes as they are made. Check your image before clicking the OK button to make sure that the image looks correct. Click OK to apply changes or Cancel to go back to the unchanged image. To adjust hue and saturation: Go to the Image menu, and select Adjust and then Hue/Saturation.

Photoshop 101 UM University Libraries

This will bring up the Hue/Saturation control window.

Move the triangles under Hue, Saturation, or Lightness to the left or right to change the balances. If the Preview button is clicked, you can see your changes as they are made. Check your image before clicking the OK button to make sure that the image looks correct. Click OK to apply changes or Cancel to go back to the unchanged image. Note: There is also a tool that saturates colors: the sponge tool. It is located in the suite of tools under the Dodge tool in the toolbox and can be accessed by clicking and holding on the Dodge tool. It is better to use the menu if you want to saturate the whole image, and the tool if you want to saturate a small area. Note: Brightness/Contrast, Color Balance, and Hue/Saturation changes can also be applied to only to areas selected using the Rectangular Marquee or Lasso tools using the same method as above.
Photoshop 101 UM University Libraries 6

To resize the image: Go to the Image menu, and select Image Size.

This will bring up the Image Size control window.

Check that the height and width units are set to pixels, and that the box for Constrain Proportions is checked. Enter a new value in either the height or width boxes. The other dimension will adjust automatically. The Document Size and Width generally should not be changed. Resolution can be adjusted downwards, but not upwards. Click OK to apply changes or Cancel to go back to the unchanged image. To remove flaws or objects: Zoom in on the area with the flaw. Click on the clone stamp tool in the tool bar. This will change the contextual menu (under the main menu bar) to that of the clone stamp tool, and change your pointer to a round circle.

Photoshop 101 UM University Libraries

Click on the little triangle on the Brush: menu to show the options. Click on a brush size (given in pixels) to select it. Hold down the Alt key and click with your left mouse button (this will change your circle to a ) on an area to sample an area what you would like to replace the flaw with. Click or click-and-drag on the flaw to replace it with the sample you just selected. Note: This is harder than it looks; you'll need to practice! Keep an eye on the + sign; this marks the area being sampled and keeps moving as you move the cursor. To sharpen a selected area: Go to the Filter menu, and select Sharpen and then Unsharpen Mask.

This will bring up the Unsharpen Mask control window.

Move the triangles under Amount, Radius, or Threshold to control the amount of sharpening. Click OK to apply changes or Cancel to go back to the unchanged image.

Photoshop 101 UM University Libraries

To blur the background: Using the Rectangle Marquee or Lasso tools, select the object. Go to the Select menu, and select Inverse. The selected area and the image border are surrounded by a moving dotted line. This means that the background is now selected. Go to the Filter Menu, and select Blur and then Gaussian Blur.

This will bring up the Gaussian Blur control window.

Move the triangle to control the amount of blurring. Click OK to apply changes or Cancel to go back to the unchanged image. Note: Sharpening and blurring can also be done with the sharpen tool and the blur tool . The tools should be used when you want to sharpen or blur a small area. They are located on top of each other in the toolbox. To access them, click and hold on the Blur tool.

Photoshop 101 UM University Libraries

To save the file for future image pro cessing: Go to the File menu, and select Save as. Navigate to where you would like to save your file, and type in a new file name. Make sure that you save with the Format: Photoshop. This enables you to do further processing of this image using the channels and layers already made during the session. This is the only format that will enable you to retrieve a selection saved in a previous session or revise text on an image. Another reason to save an image in the Photoshop format first is that you'll have a backup copy in case you choose the wrong format when you save a file for print or for the Web. There are many, many file formats, so it's easy to make a mistake! Choosing the wrong format can damage your image irreversibly. As long as you have a backup copy in Photoshop format, you can easily save again in a different format. Without this backup, you may have to start over. The extension of this format is .psd. To save the image for the Web: Photographic images intended for Web pages are usually saved in the JPEG format, which handles a large range of colors. Cartoon images are usually saved as GIF files. Both file formats have advantages and disadvantages. Large areas of solid color will be distorted by the JPEG format, but the color variety in photographs will be reduced by the GIF format. If you're not absolutely sure which file format is best for your image, be sure that your image is saved in the Photoshop format before you experiment! Go to the File menu and select Save As. Navigate to where you would like to save your file. Make sure the Save As a Copy box is checked in the Save options section. Use the same file name as the .psd or a different one as appropriate, and change the extension to .jpg From the Format menu, select JPEG. Make sure the Use Lower Case Extension box is checked. Click the Save button to save your image. This will bring up the JPEG options control box. For Quality, choose 6 or 8 higher quality means larger file size, but less loss of quality for the image. Click the OK button to save the image. Note: The JPEG format can be saved as Standard or Progressive. A Web browser handles a progressive image file differently: a low-resolution version of the image will be displayed temporarily as the file is downloaded. The equivalent of progressive in the GIF format is called interlaced.

Photoshop 101 UM University Libraries

10

Partt IIII:: Makiing a Postter wiitth Textt and a Sellectted IImage Par Mak ng a Pos er w h Tex and a Se ec ed mage

This poster shows one thing you can create by separating an image from its background and substituting a solid background. Another use for this process is to create a Web image with an irregular border. If you wanted just the turtle to appear as an image on a Web page, you could follow these steps and make the background the same color as the background of the Web page. When the image is displayed on the Web page, you would see the turtle but not a square border around him. Using a background that exactly matches the Web page is one way to get around the fact that every image file has to be rectangular. Select the subjects background: If you have previously selected the subject and saved it, go to the Select menu, and select Load Selection. Make the selection more precise, if necessary. If you have not saved the selection before, use the Rectangular Marquee or Lasso tool to select the subject. Go to the Select menu, and select Inverse to select the background. To add a solid background: Go to the Window menu and select Show Swatches. Choose a color for the background and click on it to select it as the fill color. Go to the Edit menu and select Fill. Click OK to make the selected swatch color the color of your background. Clear the selection by clicking anywhere within the image. Carefully use the clone stamp tool (with small brush) to make a cleaner edge around the image.
Photoshop 101 UM University Libraries 11

To add a texture to the background: Go to the Filter menu and select Texture, and then Texturizer.

This will bring up the Texturizer control window.

Select a texture from the menu. Click OK to apply changes or Cancel to go back to the unchanged image. To add text: Click on the Text tool in the toolbox.

This will change the contextual menu (under the main menu bar) to that of the Text tool, and change your pointer to a cursor. In this menu, you can change the font, size, alignment and color of the font.

Photoshop 101 UM University Libraries

12

Click on the image where you want the text to appear. Type your text in. Use the Move tool Shorttcutts Shor cu s to move the text around on the image. Action Undo Zoom in Zoom out Resizes window to show entire picture at desired zoom level Save Save As Print New Undo (only undoes last change) Copy Paste Cut Select All Deselect

Command Control Z Control + Control Control 0 Control S Control Shift S Control P Control N Control Z Control C Control V Control X Control A Control D

Addiittiionall Resources Add ona Resources If you are interested in learning more about Adobe Photoshop, there is one book available for you to check out from the Learning Curriculum Resource Library: Adobe Photoshop 5.5 Classroom in a Book, Adobe, 1999. Other tutorials available online include: Complete List of Photoshop Tips http://www.mccannas.com/pshop/photosh0.htm Adobe Photoshop CS Tutorials http://www.adobe.com/products/tips/photoshop.html A complete listing of titles in the Learning Curriculum Resource Library is available at: http://www.lib.umd.edu/groups/learning/lcrlibrary.html.

Credits: This handout is adapted from materials created by Claire Sebok, Staff Learning and Development, Summer, 2002. Revised and updated by Jennifer Muter, September 2004.
Photoshop 101 UM University Libraries 13