CHAPTER 3: Tools, Palettes and Documents

Document Window
Paint Tool Pallette
Color Tools Palette
Color Selector Palette
Pattern Selector Palette
Coordinates Window
Line and Fill Palette
Brush Shapes Palette
Controller Window
Cel Strip Window

A WebPainter file is referred to as a document since it is like an electronic document that consists of sheets of information and can be displayed with an editor. In addition, a WebPainter document can consist of single or multiple images or cels. Each of the floating windows such as the Painting Tools or the Color Tools are called palettes. Each palette in turn contains a different sets of tools that are necessary to create animations for the Web.

Document Window

The main editing window is simply referred to as the document window. WebPainter is both a paint application and a cel animation program for creating multiple cels or animation. If you are creating static images for your Web page, you need only paint in the first image or cel of the document window.

Interface Elements

Foreground/Background Toggle

This button allows you to alternate the editing area between a static background or foreground.

Onion Skin Toggle

By selecting onion-skin previous or next button, you are showing a transparent (ghost) image of the previous or the next cel is displayed in the current cel.

Add A New Cel

When this button is clicked, a new empty cel is created which will appear after the current cel.

Duplicate Cel

When this button is clicked, the current cel is duplicated. This new cel will appear after the selected cel.

Delete Cel

When this button is clicked, the selected cel is deleted.

Go to previous cel

When this button is clicked the previous cel will appear. When the button is clicked down continuously, the animation will be played in reverse.

Go to next cel

When this button is clicked the next cel will appear. When the button is clicked down, the animation will continuously play.

Cel Counter

The cel counter at the bottom left corner of the document window indicates the current cel. By clicking on the down arrow you can move to another cel or the background.

Rulers

The ruler can be turned off or on in the "Paint Menu".

Tool Pointers

The on-screen indicator or cursor, may change depending on the tool selected. Many tools have pointers that resemble their icons, such as the pencil. Other pointers match their function, such as a spray pattern for the Spray Can, or a square for the Eraser. Each pointer has a hot point: the spot that "counts". For instance the tip of the Pencil draws a line.

Click Shortcuts

There are a number of Keyboard shortcuts in WebPainter that make it quicker for you to acces frequently used functions. Double-clicking the Paint Brush displays the brush Shapes palette. Shortcuts are detailed with the discussion of each tool. (See Appendix A for a summary of the Shortcuts and Keyboard Tool Modifiers)

Keyboard Tool Modifiers

Many tools have keyboard modifiers. Pressing the Shift, Option, or Command keys individually or together restricts or modifies the action of the tool. For instance, pressing the Shift key constrains many of the tools to horizontal-only or vertical-only operation. Modifiers are addressed in the discussion of each tool.

Tool Configurations

The operation of many of the tools can be altered to suit your purposes. These tools are configured through dialog boxes or palettes displayed by menu commands, or by double-clicking the tool icon on its palette. The specifics of tool configuration are covered with each tool description.

Paint Tool Palette

Paint Selection Tools

Marquee Selection Tool

Use the Marquee Selection Tool to make a rectangular selection in the document window.

Double-clicking this button will select the entire image ie. "Select All".
Press Shift key while dragging the pointer on an existing marquee selection will combine the selections together.
Press Command key while dragging the pointer on an existing marquee selection will remove the new selection from the existing one.

Lasso Selection Tool

The Lasso Selection Tool allows you to select an irregular or freehand section of the image in the document window.

Double-clicking this button will select the entire image. ie. "Select All".
Press Shift key while dragging the pointer on an existing Lasso selection will combine the selections together.
Press Command key while dragging the pointer on an existing Lasso selection will remove the new selection from the existing one.
Press Option while dragging out the pointer constrains its function to a Marquee Rectangular selection tool.

Magic Wand Tool

Use the Magic Wand to make selections based on the color similarities of the adjacent pixels. This tool is useful when you want to select part of an image without tracing the outline with the lasso tool.

