Toolbar Paint User Guide

Donkey’s Stable

Toolbar Paint User Guide

Donkey’s Stable

Toolbar Paint 1.2.0 Build 2045 [email protected]

http://donkey.visualassembler.com Copyright © Edgar Hansen (Donkey) This manual and the software described in its free for any use as long as the source of the program is not misrepresented. It can be distributed with any package, including commercial software, without requiring permission. The manual and software is distributed as freeware and without any warranty including the implied warranty of merchantability or fitness for a particular purpose. The content of this manual is provided for informational use only and is subject to change without notice. Donkey.. assumes no responsibility or liability for any errors or inaccuracies that may appear in this documentation.

Chapter 1: Introducing Toolbar Paint About Toolbar Paint Features New in Version 1.2

About Toolbars and Image Lists Image Lists Toolbar Paint Bitmaps

Installing Toolbar Paint System Requirements

Chapter 2: Quick Start

1 1 1 2 2 2 3 3 4 5

Chapter 3: The Toolbar Paint Interface The Editing Canvas The Toolbar Preview The Button Preview Area The Info Section The Nudge Buttons The Drop Target Section The Status Bar The Menu Commands Color Swatches Foreground/Background Swatches Mask Color Preview Brush Size Controls

Chapter 4: Working with Toolbars Creating and Opening Toolbars

7 10 10 10 10 10 11 11 11 15 15 15 15 19 19

TOOLBAR PAINT USER GUIDE

v

CHAPTER 1

Adding Existing Images to a Toolbar Using the Button Manager Organizing Buttons on a Toolbar Creating Image Masks

Chapter 5: Working with Color Using the Color Palette Foreground and Background Colors The Picker Tool

Using the Color Dialog Box

Chapter 6: Creating Buttons The Painting and Drawing Tools The Image Effects Tools

Index

vi

20 21 23 24 25 25 25 26 26 29 29 33 35

TOOLBAR PAINT USER GUIDE

CHAPTER 1

Introducing Toolbar Paint Toolbars are one of the most dominant elements of Windows software interfaces, and most applications today use one or more toolbars as a main GUI component. Toolbar Paint has been expressly designed for software developers who are designing their own custom toolbars and is a tiny but powerful editor for quick toolbar manipulation.

About Toolbar Paint Using Toolbar Paint, you can load existing toolbars directly from executables and DLLs and create new toolbar bitmaps containing up to 64 buttons. Toolbar Paint’s bitmaps can be used in any Windows 32-bit programming environment and other environments that support the CC32API and the Imagelist API, including folderview or listview controls. Toolbar Paint includes the standard suite of drawing tools as well as image effect tools such as gradient and replace color. Note Plug-ins are available for Toolbar Paint for special image effects, saving a button as an icon file, and saving the entire toolbar image sequence as an animated icon .

Features The following features are included in Toolbar Paint: ‹ ‹

Supports 16 color, 256 color, 24 and 32 bit graphics Creates up to 64 buttons per image list TOOLBAR PAINT USER GUIDE

1

CHAPTER 1 ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹

Imports gif, jpg, ico file formats Creates button sizes from 16 to 48 pixels square Includes standard set of drawing tools and effects Optionally generates a mask when saving Loads toolbars directly from executables and DLL's Allows drag and drop buttons on the toolbar to reorder the toolbar image list Merges image lists Includes gray scale function for creating disabled button images

New in Version 1.2 The Button Manager allows you to create a thumbnail gallery of all valid button bitmaps, icons, or image lists in a chosen folder, with easy commands to place selected buttons in the current toolbar or create a new toolbar.

About Toolbars and Image Lists Toolbars have become an almost essential element of Windows GUI programming. In contrast to Menu bars, toolbars are comprised of a series of buttons identified by icons. Each separate icon has a user action defined for it. Toolbars are created in Windows 32-bit programming as an image list resource, using the Imagelist API.

Image Lists Image lists are arrays of images referenced by an index in the array and are primarily used as a repository for a program’s buttons, icons, and cursors. The images must be identically sized, and in GIF, BMP, or ICO file format. Although separate image files can be loaded into an image list, it is more 2

TOOLBAR PAINT USER GUIDE

INTRODUCING TOOLBAR PAINT

typical, and more efficient, to load an image file that consists of a series of images appended to each other horizontally. An image list can be used to create not only toolbars, but also tree-menus, list views, and tab controls. There are two types of image lists, masked and non-masked. Masked image lists contain images with transparent areas that allow any underlying color and images beneath the button to show through. The transparent areas are defined by a mask, or a black-and-white version of the color image. Areas colored black in the mask image define the transparent areas of the image. In a masked image list, two identically sized bitmaps are loaded, one with the series of color images, the other with the series of masks.

