Getting Started with Adobe Photoshop

Macintosh and Windows

This document offers an introduction to Photoshop, a popular image-editing application. It covers the Photoshop 5.5 interface, tools and palettes, working with selections and text, color correcting and resizing images, and managing documents.

Starting Photoshop

You can start Photoshop using either of two methods:

Double-click on the Photoshop application icon. This icon is usually in a folder called Adobe Photoshop. There is a Photoshop icon on the desktop of the computers in the CIT Multimedia Lab.
Double-click on the icon of any Photoshop document on your computer. Photoshop then opens with the document already loaded.

Exploring the Photoshop Interface

Besides the usual window components (close box, title bar, scroll bars, etc.), the Photoshop window has several other elements:

Toolbox

The Photoshop Toolbox, at the left side of the window, contains painting and editing tools:

TOOL	USE
marquee	makes rectangular and elliptical selections
move	moves selections
lasso	makes freehand selections
magic wand	makes selections based on color
airbrush	creates a diffused spray of color
paintbrush	paints soft-edged strokes
rubber stamp	makes an exact copy of a section of an image
history brush	reverts, replacing pixels with the saved version
eraser	removes pixels
pencil	paints hard-edged freehand or straight lines
smudge	creates a look of dragging a finger through wet paint
blur	blurs or sharpens part of an image
dodge	lightens, darkens, or changes the saturation of part of an image
pen	draws precise straight or curved lines called "paths"
type	creates text
measure	measures angles and distance
gradient	creates a transitional area of color from the foreground to the background color, or the foreground color to transparent
paint bucket	fills areas with color (the foreground color)
eyedropper	selects foreground and background colors
hand	moves an image that is too large for the window
zoom	magnifies an image to perform detailed work, and reduces an image for an overall view

Foreground and Background colors

The foreground color is the color used to paint, to fill selections, and as the beginning color for gradient fills. The background color is the color that appears when you delete pixels in a transparent area of color, and as the ending color for gradient fills.

Palettes

Photoshop opens with four groups of palettes:

Color/Swatches/Brushes group has options to choose and create colors and to select different brush sizes and shapes.
Layers/Channels/Paths group has options for adding and deleting these elements in an image.
Navigator/Info/Options group has options for viewing images and for measuring the color values in an image. Also, the Options palette has controls for the currently selected tool.
History/Actions palette has options for multiple undoes and redoes, and for recording frequently performed tasks, which can then be "played back" on one or more files.

File Size Information

File size information is displayed in the bottom-left corner of the Photoshop window. The first number is the size of the file, and the second number shows the size of the file with layers.

TIP: Hold down the Option key (Macintosh) or Alt key (Windows) and the mouse button. Photoshop will display the height and width of the image in inches and pixels, the number of channels and the image resolution.
Working with Layers

When you create a new Photoshop document, the image consists only of a background. One or more layers can be added to this document. Layers can be thought of as transparent sheets that are stacked on top of the background. If no image is put onto a layer, you can see right through to any other layer and to the background at the bottom of the layers. Layers enable you to edit specific areas of your image without affecting any other areas.

Using the Layers Palette

Use the Layers palette to create, copy, merge, flatten, and delete layers. You can also hide and show individual layers. To select a layer (make a layer the active layer), click its name. To add a new layer, click on the New Layer icon at the bottom of the Layers palette. To hide a layer, click the eye icon in the leftmost column of the Layers palette. To change the order of a layer, select the layer and drag it up or down in the Layers palette. A layer cannot be below the Background layer, although you can rename the Background layer to change its position in the stacking order. You can duplicate a layer by selecting the layer name in the Layers palette and dragging the layer to the New Layer icon at the bottom of the palette. Layers can be thrown away by selecting the layer and dragging it to the trash can at the bottom of the Layers palette.

Working with Colors

The color mode used by Photoshop for monitor output is RGB, in which brightness values of red, green and blue light combine to form the colors on the screen.

Using the Color Palette

To display the RGB components of a color, use the Color palette. Red, green, and blue have color values ranging from 0 to 255. When the R value is 255, and the G and B values are 0, the resulting color is red. This indicates that this color contains only a red component; there is no green or blue in this color. When the R, G and B values are all 0, the resulting color is black; none of the components has any value.

Using the Color Picker

The Color Picker lets you choose colors from a broad color spectrum. When you click on the foreground or background color selection box in the toolbox, the Color Picker appears. A circle appears in the color field, indicating the current foreground color. It is also indicated in the Color Picker’s color selection box. You can select the foreground or background color here or define color components for a color. With the RGB color model, you can use the color field and the color slider to select a color. The color slider displays the range of color levels available for the selected color components.

Using the Swatches Palette

The Swatches palette contains 122 colors from the default Photoshop palette. As your pointer moves over the color swatches, it changes to an eyedropper. When you click, the new color appears in the foreground color box in the toolbox.