Double-clicking this button will select the entire image.
Press Shift key while dragging the pointer on an existing Magic Wand selection will combine the selections together.
Press Command key while dragging the pointer on an existing Magic Wand selection will remove the new selection from the existing one.
Press Option while dragging out the pointer selects all the color used on an image.

Eye Dropper Tool

The Eye Dropper picks up the color beneath the tip of the tool. The color is applied to the foreground of the Line Fill or Area Fill.

Press Option while using this tool to pick up the background color instead of the forground's.

Grabber

The Grabber moves the document in the window. Using the Grabber to drag the document has the same effect as moving the scroll bars.

Double-Clicking fits window to document size.

Paint Tools

Eraser

The Eraser is used for erasing sections or areas of the image in the document window.

Double-clicking on the Eraser tool will erase the entire image in the current cel or document window.

Paint Brush

Use the Paint Brush to paint freeform strokes with the foreground color. The paint brush tool creates strokes that are not as hard edge as lines drawn with the pencil tool and not as soft as the strokes painted with the air brush tool.

Double-clicking on the Paint Brush will bring up the Brush palette, to pick your brush size.

Pencil

Use the Pencil to draw hard-edge freehand or straight lines with the foreground color.

Paint Bucket

Use the Paint Bucket tool to fill selected areas with the foreground color.

Option will allow you to toggle between the Paint Bucket and the Eye Dropper tool.

AirBrush

Use the Air Brush tool to lay down a diffused spray of the foreground color. To darken a color, apply multiple strokes over the same area. There are two kinds of AirBrush settings available: Pixel and Splatter. Their illustrations are shown in the AirBrush Settings dialog.

Double-click on the airbrush tool to bring up the Airbrush Settings dialog.

Other Tools

Magnifier Tool

The Magnifier changes the current level of magnification. Select the Magnifier tool - the magnifying-glass cursor displays a plus sign - and click anywhere in the document window to zoom in one level of magnification.

Press the Option key - the magnifying-glass cursor displays a minus sign - and click anywhere in the document window to zoom out one level of magnification.
Double -Click to return to 1:1

Registration Tool

The Registration Tool allows you to set a reference point for the animation. The registration point will stay constant throughout each cel of the document and will not appear in the final animation. To deselect the registration point, uncheck the Registration Point under the Paint Menu.

Text Tool

Use the Text Tool to type or enter bitmapped text on an image.

To add text:

Select the Text tool from the Tool palette. Click where you want the text to appear. The Type Tool dialog appears.
Choose a font, specify a size for the type and select a style for the type.
Type the text in the text box. The type automatically wraps in the dialog box, but it appears as a single line in the image unless you press "Return".
Click OK. Type appears in the image as a floating selection using the foreground color. Like all floating selections, the type selection appears as a temporary layer. Move the cursor over the selection until the cursor changes to a back arrow and then drag the text to the position that you want and click. Now text is set in the image and cannot be modified.

Line Tool

To draw a line:

Select the Line tool from the Tools palette. The pointer is a crosshair in the document window. Thicker crosshair bars represent wider line widths.
Position the pointer where you want the line to begin, press the mouse button, and drag to the spot where you want the line to end. As you drag, a line is drawn from the starting point; the line moves like an elastic band with the starting point tacked down.
Release the mouse button to end the line.

Shortcuts:

Double-click the Line tool to display the Line Size palette.
Press Option while using the Line tool changes the tool to an Eye dropper .

Shape Tools

Rectangle , Rounded Rectangle, Oval, Multigon, Freeform

The Shape tools - Rounded Rectangle, Rectangle, Polygon, Oval, and Freeform - produce symmetric shapes that are filled with the current Foreground color, and outlined with colors of current Line Fill and widths of the Line Widths.

Select a shape tool from the Tools palette. Tip: Setting the pointer to crosshair under "Paint" menu helps the user to draw the shape close to the measurement required.
Position the pointer where you want one corner of the shape to begin and drag it diagonally to the opposite corner.
Double-click on any of them to toggle between "Draw Filled" and "Draw Unfilled"

Color Tools Palette

The Color Tools palette allows you to:

