 2003 Prentice Hall, Inc. All rights reserved. 1 Chapter 3 - Photoshop ® Elements: Creating Web Graphics 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 Captures 3.7 File Formats: GIF, JPEG and PNG 3.8Web Resources

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

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

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

 2003 Prentice Hall, Inc. All rights reserved Image Basics Fig. 3.1 Welcome screen. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

 2003 Prentice Hall, Inc. All rights reserved Image Basics New dialog –Image settings Height Width Measurement increments –pixels Resolution –dpi/ppi –Represents image clarity

 2003 Prentice Hall, Inc. All rights reserved Image Basics New dialog, cont. –Image settings, cont. Color mode –RGB Defines colors by intensity of red, green and blue components, each –Grayscale –Bitmap Background color –Foreground color –Background color –Transparent File name

 2003 Prentice Hall, Inc. All rights reserved Image Basics Fig. 3.2 New image creation in Photoshop Elements. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) NameImage SizePreset Sizes Image dimensions Resolution Color Mode Background colorDimension measurement

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

 2003 Prentice Hall, Inc. All rights reserved Image Basics Fig. 3.3 Photoshop Elements development environment. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Active tool options barTitle barMain menu barPalette well Hints palette Recipes palette Status barDevelopment environment Background color swatch Foreground color swatch Image dimensionsZoom factorImage windowActive toolToolbox

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

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

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

 2003 Prentice Hall, Inc. All rights reserved Image Basics Fig. 3.4 Color Picker dialog. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) SelectionColor fieldColor slider (hue) Only Web Colors New colorPrevious colorClosest Web safe color HueSaturationBrightnessRedGreenBlueHexadecimal

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

 2003 Prentice Hall, Inc. All rights reserved Image Basics Fig. 3.5 Type options bar. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Fig. 3.6 Anti-aliasing. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Default settingsFont weightFont face Anti-aliased Type directionType color Type modesFont sizeText styleAlignmentWarped text Anti-aliased typeAnti-aliasingNon-Anti-aliased type

 2003 Prentice Hall, Inc. All rights reserved Image Basics Fig. 3.7 Type tool creates text that can be moved by the move tool. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Move tool Type tool Bounding boxAnchor

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

 2003 Prentice Hall, Inc. All rights reserved Image Basics Fig. 3.8 Adding a drop shadow with the Layer Styles palette. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Low drop-shadowScale adjustments Clear style Drop-shadow types

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

 2003 Prentice Hall, Inc. All rights reserved Image Basics Fig. 3.9 Layer effect style settings. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Layers palette Layer effects Lighting AngleShadow Distance Active layer Type layerBackground layer

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

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

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

 2003 Prentice Hall, Inc. All rights reserved Image Basics Fig Deleting a layer using the Layers palette. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Type layer Delete layer Background layer New layer

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

 2003 Prentice Hall, Inc. All rights reserved Image Basics Fig Matte color added to a transparent GIF in the Save for Web dialog. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) PanTransparencyImage windowZoomOriginal imageOptimized imageFile typeSettings selectionNumber of colors ZoomBrowser previewApplied matteImage sizeMatte color File info

 2003 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

 2003 Prentice Hall, Inc. All rights reserved Vector and Raster Graphics Fig Raster and vector graphics. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) 100%200%100%200% Raster imageVector image

 2003 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

 2003 Prentice Hall, Inc. All rights reserved Toolbox Fig Photoshop Elements Toolbox. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) MarqueeLassoSelection brushShapePaint bucketBrushEraserBlurSpongeDodgeClone stampHandForeground color swatchBlack and whiteAdobe Online linkMagic wandMoveCropTypeGradientPencilRed Eye RemovalSharpenSmudgeBurnEyedropperZoomSwitch foreground and background colors Background color swatch

 2003 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

 2003 Prentice Hall, Inc. All rights reserved Selection Tools Fig Move tool moves selections. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

 2003 Prentice Hall, Inc. All rights reserved Selection Tools Fig Lasso tools draw selection areas. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Selection with the regular lasso Selection with the magnetic lasso

 2003 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

 2003 Prentice Hall, Inc. All rights reserved Selection Tools Fig Magic wand tolerance affects the size of a selection. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Tolerance set to 15Tolerance set to 50

 2003 Prentice Hall, Inc. All rights reserved Selection Tools Fig Multiple selections using the selection tool options bar. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Default tool settingsSelection modes FeatherStyleWidthHeightAnti-aliased Single selectionIntersect selection Subtract from selection Add to selection

 2003 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

 2003 Prentice Hall, Inc. All rights reserved Selection Tools Fig Feathering a selection. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Feathering set to 0 pixelsFeathering set to 8 pixels

 2003 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

 2003 Prentice Hall, Inc. All rights reserved Selection Tools Fig Filling a selection with color. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Fill contents Blending ModeOpacity Fill the feathered selection

 2003 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

 2003 Prentice Hall, Inc. All rights reserved Selection Tools Fig Previewing the feathered image in a Web browser. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

 2003 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

 2003 Prentice Hall, Inc. All rights reserved Painting Tools Fig Gradient pattern created using gradient tools. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Default tool settingsGradient patternColor blend Mode Opacity Color DitherHeight Edit gradient colors Reverse gradient colors Preserve transparency

 2003 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

 2003 Prentice Hall, Inc. All rights reserved Painting Tools Fig Brush options. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/ or other countries.) Default settingsBrush menu Current brush Brush sizes Blending Mode Brush menu Options Brush optionsBrush menu display

 2003 Prentice Hall, Inc. All rights reserved Painting Tools Fig Painting with the paintbrush tool. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Switch foreground and background colors

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

 2003 Prentice Hall, Inc. All rights reserved Painting Tools Fig Liquify filter morphing an image. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Liquify modes RevertBrush SizeBrush Pressure

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

 2003 Prentice Hall, Inc. All rights reserved Painting Tools Fig Using the type selection to create a title image. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Type selection tool Regular type tool Selection area

 2003 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

 2003 Prentice Hall, Inc. All rights reserved Painting Tools Fig Layers palette allows users to view specific layers. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Visibility button

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

 2003 Prentice Hall, Inc. All rights reserved Painting Tools Fig Crop tool eliminates excess image area. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Crop tool

 2003 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)

 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

 2003 Prentice Hall, Inc. All rights reserved Painting Tools Fig Simple inner bevel and stroke adjustment applied to an image. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Stroke Width Stroke Color Stroke Location Stroke ModeOpacityPreserve Transparency

 2003 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

 2003 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

 2003 Prentice Hall, Inc. All rights reserved Shape Tools Fig Shape options bar. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Fig Shape tool can create rectangles. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Shape select tool Layer Style Shape Color Custom shape selector

 2003 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

 2003 Prentice Hall, Inc. All rights reserved Shape Tools Fig Multiple rectangles and the move shape tool. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

 2003 Prentice Hall, Inc. All rights reserved Shape Tools Fig History palette has reverse action tools. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Active actionsInactive actions Current actionDelete actions

 2003 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

 2003 Prentice Hall, Inc. All rights reserved Shape Tools Fig Skew transformation. (Adobe and Photoshop are either registered trademarks or 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 or trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

 2003 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

 2003 Prentice Hall, Inc. All rights reserved Shape Tools Fig Simplifying a shape layer using the Layers palette. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Line layerButton layerPress to access layer options menu

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

 2003 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

 2003 Prentice Hall, Inc. All rights reserved Shape Tools Fig Slicing an image with the rectangular marquee tool. (Adobe and Photoshop are either registered trademarks or 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 or trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

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

 2003 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

 2003 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

 2003 Prentice Hall, Inc. All rights reserved Layers Fig Layers in the Layers palette. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Color blending mode Current working layer Layer visibilityLayer opacityLayer lockShape layerType layerBackground layer Raster layers Locked for editingNew New layer Delete layer

 2003 Prentice Hall, Inc. All rights reserved Layers Fig Adjustment layers can alter hue and saturation. (Adobe and Photoshop are either registered trademarks or 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 layerAdjustment layer menu Types of adjustment layers

 2003 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

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

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

 2003 Prentice Hall, Inc. All rights reserved File Formats: GIF, JPEG and PNG File formats, 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