Photoshop CS5 Quick Look Series

Why

Pho

tosh

op?

Wha

t’s N

ew?

Tool

s O

verv

iew

Basi

c Ta

sks

Sele

ctio

n

Tool

s

Mas

ks

& E

dges

Col

or

Cor

rect

ion

Clo

ning

& H

ealin

g

Laye

rs

Save

for W

eb

& D

evic

es

Photoshop CS5 Quick Look Series © In the Know Graphics - All rights Reserved

Photoshop CS5QUICKLOOK

Adobe Photoshop is a raster artwork program used to manipulate digital images. It is the industry standard for print, web and digital photography.

The application allows users to adjust color & sharpness, repair or touch-up images, create composites and develop graphic images. Adobe Photoshop CS5 provides professional users an advanced set of tools that empower the designer to create just about anything they can imagine. a. Options Bar b. Toolbar c. Panel Group d. Layers Panel e. Mini-Bridge

Why

Pho

tosh

op?

Wha

t’s

New

?

l Refine Edge’s new Smart Edges and brushes provide a new and easy way to select complex objects like hair and fur.l New Content Aware Fill for automatically removing unwanted objects from an image.l The Spot Healing Brush now uses Content Aware algorithms for powerful image touch-up.l New Puppet Warp tools provide easy and natural distortion of objects as if they had “digital bones.”l New HDR features for merging multi-exposure images to produce popular HDR image effects.l New Brush Engine creates ultra-realistic natural media and real-time brush interactions.l New Mixer Brush converts digital photos into painterly images with simple brush strokes.l Create 3D Text using Photoshop’s Repoussé filter.

Photoshop CS5 Quick Look Series 2

Tools Overview

Photoshop’s tools serve 6 primary functions:l Creating Selections.l Moving and manipulating Layers.l Creating Shapes.l Adjusting and touching-up images.l Painting (brushwork, selection or image adjustment).l Viewing and positioning the image within the work area.

Selection Tools

The Selection tools provide ways to select or outline an image. The designer creates an initial selection and then refines it by magnifying in on the edge’s pixels.

Most Selection tools are manual (lines are drawn where the user indicates) while a few are “Smart Tools” - which identify an edge or an area of your selection. Most images require the use of more than one type of tool to create a professional Selection. The following are the Selection Mode tools:• Create a new Selection.• Add to the current Selection.• Subtract from the current Selection.• Intersect the two Selections.

Move Tool The Move tool selects Layers within a Photoshop

document and allows you to move and resize the Layer’s contents. You can activate the Move tool using the keyboard shortcut “V.”

Shape Tools

Photoshop can create filled shapes on a layer using vector graphic tools like those found in Adobe Illustrator. The Rectangle, Ellipse, Rounded Rectangle, Polygon, Custom Shape tools, along with the Line and Pen tools, can be used to draw paths. Although Photoshop creates raster images, shapes are vector-based, thus editable. Shapes are resolution-independent and can be resized. Shapes can also be pure vector outlines called Clipping Paths.

Adjust Tools

The Clone tool allows users to sample an area of an image and paint using those sampled pixels. This powerful tool helps users remove unwanted parts & pieces from their image. The Spot Healing Brush and

the Healing Brush both allow users to remove unwanted pixels, but rather than simply copying pixels to the brush, the tools evaluate the new pixels to correct brightness and texture. This correction is known as “healing”.

The Patch tool heals large areas selected by the user (rather than brush strokes). The Red-Eye Remover tool fixes any red-eyes in your digital photos with a click on the pupil. All of these tools fix problem areas within your images.

Painting Tools

Photoshop’s brushes mimic real world natural media. The Brush tool and the Mixer Brush paint like traditional, natural media. The History Brush paints with a previous image state while the Art History Brush paints the state in a number of painterly styles. You can control the size, shape and painting presets using the Options Bar.

Open the Brushes Panel (Window_Brush) for detailed brush settings.

The Brush Tool1. Choose a color from the Swatches panel or double- click the foreground Color Picker .2. Click the Brush tool and choose settings or a preset from the Options Panel.3. Click & drag on the image to paint.4. Paint straight lines by holding down the Shift key.

Zoom And Pan Tools Use the Zoom tool to magnify a part of your image

or quickly pan out to view the complete page. The Zoom tool in Photoshop CS 5 introduces a new default method for zooming called Scrubby Zoom: 1. Select the Zoom tool.2. Position your mouse cursor on screen until it is over the part of your image you wish to magnify.3. Click & drag to the right and Photoshop will keep the target area in the center of the display while continuing to zoom. Drag your Mouse to the left to interactively zoom out of the image.4. Double-click the Zoom tool to make the image display at its original size (100%).