Working with Text

The Photoshop Type tool is on the standard Toolbox. To create text in your document, select the Type tool and click an insertion point where you want the text to appear. The type tool dialog box will appear. Choose a font and a size for the type. You can also set the leading and spacing, style and alignment. Type the text in the text box. Press Return if you want the text to be on more than 1 line. Select Show Font and Size options under the text box to see how the text will look. Click OK. The type appears on its own new layer and in the foreground color. Use the move tool to adjust its position. To move the selection one pixel at a time, use the arrow keys on the keyboard. To make changes to a type layer, click on the type or double-click on the layer's T icon in the layers palette. Make the necessary changes in the dialog box. Working with Selections

Three ways Photoshop offers you to select part of an image are the marquee tool, the lasso tool and the magic wand.

TIP : When making a selection in an image that contains layers, be sure the layer you want is the target layer.

Using the Marquee tool

The marquee tool allows you to select a rectangular or elliptical area of the image by dragging over the area you want to select. TIP : To toggle between the rectangular and elliptical marquees, hold down the Option key and click the marquee on the toolbox.

Using the Lasso Tool

The lasso tool lets you draw an outline around an area to select it. To draw straight lines, hold down the Option key and click to define end points.

Using the Magic Wand

The magic wand lets you select an area of an image based on the color similarities of adjacent pixels. You can set a tolerance level which Photoshop uses to determine which pixels to include. Extending and Reducing a Selection

Adobe Photoshop provides many ways to extend and reduce selections. Additions can be made by changing the selection border or by extending the color similarities. To add to a selection that after one selection has been made, hold down the Shift key and select the area you want to add. To subtract from a selection after one selection has been made, hold down the Option key (Macintosh) or the Alt key (Windows) and select the area to be removed. Any selection tool can be used to add to or subtract from a selection.

Moving a Selection

Use the move tool to drag a selection to a new location. To move the selection one pixel at a time, use the arrow keys on the keyboard. Copying a Selection

To make a copy of a selection, hold down the Option key and use the move tool to drag the copy where you want it. Selections can be copied from one Photoshop document to another by dragging the selection from one window to the other. Copies are put on a new layer.

Pasting a Selection

Use the Copy and Paste commands in the Edit menu to paste a selection into another part of an image or into another document. Pasted selections are put on new layers.

Deleting a Selection

Choose Clear from the Edit menu or press Delete to delete a selection.

Color Correcting an Image

Color correcting an image consists of making color, brightness and contrast changes. Most images can be improved by using the Auto Levels feature of Photoshop. From the Image menu, choose Adjust/Auto Levels. It will adjust the overall contrast, and distribute the remaining tones in between. If further adjustment is needed, use the individual Adjust commands described below.

Note: There is an Auto button within each of the individual dialog boxes, as well.

TIP: When using the color-correcting dialog boxes, hold down the Option key to change the Cancel button to Reset.
Using the Variations Command

The Variations command allows you to visually adjust the color balance, the contrast and the saturation of an image or selection. You can focus on the dark areas (shadows), the middle tones (midtones), or the light areas (highlights) of the image. You can also correct the saturation of the colors. The Variations command is a quick and easy way to color-correct an image that doesn’t need precise adjustments. Click OK when you’ve finished adjusting the image.

Using the Levels Command

The Levels command allows you to make gradual changes to the brightness and contrast of an image. The histogram displays the brightness value versus the number of pixels at each level. The darkest pixels (value of 0) are at the left and the lightest (value of 255) ones at the right. The black input triangle controls the shadows and the white input triangle controls the highlights. For example, moving the black input triangle to 30 causes the pixels with brightness values of 30 to go to 0, and pixels with higher brightness values are mapped up to correspondingly darker values. This darkens the image and increases the contrast in the shadow areas. Make sure the Preview option is turned on to view adjustments as you make them. When you’ve finished making adjustments, click OK.

Using the Brightness/Contrast Command

Drag the sliders to adjust the brightness and contrast. Click preview to see changes being made. Click OK when you’ve finished making adjustments. This command is the easiest way to make general adjustments to the brightness and contrast.

Resolution and Resizing

Image resolution refers to the amount of information stored for an image, measured in pixels per inch. The image resolution and the dimensions of the image determine the file size of the document. Image resolution also affects how large the image appears on the screen. Since the standard Macintosh monitor resolution is 72 dpi (dots per inch), a 144 ppi (pixel per inch) image is displayed at double its actual size. Most IBM-compatible monitors have a resolution of 96 dpi.

Each pixel has a measurement called bit resolution. The greater the bit resolution, or pixel depth, the more color information is stored, allowing a more accurate representation of a larger range of colors. Pixel depth can range from 1 (2¹) representing 2 colors, black and white, to 32 (2³²) representing millions of colors.

Using the Canvas Size Command

This command allows you to add workspace around an existing image without changing the dimensions of the image. You can specify the height and width you want the canvas to be.

