850 likes | 1.02k Views
Photoshop® Elements. Outline Introduction Image Basics Vector and Raster Graphics Toolbox Selection Tools Painting Tools Shape Tools Layers Screen Capturing File Formats: GIF and JPEG. Introduction. Graphics Use to create successful Web pages Enhance user experience
E N D
Photoshop® Elements • Outline • Introduction • Image Basics • Vector and Raster Graphics • Toolbox • Selection Tools • Painting Tools • Shape Tools • Layers • Screen Capturing • File Formats: GIF and JPEG
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
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
Image Basics Fig. 3.1 Photoshop Elements Quick Start menu. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Image Basics • New dialog • Image settings • Height • Width • Measurement increments • pixels • Resolution • dpi/ppi
Image Basics • New dialog, cont. • Image settings, cont. • Color mode • RGB • Grayscale • Bitmap • Background color • Foreground color • Background color • Transparent • File name
Name Image Size Image dimensions Dimension measurement Resolution Color Mode Background Color Image Basics Fig. 3.2 Creating a new image in Photoshop Elements. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
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
Hints palette Main menu bar Title bar Palette well Active tooloptions bar Toolbox Active tool Image window Foregroundcolor swatch Zoom factor Backgroundcolor Imagedimensions Developmentenvironment Status bar 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.)
Image Basics • Toolbox • Tool types • Selection • Editing • Painting • Type • Active tool • One tool at a time • Tool information • Hints palette • Status bar
Image Basics • Toolbox, cont. • Active colors • Foreground color • Background color • Double-click to select
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
Color selection New color Previous color Cosest Web-safe color Color slider (Hue) Hue Saturation Brightness Red Green Blue Hexadecimal Only Web Colors Image Basics Fig. 3.4 Selecting a color using the Color Picker dialog. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Image Basics • Adding text to an image • Type tool • Active tool options bar (type options) • Font face • Font weight • Alignment • Font color • Antialiasing
Default settings Font face Font weight Anti-aliased Type direction Type color Type mode Select mode Font size Alignment Warped text Anit-aliased type Non-anti-aliased type Anit-aliasing 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. (Adobe and Photoshop are either registered Trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Image Basics Fig. 3.7 Adding text to an image. (Adobe and Photoshop are either registered Trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Image Basics • Special effects • Layer Styles palette • Drop-shadows • Bevels • Default style • Editing layer styles • Layer > Layer Style > Scale Effects…
Image Basics Fig. 3.8 Adding a drop shadow to text with the Layer Styles palette. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Image Basics • Layers • Layers palette • Type layer • Style Settings dialog • Lighting angle • Shadow distance
Layer effects Lighting Angle Shadow Distance Layers palette Background layer Type layer Active layer Image Basics Fig. 3.9 Customizing layer effects. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Image Basics • Warp text • Type option • Warp text dialog • Styles • Bend • Horizontal and vertical distortion • Apply in real-time
Image Basics Fig. 3.10 Warped Text dialog. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
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
Type layer Backgroundlayer Resulting transparent image after deleting the background layer New layer Delete layer Image Basics Fig. 3.11 Deleting a layer using the Layers palette. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
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
File type Original image Optimized image Pan Zoom Settings Number of colors Matte Transparency File info Applied matte Zoom Browser preview Image Basics Fig. 3.12 Adding a matte color to a transparent GIF in the Save for Web dialog. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
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
200% 100% 200% 100% Raster image Vector image Vector and Raster Graphics Fig. 3.13 Raster and vector graphics scaled. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
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
Marquee Move Magic wand Lasso Type Crop Gradient Shape Paintbrush Airbrush Paint bucket Pencil Impressionist brush Eraser Blur Sharpen Smudge Sponge Dodge Red eye brush Eyedropper Rubber stamp Magnifying glass Hand Switch foreground and background colors Foreground color swatch Background color swatch Black and white Toolbox Fig. 3.14 Photoshop Elements Toolbox. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
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
Selection Tools Fig. 3.15 Moving a selection with the move tool. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Selection with the magnetic lasso Selection with the regular lasso Selection Tools Fig. 3.16 Drawing selection areas with the lasso tools. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Selection Tools • Selection tools, cont. • Magic wand tool • Tolerance • Selection tool options bars • Customize selection areas • Add to selection • Subtract from selection • Intersect selection
Tolerance set to 15 Tolerance set to 50 Selection Tools Fig. 3.17 Changing the magic wand tolerance to affect the size of a selection. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Selectionmodes Default toolsettings Width Height Feather Style Anti-aliased Single selection Intersect selections Add to selection Subtract from selection Selection Tools Fig. 3.18 Making multiple selections using the selection tool options bar. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
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
Feathering set to 8 pixels Feathering set to 0 pixels Selection Tools Fig. 3.19 Feathering a selection. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
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
Fill contents Blending mode Opacity Fill the feathered selection Selection Tools Fig. 3.20 Filling a selection with color. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
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
Selection Tools Fig. 3.21 Previewing the feathered image in a Web browser. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
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
Opacity Gradient pattern Color blend Mode Gradient picker Dither Reversegradient colors PreserveTransparency Default tool settings Edit gradientcolors Painting Tools Fig. 3.22 Using the gradient tool. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Painting Tools • Creating a title image • Fill with color • Paint on image with contrasting color • Paintbrush options bar • Brush size
Blending Mode Default settings Current brush Brush menu Brush options Brush sizes Brush menu display Brush menus Painting Tools Fig. 3.23 Brush options. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Switch foreground and background colors Painting Tools Fig. 3.24 Painting with the paintbrush tool. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Painting Tools • Creating a title image, cont. • Apply Liquify filter • Liquify modes • Create pattern
Liquifymodes Revert Brush Size Brush Pressure Painting Tools Fig. 3.25 Using the Liquify filter to create a pattern. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)
Painting Tools • Creating a title image, cont. • Create text with type selection tool