![Page 1: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/1.jpg)
2003 Prentice Hall, Inc. All rights reserved.
1Chapter 3 - Photoshop® Elements: Creating Web Graphics
Outline3.1 Introduction3.2 Image Basics3.3 Vector and Raster Graphics3.4 Toolbox
3.4.1 Selection Tools3.4.2 Painting Tools3.4.3 Shape Tools
3.5 Layers3.6 Screen Captures3.7 File Formats: GIF, JPEG and PNG3.8 Web Resources
![Page 2: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/2.jpg)
2003 Prentice Hall, Inc. All rights reserved.
2
Objectives
• In this chapter, you will learn:– To explore the basics of Photoshop Elements.– To be able to design images for Web pages.– To learn how colors are represented in image files and what
“color mode” and “transparency” are.– To understand the techniques of layering, selection, image
slicing and other image-preparation processes.– To understand the difference between graphic file formats.– To be able to take screen shots using screen capture
technology.
![Page 3: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/3.jpg)
2003 Prentice Hall, Inc. All rights reserved.
3
3.1 Introduction
• Graphics– Use to create successful Web pages– Enhance user experience– Free generic graphics on the Web– Create original graphics to make your site unique
• Photoshop Elements– Use to create graphics
• Title images• Banners• Buttons• Advanced photographic effects
– 30 day trial download• www.adobe.com
![Page 4: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/4.jpg)
2003 Prentice Hall, Inc. All rights reserved.
4
3.2 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
![Page 5: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/5.jpg)
2003 Prentice Hall, Inc. All rights reserved.
5
3.2 Image BasicsFig. 3.1 Welcome screen. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe SystemsIncorporated in the United States and/or other countries.)
![Page 6: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/6.jpg)
2003 Prentice Hall, Inc. All rights reserved.
6
3.2 Image Basics
• New dialog– Image settings
• Height• Width• Measurement increments
– pixels• Resolution
– dpi/ppi– Represents image clarity
![Page 7: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/7.jpg)
2003 Prentice Hall, Inc. All rights reserved.
7
3.2 Image Basics
• New dialog, cont.– Image settings, cont.
• Color mode– RGB
• Defines colors by intensity of red, green and blue components, 0-255 each
– Grayscale– Bitmap
• Background color– Foreground color– Background color– Transparent
• File name
![Page 8: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/8.jpg)
2003 Prentice Hall, Inc. All rights reserved.
8
3.2 Image BasicsFig. 3.2 New image creation in Photoshop Elements. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
NameImage Size
Preset Sizes
Image dimensions
ResolutionColor Mode
Background color
Dimension measurement
![Page 9: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/9.jpg)
2003 Prentice Hall, Inc. All rights reserved.
9
3.2 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
![Page 10: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/10.jpg)
2003 Prentice Hall, Inc. All rights reserved.
10
3.2 Image BasicsFig. 3.3 Photoshop Elements development environment. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Active tool options barTitle bar
Main menu barPalette well Hints palette
Recipes palette
Status bar
Development environment
Background color swatch
Foreground color swatchImage dimensionsZoom factor
Image window
Active tool
Toolbox
![Page 11: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/11.jpg)
2003 Prentice Hall, Inc. All rights reserved.
11
3.2 Image Basics
• Toolbox– Tool types
• Selection• Editing• Painting• Type
– Active tool• One tool at a time
– Tool information• Hints palette• Status bar
![Page 12: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/12.jpg)
2003 Prentice Hall, Inc. All rights reserved.
12
3.2 Image Basics
• Toolbox, cont.– Active colors
• Foreground color• Background color• Double-click to select
![Page 13: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/13.jpg)
2003 Prentice Hall, Inc. All rights reserved.
13
3.2 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
![Page 14: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/14.jpg)
2003 Prentice Hall, Inc. All rights reserved.
14
3.2 Image BasicsFig. 3.4 Color Picker dialog. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Selection
Color fieldColor slider (hue)
Only Web Colors
New color
Previous colorClosest Web safe color
Hue
SaturationBrightnessRed
GreenBlue
Hexadecimal
![Page 15: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/15.jpg)
2003 Prentice Hall, Inc. All rights reserved.
15
3.2 Image Basics
• Adding text to an image – Type tool
• Active tool options bar (type options)– Font face– Font weight– Alignment– Font color– Antialiasing
![Page 16: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/16.jpg)
2003 Prentice Hall, Inc. All rights reserved.
16
3.2 Image BasicsFig. 3.5 Type options bar. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Fig. 3.6 Anti-aliasing. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Default settings Font weight Font face Anti-aliased Type directionType color
Type modes Font size Text style Alignment Warped text
Anti-aliased type
Anti-aliasing
Non-Anti-aliased type
![Page 17: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/17.jpg)
2003 Prentice Hall, Inc. All rights reserved.
17
3.2 Image BasicsFig. 3.7 Type tool creates text that can be moved by the move tool. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Move tool
Type tool
Bounding boxAnchor
![Page 18: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/18.jpg)
2003 Prentice Hall, Inc. All rights reserved.
18
3.2 Image Basics
• Special effects– Layer Styles palette
• Drop-shadows• Bevels• Default style
– Editing layer styles• Layer > Layer Style > Scale Effects…
![Page 19: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/19.jpg)
2003 Prentice Hall, Inc. All rights reserved.
19
3.2 Image BasicsFig. 3.8 Adding a drop shadow with the Layer Styles palette. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Low drop-shadow
Scale adjustments
Clear style
Drop-shadow types
![Page 20: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/20.jpg)
2003 Prentice Hall, Inc. All rights reserved.
20
3.2 Image Basics
• Layers – Layers palette
• Type layer• Style Settings dialog
– Lighting angle– Shadow distance
![Page 21: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/21.jpg)
2003 Prentice Hall, Inc. All rights reserved.
21
3.2 Image BasicsFig. 3.9 Layer effect style settings. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Layers palette
Layer effects
Lighting Angle
Shadow Distance
Active layer
Type layerBackground layer
![Page 22: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/22.jpg)
2003 Prentice Hall, Inc. All rights reserved.
22
3.2 Image Basics
• Warp text– Type option– Warp text dialog
• Styles• Bend
– Horizontal and vertical distortion• Apply in real-time
![Page 23: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/23.jpg)
2003 Prentice Hall, Inc. All rights reserved.
23
3.2 Image BasicsFig. 3.10 Warp Text dialog. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Warp textStyle
Warp orientationResulting text
![Page 24: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/24.jpg)
2003 Prentice Hall, Inc. All rights reserved.
24
3.2 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
![Page 25: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/25.jpg)
2003 Prentice Hall, Inc. All rights reserved.
25
3.2 Image BasicsFig. 3.11 Deleting a layer using the Layers palette. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Type layer
Delete layer
Background layer
New layer
![Page 26: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/26.jpg)
2003 Prentice Hall, Inc. All rights reserved.
26
3.2 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
![Page 27: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/27.jpg)
2003 Prentice Hall, Inc. All rights reserved.
27
3.2 Image BasicsFig. 3.12 Matte color added to a transparent GIF in the Save for Web dialog. (Adobe and Photoshop are either registeredtrademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Pan
Transparency
Image window
Zoom
Original image Optimized image File typeSettings selectionNumber of colors
Zoom Browser preview
Applied matteImage size
Matte color
File info
![Page 28: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/28.jpg)
2003 Prentice Hall, Inc. All rights reserved.
28
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
![Page 29: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/29.jpg)
2003 Prentice Hall, Inc. All rights reserved.
29
3.3 Vector and Raster GraphicsFig. 3.13 Raster and vector graphics. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
100%
200%100%
200%
Raster image Vector image
![Page 30: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/30.jpg)
2003 Prentice Hall, Inc. All rights reserved.
30
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
![Page 31: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/31.jpg)
2003 Prentice Hall, Inc. All rights reserved.
31
3.4 ToolboxFig. 3.14 Photoshop Elements Toolbox. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
MarqueeLasso
Selection brushShape
Paint bucketBrushEraser
BlurSpongeDodge
Clone stampHand
Foreground color swatchBlack and white
Adobe Online link
Magic wandMove
CropTypeGradientPencil
Red Eye RemovalSharpen
SmudgeBurn
EyedropperZoom
Switch foreground and background colorsBackground color swatch
![Page 32: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/32.jpg)
2003 Prentice Hall, Inc. All rights reserved.
32
3.4.1 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
![Page 33: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/33.jpg)
2003 Prentice Hall, Inc. All rights reserved.
33
3.4.1 Selection ToolsFig. 3.15 Move tool moves selections. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
![Page 34: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/34.jpg)
2003 Prentice Hall, Inc. All rights reserved.
34
3.4.1 Selection ToolsFig. 3.16 Lasso tools draw selection areas. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Selection with the regular lasso Selection with the magnetic lasso
![Page 35: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/35.jpg)
2003 Prentice Hall, Inc. All rights reserved.
35
3.4.1 Selection Tools
• Selection tools, cont.– Magic wand tool
• Tolerance– Selection tool options bars
• Customize selection areas– Add to selection– Subtract from selection– Intersect selection
![Page 36: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/36.jpg)
2003 Prentice Hall, Inc. All rights reserved.
36
3.4.1 Selection ToolsFig. 3.17 Magic wand tolerance affects the size of a selection. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Tolerance set to 15Tolerance set to 50
![Page 37: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/37.jpg)
2003 Prentice Hall, Inc. All rights reserved.
37
3.4.1 Selection ToolsFig. 3.19 Multiple selections using the selection tool options bar. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Default tool settingsSelection modes Feather Style Width HeightAnti-aliased
Single selection Intersect selection
Subtract from selection
Add to selection
![Page 38: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/38.jpg)
2003 Prentice Hall, Inc. All rights reserved.
38
3.4.1 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
![Page 39: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/39.jpg)
2003 Prentice Hall, Inc. All rights reserved.
39
3.4.1 Selection ToolsFig. 3.19 Feathering a selection. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)Feathering set to 0 pixels
Feathering set to 8 pixels
![Page 40: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/40.jpg)
2003 Prentice Hall, Inc. All rights reserved.
40
3.4.1 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• 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
![Page 41: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/41.jpg)
2003 Prentice Hall, Inc. All rights reserved.
41
3.4.1 Selection ToolsFig. 3.20 Filling a selection with color. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Fill contents
Blending ModeOpacity
Fill the feathered selection
![Page 42: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/42.jpg)
2003 Prentice Hall, Inc. All rights reserved.
42
3.4.1 Selection Tools
• 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
![Page 43: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/43.jpg)
2003 Prentice Hall, Inc. All rights reserved.
43
3.4.1 Selection ToolsFig. 3.21 Previewing the feathered image in a Web browser. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
![Page 44: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/44.jpg)
2003 Prentice Hall, Inc. All rights reserved.
44
3.4.2 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
![Page 45: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/45.jpg)
2003 Prentice Hall, Inc. All rights reserved.
45
3.4.2 Painting ToolsFig. 3.22 Gradient pattern created using gradient tools. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)Default tool settings Gradient pattern Color blend
ModeOpacity Color Dither
Height
Edit gradient colors Reverse gradient colorsPreserve transparency
![Page 46: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/46.jpg)
2003 Prentice Hall, Inc. All rights reserved.
46
3.4.2 Painting Tools
• Creating a title image– Fill with color– Paint on image with contrasting color
• Paintbrush options bar– Brush size
![Page 47: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/47.jpg)
2003 Prentice Hall, Inc. All rights reserved.
47
3.4.2 Painting ToolsFig. 3.23 Brush options. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/ or other countries.)
Default settings
Brush menu
Current brush
Brush sizes
Blending Mode
Brush menu Options
Brush options
Brush menu display
![Page 48: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/48.jpg)
2003 Prentice Hall, Inc. All rights reserved.
48
3.4.2 Painting ToolsFig. 3.24 Painting with the paintbrush tool. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Switch foreground and background colors
![Page 49: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/49.jpg)
2003 Prentice Hall, Inc. All rights reserved.
49
3.4.2 Painting Tools
• Creating a title image, cont.– Apply Liquify filter
• Liquify modes• Create pattern
![Page 50: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/50.jpg)
2003 Prentice Hall, Inc. All rights reserved.
50
3.4.2 Painting ToolsFig. 3.25 Liquify filter morphing an image. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Liquify modesRevert
Brush SizeBrush Pressure
![Page 51: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/51.jpg)
2003 Prentice Hall, Inc. All rights reserved.
51
3.4.2 Painting Tools
• Creating a title image, cont.– Create text with type selection tool
![Page 52: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/52.jpg)
2003 Prentice Hall, Inc. All rights reserved.
52
3.4.2 Painting ToolsFig. 3.26 Using the type selection to create a title image. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Type selection tool
Regular type tool
Selection area
![Page 53: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/53.jpg)
2003 Prentice Hall, Inc. All rights reserved.
53
3.4.2 Painting Tools
• 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
![Page 54: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/54.jpg)
2003 Prentice Hall, Inc. All rights reserved.
54
3.4.2 Painting ToolsFig. 3.27 Layers palette allows users to view specific layers. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Visibility button
![Page 55: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/55.jpg)
2003 Prentice Hall, Inc. All rights reserved.
55
3.4.2 Painting Tools
• Creating a title image, cont.– Crop image using crop tool
• Eliminate unnecessary background area
![Page 56: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/56.jpg)
2003 Prentice Hall, Inc. All rights reserved.
56
3.4.2 Painting ToolsFig. 3.28 Crop tool eliminates excess image area. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Crop tool
![Page 57: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/57.jpg)
2003 Prentice Hall, Inc. All rights reserved.
57
3.4.2 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)
![Page 58: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/58.jpg)
2003 Prentice Hall, Inc. All rights reserved.
58
• Creating a title image, cont.– Stroke selection
• Edit > Stroke– Stroke dialog
• Stroke location• Stroke weight• Stroke color• Preserve transparency
– Add layer styles• bevel
![Page 59: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/59.jpg)
2003 Prentice Hall, Inc. All rights reserved.
59
3.4.2 Painting ToolsFig. 3.29 Simple inner bevel and stroke adjustment applied to an image. (Adobe and Photoshop are either registeredtrademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Stroke WidthStroke Color
Stroke Location
Stroke ModeOpacity
Preserve Transparency
![Page 60: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/60.jpg)
2003 Prentice Hall, Inc. All rights reserved.
60
3.4.3 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
![Page 61: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/61.jpg)
2003 Prentice Hall, Inc. All rights reserved.
61
3.4.3 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
![Page 62: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/62.jpg)
2003 Prentice Hall, Inc. All rights reserved.
62
3.4.3 Shape ToolsFig. 3.30 Shape options bar. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Fig. 3.31 Shape tool can create rectangles. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Shape select tool Layer StyleShape Color
Custom shape selector
![Page 63: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/63.jpg)
2003 Prentice Hall, Inc. All rights reserved.
63
3.4.3 Shape Tools
• 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
![Page 64: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/64.jpg)
2003 Prentice Hall, Inc. All rights reserved.
64
3.4.3 Shape ToolsFig. 3.33 Multiple rectangles and the move shape tool. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
![Page 65: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/65.jpg)
2003 Prentice Hall, Inc. All rights reserved.
65
3.4.3 Shape ToolsFig. 3.33 History palette has reverse action tools. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Active actions
Inactive actions
Current action
Delete actions
![Page 66: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/66.jpg)
2003 Prentice Hall, Inc. All rights reserved.
66
3.4.3 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
![Page 67: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/67.jpg)
2003 Prentice Hall, Inc. All rights reserved.
67
3.4.3 Shape ToolsFig. 3.34 Skew transformation. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Fig. 3.35 Line added to link the skewed rectangles together. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
![Page 68: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/68.jpg)
2003 Prentice Hall, Inc. All rights reserved.
68
3.4.3 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
![Page 69: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/69.jpg)
2003 Prentice Hall, Inc. All rights reserved.
69
3.4.3 Shape ToolsFig. 3.36 Simplifying a shape layer using the Layers palette. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Line layerButton layer
Press to access layer options menu
![Page 70: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/70.jpg)
2003 Prentice Hall, Inc. All rights reserved.
70
3.4.3 Shape ToolsFig. 3.37 Navigation bar. (Adobe and Photoshop are either registered trademarks ortrademarks of Adobe Systems Incorporated in the United States and/ or other countries.)
![Page 71: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/71.jpg)
2003 Prentice Hall, Inc. All rights reserved.
71
3.4.3 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
![Page 72: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/72.jpg)
2003 Prentice Hall, Inc. All rights reserved.
72
3.4.3 Shape Tools Fig. 3.38 Slicing an image with the rectangular marquee tool. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Fig. 3.39 Sliced image as individual buttons. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
![Page 73: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/73.jpg)
2003 Prentice Hall, Inc. All rights reserved.
73
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
![Page 74: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/74.jpg)
2003 Prentice Hall, Inc. All rights reserved.
74
3.5 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
![Page 75: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/75.jpg)
2003 Prentice Hall, Inc. All rights reserved.
75
3.5 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
![Page 76: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/76.jpg)
2003 Prentice Hall, Inc. All rights reserved.
76
3.5 LayersFig. 3.40 Layers in the Layers palette. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Color blending mode
Current working layer
Layer visibility
Layer opacityLayer lock
Shape layer
Type layerBackground layer
Raster layers
Locked for editing
NewNew layerDelete layer
![Page 77: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/77.jpg)
2003 Prentice Hall, Inc. All rights reserved.
77
3.5 LayersFig. 3.41 Adjustment layers can alter hue and saturation. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Hue/saturation adjustment to background layer
Adjustment layer inserted before background layer
New adjustment layer
Adjustment layer menu
Types of adjustment layers
![Page 78: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/78.jpg)
2003 Prentice Hall, Inc. All rights reserved.
78
3.6 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 Alt+Print Screen to capture active window
![Page 79: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/79.jpg)
2003 Prentice Hall, Inc. All rights reserved.
79
3.7 File Formats: GIF, JPEG and PNG
• File formats– 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
![Page 80: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/80.jpg)
2003 Prentice Hall, Inc. All rights reserved.
80
3.7 File Formats: GIF, JPEG and PNG
• File formats, 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
![Page 81: Chapter 3 - Photoshop ® Elements: Creating Web Graphics](https://reader036.vdocuments.mx/reader036/viewer/2022081502/56815f94550346895dce97da/html5/thumbnails/81.jpg)
2003 Prentice Hall, Inc. All rights reserved.
81
3.7 File Formats: GIF, JPEG and PNG
• File formats, 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