Toolbar Paint Bitmaps The bitmap images created by Toolbar Paint are created specifically for use in image lists and so can be used not only for toolbars, but for folderview and listview controls, and in any application utilizing the ImageList API. Toolbar Paint enables the creation of bitmaps in 16-color, 256-color, 24-bit and 32-bit color, using up to 64 buttons or icons, each with a size of up to 48 pixels square. Toolbar Paint can also create black-and-white versions of any toolbars for use as masks.

Installing Toolbar Paint After you have downloaded the Toolbar Paint zip file, you can easily install the application by decompressing the zip file. The zip file contains the application, and once you place the application file into a folder of your choosing, no further installation steps are needed. Double-click the application to start Toolbar Paint.

System Requirements TOOLBAR PAINT USER GUIDE

3

CHAPTER 1

Toolbar Paint runs on the following systems: ‹ ‹

4

Windows NT4.0 or Windows 95 (utilizes all functions except Gradient Fill). Windows 98 or higher (utilizes all functions).

TOOLBAR PAINT USER GUIDE

CHAPTER 2

Quick Start If you are comfortable with graphics and icon-editing programs, following these steps will get you started quickly with Toolbar Paint. See Figure 2-1: Key for Quick Start Instructions on page 6 to identify the buttons and commands mentioned in these steps. 1. 2.

3. 4. 5.

6. 7.

8.

Double-click the program icon to open Toolbar Paint. On the Tools palette, click the New file icon (A), and from the drop-down list, select the size of the buttons you want to use on your toolbar. The new toolbar is created with blank buttons. Click the Grid button (B) on the Tools palette to show the pixel borders on the editing window. Select a blank button (C) on the toolbar preview area at the bottom of the main editing window to begin creating a button. To draw and paint the icon for the button, first select a color on the Colors palette, or create a custom color by clicking the Choose Colors button (D) on the Tools palette to open the Color dialog box. Select a drawing or painting tool from the Tools palette (E). Click and drag as needed on the canvas to draw your icon. To preview the button on the bottom toolbar, click the Update button (F) on the Tools palette. This will update the toolbar with any recent changes you have made to a button. When you are finished creating icons for your toolbar, click the Save button (G) to save your file. The Save dialog box will allow you to choose the color depth you want to save your images with. TOOLBAR PAINT USER GUIDE

5

CHAPTER 2

Figure 2-1: Key for Quick Start Instructions

A

G

F

B

E

D C

6

TOOLBAR PAINT USER GUIDE

CHAPTER 3

The Toolbar Paint Interface The Toolbar Paint interface includes the editing window for editing buttons and toolbars, as well as two palettes, the Color palette and the Tools palette (see Figure 3-1: The Toolbar Paint Interface). The Color palette is used for selecting colors , while the Tools palette contains the drawing and painting tools as well as most of the commands you will use for creating toolbars. The Toolbar Paint interface is a fixed size, but can be moved or minimized as with any standard Windows programs. By default, the main window and two palettes are docked together, but you can choose to separate the palettes and move them to other areas of the screen by deselecting Options>Dock.

TOOLBAR PAINT USER GUIDE

7

CHAPTER 3

Figure 3-1: The Toolbar Paint Interface Color Palette

8

Main Editing Window

TOOLBAR PAINT USER GUIDE

Tools Palette

THE TOOLBAR PAINT INTERFACE

The Editing Window The main editing window displays the button editing canvas for creating and editing toolbar button icons and for previewing the final toolbar (see Figure 3-2: The Editing Window). Beneath the editing window is the preview of the current toolbar you are editing. The main editing window also contains previews for seeing what the icon looks like at its actual size

Figure 3-2: The Editing Window

Editing Canvas

Selected button displays in canvas

Toolbar Preview

TOOLBAR PAINT USER GUIDE

9

CHAPTER 3

The Editing Canvas The primary element of the editing window is the button editing canvas used to paint and draw your toolbar buttons. The size of the button editing canvas is fixed, but the image area you are using will be stretched to show the entire button within this area. The editing canvas is comprised of single-pixel squares, enlarged for easy viewing and editing.

The Toolbar Preview The toolbar preview shows the buttons of the entire toolbar in sequential order. The scrollbar arrows allow you to scroll through the length of the toolbar. Selecting a square on the toolbar loads that button for editing in the canvas.

The Button Preview Area The button preview area displays the button you are working on at its actual size and updates immediately as you edit it. Additionally, if you are working on toolbars with buttons sized 24 pixels by 24 pixels or less, a second preview at twice the actual size will be displayed.

