Chapter 5 – Paint Shop Pro

1. Chapter 5 – Paint Shop Pro Outline 5.1 Introduction 5.2 Image Basics 5.3 File Formats: GIF or JPEG? 5.4 Tool Palette 5.5 Screen Capturing 5.6 Layers

2. 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. 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. Creating a New Image in Paint Shop Pro Image Dimensions Dimension measurement Background color Color depth

5. 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. Creating a new image in Paint Shop Pro Tool palette Color palette Zoom factor Foreground color Background color Switch Foreground/Background Cursor coordinates Image statistics

7. Selecting a new Color Preset colors Color selectors RGB value Hex value Current color

8. 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. Adding Text to an image Font Name Font Style Font Size Antialias Text Alignment Floating selection Resulting image Text window Preview window

10. 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. Adding a Drop Shadow to text Color of Drop Shadow Opacity Blur amount Preview window Preview zoom Resulting image Offsets

12. Reducing Color Depth to 256 Colors Type of resulting palette Reduction method

13. 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 <IMG> tag • Images developed for a certain background color • Usually must be redone if background color changes

14. Setting image Transparency and testing using the Proof button Transparency options Proof of transparency Proof button

15. A comparison of white transparency on white and grey backgrounds

16. 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. 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. 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/

19. Save Options for JPEG and GIF Use Progressive Encoding Compression meter Use Interlacing JPEG Save Options GIF Save Options

20. 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. Paint Shop Pro’s Tool Bar and Tool Palette Copy Paste Tool control palette Layer palette Dropper Airbrush Shapes Zoom Selection Magic wand Brush Flood fill Text Line

22. Controls for the Magic wand tool Brush Tip menu Pixel Match Mode Selection Tolerance Selection Feather

23. 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. 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. Creating a navigation bar • Create a rectangle and select it • Copy the rectangle 3 times Shapes tool Magic wand tool Copy and Paste As New Selection

26. Creating a navigation bar (II) • Connect the rectangles with a line and select them • Lightly airbrush the rectangles with a texture Line tool Magic wand tool Airbrush with Lava texture

27. Creating a navigation bar (III) • Add a Drop Shadow and text of the same color • A completed navigation bar Text tool Drop Shadow in blue

28. 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. Starting a screen capture Method of Capture Include cursor in Capture Take Multiple captures Type of area to Capture

30. 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. A layer example • Converting deitel.gif to 24-bit color depth and viewing the layer control palette • Adding a new layer and airbrushing Layer name Visibility toggle Layer opacity Layer blend mode Add layer Current layer Not selected Selected

32. A layer example (II) • Setting options for the Cutout effect Option to Fill interior with color Interior color to use

33. A layer example (III) • Using layers to achieve a Cutout effect

34. 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. A layer example (V) • Change Layer2’s blend mode to Difference to achieve a photographic negative effect Difference blend mode