Transcript Web lec 05
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 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.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 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 3.2 Image Basics Name Image Size Image dimensions Dimension measurement Resolution Color Mode Background Color Fig. 3.2 Creating a new image in Photoshop Elements. 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 3.2 Image Basics Title bar Main menu bar Palette well Hints palette Active tool options bar Toolbox Active tool Image window Foreground color swatch Zoom factor Background color Image dimensions Development environment Status bar 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.) 3.2 Image Basics Toolbox – Tool types • • • • Selection Editing Painting Type – Active tool • One tool at a time – Tool information • Hints palette • Status bar 3.2 Image Basics Toolbox, cont. – Active colors • Foreground color • Background color • Double-click to select 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 3.2 Image Basics Color selection New color Previous color Cosest Web-safe color Color slider (Hue) Hue Saturation Brightness Red Green Blue Hexadecimal Only Web Colors Fig. 3.4 Selecting a color using the Color Picker dialog. 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 3.2 Image Basics Default settings Type mode Font face Select mode Font weight Anti-aliased Font size Type direction Alignment Type color Warped text 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.) Anit-aliased type Non-anti-aliased type Anit-aliasing Fig. 3.6 Example of anti-aliasing. 3.2 Image Basics Fig. 3.7 Adding text to an image. 3.2 Image Basics Special effects – Layer Styles palette • Drop-shadows • Bevels • Default style – Editing layer styles • Layer > Layer Style > Scale Effects… 3.2 Image Basics Fig. 3.8 Adding a drop shadow to text with the Layer Styles palette. 3.2 Image Basics Layers – Layers palette • Type layer • Style Settings dialog – Lighting angle – Shadow distance 3.2 Image Basics Layers palette Layer effects Lighting Angle Background layer Type layer Active layer Fig. 3.9 Customizing layer effects. Shadow Distance 3.2 Image Basics Warp text – Type option – Warp text dialog • Styles • Bend – Horizontal and vertical distortion 3.2 Image Basics Fig. 3.10 Warped Text dialog. 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 3.2 Image Basics Type layer Background layer New layer Delete layer Resulting transparent image after deleting the background layer Fig. 3.11 Deleting a layer using the Layers palette. 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 3.2 Image Basics Original image Optimized image File type Pan Zoom Settings Number of colors Matte Transparency File info Applied matte Zoom Browser preview Fig. 3.12 Adding a matte color to a transparent Assignment: Install Adobe Photoshop and use the tools discussed in today’s lecture.