The Info Section The info section displays the size in pixels of the current button, and its position on the toolbar.

The Nudge Buttons The four Nudge buttons allow you to move the entire contents of the button editing canvas up, down, left, and right, one pixel at a time. As content moves off the screen, its color information is discarded. 10

TOOLBAR PAINT USER GUIDE

THE TOOLBAR PAINT INTERFACE

The Drop Target Section The drop target section allows you to load an existing toolbar bitmap directly into Toolbar Paint by dragging the bitmap file icon from your Windows desktop onto the target symbol.

The Status Bar The Status bar displays the following information about the current file and icon you are working on. Filename. The name and icon for the current toolbar file you are working on is shown on the far left of the Status bar. Cursor position. The middle section of the Status bar displays the current or most recent pixel position of the cursor on the canvas in x/y coordinates. RGB value. The far right section of the Status bar displays the RGB value in hexadecimal notation of the current or last selected pixel.

The Menu Commands The menu commands include standard commands for opening and saving files, cutting and pasting content, and setting preferences. As with many Windows programs, the menu commands duplicate many of the commands accessed through the program’s toolbars, in this case the Color and Tools palettes, but also contain some options not found elswhere.

TOOLBAR PAINT USER GUIDE

11

CHAPTER 3

The File Menu

The File menu gives you access to basic commands for opening and saving files and closing the program. For a description of the File menu commands, see Table 1 below.

Table 1: File Menu Commands COMMAND

DESCRIPTION

Open toolbar bitmap

Allows you to open an existing toolbar Allows you to open a toolbar from a list of recently worked on toolbar files Saves any changes made to the active file Closes the Toolbar Paint program

Recent files Save toolbar bitmap Exit

The Edit Menu

The Edit menu provides standard commands for cutting and pasting. For a description of the Edit menu commands, see Table 2 below.

Table 2: Edit Menu Commands COMMAND Copy Paste Undo Import image

12

DESCRIPTION Copies the currently selected pixels on the canvas to the clipboard Pastes the contents of the clipboard to the upper left corner of the canvas Allows you to undo up to the last 16 actions by selecting from a thumbnail gallery of the recent states of the current button Allows you to import existing images that are in the GIF, ICO, or JPG file formats

TOOLBAR PAINT USER GUIDE

THE TOOLBAR PAINT INTERFACE

The Options Menu

The Options Menu allows you to set or turn off several options and view information about the program. When an option is set, a checkmark displays by its name. For a description of the Option menu items, see Table 3 below.

Table 3: Option Menu Commands COMMAND Dock Autoscroll Create mask Autoload library Phoenity buttons Load last file Save position

DESCRIPTION Allows you to dock the Tool and Color palettes to the main editing window. Deselecting Dock allows you to move the palettes anywhere on the screen. Enables the toolbar preview to scroll automatically if your cursor is over one of the toolbar arrows. Saves a black-and-white version of your toolbar that you can use for creating masked image lists. Remembers the currently loaded button library to open it automatically in future sessions when the Button Manager is opened. Substitutes the Toolbar Paint interface buttons and icons with the Phoenity icon set, on restart. Loads the most recently worked on toolbar when Toolbar Paint opens. Positions the editing window and palettes at the positions used in the last Toolbar Paint session.

TOOLBAR PAINT USER GUIDE

13

CHAPTER 3

The Color Palette The Color Palette provides quick access for selecting drawing and painting colors and the brush size you want to use (see Figure 3-3: The Color Palette).

Figure 3-3: The Color Palette

Color Swatches First two columns of swatches are presets; second two columns are reserved for your custom colors

Foreground/Background colors Brush size Mask Color

14

TOOLBAR PAINT USER GUIDE

THE TOOLBAR PAINT INTERFACE

Color Swatches The color swatches section contains 28 preset colors to select from for using with the drawing, painting, and image effects tools. The swatches also contain 28 blank swatches for storing custom colors. For information on creating custom colors, see “Using the Color Dialog Box” on page 26.

Foreground/Background Swatches The foreground/background preview area displays the current foreground color on the top swatch and the current background color in the lower swatch. For more information on foreground and background colors, see “Foreground and Background Colors” on page 25.

Mask Color Preview The Mask Color preview, displayed only when Create Mask option is selected, shows the color that will be used in creating the images in the toolbar image mask. The color default is white. For information on creating masks, see “Creating Image Masks” on page 24.

Brush Size Controls The brush size spin box allows you to choose the size in pixels of the paint brush or beveled knife tool, up to 16 pixels.

TOOLBAR PAINT USER GUIDE

