Chapter 3 - Photoshop® Elements Outline 3.1 Introduction 3.2 Image Basics 3.3 Vector and Raster Graphics 3.4 Toolbox Selection Tools Painting Tools 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

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 Fig. 3.2 Creating a new image in Photoshop Elements. Name Resolution Background Color Dimension measurement Color Mode Image Size Image dimensions

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 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 Background color Image dimensions Development environment Status bar Foreground color swatch Image window Toolbox Active tool options bar Title bar Main menu bar Palette well Hints palette Active tool

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

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 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 settingsFont faceFont weightAnti-aliasedType direction Select modeFont sizeAlignmentWarped text Type color Type mode Non-anti-aliased type Anit-aliased type Anit-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 Fig. 3.9 Customizing layer effects. Layers palette Layer effects Shadow Distance Type layer Lighting Angle Active layer Background layer

3.2 Image Basics Warp text –Type option –Warp text dialog Styles Bend –Horizontal and vertical distortion

3.2 Image Basics Fig 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 Fig Deleting a layer using the Layers palette. Type layer Background layer Delete layerNew layer Resulting transparent image after deleting the background layer

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 Fig Adding a matte color to a transparent Pan Zoom Original imageOptimized image Transparency File type Number of colors File infoApplied matteZoom Matte Browser preview Settings

Assignment: Install Adobe Photoshop and use the tools discussed in today’s lecture.