Chapter 5 – Paint Shop Pro
-
Upload
lenore-holder -
Category
Documents
-
view
57 -
download
3
description
Transcript of Chapter 5 – Paint Shop Pro
![Page 1: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/1.jpg)
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
![Page 2: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/2.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 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
![Page 3: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/3.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 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)
![Page 4: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/4.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.
Creating a New Image in Paint Shop Pro
Image Dimensions
Background color
Color depth
Dimension measurement
![Page 5: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/5.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 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)
![Page 6: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/6.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 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/Background
Cursor coordinates Image statistics
![Page 7: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/7.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.
Selecting a new Color
Preset colors
RGB value
Hex value
Color selectors
Current color
![Page 8: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/8.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 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
![Page 9: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/9.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.
Adding Text to an image
Text window Preview window
Font Name Font Style Font Size
Antialias
Text Alignment
Floating selection Resulting image
![Page 10: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/10.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 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 menuDecrease Color Depth
![Page 11: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/11.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.
Adding a Drop Shadow to text
Preview window
Preview zoom Resulting image
Color of Drop Shadow Opacity Blur amount
Offsets
![Page 12: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/12.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.
Reducing Color Depth to 256 Colors
Type of resulting palette
Reduction method
![Page 13: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/13.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 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 <IMG> tag
• Images developed for a certain background color– Usually must be redone if background color changes
![Page 14: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/14.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.
Setting image Transparency and testing using the Proof button
Transparency options
Proof button
Proof of transparency
![Page 15: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/15.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.
A comparison of white transparency on white and grey backgrounds
![Page 16: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/16.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 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
![Page 17: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/17.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 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
![Page 18: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/18.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 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/
![Page 19: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/19.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 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
![Page 20: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/20.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 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
![Page 21: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/21.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.
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
![Page 22: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/22.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.
Controls for the Magic wand tool
Pixel Match Mode
Selection Feather
Brush Tip menu
Selection Tolerance
![Page 23: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/23.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 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
![Page 24: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/24.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 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
![Page 25: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/25.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.
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
![Page 26: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/26.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 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 tool Magic wand tool
Airbrush with Lava texture
![Page 27: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/27.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 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 tool Drop Shadow in blue
![Page 28: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/28.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 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
![Page 29: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/29.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 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
![Page 30: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/30.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 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
![Page 31: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/31.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 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 name Visibility toggle Layer opacity Layer blend mode
Add layer
Current layer
Not selected Selected
![Page 32: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/32.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 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
![Page 33: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/33.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.
A layer example (III)
• Using layers to achieve a Cutout effect
![Page 34: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/34.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 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
![Page 35: Chapter 5 – Paint Shop Pro](https://reader036.fdocuments.in/reader036/viewer/2022081419/5681354f550346895d9cab5d/html5/thumbnails/35.jpg)
2000 Deitel & Associates, Inc. All rights reserved. 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