The Hand tool lets you move the magnified image within the view area. 1. Click the Hand tool and position it onscreen. 2. Click and drag the image until the zoomed area is within view, release the mouse button. 3. To temporarily activate the Hand tool, hold down the Space Bar. 4. Double-click the Hand tool to fit the image to the size of your screen.


Basic Tasks

Create A New Document1. Choose File, New… to create a new document.2. From the New dialog box you can choose from a number of default image sizes or define your own custom size and resolution.3. Click OK to create the document.

Remember that most print-ready images should be 266 – 300 ppi. Web graphics can be 72 or 96 ppi.

Open An Image File1. Choose File, Open… command to launch the Windows Explorer or Mac Finder.2. Navigate to the image file you wish to open, select the file and click the Open button.

Open An Image Using Bridge1. From Photoshop launch Bridge by choosing File, Browse in Bridge or click on the Bridge icon ]. Locate an image thumbnail you wish to open.2. Double-click the thumbnail to open the image in Photoshop.

Open An Image Using Mini-Bridge1. From Photoshop open the Mini-Bridge panel (Windows_Mini Bridge or click the Mini-Bridge icon ).2. Navigate to a thumbnail of an image you wish to open.3. Double-click to open the file in Photoshop.4. Drag and drop the thumbnail into an open document to Place the file as a Smart Object.

Save A File1. Choose File, Save... to save your current image.2. When the Save dialog box appears, choose Photoshop from the format dropdown list.3. Navigate to the location where you want the file saved.4. Click the Save button.

Save A Copy1. To create a copy of your file in a different location or file format, choose File, Save As...2. When the Save As… dialog appears, chose the file type from the Format dropdown list.3. Navigate to the location where you want the new file to be saved.4. Click the Save button.

Selection Tools

Photoshop’s selection tools isolate pixels within the image. When you create a selection you are outlining an area that you will either place on a transparent layer, mask or adjust using filters and brushes. Selections are a critical skill. The more accurate your selections the better your edges blend into composite images. Create Shape-Based Selections1. Select one of the Marquee Selection tools. Click & drag to draw an unconstrained shape (rectangle or ellipse). 2. Hold the Shift key while clicking and dragging to constrain the shape to create a square or circle. 3. Release the mouse when your Selections meets the desired size and shape.

Create Freehand Selections1. Select the Lasso tool .2. Click and hold the left mouse button.3. Draw a freehand outline anywhere on your screen.4. To complete the selection: a. Position the mouse cursor over the point where you began the Selection and click to close the Selection.

b. Release the mouse button and a straight line will be drawn between where you released the mouse button and the start point of your Selection. Create Selection Using Straight Lines1. Select the Polygonal Lasso tool .2. Position your cursor on screen where the Selection will begin, then click & release your Mouse.3. Move your mouse cursor to another point on the screen. The tool creates a straight line between the first clicked location and the current cursor’s position. Click to create a new Selection Point.4. Continue to create points with line connectors.5. To Complete the Selection: a. Position the Mouse over the starting point of the Selection and click to automatically close the Selection. b. Double-click from any point within the image to draw a straight line between that point and the start of the Selection.


Selection Tools cont’d

Trace Selection Outlines Automatically1. Select the Magnetic Lasso tool . Adjust the tolerance of the tool using the Options Bar.2. Position your mouse cursor on the edge of an image object you wish to select and click to place an Anchor Point.3. Drag the Mouse along the edge of the object. The tool will trace the edge dropping points to define the curves of your Selection.4. If the tool places an errant anchor, click the Delete key to remove the point.5. You can create manual Anchor Points by clicking anywhere along the edge.

6. To Complete the Selection: a. Position the Mouse over the starting point of the Selection and click to automatically close the Selection. b. Double-click from any point within the image to draw a straight line between that point and the start of the Selection.

Automatically Create Selections 1. Select the Quick Select tool. 2. Adjust the size (tolerance) of the tool from the Options Bar.3. Check the Auto-Enhance option to allow Photoshop to dynamically smooth Selection edges. 4. Check Sample All Layers to select all visible pixels.5. Click & drag the brush over a portion of the object you wish to select. A Selection will automatically “grow” outward from the painted area. 6. Continue dragging the brush over areas you want to add to the Selection. 7. If the tool selects an area you don’t want in the Selection, hold down the Alt/Option key and brush over the area to remove it from the Selection.

Masks & Edges

A Mask is a 256-level grayscale image of a Selection. White areas of the Mask are 100% selected (opaque) and black areas are unaffected by the Selection (trans-parent). The shades of gray that fall in between are partially selected (semi-transparent).

a. Original Image b. Mask c. Mask applied to a Layer making the unselected areas transparent

Photoshop creates a temporary Alpha Channel Mask whenever you create a Selection. Designers can attach their Selections to a Layer as a Layer Mask.

