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. Creating a basic title image
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. Creating a basic title image (continued)
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. Place text with text button on tool palette Text dialog box
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. Transparent image background
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)
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

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 Selection tool Magic wand 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. Tool palette (continued)
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. Tool palette (continued)
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. 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 Adding a new layer and airbrushing
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