Using the Image Size Command

You can resize an image and control the image resolution. The dialog box allows you to choose the units of measurement you want to use, and specify the height and width. The Constrain Proportion option allows you to change the image dimensions without changing the height-to-width ratio.

Preparing Images for the World Wide Web

Images used on the Web are in two common file formats, GIF and JPEG. (The PNG format is also available in Photoshop, but it is not supported in older browsers.) The formats use different compression routines to minimize file size. Since smaller files have shorter download times, one goal when preparing images for the Web is to "optimize," or create the smallest file possible while maintaining the color and clarity of the image. The GIF format does a better job of compressing flat-color images, type, and line art. JPEG is best for large images and continuous-tone art, such as photographs and gradients.

TIP: Be sure to save a copy of your image in Photoshop format, preserving multiple layers, before saving the image for the Web.
Flat-color images

Images with large areas of flat color should be saved as GIF files.

With the image open in Photoshop:

Choose File Menu/Save for Web...
Click on the 4-Up tab at the top of the window, and use the preview segments displayed to compare setting options: click on a segment to make it active, and at the right, in Settings, choose a GIF setting. You can also manually adjust the settings; Adobe has provided some common combinations. The numbers 128, 64, and 32 refer to the number of colors allowed in the image; the higher the number, the higher the image quality, and the bigger the file. The dithering option refers to a speckling effect to simulate additional colors. Note the file size and download times at the bottom of each segment.
Check on the Optimized tab to view the entire file in the settings you have chosen, and then click OK.
Name the file, choose a location, and click Save.

TIP: You may want to save copies of your image using different settings, and view them in a Web browser to compare the results.

Images with transparency

Images with transparent areas, where the background is intended to show through, should be saved in GIF format; JPEGs do not support transparency. Use the instructions above, and in the Settings area, click on the transparency check-box.

Full-color images

Full-color images, such as photographs, should be saved as JPEG files. Make sure the Image Color Mode is RGB: Choose Image Menu/Mode/RGB Color.

With the image open in Photoshop:

Choose File Menu/Save for Web...
Check on the 4-UP tab at the top of the window, and use the preview segments to compare the High, Medium, and Low JPEG setting options. Click on a segment, and adjust the settings at the right of the window. If desired, you can manually adjust the settings for finer control.
When you are satisfied with a setting, click on the Optimized tab to check the results in the entire file, and then click OK.
Name the file, choose a location, then click Save.

Grayscale images

Grayscale images can be saved in either JPEG or GIF format, depending on whether the image has large blocks of flat grays or has gradations. Use the processes described above.

Images containing a gradient

Images containing gradients should be saved in the JPEG format. Use the same process as for full-color images. Make sure the Image Color Mode is RGB: choose Image Menu/Mode/RGB Color.

Working with Filters

Filters in Photoshop let you apply special effects to your images, as well as clean-up effects.

Noise

Noise in an image is represented by pixels with randomly distributed color levels. The Despeckle filter detects the areas of an image where significant color changes occur and blurs all of the selection except those edges. This has the effect of smoothing out the image.

Sharpen

The Sharpen and Sharpen More filters provide focus to an image and improves its clarity. The Sharpen More filter applies a stronger sharpening effect than the Sharpen filter.

The Sharpen Edges and Unsharp Mask filters find the areas in the image where there are significant color changes and sharpens them. The Sharpen Edges filter applies sharpening only when an edge is found. The Unsharp Mask filter adjusts the contrast of edge detail, creating a sharper image. This is the best filter to use for subtle sharper focus. Use it no more than twice.

Working with Photoshop Documents

Opening and Closing Documents

To open a file, select Open from the File menu. In the Open dialog box, select the file you want and then click the Open button. To close a document, click its close box or select Close from the File menu.

Saving a Document

Changes you make to a document are not saved to disk until you issue a save command. Saving is quick and easy so you should save often to avoid possible loss of your work. Photoshop has two save commands– Save and Save As – that work similarly. Both commands are on the File menu.

Save

When you save a new document for the first time, Photoshop displays a dialog box similar to the Open dialog box. Select the disk in which to save the file and specify a name for the file. When you save an existing document that you have been editing, the newly saved version is written over the older version.

Save As

This command always displays a dialog box where you can choose a document name and disk. Use the Save As command when you want to save a copy of the current document under a different name or in a different folder or disk. The newly saved copy becomes the active document.

Creating a New Document

If you are already in Photoshop and you want to create a new document, choose New from the File menu.

Managing Multiple Documents

In Photoshop you can have more than one document open simultaneously. The name of each open file will appear on the Window menu. The document with the check next to it is the active document. To switch to another document, simply choose that document from the Window menu.

Exercises for learning Photoshop basics

20 August, 2000, Center for Instructional Technologies
adapted from materials provided by
Training Services- ACITS
The University of Texas at Austin