15

CHAPTER 3

The Tools Palette The Tools palette is composed of buttons for the main commands you will use in Toolbar Paint, for file manipulation, image editing and effects, and toolbar editing. For a description of each button, see Table 4 below.

Table 4: Tools Palette Button Commands BUTTON

16

FUNCTION

DESCRIPTION

New Toolbar

Opens a new toolbar with blank buttons

Save

Saves the current toolbar

Open

Allows you to open an existing toolbar

Load From Resource

Allows you to browse to a resource such as an exe or DLL file and load its buttons and icons

Toolbar Info

Displays information about the current toolbar

Button Manager

Opens the Button Library

Update

Updates the current button with any recent changes

Grid

Turns on a grid with horizontal and vertical rules in 1-pixel increments

Pointer

Returns the cursor to its default state

Select

Allows you to select rectangular portions of the image

TOOLBAR PAINT USER GUIDE

THE TOOLBAR PAINT INTERFACE

Table 4: Tools Palette Button Commands BUTTON

FUNCTION

DESCRIPTION

Copy

Copies any currently selected portion of the icon image to the clipboard

Paste

Pastes the last item copied to the icon editing canvas

Cut

Removes any currently selected portion of the icon image, and copies it to the clipboard

Undo

Allows you to choose up to 16 undos

Draw

Enables you to draw a freeform line on the canvas

Brush

Allows you to paint freeform areas of color on the canvas

Line

Allows you to draw a straight line

Text

Allows you to type text onto the canvas

Knife

Allows you to paint with a specially shaped paintbrush base with jagged edges

Erase

Enables you to erase pixels

Fill

Enables you to fill areas of the canvas with a single color

Gradient Fill

Allows you to fill a selection with a two-color vertical or horizontal gradient

Shapes

Allows you to create ellipses and rectangles

TOOLBAR PAINT USER GUIDE

17

CHAPTER 3

Table 4: Tools Palette Button Commands BUTTON

18

FUNCTION

DESCRIPTION

Exchange Colors

Replaces any areas using the foreground color with the background color

Invert Image

Inverts all colors on the button to their opposite on the color wheel

Flip Image

Allows you to flip the entire canvas horizontally or vertically

Grayscale

Converts the existing icon image to grayscale.

Picker

Allows you to select a color on the canvas canvas to use as the Foreground or active color

Choose Color

Allows you to create custom colors

Add Image

Begins a new toolbar button for editing

Insert Image

Allows you to insert a new button between two existing buttons on the toolbar

Clear

Removes any existing color information on the current button

Delete

Deletes the current button from the toolbar

TOOLBAR PAINT USER GUIDE

CHAPTER 4

Working with Toolbars By default, Toolbar Paint starts with a new blank toolbar ready to edit. To automatically load the last edited toolbar instead, select the Load last file option from the Options menu.

Creating and Opening Toolbars There are several ways to start a new toolbar in Toolbar Paint. You can start with a blank toolbar and buttons to create your own unique icons; or you can load existing resources to work with. To create a new toolbar with blank canvases for buttons: 1. 2. 3.

Click the New Toolbar button on the Tools palette From the New Toolbar dropdown menu, select the pixel size you want your buttons to be. If you want to use a custom size, click Custom Size. The Custom Size dialog box will open. Enter the pixel size you want your buttons to be in the spin box and click OK. Note The maximum pixel size of a Toolbar Paint button is 48 pixels by 48 pixels.

4.

If there is an existing toolbar loaded in Toolbar Paint, you will be asked if you want to copy the current images into the new toolbar. Click No. The new toolbar with blank buttons will load into the Toolbar Paint main window. TOOLBAR PAINT USER GUIDE

19

CHAPTER 4

To create a new toolbar using existing icon resources: 1. 2.

3.

4.

Click the Load from Resource button on the Tools palette. The Load from Resource screen will open. Click the Open File button, and browse to the location of the executable file (EXE or DLL) that you want to extract the icon resources from. Select the executable and click Open. The Resource screen will open with any image resources listed in the Resource table. From the table, select the resource you want to load. A preview of the icons in the resource will load below the Resource table. Click OK to load the resources icons.

To open an existing toolbar: 1. 2. 3.

Click the Open button on the Tools palette. Alternately, from the File menu, select the Open command. The Open Toolbar Bitmap dialog box opens. Browse to the location your file is located in, and select the filename in the list contents window of the dialog box. Click Open. The toolbar will load into Toolbar Paint.

To save a toolbar: When you are finished creating icons for your toolbar, click the Save button on the Tools palette to save your file. The Save dialog box will allow you to choose the color depth you want to save your images with.

