1 / 80

Chapter 3 - Photoshop® Elements

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 Tools 3.4.3 Shape Tools 3.5 Layers 3.6 Screen Capturing 3.7 File Formats: GIF and JPEG. 3.1 Introduction.

zanthe
Download Presentation

Chapter 3 - Photoshop® Elements

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 Tools 3.4.3 Shape Tools 3.5 Layers 3.6 Screen Capturing 3.7 File Formats: GIF and JPEG

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

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

  5. 3.2 Image Basics • New dialog • Image settings • Height • Width • Measurement increments • pixels • Resolution • dpi/ppi

  6. 3.2 Image Basics • New dialog, cont. • Image settings, cont. • Color mode • RGB • Grayscale • Bitmap • Background color • Foreground color • Background color • Transparent • File name

  7. Name Image Size Image dimensions Dimension measurement Resolution Color Mode Background Color 3.2 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.)

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

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

  10. 3.2 Image Basics • Toolbox • Tool types • Selection • Editing • Painting • Type • Active tool • One tool at a time • Tool information • Hints palette • Status bar

  11. 3.2 Image Basics • Toolbox, cont. • Active colors • Foreground color • Background color • Double-click to select

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

  13. Color selection New color Previous color Cosest Web-safe color Color slider (Hue) Hue Saturation Brightness Red Green Blue Hexadecimal Only Web Colors 3.2 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.)

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

  15. 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 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. (Adobe and Photoshop are either registered Trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

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

  17. 3.2 Image Basics • Special effects • Layer Styles palette • Drop-shadows • Bevels • Default style • Editing layer styles • Layer > Layer Style > Scale Effects…

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

  19. 3.2 Image Basics • Layers • Layers palette • Type layer • Style Settings dialog • Lighting angle • Shadow distance

  20. Layer effects Lighting Angle Shadow Distance Layers palette Background layer Type layer Active layer 3.2 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.)

  21. 3.2 Image Basics • Warp text • Type option • Warp text dialog • Styles • Bend • Horizontal and vertical distortion • Apply in real-time

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

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

  24. Type layer Backgroundlayer Resulting transparent image after deleting the background layer New layer Delete layer 3.2 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.)

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

  26. File type Original image Optimized image Pan Zoom Settings Number of colors Matte Transparency File info Applied matte Zoom Browser preview 3.2 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.)

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

  28. 200% 100% 200% 100% Raster image Vector image 3.3 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.)

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

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

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

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

  33. Selection with the magnetic lasso Selection with the regular lasso 3.4.1 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.)

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

  35. Tolerance set to 15 Tolerance set to 50 3.4.1 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.)

  36. Selectionmodes Default toolsettings Width Height Feather Style Anti-aliased Single selection Intersect selections Add to selection Subtract from selection 3.4.1 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.)

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

  38. Feathering set to 8 pixels Feathering set to 0 pixels 3.4.1 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.)

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

  40. Fill contents Blending mode Opacity Fill the feathered selection 3.4.1 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.)

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

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

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

  44. Opacity Gradient pattern Color blend Mode Gradient picker Dither Reversegradient colors PreserveTransparency Default tool settings Edit gradientcolors 3.4.2 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.)

  45. 3.4.2 Painting Tools • Creating a title image • Fill with color • Paint on image with contrasting color • Paintbrush options bar • Brush size

  46. Blending Mode Default settings Current brush Brush menu Brush options Brush sizes Brush menu display Brush menus 3.4.2 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.)

  47. Switch foreground and background colors 3.4.2 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.)

  48. 3.4.2 Painting Tools • Creating a title image, cont. • Apply Liquify filter • Liquify modes • Create pattern

  49. Liquifymodes Revert Brush Size Brush Pressure 3.4.2 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.)

  50. 3.4.2 Painting Tools • Creating a title image, cont. • Create text with type selection tool

More Related