Chapter 3 - Photoshop® Elements Outline 3.1 Introduction 3.2 Image Basics 3.3 Vector and Raster...
-
Upload
matilda-waters -
Category
Documents
-
view
226 -
download
0
Transcript of Chapter 3 - Photoshop® Elements Outline 3.1 Introduction 3.2 Image Basics 3.3 Vector and Raster...
![Page 1: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/1.jpg)
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
![Page 2: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/2.jpg)
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
![Page 3: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/3.jpg)
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
![Page 4: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/4.jpg)
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
![Page 5: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/5.jpg)
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
![Page 6: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/6.jpg)
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
![Page 7: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/7.jpg)
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
![Page 8: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/8.jpg)
3.2 Image Basics
Toolbox– Tool types
• Selection• Editing• Painting• Type
– Active tool• One tool at a time
– Tool information• Hints palette• Status bar
![Page 9: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/9.jpg)
3.2 Image Basics
Toolbox, cont.– Active colors
• Foreground color• Background color• Double-click to select
![Page 10: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/10.jpg)
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
![Page 11: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/11.jpg)
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
![Page 12: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/12.jpg)
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
![Page 13: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/13.jpg)
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
![Page 14: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/14.jpg)
3.2 Image Basics
Fig. 3.7 Adding text to an image.
![Page 15: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/15.jpg)
3.2 Image Basics
Special effects– Layer Styles palette
• Drop-shadows• Bevels• Default style
– Editing layer styles• Layer > Layer Style > Scale Effects…
![Page 16: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/16.jpg)
3.2 Image Basics
Fig. 3.8 Adding a drop shadow to text with the Layer Styles palette.
![Page 17: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/17.jpg)
3.2 Image Basics
Layers – Layers palette
• Type layer• Style Settings dialog
– Lighting angle– Shadow distance
![Page 18: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/18.jpg)
3.2 Image Basics
Fig. 3.9 Customizing layer effects.
Layers palette Layer effects Shadow Distance
Type layer
Lighting Angle
Active layer
Background layer
![Page 19: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/19.jpg)
3.2 Image Basics
Warp text– Type option– Warp text dialog
• Styles• Bend
– Horizontal and vertical distortion
![Page 20: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/20.jpg)
3.2 Image Basics
Fig. 3.10 Warped Text dialog.
![Page 21: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/21.jpg)
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
![Page 22: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/22.jpg)
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
![Page 23: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/23.jpg)
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
![Page 24: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/24.jpg)
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
![Page 25: Chapter 3 - Photoshop® Elements 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.](https://reader036.fdocuments.net/reader036/viewer/2022062308/56649f575503460f94c7c20a/html5/thumbnails/25.jpg)
Assignment: Install Adobe Photoshop and use the tools
discussed in today’s lecture.