Adding Existing Images to a Toolbar Once you have created your toolbar, Toolbar Paint allows you to add buttons from existing bitmaps or import images of the JPG, GIF, or ICO file formats. To add existing bitmap images to a toolbar: 20

TOOLBAR PAINT USER GUIDE

WORKING WITH TOOLBARS

1. 2. 3. 4.

Click the Open button on the Tools palette. The Open Toolbar Bitmap dialog box opens. Browse to the location the bitmap image is in, and select the filename in the list contents window of the dialog box. Select the Append to toolbar checkbox at the bottom of the dialog box, and click Open. The new image bitmap will be added to the next available button slot in the toolbar. Note New bitmap image files being added to an existing toolbar must be the same height and width in pixels as existing buttons. Otherwise, a new toolbar will be created housing the single new bitmap image.

To import a JPG, GIF, or ICO image file: 1. 2.

From the Edit menu, select the Import image command. The Open image file dialog box opens. Navigate to the file you want to import, and click Open. The image will be appended to the current toolbar. If the image is larger than the toolbars specified button size, you will be given the option of resizing the image to fit the button.

Using the Button Manager The Button Manager enables you to load all valid image list resources located in a specific directory on your system, including resources from separate executables. You can then easily select buttons from the library as you need them to insert in the current toolbar. To load a button library: TOOLBAR PAINT USER GUIDE

21

CHAPTER 4

1. 2. 3.

Click the Button Manager button on the Tools palette. The Button Library window opens Click the Select Library button. The Select path dialog box opens. Navigate to the directory your resources are in and click OK. All valid buttons in the directory will load in the Library window.

To create a new toolbar using images from the Button Library: 1. 2. 3.

Click the Button Manager button on the Tools palette. The Button Library window opens. Keeping the Ctrl key pressed, select the buttons you want to use in the toolbar from the contents window. Make sure that the Append to file checkbox is unchecked, and click Use Images. A new toolbar will open with the selected buttons in place.

To add a button from the Button Library: 1. 2. 3.

4.

Click the Button Manager button on the Tools palette. The Button Library window opens. Select a button (use the Ctrl key to select multiple buttons) from the contents window. Select the Append to file checkbox, and if the image you are selecting is smaller than your toolbar button specification, select the Stretch to fit checkbox. Click Use Images. The image you selected is added to the next available slot in the toolbar.

Organizing Buttons on a Toolbar 22

TOOLBAR PAINT USER GUIDE

WORKING WITH TOOLBARS

Toolbar Paint makes it easy to add, rearrange and insert buttons into any existing toolbar. To add a blank button to edit on the toolbar: You can add new buttons to the Toolbar in one of two ways: ‹

‹

Click the Add image button on the Tools palette. A blank button, indicated by a white square, will appear in the next available slot on the toolbar preview Click on a grey square on the toolbar preview. This adds a white blank button on the next available slot on the toolbar preview.

To insert a blank button between existing buttons: 1. 2.

On the toolbar preview, select the button that you want to be to the right of the inserted button Click the Insert Image button on the Tools palette. A white blank button will be inserted to the left of the previously selected button.

To change the placement of a button on the toolbar: Click and drag the button you want to move on the toolbar to its new position. To delete a button from the toolbar: 1. 2.

Select the button you want to delete on the toolbar preview. Click the Delete button on the Tools palette. A warning message will ask you to confirm that you want to remove the image. Click OK.

Creating Image Masks TOOLBAR PAINT USER GUIDE

23

CHAPTER 4

If you want areas of your toolbar to be transparent and have any underlying areas of your application window show through, you will need to create an image mask. A toolbar image mask is a black-and-white version of your toolbar bitmap. The black areas of the bitmap define the transparent areas of your toolbar, and the white areas define the portions of your toolbar that retain your images. Toolbar Paint will automatically create a mask bitmap of your toolbar when you select the Create Mask option under the Options menu. The mask bitmap is saved with the characters “_msk” appended to the original bitmap filename, and is not accessible until you have saved your original bitmap image. When you enable the Create Mask option, the Colors palette will display a Mask colors section. The color defined here will be used by Toolbar Paint as the black, or transparent, area of the mask bitmap. You can define the color used as the mask by double-clicking on the Mask color icon. To create an image mask bitmap: 1. 2.

3.

4.

24

In the Options menu, select Create Mask. Double-click the Mask color icon in the Colors palette. When you move the cursor over the canvas, it will change to an eyedropper tool. On the canvas, click on the color you want to use as the mask color. Any area of the icon using this color will be transparent on the final imagelist using the bitmap mask. When you are finished editing your toolbar, click the Save button on the Tools palette, and select the location and filename for your original toolbar

