Photoshop 101

8/3/2019 Photoshop 101

1/13

Photoshop 101 UM University Libraries 1

Introduction to Adobe PhotoshopComputer SkillsLC Notebook Tab VI

IIInnn ttt rrroooddd uuuccc ttt iiiooonnn

This class will teach you the basics of preparing a digital image for the Web. You will learnhow 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 inslightly different locations in other versions of Photoshop (such as 5.0, 5.5, or CS).


2/13


PPPaaarrrttt III::: BBBaaasss iiiccc PPPhhhooo tttooo EEEnnnhhh aaannn ccceeemmmeeennn ttt

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 areainstead of the whole image, and to separate part of an image from the background togive it a different background or to move it into another image. There are severalmethods of selecting; in this class you'll learn how to select with the rectangularmarquee 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 orgo 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 anadditional area; be sure lasso has a + (plus). Alt-click and drag to deselect an area; besure lasso has a - (minus).

To undo your entire selection and start over, click on an area outside the selection orgo 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 itand have it available to use again in the future.

Go to the Select menu and select Save Selection. This will bring up the Save Selectionwindow.


3/13


In the name box, type a short name for the selection. Make sure the New Channelbutton 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 o f an image:

Click on the zoom tool in the toolbar. This will change the contextual menu (underthe main menu bar) to that of the zoom tool and change your pointer to the magnifyingglass.

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.


4/13


You can also zoom in on a specified area of the picture by clicking in the corner of thedesired area, and while still holding the mouse button down, dragging a box around thearea 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 drag the image to reveal the

section you want to see.To quickly get back the original size of the image, click the button. Toautomatically resize the window to the zoom level selected, click thebutton 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 Pixelsview is best for determining the true size of the image when you want to resize it fora 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.


5/13


6/13


This will bring up the Hue/Saturation control window.

Move the triangles under Hue, Saturation, or Lightness to the left or right to change thebalances.

If the Preview button is clicked, you can see your changes as they are made. Checkyour image before clicking the OK button to make sure that the image looks correct.

Click OKto apply changes orCancelto 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 theDodge tool. It is better to use the menu if you want to saturatethe whole image, and the tool if you want to saturate a small area.

Note: Brightness/Contrast,Color Balance, and Hue/Saturation changes can also beapplied to only to areas selected using the Rectangular Marquee or Lasso tools usingthe same method as above.


7/13


8/13


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 ofsharpening.



9/13


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 borderare 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 OKto apply changes orCancelto 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 beused when you want to sharpen or blur a small area. They are located on top of eachother in the toolbox. To access them, click and hold on the Blur tool.


10/13


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 saveyour file, and type in a new file name.

Make sure that you save with the Format: Photoshop. This enables you to do furtherprocessing of this image using the channels and layers already made during thesession. This is the only format that will enable you to retrieve a selection saved in aprevious session or revise text on an image. Another reason to save an image in thePhotoshop format first is that you'll have a backup copy in case you choose the wrongformat when you save a file for print or for the Web. There are many, many fileformats, so it's easy to make a mistake! Choosing the wrong format can damage yourimage irreversibly. As long as you have a backup copy in Photoshop format, you caneasily save again in a different format. Without this backup, you may have to startover. The extension of this format is .psd.

To save the image for the Web:Photographic images intended for Web pages are usually saved in theJPEG format,which handles a large range of colors. Cartoon images are usually saved asGIF files.Both file formats have advantages and disadvantages. Large areas of solid color willbe distorted by theJPEG format, but the color variety in photographs will be reducedby theGIF 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 theextension to .jpg From the Format menu, select JPEG. Make sure the Use LowerCase Extension box is checked.

Click the Save button to save your image. This will bring up the JPEG options controlbox. For Quality, choose 6 or 8 higher quality means larger file size, but less loss ofquality for the image. Click the OK button to save the image.

Note: The JPEG format can be saved asStandard orProgressive. A Web browserhandles a progressive image file differently: a low-resolution version of the image willbe displayed temporarily as the file is downloaded. The equivalent ofprogressive inthe GIF format is called interlaced.


11/13


PPPaaarrrttt IIIIII::: MMMaaakkk iiinnn ggg aaa PPPooo sss ttteeerrrwwwiii ttthhh TTTeeexxx ttt aaannnddd aaa SSSeeellleeeccc ttteeeddd IIImmmaaagggeee

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 tocreate a Web image with an irregular border. If you wanted just the turtle to appear asan image on a Web page, you could follow these steps and make the background thesame color as the background of the Web page. When the image is displayed on theWeb page, you would see the turtle but not a square border around him. Using abackground that exactly matches the Web page is one way to get around the fact thatevery 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 toolto 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 thecolor 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 aroundthe image.


12/13


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.


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 Texttool, and change your pointer to a cursor. In this menu, you can change the font, size,alignment and color of the font.


13/13


Click on the image where you want the text to appear. Type your text in.

Use the Move tool to move the text around on the image.

SSS

hhh

ooo

rrrtttccc

uuu

tttsss

Command ActionControl Z UndoControl + Zoom inControl - Zoom outControl 0 Resizes window to show entire

picture at desired zoom levelControl S SaveControl Shift S Save AsControl P Print

Control N NewControl Z Undo (only undoes last change)Control C CopyControl V PasteControl X CutControl A Select AllControl D Deselect

AAAddd ddd iii ttt iiiooonnn aaalll RRReeesssooouuu rrrccceeesss

If you are interested in learning more about Adobe Photoshop, there is one book available foryou to check out from theLearning Curriculum Resource Library:

Adobe Photoshop 5.5 Classroom in a Book, Adobe, 1999.

Other tutorials available online include:Complete List of Photoshop Tipshttp://www.mccannas.com/pshop/photosh0.htmAdobe Photoshop CS Tutorialshttp://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 andDevelopment, Summer, 2002. Revised and updated by Jennifer Muter, September 2004.
http://www.mccannas.com/pshop/photosh0.htmhttp://www.mccannas.com/pshop/photosh0.htmhttp://www.adobe.com/products/tips/photoshop.htmlhttp://www.adobe.com/products/tips/photoshop.htmlhttp://www.lib.umd.edu/groups/learning/lcrlibrary.htmlhttp://www.lib.umd.edu/groups/learning/lcrlibrary.htmlhttp://www.adobe.com/products/tips/photoshop.htmlhttp://www.mccannas.com/pshop/photosh0.htm

Documents

Photoshop 101