Photoshop Elements

1
Photoshop Elements

• Outline
• Introduction
• Image Basics
• Vector and Raster Graphics
• Toolbox
• Selection Tools
• Painting Tools
• Shape Tools
• Layers
• Screen Capturing
• File Formats GIF and JPEG

2
Introduction

• Graphics
• Use to create successful Web pages
• Enhance user experience
• Free graphics on the Web
• Create original graphics
• Photoshop Elements
• Use to create graphics
• Title images
• Banners
• Buttons
• Advanced photographic effects
• 30 day trial download
• www.adobe.com

3
Image Basics

• Creating original images
• Hands-on examples
• Photoshop Elements application
• Quick Start menu
• File options
• Open existing file
• Create new file
• Acquiring an image
• Scanner
• Digital camera
• Window Show Quick Start

4
Image Basics
Fig. 3.1 Photoshop Elements Quick Start menu.
(Adobe and Photoshop are either registered
trademarks of Adobe Systems Incorporated in the
United States and/or other countries.)
5
Image Basics

• New dialog
• Image settings
• Height
• Width
• Measurement increments
• pixels
• Resolution
• dpi/ppi

6
Image Basics

• New dialog, cont.
• Image settings, cont.
• Color mode
• RGB
• Grayscale
• Bitmap
• Background color
• Foreground color
• Background color
• Transparent
• File name

7
Image Basics
Fig. 3.2 Creating a new image in Photoshop
Elements. (Adobe and Photoshop are either
registered trademarks of Adobe Systems
Incorporated in the United States and/or other
countries.)
8
Image Basics

• Development Environment
• Image window
• Title bar
• Toolbox
• Palette well
• Palettes
• Customizing development environment
• Move palettes
• Drag and drop from palette well
• Windows Reset Palette Locations

9
Image Basics
Fig. 3.3 Photoshop Elements development
environment. (Adobe and Photoshop are either
registered trademarks of Adobe Systems
Incorporated in the United States and/or other
countries.)
10
Image Basics

• Toolbox
• Tool types
• Selection
• Editing
• Painting
• Type
• Active tool
• One tool at a time
• Tool information
• Hints palette
• Status bar

11
Image Basics

• Toolbox, cont.
• Active colors
• Foreground color
• Background color
• Double-click to select

12
Image Basics

• Color selection
• Select with Color Picker dialog
• Color models
• HSB
• Hue
• Saturation
• Brightness
• RGB
• 16.7 million colors
• Web-safe palette
• Hexadecimal notation

13
Image Basics
Fig. 3.4 Selecting a color using the Color
Picker dialog. (Adobe and Photoshop are either
registered trademarks of Adobe Systems
Incorporated in the United States and/or other
countries.)
14
Image Basics

• Adding text to an image
• Type tool
• Active tool options bar (type options)
• Font face
• Font weight
• Alignment
• Font color
• Antialiasing

15
Image Basics
Fig. 3.5 Type options bar. (Adobe and Photoshop
are either registered trademarks of Adobe
Systems Incorporated in the United States and/or
other countries.)
Fig. 3.6 Example of anti-aliasing. (Adobe and
Photoshop are either registered Trademarks of
Adobe Systems Incorporated in the United States
and/or other countries.)
16
Image Basics
Fig. 3.7 Adding text to an image. (Adobe and
Photoshop are either registered Trademarks of
Adobe Systems Incorporated in the United States
and/or other countries.)
17
Image Basics

• Special effects
• Layer Styles palette
• Drop-shadows
• Bevels
• Default style
• Editing layer styles
• Layer Layer Style Scale Effects

18
Image Basics
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.)
19
Image Basics

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

20
Image Basics
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.)
21
Image Basics

• Warp text
• Type option
• Warp text dialog
• Styles
• Bend
• Horizontal and vertical distortion
• Apply in real-time

22
Image Basics
Fig. 3.10 Warped Text dialog. (Adobe and
Photoshop are either registered trademarks of
Adobe Systems Incorporated in the United States
and/or other countries.)
23
Image Basics

• Transparency
• Web page color shows through in transparent areas
• Creating transparency
• Delete background layer
• Select background layer in Layers palette
• Press Delete key or click trashcan button
• Set background to transparent when opening file

24
Image Basics
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.)
25
Image Basics

• Saving an image for the Web
• File Save for Web
• Save for Web dialog
• Optimize settings for Web and target audience
• Number of colors
• File format
• File size
• Compression quality
• Transparency
• Matte
• Helps transparent image blend with background
  color
• Browser preview

26
Image Basics
Fig. 3.12 Adding a matte color to a transparent
GIF in the Save for Web dialog. (Adobe and
Photoshop are either registered trademarks of
Adobe Systems Incorporated in the United States
and/or other countries.)
27
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

28
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.)
29
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

30
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.)
31
Selection Tools

• 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

32
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.)
33
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.)
34
Selection Tools

• Selection tools, cont.
• Magic wand tool
• Tolerance
• Selection tool options bars
• Customize selection areas
• Add to selection
• Subtract from selection
• Intersect selection

35
Selection Tools
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.)
36
Selection Tools
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.)
37
Selection tools

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

38
Selection Tools
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.)
39
Selection Tools

• Creating a blurred frame around an image, cont.
• Draw marquee
• Click and drag with rectangular marquee tool
• Invert selection
• Select pixels outside current selection
• CtrlShiftI or Select Inverse
• Fill selection
• AltBackspace (fill selection with foreground
  color)
• CtrlBackspace (fill selection with background
  color)
• Edit Fill
• Fill dialog
• Blending modes

40
Selection Tools
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.)
41
Selection Tools

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

42
Selection Tools
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.)
43
Painting Tools

• 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

44
Painting Tools
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.)
45
Painting Tools

• Creating a title image
• Fill with color
• Paint on image with contrasting color
• Paintbrush options bar
• Brush size

46
Painting Tools
Fig. 3.23 Brush options. (Adobe and Photoshop
are either registered trademarks of Adobe
Systems Incorporated in the United States and/or
other countries.)
47
Painting Tools
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.)
48
Painting Tools

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

49
Painting Tools
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.)
50
Painting Tools

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

51
Painting Tools
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.)
52
Painting Tools

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

53
Painting Tools
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.)
54
Painting Tools

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

55
Painting Tools
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.)
56
Painting Tools

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

57

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

58
Painting Tools
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.)
59
Shape Tools

• Shape tool
• 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

60
Shape Tools

• 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

61
Shape Tools
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.)
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.)
62
Shape Tools

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

63
Shape Tools
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.)
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.)
64
Shape Tools
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.)
65
Shape Tools

• 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

66
Shape Tools
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.)
67
Shape Tools

• 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

68
Shape Tools
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.)
69
Shape Tools
Fig. 3.38 Navigation bar. (Adobe and Photoshop
are either registered trademarks of Adobe Systems
Incorporated in the United States and/or other
countries.)
70
Shape Tools

• 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

71
Shape Tools
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.)
72
Layers

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

73
Layers

• Layers, cont.
• 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

74
Layers

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

75
Layers
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.)
76
Layers
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.)
77
Screen Capturing

• 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 altPrint Screen to capture active window

78
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

79
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

80
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