Chapter 5 – Paint Shop Pro

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Chapter 5 – Paint Shop Pro

Outline5.1 Introduction5.2 Image Basics5.3 File Formats: GIF or JPEG?5.4 Tool Palette5.5 Screen Capturing5.6 Layers


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


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)


Creating a New Image in Paint Shop Pro

Image Dimensions

Background color

Color depth

Dimension measurement


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)


Creating a new image in Paint Shop Pro

Tool palette

Zoom factor

Color palette

Foreground color

Background color

Switch Foreground/Background

Cursor coordinates Image statistics


Selecting a new Color

Preset colors

RGB value

Hex value

Color selectors

Current color


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


Adding Text to an image

Text window Preview window

Font Name Font Style Font Size

Antialias

Text Alignment

Floating selection Resulting image


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 menuDecrease Color Depth


Adding a Drop Shadow to text

Preview window

Preview zoom Resulting image

Color of Drop Shadow Opacity Blur amount

Offsets


Reducing Color Depth to 256 Colors

Type of resulting palette

Reduction method


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


Setting image Transparency and testing using the Proof button

Transparency options

Proof button

Proof of transparency


A comparison of white transparency on white and grey backgrounds


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


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


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/


Save Options for JPEG and GIF

Use Progressive Encoding

JPEG Save Options

Compression meter

GIF Save Options

Use Interlacing


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


Paint Shop Pro’s Tool Bar and Tool Palette

Zoom Selection Magic wand

Dropper

Brush

Airbrush Shapes

Flood fill Text Line

Copy Paste Tool control palette Layer palette


Controls for the Magic wand tool

Pixel Match Mode

Selection Feather

Brush Tip menu

Selection Tolerance


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


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


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


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


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


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


Starting a screen capture

Type of area to Capture

Method of Capture

Include cursor in Capture

Take Multiple captures


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


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


A layer example (II)

• Setting options for the Cutout effect

Option to Fill interior with color

Interior color to use


A layer example (III)

• Using layers to achieve a Cutout effect


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


A layer example (V)

• Change Layer2’s blend mode to Difference to achieve a photographic negative effect

Difference blend mode

Documents

Chapter 5 – Paint Shop Pro