Chapter 3 - Photoshop® Elements Outline 3.1 Introduction 3.2 Image Basics 3.3 Vector and Raster Graphics 3.4 Toolbox 3.4.1 Selection Tools 3.4.2 Painting Tools 3.4.3 Shape Tools 3.5 Layers 3.6 Screen Capturing 3.7 File Formats: GIF and JPEG

Adding a drop shadow to text with the Layer Styles palette Fig. 3.8 Adding a drop shadow to text with the Layer Styles palette. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

Layers Layers palette Layers palette Type layer Style Settings dialog Lighting angle Shadow distance

Customizing layer effects Fig. 3.9 Customizing layer effects. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Layers palette Layer effects Shadow Distance Type layer Lighting Angle Active layer Background layer

Deleting a layer using the Layers palette Fig. 3.11 Deleting a layer using the Layers palette. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Type layer Background layer Delete layer New layer Resulting transparent image after deleting the background layer

3.3 Vector and Raster Graphics Two graphic types Vector Uses vector equations to define graphic properties Shape, size, color Resolution independent Resize without image quality loss Ideal for solid areas of color Handles complex color poorly Raster Graphics defined by colored areas of pixels Resolution dependent Image quality is lost when image is resized Interpolation Ideal for images with complex color, i.e., photographs, artwork

3.3 Vector and Raster Graphics Fig. 3.13 Raster and vector graphics scaled. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) 100% 200% Raster image Vector image

3.4 Toolbox Toolbox Contains tools that simplify image editing and creation Groups tools by function Navigation tools Magnifying glass Hand tool Hidden tools Beneath tools in toolbox

3.4 Toolbox Fig. 3.14 Photoshop Elements Toolbox. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Marquee Lasso Crop Shape Airbrush Eraser Paint bucket Blur Sponge Red eye brush Rubber stamp Hand Foreground color swatch Black and white Move Magic wand Type Gradient Paintbrush Pencil Impressionist brush Sharpen Smudge Dodge Eyedropper Magnifying glass Switch foreground and background colors Background color swatch

Selection tools 3.4.1 Selection Tools Create selection border (“marquee”) around pixels Selections Move (with move tool) Filter Color change Marquee tools Rectangular Elliptical Lasso tools Regular Polygonal Magnetic

3.4.1 Selection Tools Fig. 3.15 Moving a selection with the move tool. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

3.4.1 Selection Tools Fig. 3.16 Drawing selection areas with the lasso tools. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Selection with the regular lasso Selection with the magnetic lasso

3.4.1 Selection Tools Magic wand tool Selection tool options bars Tolerance Selection tool options bars Customize selection areas Add to selection Subtract from selection Intersect selection

Changing the magic wand tolerance to affect the size of a selection Fig. 3.17 Changing the magic wand tolerance to affect the size of a selection. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Tolerance set to 15 Tolerance set to 50

Making multiple selections using the selection tool options bar Fig. 3.18 Making multiple selections using the selection tool options bar. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Height Width Style Feather Selection modes Default tool settings Subtract from selection Intersect selections Anti-aliased Add to selection Single selection

Creating a blurred frame around an image Rectangular marquee tool Feathering Blurs edges to blend Set to 8 px in Marquee tool options bar

Feathering a selection Fig. 3.19 Feathering a selection. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Feathering set to 8 pixels Feathering set to 0 pixels

Creating a blurred frame around an image , cont. Draw marquee Click and drag with rectangular marquee tool Invert selection Select pixels outside current selection Ctrl+Shift+I or Select > Inverse Fill selection Alt+Backspace (fill selection with foreground color) Ctrl+Backspace (fill selection with background color) Edit > Fill Fill dialog Blending modes

Filling a selection with color Fig. 3.20 Filling a selection with color. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Blending mode Opacity Fill contents Fill the feathered selection

Creating a blurred frame around an image , cont. Deselect Ctrl+D or click outside selection Save for Web JPEG Supports millions of colors Ideal for photographic images

Previewing the feathered image in a Web browser Fig. 3.21 Previewing the feathered image in a Web browser. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

3.4.2 Painting Tools Apply color to image Simulate brush strokes or draws constrained shapes Paintbrush and airbrush tools Raster tools Simulate brush strokes Brush selection Paintbucket tool Fills area with foreground color (selects pixels same as magic wand) Gradient tool Fills area with gradual color progression Gradient options

Using the gradient tool Fig. 3.22 Using the gradient tool. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Gradient picker Default tool settings Edit gradient colors Gradient pattern Color blend Mode Opacity Dither Reverse gradient colors Preserve Transparency

Creating a title image using your own canvas Fill with color Paint on image with contrasting color Paintbrush options bar Brush size

Brush options Fig. 3.23 Brush options. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Default settings Current brush Brush menu Brush sizes Brush options Brush menu display Brush menus Blending Mode

Painting with the paintbrush tool Fig. 3.24 Painting with the paintbrush tool. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Switch foreground and background colors

Creating a title image, cont. Apply Liquify filter Liquify modes Create pattern

Using the Liquify filter to create a pattern Fig. 3.25 Using the Liquify filter to create a pattern. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Liquify modes Brush Pressure Revert Brush Size

Creating a title image, cont. Create text with type selection tool

Using the type selection tool to create a title image Fig. 3.26 Using the type selection tool to create a title image. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Selection area Regular type tool Type selection tool

Creating a title image, cont. Choose other tool to apply selection Copy selection to new layer Layer > New > Layer via Copy or Ctrl+J Turn pattern layer visibility to view copied text

Turning off layer visibility in the Layers palette Fig. 3.27 Turning off layer visibility in the Layers palette. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

