chapter 3 - photoshop ® elements: creating web graphics
DESCRIPTION
Chapter 3 - Photoshop ® Elements: Creating Web Graphics. Outline 3.1 Introduction 3.2 Image Basics 3.3 Vector and Raster Graphics 3.4 Toolbox 3.4.1 Selection Tools 3.4.2 Painting Tools 3.4.3 Shape Tools 3.5 Layers 3.6 Screen Captures - PowerPoint PPT PresentationTRANSCRIPT
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
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.
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
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
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.)
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
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
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
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
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
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
2003 Prentice Hall, Inc. All rights reserved.
12
3.2 Image Basics
• Toolbox, cont.– Active colors
• Foreground color• Background color• Double-click to select
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
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
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
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
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
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…
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
2003 Prentice Hall, Inc. All rights reserved.
20
3.2 Image Basics
• Layers – Layers palette
• Type layer• Style Settings dialog
– Lighting angle– Shadow distance
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
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
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
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
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
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
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
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
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
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
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
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
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.)
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
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
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
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
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
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
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
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
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
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.)
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
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
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
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
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
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
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
2003 Prentice Hall, Inc. All rights reserved.
51
3.4.2 Painting Tools
• Creating a title image, cont.– Create text with type selection tool
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
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
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
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
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
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)
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.
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
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
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
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
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
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.)
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
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
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.)
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
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
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.)
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
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.)
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
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
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
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
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
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
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
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
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