1 Photoshop Elements Outline Introduction Image Basics Vector

1 Photoshop Elements Outline Introduction Image Basics Vector

1 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

2 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

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 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 Image Basics New dialog Image settings Height Width Measurement increments pixels

Resolution dpi/ppi 6 Image Basics New dialog, cont. Image settings, cont. Color mode RGB Grayscale Bitmap Background color Foreground color Background color

Transparent File name 7 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.) Name Image Size Image dimensions Resolution Color Mode

Background Color Dimension measurement 8 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 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.)

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 Development dimensions environment Status bar 10

Image Basics Toolbox Tool types Selection Editing Painting Type Active tool One tool at a time

Tool information Hints palette Status bar 11 Image Basics Toolbox, cont. Active colors Foreground color Background color Double-click to select 12

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

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.) Color selection New color Previous color Color slider (Hue) Cosest Web-safe color Hue Saturation

Brightness Red Green Blue Only Web Colors Hexadecimal 14 Image Basics Adding text to an image Type tool Active tool options bar (type options)

Font face Font weight Alignment Font color Antialiasing 15 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.) Default settings Font face Font weight Type mode

Select mode Anti-aliased Font size Type direction Alignment Type color Warped text 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.) Anit-aliased type Anit-aliasing Non-anti-aliased type 16 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

Image Basics Special effects Layer Styles palette Drop-shadows Bevels Default style Editing layer styles Layer > Layer Style > Scale Effects 18 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 Image Basics Layers Layers palette Type layer Style Settings dialog Lighting angle Shadow distance 20 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.) Layers palette Layer effects Background layer Type layer Active layer Lighting Angle

Shadow Distance 21 Image Basics Warp text Type option Warp text dialog Styles Bend Horizontal and vertical distortion Apply in real-time 22

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

25 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 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.) Original image Optimized image File type Pan Zoom Settings

Number of colors Matte Transparency File info Applied matte Zoom Browser preview 27 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 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.) 100% 200% Raster image 100%

200% Vector image 29 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 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.) Marquee Lasso Move Magic wand Crop Type

Shape Airbrush Paint bucket Eraser Gradient Paintbrush Pencil Impressionist brush Blur Sharpen

Sponge Smudge Red eye brush Rubber stamp Hand Foreground color swatch Black and white Dodge Eyedropper Magnifying glass Switch foreground and background colors

Background color swatch 31 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 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 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 with the regular lasso Selection with the magnetic lasso 34 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 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.) Tolerance set to 15 Tolerance set to 50

36 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.) Default tool Selection modes Feather settings Style Anti-aliased Single selection

Intersect selections Add to selection Subtract from selection Width Height 37 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 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.) Feathering set to 0 pixels Feathering set to 8 pixels

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

41 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

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

Gradient picker Default tool settings Gradient pattern Edit gradient colors Color blend Mode Opacity Dither

Reverse gradient colors Preserve Transparency 45 Painting Tools Creating a title image Fill with color Paint on image with contrasting color Paintbrush options bar Brush size

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

Brush sizes Brush menu display Brush menus 47 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.) Switch foreground

and background colors 48 Painting Tools Creating a title image, cont. Apply Liquify filter Liquify modes Create pattern 49 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.) Liquify modes Revert Brush Size Brush Pressure 50 Painting Tools Creating a title image, cont.

Create text with type selection tool 51 Painting Tools Fig. 3.26 Using the type selection tool to create a title image. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Selection area Type selection tool Regular type tool 52

Painting Tools Creating a title image, cont. Choose other tool to apply selection Copy selection to new layer Layer > New > Layer via Copy or Ctrl+J Turn pattern layer visibility to view copied text 53 Painting Tools Fig. 3.27 Turning off layer visibility in the Layers palette. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

54 Painting Tools Creating a title image, cont. Crop image using crop tool Eliminate unnecessary background area 55 Painting Tools Fig. 3.28 Using the crop tool to eliminate excess image area. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) 56

Painting Tools Creating a title image, cont. Select area around text Magic wand tool Add to selection Areas inside letters Select inverse (recreate text selection) 57 Creating a title image, cont. Stroke selection Edit > Stroke Stroke dialog

Stroke location Stroke weight Stroke color Preserve transparency Add layer styles bevel 58 Painting Tools Fig. 3.29 Applying a simple inner bevel and a stroke selection. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Stroke Width

Stroke Color Stroke Location Blending Mode Opacity Preserve Transparency 59 Shape Tools Shape tool Draws vector shapes filled with color Edit independently Vector shape layer

Contain vector shapes Cannot contain raster graphics Default setting Rectangle tool Change to ellipse, polygon, line, custom shape Options change for each 60 Shape Tools Creating a navigation bar Turn on grid View > Show Grid

Change grid settings Grid Preferences dialog Edit > Preferences > Grid Set grid line spacing and line color Draw button shape Rectangle tool 61 Shape Tools Fig. 3.30 Custom shape options bar. (Adobe and Photoshop are either registered Trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Shape select tool

Layer Style Shape Color Custom shape selector Fig. 3.31 Creating a rectangle with the shape tool. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) 62 Shape Tools Creating a navigation bar, cont. Duplicate rectangle three times

Select rectangle with shape select tool Copy and paste (Ctrl+C, Ctrl+V) Space buttons evenly Undo Edit > Undo or Ctrl +Z History palette Trashcan button 63 Shape Tools Fig. 3.32 Using the main menu bar to copy and paste. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) New

Open Save Prin t Cut Save Print for Web preview Paste Step forward Help

Copy Step back Ruler Fig. 3.33 Creating multiple rectangles with the move shape tool. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) 64 Shape Tools Fig. 3.34 Using the History palette to reverse actions. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Active actions

