chapter 3 - photoshop ® elements: creating web graphics

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


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.


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

http://www.adobe.com/


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


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


6

3.2 Image Basics

• New dialog– Image settings

• Height• Width• Measurement increments

– pixels• Resolution

– dpi/ppi– Represents image clarity


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


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


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


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


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


12

3.2 Image Basics

• Toolbox, cont.– Active colors

• Foreground color• Background color• Double-click to select


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


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


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


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


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


18

3.2 Image Basics

• Special effects– Layer Styles palette

• Drop-shadows• Bevels• Default style

– Editing layer styles• Layer > Layer Style > Scale Effects…


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


20

3.2 Image Basics

• Layers – Layers palette

• Type layer• Style Settings dialog

– Lighting angle– Shadow distance


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


22

3.2 Image Basics

• Warp text– Type option– Warp text dialog

• Styles• Bend

– Horizontal and vertical distortion• Apply in real-time


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


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


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


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


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


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


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


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


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


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


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


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


35


• Selection tools, cont.– Magic wand tool

• Tolerance– Selection tool options bars

• Customize selection areas– Add to selection– Subtract from selection– Intersect selection


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


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


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


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


40


• 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


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


42


• 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


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


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


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


46


• Creating a title image– Fill with color– Paint on image with contrasting color

• Paintbrush options bar– Brush size


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


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


49


• Creating a title image, cont.– Apply Liquify filter

• Liquify modes• Create pattern


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


51


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


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


53


• 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


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


55


• Creating a title image, cont.– Crop image using crop tool

• Eliminate unnecessary background area


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


57


• Creating a title image, cont.– Select area around text

• Magic wand tool• Add to selection

– Areas inside letters– Select inverse (recreate text selection)


58

• Creating a title image, cont.– Stroke selection

• Edit > Stroke– Stroke dialog

• Stroke location• Stroke weight• Stroke color• Preserve transparency

– Add layer styles• bevel


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


80


• 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


81


• 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

http://www.w3.org/Graphics/PNG

chapter 3 - photoshop ® elements: creating web graphics

Documents