To Create Layer Mask1. Create a Selection on a Layer.2. Open the Masks panel (Window_Masks) and click the Add Pixel Mask icon .3. Your Selection will be converted to a Layer Mask. The Layers panel will now display a thumbnail of the Mask next to the layer thumbnail. 4. You can reverse the foreground and background by clicking the Invert button on the Masks panel.

Disable A Layer Mask1. Click the Layer Mask thumbnail in the Layers panel.2. Right-click (Mac: CTRL-Click) and choose Disable Layer Mask.

Remove A Layer Mask1. Click the Layer Mask’s thumbnail in the Layers panel.2. Click the Trash Can icon at the bottom of the Layers panel.3. Photoshop will ask you if you wish to apply the mask before removing. Choose Apply to make the Mask permanent. Click Delete to remove the Mask, leaving the Layer unaltered.

Refine Edge

a. Original image with hard to select detail b. Selected object using Quick Select tool c. Same Selection after using

Smart Edge and Refine Radius brushes


Masks & Edges cont’d

Photoshop provides a powerful set of tools for correcting the edges of your Selections and Masks. The Refine Edge command allows you to adjust and touch-up your Selection edges. The Smart Edge function and brushes allow you to add fine detail to the Selection.

To refine an active Selection choose Select menu, Refine Edge. Choose the following options1. The View Mode displays your Selection in different ways against a variety of backgrounds & colors.2. Edge Detection will automatically search the border of your edges for pixels that should or should not be included in your Selection. Turning on Smart Radius enables the detection. Adjust the radius slider & extend the detection radius width. 3. Paint additional edge detection areas using the Refine Radius tool and the Erase Refinement tool .Use these tools to paint over wispy areas like hair and fur and the Selection will be automatically updated to include the fine detail.4. Adjust Edge commands will smooth, feather, add contrast or shift the edge of your Selection. The sliders are interactive so you can see their impact on the Selection in real-time.5. The Output options let you apply the Selection to a new Layer or Layer Mask. If your Selection contains a lot of semi- transparent information, use the Decontaminate Color checkbox and slider to reduce the background color in your Selection pixels.

Color Correction

Photoshop provides a wide array of tools and filters to adjust the color and sharpness of your image. Adjustments made using the Image menu are permanent and cannot be undone. To adjust color in your images and retain the ability to edit their settings, use the Adjustments panel (Windows_Adjustments).

1. Click an adjustment from the panel (each icon represents a different effect. When you mouse over the icon the name of the effect appears on the top of the panel). A new Adjustment Effects Layer will go above the currently selected Layer.2. The panel will change to display the inputs and sliders for the adjustment you chose.3. When you have completed the adjustment, click the Return to Adjustment List .4. You can revisit any Adjustment Layer and make changes to the settings by selecting the Adjustment Layer in the Layers panel. The Adjustments panel will automatically display the settings.

a. Adjustment Panel Main View b. Settings Panel for selected Adjustment Layer

Cloning & Healing

Photoshop can use pixels from your image as “digital paint” to clean-up stains and marks in an image; remove spots and small objects that you don’t want in your image or paint in items from other areas of the image. This process is called Cloning.

To Clone An Image1. Select the Clone Stamp tool and position your cursor in the area of the image you wish to paint with (your Clone Source). Hold down the Alt key and your cursor will change to a target icon. Click to select your Clone Source.


Layers

Imagine you had a photograph of a house and you covered it with a piece of clear cellophane. You might glue some text onto that cellophane. On another layer of cellophane you might glue a cut-out photo of the sun. When you looked at the stack it would appear to be a single layout of a house with the sun in the sky and a headline. Photoshop Layers are transparent overlays that can hold pixel information. You can use Layers to create composites of multiple images and graphics. You can view, manage and arrange layers with the Layers panel (Window_Layers).

a. Layer with a Layer Mask b. Vector Shape Layer c. Smart Layer d. Adjustment Layer e. Background

To Create A New Layer1. In an open document click the New Layer icon .2. A new Transparent Layer will appear directly over the background or the previously selected Layer.

To Convert The Background To A LayerBy default, every Photoshop file has a Background. The Background is locked in place and cannot contain transparency. 1. Double click the Background in the Layers panel.2. The New Layer dialog will appear and ask you to name the Layer.3. Click OK to create a Layer from the Background.

To Duplicate A Layer1. Select the Layer you wish to duplicate in the Layers panel.2. Drag the Layer to the new Layer icon.3. A copy of the Layer will appear over the current Layer

Cloning & Healing

2. Your cursor will now display the current Clone Source to help you visualize what you are painting.3. Move your cursor to the area you wish to start Cloning. Press and drag the mouse button to paint with the Clone Stamp tool.

The Healing Brushes work like the Clone Stamp tool but in addition to painting cloned pixels; Photoshop evaluates the tone, texture and lighting of the underlying pixels and blends the two together. This Healing process enables more realistic correction of some areas.