TOOLBAR PAINT USER GUIDE

CHAPTER 5

Working with Color Toolbar Paint provides several ways to add color to your icons. You can select a preset color from the Color palette, or create a custom color using the Choose Color command on the Tools palette.

Using the Color Palette The Color palette contains 28 preset colors that represent the cross-platform VGA color palette for you to use in creating icons. The VGA colors are the few colors ensured to be the same across different operating systems, hardware, and the Web. To select a color, click on the color swatch on the palette. The color you select will be used when you use any of the drawing or painting tools until you choose a new color. The Color palette has an additional 28 blank swatches which you can fill with custom colors of your choice. To learn more about custom colors, see “Using the Color Dialog Box” on page 26.

Foreground and Background Colors Any color you select will appear as the foreground color in theForeground/ Background Colors area of the Colors palette. The foreground color always represents the active color that is being drawn or painted with. The background color, which is white by default, is used as a second color in twocolor image effects, and also for an image mask. (To learn more about image masks, see “Creating Image Masks” on page 24.)

TOOLBAR PAINT USER GUIDE

25

CHAPTER 5

A foreground color, used for the primary painting and drawing tools, is selected by clicking on a color swatch. A background color, used mainly in image effects that use two colors, is selected by right-clicking a color swatch. Double-clicking the Foreground/Background swatches will reverse the two colors. Many of the drawing tools in the Tools Palette will use the Background color if the tool is implemented with a right-click.

The Picker Tool You can also select an existing color in the canvas by using the Picker tool on the Tools palette. When you click the Picker tool button, the cursor will change to an eyedropper icon as you hover over the canvas. Click on the canvas to select a color. This color will become the foreground color and be ready to use with any other drawing or painting tool.

Using the Color Dialog Box You create custom colors through the Color dialog box (Figure 5), which you can access through the Choose Color button on the Tools palette. The Color dialog box has several ways for you to choose colors: ‹ ‹ ‹ ‹

Select one of the 48 color swatches in the Basic Color section. Selecting a color from the Color wheel and adjusting lightness on the luminosity slider. Entering values in the Hue/Saturation/Luminosity boxes. Entering values in the RGB boxes.

Once you have selected a color and clicked the OK button, the color will replace the current Foreground color and be ready to use with any drawing or painting tool.

26

TOOLBAR PAINT USER GUIDE

WORKING WITH COLOR

Figure 5-1: The Color Dialog Box

If you will be using a custom color repeatedly, you can save the color to the Color dialog box custom colors swatches, or to the Color Palette to use in any toolbar. To add a custom color to the Color dialog box: 1. 2.

Open the Color dialog box by clicking the Choose Color button on the Toolbar palette. Under Custom Colors, select the swatch you want to add the custom color to. TOOLBAR PAINT USER GUIDE

27

CHAPTER 5

3. 4.

Select a color using the Color Wheel, or the HSL or RGB value boxes. Click Add to Custom Colors. The color swatch chosen previously will display the color you have created. It will be available for use whenever you open the Color dialog box.

To create a custom color on the Color palette. 1. 2. 3.

28

Double-click one of the 28 additional swatches (not the VGA preset colors) on the Color palette. Select a color using the Color Wheel or the HSL and RGB value boxes. Click OK. The color will be added to the swatch selected in Step 1.

TOOLBAR PAINT USER GUIDE

CHAPTER 6

Creating Buttons Whether you are starting from scratch with blank buttons, or modifying existing icons and resources, Toolbar Paint’s drawing, painting, and image effects features provide all the tools you need to create professional toolbar buttons.

The Painting and Drawing Tools Toolbar Paint utilizes the standard suite of drawing and painting tools: the paintbrush; pencil (draw); and line tool, as well as a custom bevel knife tool that creates a jagged path. To use any of the tools, click the tool on the Tools palette, and then click and drag on the button editing canvas. The following four tools paint or draw by default with the Foreground color; to use the Background color instead, right-click the mouse as you click and drag the tool on the canvas.

The Draw tool

The Draw tool draws a single-pixel width freeform line wherever the cursor is dragged to, using the Foreground color.

The Brush tool

The Brush tool paints the Foreground color using a round base shape with a diameter of the width specified on the Color palette’s Width spin-box.

The Line tool

The Line tool draws a 1-pixel wide straight line using the Foreground color. To use the Line tool, first select it, and then click the starting point on the canvas, without releasing the mouse button. Continue to hold the mouse TOOLBAR PAINT USER GUIDE

29

CHAPTER 6