Current action Inactive actions Delete actions 65 Shape Tools Creating a navigation bar, cont. Transform shapes Select all Skew Image > Transform Shape > Skew Tilt on horizontal or vertical axis using anchors

Press Enter to apply Connect buttons with line Line tool Set line weight using line tool options bar Click and drag to draw 66 Shape Tools Fig. 3.35 Applying the skew transformation. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Fig. 3.36 Line added to link the skewed rectangles together. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

67 Shape Tools Creating a navigation bar, cont. Combine line and rectangle areas Convert line and rectangle layers to regular raster layers Layers palette Layer options menu Simplify Layer Layer styles Bevel

Button titles Type tool 68 Shape Tools Fig. 3.37 Simplifying a shape layer using the Layers palette. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Press to access layer options menu Button layer Line layer 69

Shape Tools Fig. 3.38 Navigation bar. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) 70 Shape Tools Creating a navigation bar, cont. Implement on Web Image slicing Select each button with rectangular marquee tool Copy and paste each selection into new image 71

Shape Tools Fig. 3.39 Slicing an image with the rectangular marquee tool. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Fig. 3.40 Sliced image as individual buttons. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) 72 Layers Layers Organize image elements so they may be edited separately May have unique attributes Vector layers

Contain vevtor shapes or text Raster layers Contain raster shapes Adjustment layers Apply color adjustments to layers beneath 73 Layers Layers, cont. Creating new layers Raster New layer button

Adjustment New Adjustment layer button Shape Use shape tool or type tool Arranging layers Layers > Arrange Drag up or down in Layers palette 74 Layers Layers, cont. Background layer Anchored to bottom of image

Must re-name to convert to regular raster layer Blending modes How layer is affected by applied color 75 Layers Fig. 3.41 Layers in the Layers palette. (Adobe and Photoshop are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) Layer opacity Layer lock Raster layers Shape layer

Type layer Background layer Locked for editing Color blending mode Delete layer Layer visibility New adjustment New layer layer 76 Layers Fig. 3.42 Adjusting the hue and saturation using an adjustment layer. (Adobe and Photoshop are either

registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.) 77 Screen Capturing Screen Capturing capture image that appears on screen Works like copy and paste Press Print Screen button to copy screen contents

Paste into new image Press alt+Print Screen to capture active window 78 File Formats: GIF and JPEG File fomats Different formats are ideal for different types of images GIF (Graphics Interchange Format) Ideal for: screen captures, line drawings, sharp-edged graphics and images with transparency Not good for: Photographic images, artwork with complex colors Supports 256 colors

Lossless format Quality is not reduced by compression process 79 File Formats: GIF and JPEG File fomats, cont. JPEG (Joint Photographic Experts Group) Ideal for: Photographic images, images with rich color transitions Not good for: Images with sharp edges, text, transparency Supports millions of colors Lossy format Image quality is reduced by compression process

Scalable compression Adjust image compression 80 File Formats: GIF and JPEG File fomats, cont. PNG (Portable Network Graphics) Newer format recommended by W3C www.w3.org/Graphics/PNG Ideal for: Both color complex-images and images with transparency Supports millions of colors Lossless format Good alternative for both GIF and JPEG

Recently Viewed Presentations

  • Rabies Control for EHS Training

    Rabies Control for EHS Training

    Bats are considered high risk not because a great percentage of bats tested every year are positive, but because the majority of human cases in the US in recent years have been diagnosed with a bat variant of the rabies...
  • Noțiuni De Anatomie Radioimagistică a Regiunii Temporale

    Noțiuni De Anatomie Radioimagistică a Regiunii Temporale

    RADIOANATOMIA OSULUI TEMPORALSOLZUL. Două porțiuni: Verticală laterală. Orizontală medială. Examenul CT impune secțiuni în plan coronal pentru porțiunea verticală. În plan axial se vizualizează sub forma unei fine lame osoase cu două lame de os compact care învelesc o porțiune...
  • Organization Structure and Management Systems

    Organization Structure and Management Systems

    The role of hierarchy: bureaucratic control vs. modular integration Alternative structural forms ... 1997 The Generic Strategic Planning Cycle Organization Structure and Management Systems Evolution of the corporation Principles of organizational design The role of hierarchy: bureaucratic ...
  • SHABBAT Die eerste Fees van die Verbond Dit

    SHABBAT Die eerste Fees van die Verbond Dit

    Daar is geen bevel in die Bybel oor watter dag Sy kinders bymekaar moet kom nie! Dag wat God vir Homself afgesonder het. Rom 11. Wet is eenheid. ... Ons herinner onsself aan ons vryheid van sonde se houvas oor...
  • Слайд 1 - WordPress.com

    Слайд 1 - WordPress.com

    Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк. Захоплення аудіо та відео, створення
  • Identification of genomic regions associated with resistance to

    Identification of genomic regions associated with resistance to

    [email protected] Introduction. In April 2018, the US introduced genetic evaluations for 6 health traits in Holstein cattle, including clinical mastitis, using producer-reported data (Parker Gaddis et al., 2017). ... Gene ontology (GO; Ashburner et al., 2000) and medical subject heading...
  • Deliberatre Hypotension

    Deliberatre Hypotension

    Indirect : Trimethaphan(Intravenous infusion, 3 to 4 mg per minute) 3.Cardiac depressants : GA inh. Agents, β blockers, CCBs. By simple method . Decrease systolic to preop diastolic to a maximum . i.e. Preop BP : 130/85 mmHg.
  • The Internet - d Billings

    The Internet - d Billings

    IP Networking, Web, & Network Security 101 "Building Your Foundation" Overall Agenda Introduction Internet & Web basics IP addressing Classes & CIDR Blocks AS Numbers DHCP, BGP, NAT Network Security Encryption Firewalls Internet & Web Overview The Internet & Web:...