1 / 81

Chapter 3 - Photoshop ® Elements: Creating Web Graphics

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

karl
Télécharger la présentation

Chapter 3 - Photoshop ® Elements: Creating Web Graphics

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: 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 3.7 File Formats: GIF, JPEG and PNG 3.8 Web Resources

  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.

  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

  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

  5. 3.2 Image Basics Fig. 3.1 Welcome screen. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe SystemsIncorporated in the United States and/or other countries.)

  6. 3.2 Image Basics • New dialog • Image settings • Height • Width • Measurement increments • pixels • Resolution • dpi/ppi • Represents image clarity

  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

  8. Name Image dimensions Dimension measurement Image Size Resolution Color Mode Preset Sizes Background color 3.2 Image Basics Fig. 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.)

  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

  10. Main menu bar Hints palette Status bar Palette well Zoom factor Image dimensions Title bar Active tool options bar Recipes palette Active tool Image window Toolbox Development environment Background color swatch Foreground color swatch 3.2 Image Basics Fig. 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.)

  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

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

  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

  14. New color Previous color Closest Web safe color Selection Color slider (hue) Color field Hue Red Blue Saturation Brightness Green Hexadecimal Only Web Colors 3.2 Image Basics Fig. 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.)

  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

  16. Type color Default settings Font weight Font face Anti-aliased Type direction Text style Font size Type modes Alignment Warped text Anti-aliased type Non-Anti-aliased type Anti-aliasing 3.2 Image Basics Fig. 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.)

  17. Bounding box Anchor Move tool Type tool 3.2 Image Basics Fig. 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.)

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

  19. Clear style Drop-shadow types Low drop-shadow Scale adjustments 3.2 Image Basics Fig. 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.)

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

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

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

  23. Resulting text Style Warp orientation Warp text 3.2 Image Basics Fig. 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.)

  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

  25. Type layer Background layer Delete layer New layer 3.2 Image Basics Fig. 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.)

  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

  27. Pan Zoom File type Original image Optimized image Settings selection Number of colors Transparency Image window Zoom Image size Matte color Browser preview Applied matte File info 3.2 Image Basics Fig. 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.)

  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

  29. Raster image Vector image 100% 200% 100% 200% 3.3 Vector and Raster Graphics Fig. 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.)

  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

  31. Adobe Online link Black and white Foreground color swatch Hand Clone stamp Dodge Blur Eraser Sponge Paint bucket Shape Lasso Marquee Brush Selection brush Gradient Red Eye Removal Eyedropper Zoom Burn Smudge Sharpen Background color swatch Type Crop Move Switch foreground and background colors Pencil Magic wand 3.4 Toolbox Fig. 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.)

  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

  33. 3.4.1 Selection Tools Fig. 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.)

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

  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

  36. Tolerance set to 15 Tolerance set to 50 3.4.1 Selection Tools Fig. 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.)

  37. Selection modes Feather Style Width Height Anti-aliased Default tool settings Single selection Intersect selection Add to selection Subtract from selection 3.4.1 Selection Tools Fig. 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.)

  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

  39. Feathering set to 0 pixels Feathering set to 8 pixels 3.4.1 Selection Tools Fig. 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.)

  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

  41. 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 trademarksor trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

  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

  43. 3.4.1 Selection Tools Fig. 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.)

  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

  45. Gradient pattern Opacity Height Color blend Mode Color Dither Default tool settings Edit gradient colors Reverse gradient colors Preserve transparency 3.4.2 Painting Tools Fig. 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.)

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

  47. Brush menu Options Current brush Brush menu display Default settings Blending Mode Brush menu Brush sizes Brush options 3.4.2 Painting Tools Fig. 3.23 Brush options. (Adobe and Photoshop are either registered trademarksor trademarks of Adobe Systems Incorporated in the United States and/ or other countries.)

  48. Switch foreground and background colors 3.4.2 Painting Tools Fig. 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.)

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

  50. Liquify modes Revert Brush Pressure Brush Size 3.4.2 Painting Tools Fig. 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.)

More Related