PhotoPlus 5.
©1999 Serif, Inc. All rights reserved. No part of this publication may be reproduced in any form without the express written permission of Serif, Inc. All Serif product names are trademarks of Serif, Inc. Microsoft, Windows and the Windows logo are registered trademarks of Microsoft Corporation. All other trademarks acknowledged. Serif PhotoPlus 5.0 ©1999 Serif, Inc. Companies and names used in samples are fictitious. Portions clipart and graphic content ©1999 Nova Development Corporation and its licensors.
Software License Agreement This Software License Agreement (“License Agreement”) is a legal agreement between you (either an individual or a single entity) and Serif, Inc. (“Serif”) for the accompanying software product, which includes computer software and may include associated media, printed materials, and “online” or electronic documentation (the “Software Product”). By installing, copying, or otherwise using the Software Product, you agree to be bound by the terms of this License Agreement.
8. NO OTHER WARRANTIES EXCEPT FOR THE ABOVE EXPRESS LIMITED WARRANTIES, SERIF AND ITS SUPPLIERS MAKE AND LICENSEE RECEIVES NO WARRANTIES OR CONDITIONS, OR TERMS, EXPRESS, IMPLIED, STATUTORY, OR IN ANY COMMUNICATION WITH LICENSEE.
How to contact us Our main office (USA, Canada): The Software Center PO Box 803, Nashua NH 03061 USA Main Registration Single Unit Sales Technical Support Customer Service General Fax (603) 889-8650 (800) 232-2897 (800) 55-SERIF or 557-3743 (603) 886-6642 (800) 489-6720 (603) 889-1127 Technical Support E-mail support@serif.
Contents 1 ♦ Welcome Introduction ................................................................................................3 About the Companion................................................................................3 Key PhotoPlus features .............................................................................4 Registration, Upgrades, and Support ........................................................5 Installation.......................................................................
Cropping ..................................................................................................35 Flipping and Rotating...............................................................................36 Adjusting Image Colors ...........................................................................37 Applying Effect Filters..............................................................................39 HANDS ON: Photo-painting.............................................................
6 ♦ Preparing Web Graphics Formats for the Web................................................................................77 .GIF format.......................................................................................77 Recommended .GIF export settings ............................................78 .JPG format......................................................................................79 PNG format......................................................................................
1 Welcome
Welcome 3 Introduction Welcome to Serif PhotoPlus 5.0—the best value in image creation and editing software for any home, school, organization, or growing business. PhotoPlus is your number one choice for working with photographs and paint-type images, whether for the Web, multimedia, or the printed page. PhotoPlus has the features you’ll need... from importing or creating pictures and animations, through manipulating colors and effects all the way to final export.
4 Welcome Key PhotoPlus features PhotoPlus brings professional image editing to everyone—with features like these: ♦ Powerful Image Export Optimizer The Export Optimizer lets you see how your image will look (and how much space it will take up) before you save it! Its multiwindow display provides side-by-side WYSIWYG previews of image quality at various output settings, so you can make the best choice every time. ♦ Web Animation Tools Now it’s easy and fun to create or edit animations for the Web.
Welcome 5 ♦ Professional Output Options Output using CMYK separations or print directly to your desktop printer with powerful controls. Include registration marks, crop marks, file information, grayscale and color bars, and tile or scale your output if required. ♦ Productive MDI Interface Open and view multiple images and edit them simultaneously. Dockable, floating tab windows work in conjunction with convenient toolbars. The Layer Manager provides full control over all regions and planes.
6 Welcome ♦ 16MB (Windows 95/98), 24MB (Windows 98 SE), 32MB (Windows NT), or 64MB (Windows 2000) RAM ♦ 20MB (minimum install) free hard disk space.
2 Getting Started
Getting Started 9 Seven Key Concepts If you’re new to photo editing programs, or perhaps have only worked with a basic painting program like Microsoft Paint, a number of the concepts in PhotoPlus may be new to you. Don’t be daunted! Many thousands of artists have made the leap—the rewards are well worth it! This section collects in one place some background material that will hopefully provide a concise introduction and save you some “headscratching” later on.
10 Getting Started 3 Making a selection In any photo editing program, the selection tools (see Chapter 3) are as significant as any of the basic brush tools or commands. The basic principle is simple: quite often you’ll want to perform an operation on just a portion of the image.
Getting Started 11 On top of the Background layer, you can create any number of new layers in your image. Each new one appears on top of another, comprising a stack of layers that you can view and manipulate with the Layer Manager tab. We call these additional layers standard layers to differentiate them from the Background layer. Standard layers behave like transparent sheets through which the underlying layers are visible.
12 Getting Started You’ll primarily encounter these terms in one of two contexts. First, as a property of the pixels laid down by individual paint tools, which can be more or less opaque, depending on the tool’s opacity setting. Second, as a property of individual layers, where opacity works like a “master setting” that you can vary after paint has been laid down. 7 Saving and exporting Saving a file in PhotoPlus means storing the image in the native PhotoPlus file format, using the .SPP extension.
Getting Started 13 q Use the Windows Start button to pop up the Start Menu and click on the PhotoPlus item. PhotoPlus launches and displays the Startup Wizard, with a variety of choices: ♦ Open Saved Work displays a browser that lets you preview and open saved image files—pictures in any supported format as well as animated GIFs (see Chapter 3). ♦ Create New Picture opens a new image window using a size and background color you specify (see Chapter 4).
14 Getting Started q PhotoPlus is set to initially display the contents of the PhotoPlus PROJECTS folder, located on your hard disk. If the Open dialog displays a different folder, browse to PROGRAM FILES\SERIF\PHOTOP50\PROJECTS. F NOTE: Whether or not you use the Projects folder to store your own work, remember its location so you’ll know where to find Companion source files when they’re needed later on. q Select the file CAT.JPG in the Projects folder and click Open.
Getting Started 15 Getting your bearings Now that you’ve got an image open, and the PhotoPlus menus and tools are available, let’s take a quick look around the PhotoPlus environment. Even if you’re in a rush to start working, don’t skip the rest of the chapter! At the very least, take note of what’s here so you’ll know where to find the information when you need it later. Introducing the interface PhotoPlus is an MDI application.
16 Getting Started PhotoPlus Toolbars and Tabs Standard toolbar Provides standard file and Clipboard commands. Click the [?], then any tab, for context-sensitive help! Tool Properties tab Lets you customize the settings for many of the tools on the Tools toolbar Tools toolbar Features tools for selecting regions of the screen, painting and erasing, cropping selections, creating Web graphics...
Getting Started 17 Color tab Lets you select foreground and background colors and change the color mode Layer Manager tab Includes controls for creating, deleting, arranging, merging, and setting properties of layers in the image Animation tab Provides controls for editing animation files (only appears in Animation mode)
18 Getting Started To turn off a tab, click the Close button in its titlebar. To turn a tab or toolbar off or on, uncheck or check its name on the View menu. If you need more room on-screen for a particular operation, press the Tab key to turn all the visible tabs off, and again to turn them back on. To dock or undock a tab, click on its label and drag to the new position, either floating independently or docked in a window next to another tab. It’s easy to get online help in PhotoPlus.
Getting Started 19 How to Get an Image into PhotoPlus Before you can manipulate an image, you’ll need something to work with! PhotoPlus can open images saved in a wide variety of industrystandard file formats, and acquire images from your TWAIN-compliant digital camera or scanner. To get a saved image into PhotoPlus, you select Open Saved Work from the Startup Wizard. The dialog displays image files you’ve recently worked on; select a file or click the Browse button to locate other saved files.
20 Getting Started Whether you import the image via the Open dialog or the TWAIN interface, it will appear in a new image window in PhotoPlus. Assuming the image is not in the native PhotoPlus (.SPP) format, it will always have just a single layer, called the Background layer (see “Seven Key Concepts” earlier in the chapter). Chapter 5 will explore layers in considerable detail; until then we’ll be focusing on techniques that work perfectly well on one—or at most two—layers.
Getting Started 21 The Export Optimizer consists of a left-hand settings region and a righthand preview display, with additional buttons along the bottom of the dialog. In animation mode, there's an extra tab for changing output settings. To display a different portion of the image, drag the image in the preview pane. To change the display scale, click the Zoom In or Zoom Out buttons at the lower left.
22 Getting Started Choose the printer to use from the drop-down list. If necessary, click the Properties... button to set up the printer for the correct page size, etc. It’s very important to set up your printer correctly to get the best results. Click the Options... button if you need to set special print options such as scaling, tiling, or CMYK color separations. (The various print options are detailed in Chapter 7.
Getting Started ♦ 23 Choose Effects Gallery to display a visual sampler of color adjustments and special effects — cross-referenced to help topics (see Chapter 3 for more). Once inside online help, choose Visual Reference or How To to peruse help information using either a graphical or step-by-step approach— whichever you prefer. Each section displays its own table of contents in the main window, while help topics appear in a second window.
3 Manipulating Images
Manipulating Images 27 This chapter will focus on ways of manipulating existing pictures, especially photos. We’ll begin with a Hands-on Project using the “cat” image you briefly opened in the previous chapter. Note that all of the techniques described here can also be applied to images created from scratch, and to animations.
28 Manipulating Images Cropping the image Cropping is one of the easiest ways to improve the appearance of a photograph—by creating a more pleasing composition of its main elements. In this particular photo, there’s just one main element, and it fills the whole image! However, there are a couple of problems with leaving the image uncropped. One is the rather boring curtain in the background; the other is the large blurry tail in front. So let’s crop away everything except the cat’s face.
Manipulating Images 29 q Experiment with the Brightness and Contrast sliders. Each time you “upclick” after dragging a slider, the image updates. Alternatively, you can type values directly into the fields at the right. Although you may not achieve perfection with just the Brightness/ Contrast adjustment, try to obtain solid “bottom” and “top” (shadow and highlight) regions without obscuring details or washing out the image.
30 Manipulating Images Adding a caption Finally, we’ll venture into uncharted territory. Adding a caption to the photo is easy, but it will introduce several new operations: choosing a color, using the Text tool, and working with more than one layer. Don’t worry—it will be a very mild introduction! q Locate the Color tab, which is probably still open at the right side of the screen—but if it’s hidden, check its item on the View menu to display it.
Manipulating Images 31 The text appears (in the foreground color) on a new text layer above the Background layer that has the photo. The text layer is now the active layer. Because it’s on a separate layer, the text is editable and can be repositioned independently of any other image layers. (Chapter 4 will have more on working with text.) q Choose the Move tool from the Tools toolbar and drag the text around until it is in the right position on the image.
32 Manipulating Images PhotoPlus offers a very wide range of selection tools, and a variety of commands for modifying the extent or properties of the selected pixels. The standard selection tools are located on the Standard Selection Tools flyout on the Tools toolbar. There you can choose from the Rectangle, Ellipse, Freehand, or Polygon tools. To select a rectangular or elliptical area, select the Rectangle or Ellipse tool from the flyout and drag to define a region on the image.
Manipulating Images 33 The Adjustable Selection Tools flyout, a unique PhotoPlus feature, offers 16 different variable selection shapes, including pie, star, arrow, heart, spiral, wave, and so on. Here’s how the adjustable selection tools work. We’ll use the regular polygon selection shape as an example. Choose a tool from the flyout and drag out a shape on the image. You can hold down the Shift key to constrain the selection's aspect ratio.
34 Manipulating Images If the selection you've made isn't quite the right shape, or doesn't quite include all the necessary pixels (or perhaps includes a few too many), you can continue to use the selection tools to add to, or subtract from, the selected region. To add to the existing selection, drag with the selection tool while holding down the Shift key. To subtract, drag while holding down the Alt key.
Manipulating Images 35 To duplicate the contents of the selection on the active layer, press the Alt key and click, then drag with the Move tool. As a shortcut if you’re working with any one of the selection tools, you can press the Ctrl key to switch temporarily to the Move tool. Press Ctrl+Alt to duplicate. Release the key(s) to revert to the selection tool. Cut, Copy, Paste, Delete These operations work pretty much as you’d expect.
36 Manipulating Images You can also crop an image to any selection region, no matter what shape, as defined with one of the selection tools (see above). Make a selection using one of the selection tools and then choose Crop to Selection from the Image menu. For example, here’s cropping applied to a marquee drawn with the Freehand Selection tool: PhotoPlus always crops to a rectangular image.
Manipulating Images 37 The image will rotate about the center point. Original image 15° counter-clockwise 10° clockwise Adjusting Image Colors The Image/Adjust menu provides a number of different adjustment filters that you can apply to a selection or to a non-text layer (the commands are grayed out if the active layer is a text layer). Each of the Adjustment options works in a similar way. At the top of most of the dialogs there is a preview area.
38 Manipulating Images Click on the View Original button above each illustration to view the image as it appeared before the filter was applied. Click on the Apply Effect button to see the after state. Here’s a quick summary of the PhotoPlus image adjustments. ♦ Brightness/Contrast: Brightness refers to overall lightness or darkness, while contrast describes the tonal range, or spread between lightest and darkest values.
Manipulating Images ♦ Negative Image inverts the colors in a selected area, giving the effect of a photographic negative. ♦ Grayscale reduces a color picture to 256 shades of gray. 39 Applying Effect Filters The PhotoPlus Image menu includes a number of commands that apply special effects to the active layer or selection.
40 Manipulating Images q Choose Adjust>Brightness and Contrast from the Image menu and increase the brightness by 17. q Choose Blur>Gaussian Blur from the Image menu and apply a Gaussian Blur with a Radius of 5 and a Falloff of 5%. q Choose Other>Posterize… from the Image menu and apply a posterize value of 13. q Choose Adjust>Hue, Saturation, Lightness from the Image menu and boost the saturation to 200. q Choose Edge>Enhance from the Image menu, then Blur>Soften from the image menu.
Manipulating Images The original image Blurred by 20 Embossed by 70 Original Embossed by 70 Blurred by 20 41 HANDS ON: Antiquing a Photo This sequence will show you how to make a new color photo look like an old sepia-toned image, and will also introduce some new layer techniques—a preview of Chapter 5’s in-depth coverage. q Open the file HOUSE.JPG in the PhotoPlus PROJECTS folder.
42 Manipulating Images To create the sepia look, we will be adding a semi-transparent color layer above the photo. q Choose New… from the Layers menu. In the dialog, call the new layer “Sepia” and set its Opacity to 40. Click OK and you’ll see the new layer’s name appear on the Layer Manager tab (although the image won’t look any different). q Using the Color tab, set the foreground color to be an orange hue (suggested values: R=255, G=166, B=0).
4 Working with Paint and Text
Working with Paint and Text 45 The previous chapter described a variety of ways of working with existing images—especially photographs, and usually on a single layer. Now it’s time to look at creating elements from scratch, using the range of PhotoPlus paint and text tools. Perhaps you need to add text to a photo, along the lines of Chapter 2’s “cat” Hands-on Project.
46 Working with Paint and Text One is to use the Color Pickup tool on the Tools toolbar. Leftclick with the tool anywhere on an image to “pick up” the color at that point as the new foreground color, and right-click to define a new background color. As a shortcut if you’re working with one of the drawing tools (paintbrush, line, etc.), you can press the Alt key to switch temporarily to the Color Pickup tool. Release the key to switch back once you’ve left- or right-clicked to make a color selection.
Working with Paint and Text 47 q In the New Image dialog, set the image dimensions large enough to give yourself plenty of white space. 500x500 should be about right. Leave the resolution at 96 pixels per inch (that’s standard screen resolution). The background type should be set to White. q Click OK, and the new image window opens. The image initially has a single Background layer. q Choose New... from the Layers menu, then click OK in the dialog.
48 Working with Paint and Text Using the basic Paintbrush tool The Paintbrush tool is used for freehand drawing. Successful freehand drawing requires practice and a steady hand! You might find it easier if you use a graphics tablet, rather than a mouse. To paint a line using the Paintbrush tool, select it from the Tools toolbar. When you move the Paintbrush tool over the image the cursor will change into a paintbrush.
Working with Paint and Text 49 You’ll notice that some brushes have hard edges, while others appear fuzzy, with soft edges. The hardness of a brush is expressed as a percentage of its outer diameter. If less than 100%, the brush has a soft edge region within which the opacity of applied color falls off gradually. q To see what this means, try using a medium-sized hard-edge brush, and then switch to a soft-edge brush. You’ll note the difference immediately.
50 Working with Paint and Text ♦ Opacity is basically the same concept as “transparency”—they’re just different ends of the same scale (0% opaque is 100% transparent). Thus a lower opacity value produces paint that’s more transparent, with less effect on existing pixels on the layer—more of the underlying paint “shows through.” A fully opaque stroke completely replaces all pixels in its path. ♦ Fade simulates a realistic brush stroke, with less paint applied over a longer stroke.
Working with Paint and Text 51 Using the Eraser tool The Eraser tool works very much like the preceding brush tools, with the same range of Brush Tip and Tool Properties tab options. But it is used instead to rub out pixels and replace them with whichever color is selected as the background color. To erase, select the tool from the Tools toolbar and drag over the image area. On the Background layer, erased pixels are replaced by the current background color.
52 Working with Paint and Text q Try using the tool to smear a painted line outward, or create a mix of two colors (using a semi-transparent setting). Experiment with the effects of both a hard-edge and a soft-edge brush tip. q For best results when using extended strokes, set the brush tip’s Spacing property to 1.
Working with Paint and Text 53 In addition to the usual settings, the Clone tool has an Aligned option on the Tool Properties tab. This affects what happens if you use more than one brush stroke. There are two possibilities when you click to begin a second stroke: either (upper view) the crosshair resets itself at a fixed distance from the brush tip—maintaining the same separation between the cursors as on the first stroke, or (lower view) the crosshair resets itself to the original pickup point.
54 Working with Paint and Text The Tool Properties tab provides the familiar Opacity setting for the Line tool. You can also set the Weight (thickness) of the drawn line, and turn Anti-aliasing on or off. Anti-aliasing produces smooth edges by making the selection’s edge pixels semi-transparent. It’s great for avoiding “jaggies” on diagonal lines. q Go ahead and experiment a bit with the Line tool—trying various weights and turning antialiasing on and off.
Working with Paint and Text 55 q You’ll have fun with these! Try building up a pile of shapes, each using a different color with partial transparency so you can see through to the shapes below. Or just play around with the adjustable handles to create zany designs or meaningful symbols. Often, forms like these can communicate quite a lot in a small space—think about the possibilities for Web buttons or icons. Lots of possibilities arise using shapes with the fill tool described in the next section.
56 Working with Paint and Text Type your text and use the formatting options at the top of the dialog. Formatting is applied to all the text in the window, so you don’t need to select the text first. To apply semi-transparent edges to the characters, check the Anti-Alias box. (Anti-aliasing is generally recommended with text sizes 14pt or larger.) To set text color, click the Adjust Color button and use the dialog. You won’t see the effect of the new color until you close the Add Text window.
Working with Paint and Text 57 HANDS ON: Creating Filled Text This sequence shows you how to create some text and fill it with a pattern. One image will serve as a fill for the text created in another. q Open WATER.JPG (our fill image) in the PhotoPlus PROJECTS folder. Next, create a new empty image to use for the text. q Choose New from the File menu to open the New Picture dialog. Make the size 500×100, with a transparent background.
5 Using Layers and Masks
Using Layers and Masks 61 Layers If you’re accustomed to thinking of pictures as flat illustrations in books, or photographic prints, the concept of image layers may take some getting used to. In fact, layers are hardly unique to electronic images. The emulsion of photographic film has separate layers, each sensitive to a different color—and we’ve all noticed multiple-image depth effects like shop window reflections or mirrored interiors.
62 Using Layers and Masks Suppose you are creating a new picture image. The New Image dialog provides three choices for Background: White, Background Color, and Transparent. If you pick White or Background Color, the Layer Manager shows a single layer named “Background.” If you pick Transparent, however, the single layer is named “Layer 1”—in this case, the image (typically an animation file) has no Background layer.
Using Layers and Masks 63 To make a layer’s contents visible or invisible, click the Hide/Show Layer button next to its name on the Layer Manager tab. The icon switches between an open and closed eye. Shortcut: Left- or right-click a hidden layer’s name to make the layer visible again. To prevent further editing of transparent regions on a standard layer, click the Protect Transparency button next to its name on the Layer Manager tab.
64 Using Layers and Masks Clipboard operations involving layers To copy (or cut) the contents of the entire active layer to the Clipboard, select nothing and use the standard Ctrl+C or Ctrl+X commands. Cut or deleted pixels are replaced (on the Background layer) with the current background color, or (on standard layers) with transparency. You can paste the copied or cut layer into another PhotoPlus image window, using the Paste>As New Layer command on the Edit menu.
Using Layers and Masks 65 HANDS ON: Making a Montage Now we’ll put several layers from several files together to create one image (in this case an ad for a music event) using a base image, text, and backgrounds. We’re going to use an image of a musical score as the main background for our composite. q Open the file SCORE.JPG in the PhotoPlus PROJECTS folder. q Save the image under the name MONTAGE.SPP. This will become the primary working window (we’ll refer to it as the “Montage window”).
66 Using Layers and Masks q Choose Image Size from the Image menu. In Pixel Size, change Width from 416 pixels to 600. Move the Resampling Method slider completely to the right, where it is labelled Quality: the description will change to Bicubic Interpolation. Then click OK. q Carefully select around the statue, using the “Ellipse” Adjustable Selection tool to make a circular selection including just the statue’s head. q Copy the selected area to the Clipboard and close the image window.
Using Layers and Masks 67 q Select Rotate from the Image Menu. Select Custom and enter an angle of 11 degrees. Select Layer in the Apply To box and ensure that Direction is set to Counter-Clockwise. Re-position the text with the Move tool if necessary. q Select the piano layer (Layer 1) on the Layer Manager tab. Adjust the Opacity for that layer to 85% . q Select Adjust>Brightness/Contrast from the Image Menu. Reduce Brightness by 20%. q Open MOON.
68 Using Layers and Masks q Make the foreground color in the Color tab white, and select the Text tool. Add the text “Music By Moonlight” in Basic Sans, bold (or Arial), size 14 points, on three lines, and drag it next to the crescent moon using the Move tool. q Select the Text tool again, and add the text “Independence Day” in Handscript SF (or Times New Roman), 24 points. Drag the text to the top of the image using the Move tool. q You can save the image as an .
Using Layers and Masks 69 Besides the creative possibilities, ranging from vignetting to multi-layer montage to gradient masking and beyond, a great feature of working on a mask is that it is “temporary”—if you don’t like the way things are going, you can abandon your changes and start over without ever having affected the actual pixels on the layer! Each standard layer can have one mask at any given time. (The Background layer can’t have one because it doesn’t support transparency.
70 Using Layers and Masks 2 Editing on the Mask In Edit Mask mode, you can use the full range of painting tools, selection options, and effects to alter the mask’s grayscale values. These manipulations cause corresponding changes in opacity, which in turn changes the appearance of the pixels on the layer itself. Remember, as long as you are editing the mask, you’re only seeing a preview of changes on the layer. No permanent changes will be applied until you actually merge the mask with the layer.
Using Layers and Masks 71 3 Applying changes to the layer Once you’re satisfied with the appearance of the layer as seen with the mask enabled, you can choose Merge Mask from the Layers menu to make the changes permanent. Of course, you may choose to delete the mask (choose Delete Mask from the Layers menu) without applying changes... perhaps to try again. In either case, whether merged or deleted, the old mask is no longer present and the layer is ready to accept a new mask.
72 Using Layers and Masks The region within the oval selection is our area of interest. To create a vignette effect—a gradual fade-in from the edges—we’ll want to make the pixels at the edge transparent, grading in to opaque pixels in the part of the picture we want to keep. Feathering the selection will produce this effect. Feathering proceeds outwards from the edges of a selection, so to feather within the region we’ve defined, we’ll first contract the selection and then feather out from there.
Using Layers and Masks q Pick a neutral beige or pastel foreground color, and click with the Flood Fill tool on the active bottom layer. q As a finishing touch, you can drag the “bridge” layer slightly with the Move tool to center it with respect to the mat. q You can now save the image as an .SPP, export it to another format, print it, or perform more manipulations.
6 Preparing Web Graphics
Preparing Web Graphics 77 One of the main uses for PhotoPlus is to produce graphics for use on the World Wide Web. This chapter looks at the prevalent Web graphics file formats, techniques for creating and editing .GIF animations, and two specialized techniques (image slicing and image maps) used to extend the performance of Web images. “Performance” may seem like an odd aspect of graphic design, but it’s actually one of the key factors in designing for the Web.
78 Preparing Web Graphics The .GIF format supports binary transparency. That is, any portion of the image may be either fully opaque or fully transparent. Typically, this is used to eliminate the box-shaped frame around the graphic that would otherwise be present. Elements with rounded edges, such as characters or shapes, preserve their contours over any background color or pattern. If you’re producing transparent GIFs, try to avoid anti-aliasing and feathering (i.e.
Preparing Web Graphics 79 .JPG format The .JPG or JPEG (Joint Photographic Experts Group) file format, like .GIF, is universally supported in Web browsers. Unlike .GIF, it encodes 24-bit images and is a lossy format (i.e. it discards some image information) with variable compression settings. JPG is clearly the format of choice for full-color photographic images. For “black and white” (256-level, 8-bit grayscale) photos, it has no particular advantages over .GIF.
80 Preparing Web Graphics Producing Web Animations Animation creates an illusion of motion or change by displaying a series of still pictures, rapidly enough to fool the eye—or more accurately, the brain. With PhotoPlus, it’s easy to create and edit images with multiple frames, then export them as animated GIFs that a Web browser can play back.
Preparing Web Graphics 81 Notice the playback control buttons on the right, below the frames. q Click the Play button to preview the animation, and click Stop to freeze it. Try the other playback buttons, while you're at it! To display the Visual Reference topic describing the various features of button and then click anywhere on the the Animation tab, click the tab. Let’s examine the Swirl animation more closely.
82 Preparing Web Graphics As you switch between frames, you are switching between states of the image. In the simple example above, the six frames define six states in terms of Property 1—each of the six frames defines a different layer as “shown.” We could rearrange the stacking order of the layers, or rename them—and the animation itself wouldn’t change. Thus, when you create a new frame on the Animation tab, you’re not adding a new layer.
Preparing Web Graphics 83 The Show/Hide Captions button should be up (captions hidden) so that each frame’s image content is easier to see. q Working in the image window, choose the “Ellipse” Shape tool and Ctrl-drag to draw a small, dark circle at the left side of the square canvas. (The color doesn’t matter, as long as it shows up.) New Frame button on the Animation tab three q Now click the times to add three clones of Frame 1. q On the Animation tab, click on the second dot (Frame 2) to select it.
84 Preparing Web Graphics q Click the Fixed Loop button and try entering a specific number of repeats in the box. (The most common setting here would be “1,” for example with a longer sequence that only needed to play once.) q We suggest that besides saving your creation as an .SPP file, you also export it as a .GIF. You’ll notice that the Export Optimizer has a special tab for previewing and setting final animation options before exporting to the .GIF format.
Preparing Web Graphics ♦ 85 Use animations sparingly on Web pages. Like all attention grabbers, they can lose their impact if overused. Also, animated .GIFs (because of the additional image information) are substantially larger than a static graphics, a consideration if you expect people to view your pages over a slow Internet connection. Image Slicing Image slicing and image maps are two convenient ways to create navigation bars and clickable graphics for Web pages.
86 Preparing Web Graphics When exporting a sliced image, check the Create Image Slices box on the Export dialog. Specify a name and folder for the files as usual, and choose either .GIF or .JPG as the export file type. We recommend using .GIF for non-photographic images and .JPG for photo-quality images. This will create multiple files in the specified folder, depending on how many slices you have defined. There will be a series of image files (for example, MYFILEH0V0.GIF, MYFILEH0V1.GIF, etc.
Preparing Web Graphics 87 Creating hotspots Click the Image Map Tools flyout and choose the Rectangle, Ellipse, or Polygon tool. Use the tool to draw a hotspot on the active layer. To draw a polygon, drag and release the mouse button to define each line segment; double-click to close the polygon. Hotspot outlines appear in red. To edit a hotspot, Click the Image Map Tools flyout and choose the Selection tool. To resize the hotspot, drag from an edge. To move the hotspot, drag from the center.
7 Color and Input/Output Options
Color and Input/Output Options 91 This chapter ties together a variety of loose ends... mindful of the fact that every PhotoPlus user will arrive with different needs and prior experience. The other Companion chapters focus on step-by-step procedures to build familiarity with tools and functions. Much of the important theory that underlies the program’s workings has had to take a back seat.
92 Color and Input/Output Options Bit depth A bitmap is basically a bunch (literally a “map”) of numbers that tell each dot (pixel) on a computer monitor what color it should be. And since computer numbers consist of binary digits (1’s and 0’s, or “bits”), each pixel in effect has one or more bits backing it up, telling it what to do. From this fact arises the concept of bit depth (also known as “pixel depth”), one of the essential attributes of any bitmap image.
Color and Input/Output Options 93 Bit depth in PhotoPlus One of the main differences between PhotoPlus and most other paint programs is that we’ve put aside the restrictive notion of working with a limited number of colors. You can work on any image in 24-bit mode, accessing the full color spectrum via the Color tab. Native format (.SPP) images are stored in this mode.
94 Color and Input/Output Options A grayscale image looks like what we would call a “black and white” photograph, which properly speaking has many levels of black and white (not just two, as in a monochrome line drawing). On computers, Grayscale mode stores 256 shades of gray or levels of lightness. A value of 0 represents pure black, a value of 255 pure white. Sometimes we speak of the “tones” in a grayscale image—it’s just another word for the different “values” or “lightness levels.
Color and Input/Output Options 95 RGB mode is much less intuitive than HSL as a method of mixing colors, but it’s the standard way of describing colors the way they’re displayed on computer monitors—as mixtures of separate Red, Green, and Blue components. Anyone who’s seen (in a museum, perhaps) a demonstration of three projector beams in a dark room, one of each color, merging to produce a pool of white light, has seen a primitive version of the RGB system. Turn all the elements off and you get black.
96 Color and Input/Output Options ♦ You can use the Color Pickup tool as a probe to read component values in an image. Move the tool around the image and watch the HintLine. Depending on the color mode, you’ll see a readout of values (R, G, B, H, S, L, O, etc.) under the current cursor position. By the way, the “O” represents Opacity. Optimizing images In a perfect world, there would be just one digital picture format that everybody used.
Color and Input/Output Options 97 To avoid that kind of calamity when displaying Web pages, both Netscape and Microsoft browsers use the same Web-safe palette of 216 colors to display images. Since you’ve gotten this far, you may be interested to know that the Web-safe palette is based on RGB values that are either 0, or divisible by 51. Permissible values are in the series 0, 51, 102, 153, 204, 255. So, for example, the RGB definition “0,102,51” would be a safe Web color, while “0,102,52” would not.
98 Color and Input/Output Options Compression Compression schemes, which apply different algorithms to encode the image information with fewer total bits and bytes, are used in many formats. With some, like .BMP and .TIF, the Export Optimizer gives you a choice of compression scheme. In general, use the default setting unless you know for a fact that some other scheme is called for. The .
Color and Input/Output Options 99 Tips for Scanning Scanning hardware and software varies considerably. One myth is that the higher the resolution of your scanner, the better results you’ll achieve. While that’s true in theory, the real limit to quality is how the image will ultimately be reproduced. Will it end up on the printed page or on-screen? Either way, the real issue is how many “extra pixels” you’ll need in the original scan.
100 Color and Input/Output Options ♦ If preserving detail is a consideration—as it almost always is—and you plan to manipulate the image, then give yourself enough pixels to work with! Scan at a higher resolution (or higher size) and scale the image down later. Of course, file size and the capacity of your system are also factors in choosing scanner settings. It makes little sense to work slowly on a 20MB file, if you’d get the same final quality working quickly with a 5MB file.
Color and Input/Output Options 101 Scaling is usually set to 100%, but you might reduce it to proof a large image on one page or increase it to blow up a small image to fit a whole page. Choose the Reduce to fit option to make sure that your image will fit on the page. Tiling allows you to print a large image on several sheets to be stuck together later. The Preview area shows where on the page the image will be printed.
102 Color and Input/Output Options Including printer marks On the Output tab, you can specify whether the program is to print various marks as well as the image. Marks and file information can only be printed if the physical paper size is one inch or more larger all round than the image. After specifying options, click one of the other tabs to set more options, or click OK to return to the main Print dialog and save any changes. Click Cancel to abandon changes.
Color and Input/Output Options 103 If you are using a PostScript® output device, checking the Print Separations box on the Separations tab allows you to choose whether to print separations for process printing and if selected, which separations to print. This box will be grayed out if you are not using a PostScript® printer driver. Normally, separations are not enabled. On a color printer (e.g. an ink jet), if separations are not enabled you will get a single composite color page and on a mono printer (e.
104 Color and Input/Output Options To embed a PhotoPlus object into a document in another program (in this case PagePlus), copy the image to the Clipboard by choosing Copy Merged (or Copy, for singlelayer images) from the Edit menu. Switch to the other program and choose Paste Special… from its Edit menu. The cursor will change to the insert picture cursor. Click once to insert the image.
PhotoPlus Keyboard Shortcuts Tool shortcuts Press... Shift With...
Menu command shortcuts Press... Shift Shift Shift With... To...
Index A active layer, 47, 62 Add Mask command, 69 Add Text window, 30, 55, 66 Adjust Color dialog, 46, 56 Adjustable Selection tools, 33 adjustment filters. See filters Airbrush tool, 50 animation .GIF format for Web, 78, 80 creating, 80 Animation tab, 17, 80 anti-aliasing, 54, 56, 78 arranging layers, 64 arrow drawing, 54 selecting shape, 33 aspect ratio, constraining, 33, 54 B background color, 10, 30, 45, 51 Background layer, 20, 45, 61 bit depth, 78, 92 bitmap, 91 blur filters.
Duplicate Layer command, 62 duplicating a selection, 35 E edge filters. See filters Edit Mask mode, 70 effect filters. See filters Effects Gallery, 37, 39 ellipse drawing, 54 selecting shape, 33 Emboss (effect filter), 40 Enhance Edges (effect filter), 40 Equalization (adjustment filter), 38 Eraser tool, 51 Export Optimizer, 12, 20, 84, 96 exporting files, 12, 20 animation, 84 image maps, 87 image slices, 86 optimization, 96 F Fade property, 50 feathering, 72, 78 features, key, 4 file formats .GIF, 77 .
J JPEG (.JPG) file format, 79 L Layer Manager tab, 17, 61, 64, 80 layers, 10, 61 active layer, 11, 47, 62 and animation frames, 81, 84 arranging, 64 Background layer, 10, 20, 45, 61 Clipboard operations, 64 creating, 42, 47, 62 deleting, 62 hiding and showing, 63 linking and unlinking, 63 merging, 64 moving, 63 opacity, 36, 81 Promote to Layer, 36, 62 protecting, 63 standard layers, 11, 61 text layers, 11, 31, 56, 61 lighting (render) filters.
selecting shape, 33 Reduce to fit option, 101 registration, 5 render filters.
U Undo options, 28 URLs for image maps, 87 for image slices, 85 V View Mask setting, 70 view, setting, 18 vignetting, 71 wave, selecting shape, 33 W Web images animations, 80 file formats for, 77 performance issues, 77 previewing in browser, 84 Web-safe palette, 78, 97 weight (line thickness), 54 Windows system colors, 96 Z Zoom tool, 18 zoom view, setting, 18
