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

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

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)

Creating a New Image in Paint Shop Pro Image Dimensions Dimension measurement Background color Color depth

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)

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

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

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

Adding Text to an image Font Name Font Style Font Size Antialias Text Alignment Floating selection Resulting image Text window Preview window

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

Adding a Drop Shadow to text Color of Drop Shadow Opacity Blur amount Preview window Preview zoom Resulting image Offsets

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

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

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

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) 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 Compression meter Use Interlacing JPEG Save Options GIF Save Options

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

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

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

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

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

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 Method of Capture Include cursor in Capture Take Multiple captures Type of area to Capture

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

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