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

2. Adding a drop shadow to text with the Layer Styles palette
Fig 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.)

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

4. Customizing layer effects
Fig 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

5. Deleting a layer using the Layers palette
Fig 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

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

7. 3.3 Vector and Raster Graphics
Fig 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

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

9. 3.4 Toolbox
Fig 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

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

11. 3.4.1 Selection Tools
Fig 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.)

12. 3.4.1 Selection Tools
Fig 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

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

14. Changing the magic wand tolerance to affect the size of a selection
Fig 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

15. Making multiple selections using the selection tool options bar
Fig 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

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

17. Feathering a selection
Fig 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

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

19. Filling a selection with color
Fig 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

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

21. Previewing the feathered image in a Web browser
Fig 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.)

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

23. Using the gradient tool
Fig 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

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

25. Brush options
Fig 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

26. Painting with the paintbrush tool
Fig 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

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

28. Using the Liquify filter to create a pattern
Fig 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

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

30. Using the type selection tool to create a title image
Fig 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

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

32. Turning off layer visibility in the Layers palette
Fig 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.)

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

34. Using the crop tool to eliminate excess image area
Fig 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.)

35. 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)

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

37. Applying a simple inner bevel and a stroke selection
Fig 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

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

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

40. Custom shape options bar
Fig 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 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.)

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

42. Copy and paste
Fig 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 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.)

43. History palette
Fig 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

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

45. skew transformation
Fig Applying the skew transformation. (Adobe and Photoshop are either registered
trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Fig 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.)

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

47. Simplifying a shape layer using the Layers palette
Fig 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

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

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

50. Slicing an image with the rectangular marquee tool
Fig 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 Sliced image as individual buttons. (Adobe and Photoshop are either registered
trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

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

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

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

54. Layers in the Layers palette
Fig 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

55. Adjusting the hue and saturation using an adjustment layer
Fig 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.)

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

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

58. 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:

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

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