 2001 Prentice Hall, Inc. All rights reserved. 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

 2001 Prentice Hall, Inc. All rights reserved 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

 2001 Prentice Hall, Inc. All rights reserved. 3 Quick Start menu 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

 2001 Prentice Hall, Inc. All rights reserved. 4 Quick Start menu 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.)

 2001 Prentice Hall, Inc. All rights reserved. 5 New dialog –Image settings Height Width Measurement increments –pixels Resolution –dpi/ppi

 2001 Prentice Hall, Inc. All rights reserved. 6 New dialog New dialog, cont. –Image settings, cont. Color mode –RGB –Grayscale –Bitmap Background color –Foreground color –Background color –Transparent File name

 2001 Prentice Hall, Inc. All rights reserved. 7 Creating a new image 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.) Name Resolution Background Color Dimension measurement Color Mode Image Size Image dimensions

 2001 Prentice Hall, Inc. All rights reserved. 8 Color Mode RGB –Primary Colors Red –8-bit –Intensity value from 0 to 255 Green Blue –A total of 16.7 million colors (2 8 x 2 8 x 2 8 = 2 24 ) Grayscale –Have identical red, green and blue values that results in black and white images. Bitmap –Uses only black and white.

 2001 Prentice Hall, Inc. All rights reserved. 9 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

 2001 Prentice Hall, Inc. All rights reserved. 10 Development Environment 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.) Development environment Image window Toolbox Hints palette

 2001 Prentice Hall, Inc. All rights reserved. 11 Development Environment 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.) Zoom factor Background color Image dimensions Development environment Status bar Foreground color swatch Image window Toolbox Active tool options bar Title bar Main menu bar Palette well Hints palette Active tool

 2001 Prentice Hall, Inc. All rights reserved. 12 Toolbox –Tool types Selection Editing Painting Type –Active tool One tool at a time –Tool information Hints palette Status bar

 2001 Prentice Hall, Inc. All rights reserved. 13 Toolbox Toolbox, cont. –Active colors Foreground color Background color Double-click to select

 2001 Prentice Hall, Inc. All rights reserved. 14 Color Picker Color selection –Select with Color Picker dialog Color models –HSB Hue Saturation Brightness –RGB (Red, Green, Blue) –16.7 million colors Web-safe palette –Hexadecimal notations – only 00, 33, 66, 99, CC, FF values are allowed. –i.e., a total of 6 3 = 216 colors. RedGreenBlue FF00

 2001 Prentice Hall, Inc. All rights reserved. 15 Color Picker 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.) Color selection Color slider (Hue) Only Web Colors New color Previous color Cosest Web-safe color Saturation Hue Brightness Red Green Blue Hexadecimal

 2001 Prentice Hall, Inc. All rights reserved. 16 HSB Model The human eye perceives color in terms of three characteristics— –hue, –saturation, and –brightness (HSB), while computer monitors display colors by generating varying amounts of –red, –green, and –blue (RGB) light. Photoshop Elements lets you use the HSB and RGB color models to select and manipulate color.

 2001 Prentice Hall, Inc. All rights reserved. 17 HSB Model Based on the human perception of color, the HSB model describes three fundamental characteristics of color: Hue is the color reflected from or transmitted through an object. It is measured as a location on the standard color wheel, expressed as a degree between 0° and 360°. In common use, hue is identified by the name of the color such as red, orange, or green. Saturation, sometimes called chroma, is the strength or purity of the color. Saturation represents the amount of gray in proportion to the hue, measured as a percentage from 0% (gray) to 100% (fully saturated). On the standard color wheel, saturation increases from the center to the edge. Brightness is the relative lightness or darkness of the color, usually measured as a percentage from 0% (black) to 100% (white).

 2001 Prentice Hall, Inc. All rights reserved. 18 HSB Model A. Saturation B. Hue C. Brightness D. All hues

 2001 Prentice Hall, Inc. All rights reserved. 19 RGB Model A large percentage of the visible spectrum can be represented by mixing red, green, and blue (RGB) colored light in various proportions and intensities. Where the colors overlap, they create cyan, magenta, yellow, and white. Because the RGB colors combine to create white, they are also called additive colors. Adding all colors together creates white--that is, all light is transmitted back to the eye. Additive colors are used for lighting, video, and monitors. Your monitor, for example, creates color by emitting light through red, green, and blue phosphors.

 2001 Prentice Hall, Inc. All rights reserved. 20 RGB Model Additive colors (RGB)

 2001 Prentice Hall, Inc. All rights reserved. 21 Type tool Adding text to an image –Type tool Active tool options bar (type options) –Font face –Font weight –Alignment –Font color –Antialiasing

 2001 Prentice Hall, Inc. All rights reserved. 22 Type options bar Default settingsFont faceFont weightAnti-aliasedType direction Select modeFont sizeAlignmentWarped text Type color Type mode

 2001 Prentice Hall, Inc. All rights reserved. 23 Antialiasing Anti-aliasing is a process that smooths edges on scalable fonts and other graphics by blending the color of the edge pixels with the color of the background on which the text is placed. Default settingsFont faceFont weightAnti-aliasedType direction Select modeFont sizeAlignmentWarped text Type color Type mode Non-anti-aliased type Anit-aliased type Anit-aliasing

 2001 Prentice Hall, Inc. All rights reserved. 24 Move Tool 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.)

 2001 Prentice Hall, Inc. All rights reserved. 25 Special effects –Layer Styles palette Drop-shadows Bevels Default style –Editing layer styles Layer > Layer Style > Scale Effects…

 2001 Prentice Hall, Inc. All rights reserved. 26 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.)

 2001 Prentice Hall, Inc. All rights reserved. 27 Layers –Layers palette Type layer Style Settings dialog –Lighting angle –Shadow distance

 2001 Prentice Hall, Inc. All rights reserved. 28 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

 2001 Prentice Hall, Inc. All rights reserved. 29 Warp text –Type option –Warp text dialog Styles Bend –Horizontal and vertical distortion Apply in real-time

 2001 Prentice Hall, Inc. All rights reserved. 30 Warp text Fig Warped Text dialog. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

 2001 Prentice Hall, Inc. All rights reserved. 31 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

 2001 Prentice Hall, Inc. All rights reserved. 32 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 layerNew layer Resulting transparent image after deleting the background layer

 2001 Prentice Hall, Inc. All rights reserved. 33 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

 2001 Prentice Hall, Inc. All rights reserved. 34 Adding a matte color to a transparent GIF Fig 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.) Pan Zoom Original imageOptimized image Transparency File type Number of colors File infoApplied matteZoom Matte Browser preview Settings

 2001 Prentice Hall, Inc. All rights reserved 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

 2001 Prentice Hall, Inc. All rights reserved 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%100%200% Raster imageVector image

 2001 Prentice Hall, Inc. All rights reserved 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

 2001 Prentice Hall, Inc. All rights reserved 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

 2001 Prentice Hall, Inc. All rights reserved 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

 2001 Prentice Hall, Inc. All rights reserved 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.)

 2001 Prentice Hall, Inc. All rights reserved 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

 2001 Prentice Hall, Inc. All rights reserved Selection Tools Selection tools, cont. –Magic wand tool Tolerance –Selection tool options bars Customize selection areas –Add to selection –Subtract from selection –Intersect selection

 2001 Prentice Hall, Inc. All rights reserved Selection Tools 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 15Tolerance set to 50

 2001 Prentice Hall, Inc. All rights reserved Selection Tools 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.) HeightWidth StyleFeather Selection modes Default tool settings Subtract from selection Intersect selections Anti-aliased Add to selection Single selection

 2001 Prentice Hall, Inc. All rights reserved 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

 2001 Prentice Hall, Inc. All rights reserved Selection Tools 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

 2001 Prentice Hall, Inc. All rights reserved 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

 2001 Prentice Hall, Inc. All rights reserved Selection Tools 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

 2001 Prentice Hall, Inc. All rights reserved 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

 2001 Prentice Hall, Inc. All rights reserved Selection Tools 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.)

 2001 Prentice Hall, Inc. All rights reserved 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

 2001 Prentice Hall, Inc. All rights reserved Painting Tools 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

 2001 Prentice Hall, Inc. All rights reserved Painting Tools Creating a title image –Fill with color –Paint on image with contrasting color Paintbrush options bar –Brush size

 2001 Prentice Hall, Inc. All rights reserved Painting Tools 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

 2001 Prentice Hall, Inc. All rights reserved Painting Tools Switch foreground and background colors 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.)

 2001 Prentice Hall, Inc. All rights reserved Painting Tools Creating a title image, cont. –Apply Liquify filter Liquify modes Create pattern

 2001 Prentice Hall, Inc. All rights reserved Painting Tools Liquify modes Brush Pressure Revert Brush Size 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.)

 2001 Prentice Hall, Inc. All rights reserved Painting Tools Creating a title image, cont. –Create text with type selection tool

 2001 Prentice Hall, Inc. All rights reserved Painting Tools Selection area Regular type tool Type selection tool 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.)

 2001 Prentice Hall, Inc. All rights reserved 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

 2001 Prentice Hall, Inc. All rights reserved Painting Tools 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.)

 2001 Prentice Hall, Inc. All rights reserved Painting Tools Creating a title image, cont. –Crop image using crop tool Eliminate unnecessary background area

 2001 Prentice Hall, Inc. All rights reserved Painting Tools 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.)

 2001 Prentice Hall, Inc. All rights reserved 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)

 2001 Prentice Hall, Inc. All rights reserved. 65 Creating a title image Creating a title image, cont. –Stroke selection Edit > Stroke –Stroke dialog Stroke location Stroke weight Stroke color Preserve transparency –Add layer styles bevel

 2001 Prentice Hall, Inc. All rights reserved Painting Tools 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

 2001 Prentice Hall, Inc. All rights reserved 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

 2001 Prentice Hall, Inc. All rights reserved 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

 2001 Prentice Hall, Inc. All rights reserved Shape Tools Fig Custom shape options bar. (Adobe and Photoshop are either registered Trademarks of Adobe Systems Incorporated in the United States and/or other countries.) 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.) Shape select tool Custom shape selector Layer Style Shape Color

 2001 Prentice Hall, Inc. All rights reserved 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

 2001 Prentice Hall, Inc. All rights reserved Shape Tools 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.) 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.) New Open Print Print preview Step back Step forwardSave Save for Web Cut Copy Paste Ruler Help

 2001 Prentice Hall, Inc. All rights reserved Shape Tools 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

 2001 Prentice Hall, Inc. All rights reserved 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

 2001 Prentice Hall, Inc. All rights reserved Shape Tools 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.)

 2001 Prentice Hall, Inc. All rights reserved 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

 2001 Prentice Hall, Inc. All rights reserved Shape Tools Press to access layer options menu Button layer Line layer 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.)

 2001 Prentice Hall, Inc. All rights reserved Shape Tools Fig Navigation bar. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

 2001 Prentice Hall, Inc. All rights reserved 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

 2001 Prentice Hall, Inc. All rights reserved Shape Tools 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.)

 2001 Prentice Hall, Inc. All rights reserved 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

 2001 Prentice Hall, Inc. All rights reserved 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

 2001 Prentice Hall, Inc. All rights reserved 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

 2001 Prentice Hall, Inc. All rights reserved Layers 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

 2001 Prentice Hall, Inc. All rights reserved Layers 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.)

 2001 Prentice Hall, Inc. All rights reserved 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

 2001 Prentice Hall, Inc. All rights reserved 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

 2001 Prentice Hall, Inc. All rights reserved 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

 2001 Prentice Hall, Inc. All rights reserved 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