button down as you drag the direction you want the line to follow. When you reach the end-point of the line, release the mouse button.

The Text tool

The Text tool allows you to type text onto the canvas. Clicking the Text tool and selecting the point on the canvas where you want the text to be placed brings up the Font dialog box, from which you can choose any font available on your system, as well as font size and style, and enter the text you want placed.

The Knife tool

The Beveled Knife tool operates identically to the Brush tool, except its base shape is a cross, whose diameter you can specify on the Color palettes’ Brush size spin-box.

The Erase tool

The Erase tool is used similarly to the Draw tool, except that it reverts the pixels drawn over to the mask color, which by default in Toolbar Paint is white. For more information on masks, see “Creating Image Masks” on page 24.

The Shapes tool

The Shapes tool allows you to draw elliptical and rectangular shapes with 1pixel wide borders on the canvas. There are four shape styles to choose from: Elliptical, Rectangular, Filled Elliptical, and Filled Rectangular. The Elliptical and Rectangular tools will create the shape using the foreground color for its border, and a transparent center. Using a filled shape, the center of the shape will be filled with the current background color. To create a rectangle or ellipse: 1. 30

Click the color you want to use as the shape’s border.

TOOLBAR PAINT USER GUIDE

CREATING BUTTONS

2. 3. 4.

Click the Shapes tool on the Tools palette and select Rectangle, or Ellipse, from the drop-down menu. On the canvas, click where you want to place the top left corner of the shape, and keep the mouse button pressed. Drag the cursor to the point where you want to place the lower-right corner of the shape. As you drag the cursor, a dotted line will display to show you the border and shape you are creating. Note To create a circle or square, keep the Ctrl button pressed while you drag the cursor

5.

When you are satisfied with the position of the shape, release the mouse button. The shape will be inserted, using the Foreground color as its border.

The Selection tool

The Selection tool allows you to select any rectangular area of the canvas, which you can then cut or copy and paste, or fill with a color or gradient fill. To remove an area of the canvas using the Selection tool: 1. 2. 3.

Click the Selection tool on the Tools palette Click and drag to select a rectangular area on the canvas Click the Cut tool on the Tools palette. The portion cut will be saved to the clipboard should you want to paste it elsewhere.

To copy and paste an area of the canvas using the Selection tool: 1. 2. 3.

Click the Selection tool on the Tools palette. Click and drag to select a rectangular area on the canvas. Click the Copy tool on the tools palette.

TOOLBAR PAINT USER GUIDE

31

CHAPTER 6

4. 5. 6.

Click the Paste button on the palette. The rectangular area copied will be pasted to the top left of the canvas area. Click and drag the pasted area to move it where you want on the canvas. When you are finished positioning the pasted area, click the Pointer button on the Tools palette.

The Fill tool

The Fill tool replaces contiguous areas of the canvas that use the same color with the foreground color.

The Gradient Fill tool

The Gradient Fill tool places a gradient fill into either the entire canvas or into a selection made by the Selection tool. It uses the Foreground color as the top color in a vertical gradient, or the leftmost color in a horizontal color, and the Background color as the bottom or right most color. To create a vertical gradient fill in a selected area: 1. 2. 3. 4.

32

Click on a swatch to set the Foreground color, which will be the top color of the gradient fill. Right-click on a swatch on the Color palette to set the Background color, which will be the bottom color of the gradient fill. Click the Selection tool, and click and drag on the canvas to select the rectangular area you want to fill with the gradient. With the selection still active, click the Gradient Fill button on the Tools palette, and select Fill Vertical from the drop down menu. The selected area will be filled with a gradient using the two selected colors.

TOOLBAR PAINT USER GUIDE

CREATING BUTTONS

The Nudge Buttons

The Nudge buttons are four pointers you can use to move the image on the canvas up, down, left and right by one pixel at a time. As the image moves off canvas, the color information on those pixels is removed.

The Undo Command

At any point in your drawing you can use the Undo command to access the last 16 actions you performed, and revert to any of these stages. Clicking the Undo button on the Tools palette opens the Undo window, which displays thumbnails showing the last 16 states of the icon, after the last 16 actions. To revert to a state, simply click the thumbnail on the window, and the icon will revert to this state.

The Image Effects Tools In addition to the drawing and painting tools for manipulating your images, Toolbar paint features additional effects to apply to your buttons.

Exchange Colors

The Exchange Colors command will replace any areas of the button using the foreground color with the background color.

Invert Image

The invert Image button inverts all colors on the button editing canvas to their opposite on the color wheel.

Flip Image

The Flip Image button allows you to flip the entire canvas horizontally or vertically.

