1.  2000 Deitel & Associates, Inc. All rights reserved. Chapter 5 – Paint Shop Pro Outline 5.1Introduction 5.2Image Basics 5.3File Formats: GIF or JPEG? 5.4Tool Palette 5.5Screen Capturing 5.6Layers

2.  2000 Deitel & Associates, Inc. All rights reserved. 5.1 Introduction Images liven up a Web page Many images available on the Internet for free download and use Jasc Inc.’s Paint Shop Pro included on CD

3.  2000 Deitel & Associates, Inc. All rights reserved. 5.2 Image Basics Creating a basic title image –File menu  New… New Image dialog box –Height (Pixels, Inches or Centimeters) –Width (Pixels, Inches or Centimeters) –Background color –Color depth: the maximum number of simultaneous colors in the image »2 Colors (1 Bit) »16 Colors (4 Bit) »Greyscale (8 Bit) »256 Colors (8 Bit) »16.7 Million Colors (24 Bit)

4.  2000 Deitel & Associates, Inc. All rights reserved. Creating a New Image in Paint Shop Pro Image Dimensions Background color Color depth Dimension measurement

5.  2000 Deitel & Associates, Inc. All rights reserved. 5.2 Image Basics (II) Creating a basic title image (continued) –Create a new image: 300 pixels wide 150 pixels high 8-bit color depth White background Color palette –Foreground color –Background color –Color wheel Hue (color) Lightness (amount of black vs. the amount of white) Saturation (amount of color vs. the amount of Lightness)

6.  2000 Deitel & Associates, Inc. All rights reserved. Creating a new image in Paint Shop Pro Tool palette Zoom factor Color palette Foreground color Background color Switch Foreground/B ackground Cursor coordinatesImage statistics

7.  2000 Deitel & Associates, Inc. All rights reserved. Selecting a new Color Preset colors RGB value Hex value Color selectors Current color

8.  2000 Deitel & Associates, Inc. All rights reserved. 5.2 Image Basics (III) Place text with text button on tool palette Text dialog box –Font –Size –Style –Alignment –Antialias checkbox Antialiasing: Smooths edges on scalable fonts –Blends color of the edge pixels with the color of the background Can only be used in 24-bit and greyscale images

9.  2000 Deitel & Associates, Inc. All rights reserved. Adding Text to an image Text windowPreview window Font NameFont StyleFont Size Antialias Text Alignment Floating selectionResulting image

10.  2000 Deitel & Associates, Inc. All rights reserved. 5.2 Image Basics (IV) Image menu  Effects submenu  Drop Shadow… effect –Offset section Vertical Horizontal –Attributes section Color Opacity Blur Most people use 8-bit color depth when viewing Web sites –Using too many colors at once will create grainy images Viewer’s browser dithers image –Reduce color depth by using Colors menu  Decrease Color Depth

11.  2000 Deitel & Associates, Inc. All rights reserved. Adding a Drop Shadow to text Preview window Preview zoomResulting image Color of Drop ShadowOpacityBlur amount Offsets

12.  2000 Deitel & Associates, Inc. All rights reserved. Reducing Color Depth to 256 Colors Type of resulting palette Reduction method

13.  2000 Deitel & Associates, Inc. All rights reserved. 5.2 Image Basics (V) Transparent image background –Colors menu  Set Palette Transparency –Proof button to see a preview –Checkered background is Paint Shop Pro’s way of indicating a transparent background Save as CompuServe Graphics Interchange (*.gif) –Can insert picture into HTML using tag Images developed for a certain background color –Usually must be redone if background color changes

14.  2000 Deitel & Associates, Inc. All rights reserved. Setting image Transparency and testing using the Proof button Transparency options Proof button Proof of transparency

15.  2000 Deitel & Associates, Inc. All rights reserved. A comparison of white transparency on white and grey backgrounds

16.  2000 Deitel & Associates, Inc. All rights reserved. 5.3 File Formats: GIF or JPEG? 2 major file formats used for images on the Web: –GIF and JPEG –GIF Graphics Interchange Format Developed by CompuServe Based on palette of 256 colors Best used in screenshots, line drawings, situations with sharp edges Has transparency GIF file typically larger than JPEG Dithering performed by Paint Shop Pro when reducing to 256 colors –Dithering can destroy quality of an image with hundreds or thousands of colors Lossless format

17.  2000 Deitel & Associates, Inc. All rights reserved. 5.3 File Formats: GIF or JPEG? (II) JPEG –Lossy format Can reduce the quality of image –Does not handle sharp edges and abrupt changes well –Both GIF and JPEG share interlacing (GIF terminology) or progressive encoding (JPEG terminology) Downloads a rough whole image and gradually increases clarity Do not place too may interlaced images on a Web page –Slow the rendering of a page Save Options: Interlacing/Progressive Encoding