Clone Stamp tool with brush displaying target area

To Use The Spot Healing Brush1. Select the Spot Healing Brush .2. Make sure Content Aware is selected in the Options Bar.3. Click & drag the brush over an area you want to remove (blemish, spot, etc.).4. The tool will initially draw a black stroke on screen as it processes the healing effect. The brush will sample from the pixels around the mark and match in the texture, tone and lighting.

a. Original image with blemish and digital noise on cheek b. Brush the Spot Healing Brush over the area

c. New “Healed” area


3. The Layer Styles dialog will display inputs and sliders for the selected effect.4. Click OK to apply the effect.5. You can edit and adjust Layer styles at anytime by locating the Layer in the Layers panel and double- clicking on the Layer Styles icon .

To Merge Layers1. Select two or more Layers in the Layers panel (depress the Shift key while clicking Layers).2. From the Layers panel drop-down menu choose Merge Layers.

To Group Layers1. Select two or more Layers in the Layers panel (depress the Shift key while selecting Layers).2. Click the Create A New Group icon from the bottom of the Layers panel.3. Your Layers will be moved into a Group Folder in the Layers panel.4. Layers can be dragged from one group folder to another group folder through the Layers panel.

a. A Layer Group – expanded to see individual layer contentsb. A Collapsed Layer Group

Layers cont’d

To Delete A Layer1. Select the Layer you wish to delete in the Layers panel.2. Drag the Layer to the Trash Can icon at the bottom of the Layers panel or click the Delete key on your keyboard.

To Rearrange Layers 1. Drag Layers within the Layers panel to rearrange their order. 2. The currently selected Layers will show a heavy black line on the bottom indicating where in the stack you are moving the Layer.

To Change Layer Visibility1. Click the Eyeball Icon to turn a Layer On or Off.2. Alt-Click the Eyeball icon to turn off all Layers except the current Layer. Alt-Click again to turn all Layers back On.

To Lock A Layer’s Properties

The Layer Lock icons allows you to lock a selected Layer’s opacity, pixels, position or all attributes.

To Convert A Layer To A Clipping Path 1. Identify two Layers – the Base Layer (shape) the Clipping Layer (photo).2. Arrange the Layers in the Layers panel so the Base Layer is immediately above the Clipping Layer.3. Depress the Alt/Option key and position your cursor directly under the Base Layer. The tool icon will change to a left pointing arrow with two overlapping circles.4. Click to clip the two Layers.

a. Target Layer b. Clipping Layer

To Add A Layer Style1. Select a Layer in the Layers panel.2. Click on the Layer Styles icon to add a special effect like a shadow or glow.


Save for Web & Devices

Photoshop’s Save for Web & Devices is a powerful web output interface with real-time visual feedback of file quality.

This export method allows the designer to experiment with different file types and compression settings while comparing the outputs both visually and numerically.

The interface helps estimate how long it will take for a file to download on different types of connections.

If your Photoshop file contains a transparent background, Save for Web & Devices will automatically include the transparency in files that support this feature.

To Open Save For Web And Devices1. From the Photoshop File menu choose Save for Web & Devices...2. The Interface will appear centered on-screen. You can place your mouse over each corner of the window and drag to increase its size.

a. Views Tab b. Presets & settings panel c. Image Size panel

d. Preview image size and download speed

Compare Image Output1. Open Save for Web & Devices...2. Along the top of the window you will see the View Tabs.

3. Click each tab to see just the original or optimized images, or to view 2 or 4 images compared next to each other.4. When multiple views are active, move your mouse over a view and click to make it active.

To View File Size And Download Information

1. Activate a view in 2-up or 4-up mode or use Optimized view.2. The bottom left hand corner of the image area will display your current output file format, estimated file size and download speed.3. To change the targeted download speed, click the Select Download Speed drop-down menu and chose a speed ranging from a 9600 bps modem up to a typical high-speed connection.

Choose Web Formats1. From the Save for Web & Devices... interface choose the Presets drop-down menu.2. Choose from a selection of the most common types of JPEG, GIF and PNG file settings.3. Select a File Type from the drop-down list and the settings for the specific file format will appear in the dialog box.4. Use the Image Size area of the dialog box to re-size your image for the web by pixels or percentage.

Exit And Save1. To Save the current web output settings with your Photoshop file, click Done. The web settings will be remembered and you will be returned to Photoshop’s main workspace. No web image will be output.2. Click Save to create a copy of the current Photoshop image in the web format specified. Your system file manager will present a Save dialog box. By default, Photoshop will name the web-ready file the same as the current open file. You can change the file name by typing in the File Name box.3. To exit the Save for Web & Devices interface and return to Photoshop without saving any settings, click Cancel.

Photoshop CS5 Quick Look Series

Documents

Transcript of Photoshop CS5 Quick Look Series