TOOLBAR PAINT USER GUIDE

33

CHAPTER 6

Grayscale

The Grayscale button converts the colors of the existing icon image to grayscale. Each successive click of the button will darken the value of gray used for each color.

34

TOOLBAR PAINT USER GUIDE

Index A

C

Add Image command 18 Autoload library command 13 Autoscroll command 13

canvas, button editing. See button editing canvas Choose Color command 18 circles, creating 31 Clear command 18 color depths selecting for toolbar 20 supported in Toolbar Paint 3 Color dialog box 26 –28 adding custom colors to 27 Color palette 7 , 14 –15 , 25 –26 color swatches 15 blank swatches 15 , 25 custom colors 15 preset colors 15 , 25 VGA colors 25 colors changing to grayscale 34 creating custom 26 –28 exchanging 33 inverting 33 commands. See menu commands Copy command 12 copying and pasting 32 Create mask command 13 , 15 creating toolbars. See toolbars, creating.

B background color 15 , 25 –26 Exchange Colors command and 18 , 33 in gradient fill 32 painting and drawing with 29 reversing with foreground 26 setting 26 using to fill shapes 31 bitmap images, loading 21 brush size controls 15 Brush tool 29 setting brush size 15 button editing canvas 9 , 10 Button Library. See Button Manager Button Manager 2 , 21 –22 adding buttons to toolbars 22 autoloading library 13 creating button library with 22 creating toolbars with 22 button preview area 10 buttons, toolbar. See toolbar buttons.

TOOLBAR PAINT USER GUIDE

35

INDEX

D

G

Delete command 18 deleting buttons 23 canvas areas 31 Dock command 7 , 13 Draw tool 29 drop target section 11

GIF format, importing 20 , 21 Gradient Fill tool 32 Grayscale command 18 , 34

E Edit menu. See menu commands. editing window 7 , 9 –13 ellipses, creating 31 Erase tool 30 Exchange Colors command 18 , 33 Exit command 12 eyedropper. See Picker tool.

F File menu. See menu commands. Fill tool 32 Fill, gradient. See Gradient fill. Flip Image command 18 , 34 folderview controls 1 foreground color 15 , 25 –26 Exchange Colors command and 18 , 33 in gradient fill 32 reversing with background 26 setting 26 foreground/background swatches 15

36

I ICO format, importing 20 , 21 image effects 33 image lists 2 –3 file formats and 2 Imagelist API 1 , 2 masked 3 image masks 3 , 24 and create mask command 13 creating bitmaps for 24 default mask color 15 defining color for 15 Imagelist API 1 , 2 images, importing. See importing images Import image command 12 importing images 12 , 21 info section 10 Insert Image command 18 inserting text 30 Invert Image command 18 , 33

J JPG format, importing 20 , 21

TOOLBAR PAINT USER GUIDE

K

undocking 7 Paste command 12 pasting. See copying and pasting Pencil tool. See Draw tool Phoenity buttons command 13 Picker tool 18 , 26

Knife tool 30 setting brush size 15

L Line tool 30 lines, drawing 30 listview controls 1 Load last file command 13

Recent files command 12 rectangles, creating 31

M

S

masks. See image masks. menu commands 11 –13 Edit menu 12 File menu 12 Options menu 13

Save position command 13 Save toolbar bitmap command 12 Selection tool 31 Shapes tool 30 squares, creating 31 Status bar 11 swatches, color. See color swatches

R

N Nudge buttons 10 , 33

T

O Open toolbar bitmap command 12 Options menu. See menu commands.

P Paint tool. See Brush tool. palettes Color. See Color palette. Tools. See Tools palette

Tab controls 3 Text tool 30 toolbar buttons adding from Button Library 22 changing order on toolbar 23 creating 29 –34 deleting 23 inserting into toolbar 23 organizing 23

TOOLBAR PAINT USER GUIDE

37

INDEX size limits 3 Toolbar Paint about 1 bitmaps 1 , 3 CC32API and 1 color depths supported 3 features 1 –2 Imagelist API and 1 installing 3 interface 7 –18 plug-ins 1 quick start instructions 5 starting application 3 system requirements 4 toolbar preview 10 toolbars adding existing images to 20 –22 as GUI component 1

38

buttons. See toolbar buttons. creating 19 –24 with blank buttons 19 with Button Library 22 with existing resources 20 general 2 loading directly from resources 1 opening 20 saving 20 Tools palette 7 , 16 –18 tree menus 3

U Undo command 12 , 33

V VGA colors 25

TOOLBAR PAINT USER GUIDE

http://donkey.visualassembler.com