Set foreground color, background color and gradient fill.
Shows the most recent foreground color, background color, line size, fill pattern, gradient fill, and the 12 most recently used colors.

Show/Hide Color Tool Palette

The Color Tool Palette can be shown or hidden with the use of the Window Menu items.

Foreground Color.

To choose a new Foreground Color:

Position the pointer on the foreground color Selector. Press down on the mouse button and drag the pointer to the color you want. Release the mouse button.

Background Color

Position the pointer on the background color Selector. Press down on the mouse button and drag the pointer to the color you want. Release the mouse button.

Gradient Fill

A gradient fill gradually blends one color into another.

Patterns Palette

To choose a new Fill Pattern:

Position the pointer on the Fill Pattern color selector. Press down on the mouse button and drag the pointer to the fill pattern you want.

Recent Colors

To choose a Most Recent Color:

Position the pointer on one of the 12 most recent color selector. Click to select a color, and the color will be set. The most recent color selectors will change color as you select new colors from the Foreground Color palette.

Color Selector Palette

The Colors palette allows you to select the line, foreground and background color. The Colors palette can also be accessed from the Color Tools Palette through the Line, Foreground and Background pop-up menus. The selected color is surrounded by a black square and is shown at the bottom of the palette.

Standard 8-bit Color Palette

1-bit palette has 2 colors; 2-bits has 4; 4-bits has 16 and 8-bits has 256 colors. WebPainter defaults to an 8 bit color palette.

Customizing the Palette

Double-click the color palette to make the following dialog that allows the you to choose the color you want. The default color picker is Apple RGB but you may use other color pickers if you have them installed.

Different Color Bit Depths

The document dialog allows you to adjust to the various bit depth from 1 to 24 bits. This can be translated from 1 to approximately 16 million colors.

Bit Depth Number of colors

1 1

2 2

4 16

8 256

16 65,536

24 16 million (approx.)

Pattern Selector Palette

The Pattern palette allows you to select a pattern type. The Patterns palette can also be accessed from the Color Tools Palette through the Patterns pop-up.

Coordinates Window

The Coordinate palette allows you to see the x and y coordinates in the painting window.

Horizontal and Vertical Mouse Coordinates

These coordinates mark the position of the cursor in the document window.

Horizontal & Vertical Drag Distance

These coordinates mark the difference between the starting coordinates and the current position of the cursor.

Line and Fill Palettes

The Line Size palette allows you to select the line size. The Line Size palette can also be accessed from the Color Tools Palette through the Line Size pop-up menu.

Changing the Line Width:

You can change the width of the line on frames around shapes by choosing a different line size from the Line Size Selector palette.

Brush Shapes' Palette

The Brush Shape palette allows you to select a brush shape and size. The Brush Shape palette can also be accessed from the Color Tools Palette by double-clicking the brush tool .

Controller Window

The Controller allows you to cycle through the animation cels and to play the animation.

Similar to most video control panels, you can rewind, fast forward (Go to Last Cel), stop, play, step back and step forward one cel at a time with the controller.

The speed of the playback is the same as the frame rate stated on the document setting.

Cel Strip Window

Cel Strip displays all the available cels in an animation. By clicking on the desired the cel will be highlighted and will occupy the document window. As indicated on the Cel Strip's header buttons, you can add, rotate, duplicate and remove cels as well as moving back and forth between cels.

Other functions include the following:

The rotate key will reverse the order of the animation.
Click and drag to move cels around.
Option-click to copy the selected cels to where you drag them to
Shift-Click to select a range of cels and drag to move the selected cels' position.

Command-Click to select cels discontinuously and drag to move the selected cels' position.

[Chapter 1: Installing]-[Chapter 2: Tutorial]-[Chapter 3: Tools, Palettes & Documents]
[Chapter 4: Menus]-[Chapter 5: Document Settings]-[Chapter 6: Basic Web Concepts]
[Appendix]

Bit Depth	Number of colors
1	1
2	2
4	16
8	256
16	65,536
24	16 million (approx.)