Creating a title image, cont. Crop tool Creating a title image, cont. Crop image using crop tool Eliminate unnecessary background area

Using the crop tool to eliminate excess image area Fig. 3.28 Using the crop tool to eliminate excess image area. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

text selection using Magic wand tool Creating a title image, cont. Select area around text Magic wand tool Add to selection Areas inside letters Select inverse (recreate text selection)

Creating a title image, cont. Stroke selection Creating a title image, cont. Stroke selection Edit > Stroke Stroke dialog Stroke location Stroke weight Stroke color Preserve transparency Add layer styles bevel

Applying a simple inner bevel and a stroke selection Fig. 3.29 Applying a simple inner bevel and a stroke selection. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Stroke Width Stroke Color Stroke Location Blending Mode Opacity Preserve Transparency

Shape tool 3.4.3 Shape Tools Draws vector shapes filled with color Edit independently Vector shape layer Contain vector shapes Cannot contain raster graphics Default setting Rectangle tool Change to ellipse, polygon, line, custom shape Options change for each

Creating a navigation bar Show Grid Creating a navigation bar Turn on grid View > Show Grid Change grid settings Grid Preferences dialog Edit > Preferences > Grid… Set grid line spacing and line color Draw button shape Rectangle tool

Custom shape options bar Fig. 3.30 Custom shape options bar. (Adobe and Photoshop are either registered Trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Shape select tool Custom shape selector Layer Style Shape Color Fig. 3.31 Creating a rectangle with the shape tool. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

Creating a navigation bar, cont. Copy and paste Creating a navigation bar, cont. Duplicate rectangle three times Select rectangle with shape select tool Copy and paste (Ctrl+C, Ctrl+V) Space buttons evenly Undo Edit > Undo or Ctrl +Z History palette Trashcan button

Copy and paste Fig. 3.32 Using the main menu bar to copy and paste. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) New Open Print Print preview Step back Step forward Save Save for Web Cut Copy Paste Ruler Help Fig. 3.33 Creating multiple rectangles with the move shape tool. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

History palette Fig. 3.34 Using the History palette to reverse actions. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Active actions Inactive actions Delete actions Current action

Creating a navigation bar, cont. Transform shapes Creating a navigation bar, cont. Transform shapes Select all Skew Image > Transform Shape > Skew Tilt on horizontal or vertical axis using anchors Press Enter to apply Connect buttons with line Line tool Set line weight using line tool options bar Click and drag to draw

skew transformation Fig. 3.35 Applying the skew transformation. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Fig. 3.36 Line added to link the skewed rectangles together. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

Convert line and rectangle (shape) layers to regular raster layers Creating a navigation bar, cont. Combine line and rectangle areas Convert line and rectangle layers to regular raster layers Layers palette Layer options menu Simplify Layer Layer styles Bevel Button titles Type tool

Simplifying a shape layer using the Layers palette Fig. 3.37 Simplifying a shape layer using the Layers palette. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Press to access layer options menu Button layer Line layer

Navigation bar Fig. 3.38 Navigation bar. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

Creating a navigation bar, cont. Image slicing Creating a navigation bar, cont. Implement on Web Image slicing Select each button with rectangular marquee tool Copy and paste each selection into new image

Slicing an image with the rectangular marquee tool Fig. 3.39 Slicing an image with the rectangular marquee tool. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Fig. 3.40 Sliced image as individual buttons. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

3.5 Layers Layers Organize image elements so they may be edited separately May have unique attributes Vector layers Contain vector shapes or text Raster layers Contain raster shapes Adjustment layers Apply color adjustments to layers beneath

Creating Arranging Layers Creating new layers Raster New layer button Adjustment New Adjustment layer button Shape Use shape tool or type tool Arranging layers Layers > Arrange Drag up or down in Layers palette

Background layer Background layer Blending modes Anchored to bottom of image Must re-name to convert to regular raster layer Blending modes How layer is affected by applied color

Layers in the Layers palette Fig. 3.41 Layers in the Layers palette. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Color blending mode Layer visibility New adjustment layer New layer Delete layer Locked for editing Background layer Type layer Shape layer Raster layers Layer lock Layer opacity

Adjusting the hue and saturation using an adjustment layer Fig. 3.42 Adjusting the hue and saturation using an adjustment layer. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

Screen Capturing 3.6 Screen Capturing “capture” image that appears on screen Works like copy and paste Press Print Screen button to copy screen contents Paste into new image Press alt+Print Screen to capture active window

3.7 File Formats: GIF and JPEG File fomats Different formats are ideal for different types of images GIF (Graphics Interchange Format) Ideal for: screen captures, line drawings, sharp-edged graphics and images with transparency Not good for: Photographic images, artwork with complex colors Supports 256 colors Lossless format Quality is not reduced by compression process

Dithering Dithering simulates the desired color with colors from the GIF pallette. Dither the available colors to arrive at a set of colors that aren’t available For more info: http://www.pcwebopaedia.com/TERM/D/dithering.html

3.7 File Formats: GIF and JPEG File fomats, cont. JPEG (Joint Photographic Experts Group) Ideal for: Photographic images, images with rich color transitions Not good for: Images with sharp edges, text, transparency Supports millions of colors Lossy format Image quality is reduced by compression process Scalable compression Adjust image compression

3.7 File Formats: GIF and JPEG File fomats, cont. PNG (Portable Network Graphics) Newer format recommended by W3C www.w3.org/Graphics/PNG Ideal for: Both color complex-images and images with transparency Supports millions of colors Lossless format Good alternative for both GIF and JPEG