Chapter 3 - Photoshop® Elements

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 Capturing3.7 File Formats: GIF and JPEG

3.1 Introduction Graphics

– Use to create successful Web pages– Enhance user experience– Free graphics on the Web– Create original graphics

Photoshop Elements– Use to create graphics

• Title images• Banners• Buttons• Advanced photographic effects

– 30 day trial download• www.adobe.com

3.2 Image Basics

New dialog– Image settings

• Height• Width• Measurement increments

– Pixels– Inches– Mm– cm

• Resolution:is the measurement of image clarity.– Pixels/inch– Pixels/cm

3.2 Image Basics

New dialog, cont.– Image settings, cont.

• Color mode:determines the number of colors that are used to compose image.

– RGB– Grayscale– Bitmap

• Background color– White – Background color– Transparent

• File name

3.2 Image Basics

Fig. 3.2 Creating a new image in Photoshop Elements.

Name

Resolution

Background Color

Dimension measurement

Color Mode

Image Size

Image dimensions

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

3.2 Image Basics

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

Zoom factor

Backgroundcolor

Imagedimensions

Developmentenvironment

Status bar

Foregroundcolor swatch

Image window

Toolbox

Active tooloptions bar

Title bar

Main menu bar Palette well Hints palette

Active tool

3.2 Image Basics

Toolbox– Tool types

• Selection• Editing• Painting• Type

– Active tool• One tool at a time

– Tool information• Hints palette• Status bar

3.2 Image Basics

Toolbox, cont.– Active colors

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

3.2 Image Basics Color selection

– Select with Color Picker dialog• Color models

– HSB» Hue:is measured in degrees (0 to 300) representing the

colors of the color wheel.» Saturation:is the color’s intensity measured in the percentage

of gray that the color contains.» Brightness:is the color’s relative lightness or darkness and is

measured in the amount of black and white a color contains– RGB– 16.7 million colors

• Web-safe palette(256 colors)– Hexadecimal notation

3.2 Image Basics

Fig. 3.4 Selecting a color using the Color Picker dialog.

Color selection

Color slider (Hue)

Only Web Colors

New color

Previous color

Cosest Web-safe color

Saturation

Hue

Brightness

Red

Green

Blue

Hexadecimal

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

3.2 Image Basics

Fig. 3.5 Type options bar. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

Fig. 3.6 Example of anti-aliasing.

Default settings Font face Font weight Anti-aliased Type direction

Select mode Font size Alignment Warped text

Type color

Type mode

Non-anti-aliased type Anit-aliased type

Anit-aliasing

3.2 Image Basics

Fig. 3.7 Adding text to an image.

3.2 Image Basics

Special effects– Layer Styles palette

• Drop-shadows• Bevels• Default style

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

3.2 Image Basics

Fig. 3.8 Adding a drop shadow to text with the Layer Styles palette.

3.2 Image Basics

Layers – Layers palette

• Type layer• Style Settings dialog

– Lighting angle– Shadow distance

3.2 Image Basics

Fig. 3.9 Customizing layer effects.

Layers palette Layer effects Shadow Distance

Type layer

Lighting Angle

Active layer

Background layer

3.2 Image Basics

Warp text– Type option– Warp text dialog

• Styles• Bend

– Horizontal and vertical distortion

3.2 Image Basics

Fig. 3.10 Warped Text dialog.

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

3.2 Image Basics

Fig. 3.11 Deleting a layer using the Layers palette.

Type layer

Backgroundlayer

Delete layerNew layerResulting transparent image after

deleting the background layer

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

3.2 Image Basics

Fig. 3.12 Adding a matte color to a transparent

Pan

Zoom

Original image Optimized image

Transparency

File type

Number of colors

File info Applied matte Zoom

Matte

Browser preview

Settings

Assignment: Install Adobe Photoshop and use the tools

discussed in today’s lecture.