18.  2000 Deitel & Associates, Inc. All rights reserved. 5.3 File Formats: GIF or JPEG? (III) –JPEG format has scalable compression In Save Options dialog, Compression slider –Sliding to the left causes the image to retain high quality, but file size also high –Sliding to the right causes file size to decrease, but image quality suffers PNG (Portable Network Graphics) format –Can encode in RGBA A for alpha transparency –Makes images transparent against any background –Supported by Paint Shop Pro, Netscape Navigator, Internet Explorer –http://www.w3.org/Graphics/PNG/http://www.w3.org/Graphics/PNG/

19.  2000 Deitel & Associates, Inc. All rights reserved. Save Options for JPEG and GIF Use Progressive Encoding JPEG Save Options Compression meter GIF Save Options Use Interlacing

20.  2000 Deitel & Associates, Inc. All rights reserved. 5.4 Tool Palette Tool Palette –Zoom tool Left-click to zoom in Right-click to zoom out Zoom factor displayed on the title bar Zoom up to 16:1 and out to 1:16 –Selection tool Selects a rectangular region –Magic wand tool Select all adjacent pixels of the same colors Increasing Tolerance lets the tool select the color you clicked as well as similar colors –Access by clicking tool control palette button on Tool Bar

21.  2000 Deitel & Associates, Inc. All rights reserved. Paint Shop Pro’s Tool Bar and Tool Palette ZoomSelectionMagic wand Dropper Brush AirbrushShapes Flood fillTextLine CopyPasteTool control paletteLayer palette

22.  2000 Deitel & Associates, Inc. All rights reserved. Controls for the Magic wand tool Pixel Match Mode Selection Feather Brush Tip menu Selection Tolerance

23.  2000 Deitel & Associates, Inc. All rights reserved. 5.4 Tool Palette (II) Tool palette (continued) –Flood fill tool Colors all the pixels in range Gradient in control palette –Shapes tool Filled Rectangle –Airbrush tool Simulates brush strokes on a canvas Customize in the control palette

24.  2000 Deitel & Associates, Inc. All rights reserved. 5.4 Tool Palette (III) Tool palette (continued) –Dropper tool Changes foreground or background color to any color present in the image Move dropper cursor over a color that you want and click Left-click for foreground Right-click for background Avoid too many colors –Makes your site look confusing and erratic

25.  2000 Deitel & Associates, Inc. All rights reserved. Creating a navigation bar Create a rectangle and select it Copy the rectangle 3 times Shapes toolMagic wand tool Copy and Paste As New Selection

26.  2000 Deitel & Associates, Inc. All rights reserved. Creating a navigation bar (II) Connect the rectangles with a line and select them Lightly airbrush the rectangles with a texture Line toolMagic wand tool Airbrush with Lava texture

27.  2000 Deitel & Associates, Inc. All rights reserved. Creating a navigation bar (III) Add a Drop Shadow and text of the same color A completed navigation bar Text toolDrop Shadow in blue

28.  2000 Deitel & Associates, Inc. All rights reserved. 5.5 Screen Capturing Capture menu  Setup… –Choose a type of area Area gives you a cursor to capture a rectangle Full screen captures the whole screen Client area captures the input area of the active window Window captures the whole active window (including title bar and menus) Object captures a specific object when you trigger the capture (by clicking) –Method to capture Default is right-click Hot key Delay timer

29.  2000 Deitel & Associates, Inc. All rights reserved. Starting a screen capture Type of area to Capture Method of Capture Include cursor in Capture Take Multiple captures

30.  2000 Deitel & Associates, Inc. All rights reserved. 5.6 Layers An image can be composed of many layers –Each has its own attributes and effects on other layers –Makes composing complex images easier Layer control palette button on the Tool Bar –Each layer occupies one row in the window –Layers are transparent by default

31.  2000 Deitel & Associates, Inc. All rights reserved. A layer example Converting deitel.gif to 24-bit color depth and viewing the layer control palette Adding a new layer and airbrushing Layer nameVisibility toggleLayer opacityLayer blend mode Add layer Current layer Not selectedSelected

32.  2000 Deitel & Associates, Inc. All rights reserved. A layer example (II) Setting options for the Cutout effect Option to Fill interior with color Interior color to use

33.  2000 Deitel & Associates, Inc. All rights reserved. A layer example (III) Using layers to achieve a Cutout effect

34.  2000 Deitel & Associates, Inc. All rights reserved. A layer example (IV) Using layers for a negative image effect –Change the layer blend to Lighten –Add a second layer; flood fill with Radial Gradient Lighten blend mode Radial Gradient

35.  2000 Deitel & Associates, Inc. All rights reserved. A layer example (V) Change Layer2’s blend mode to Difference to achieve a photographic negative effect Difference blend mode