Welcome to WebDraw

Jasc® WebDraw™ is a Scalable Vector Graphics (SVG) authoring program, delivering all the tools and editing features you need to start learning and using the Web's hottest new graphics format. A text-based format, SVG files can contain vector graphics shapes, images, text, animation and interactive events, and are compatible with common Web technologies such as HTML, XML, JavaScript and Cascading Style Sheets.

WebDraw combines the standard graphic design tools found in traditional illustration and animation programs with convenient source code editing similar to that in Web site creation programs, delivering a complete solution for authoring SVG files with graphics and animation.

But, unlike traditional graphics or animation programs that may only export SVG files, WebDraw uses SVG as its native file format. This gives you the highest level of control over your SVG files and ensures that your final graphics and animations are optimized to take full advantage of this exciting new content format.

With WebDraw, you can:

  • Create high-quality SVG graphics with standard visual design tools

  • Add attribute-level animation with the object-based timeline

  • Edit the SVG source code directly for maximum control and flexibility

  • Ensure code accuracy with automatic SVG source validation and error reporting

  • Add sophistication to vector graphics with gradients, patterns and filter effects

  • Import and edit SVG files created with other graphics programs

For more information about WebDraw and links to SVG resources, be sure to visit the WebDraw product pages on the Jasc Software Web site at http://www.jasc.com/products/webdraw/.

see also:

Contacting Jasc Software


Contacting Jasc Software

We strongly encourage you to report any problems you have with WebDraw, as well as any suggestions you have for improving the application.

The table below provides the mailing address, e-mail links, and Web sites you can use to reach us.

Mailing Address |
Jasc Software, Inc. |
7905 Fuller Road |
Eden Prairie, MN 55344 USA |
E-mail Addresses |
Report a Problem | webdrawbugs@jasc.com
Ideas and Feature Requests | webdraw@jasc.com
Jasc Web Site |
Corporate Web Site | www.jasc.com
User Forum |
WebDraw Forum | news.jasc.com/WebDraw

see also:

Purchasing WebDraw


Touring the User Interface

Shown below is a screen capture of the WebDraw user interface. The important elements of the interface are pointed out. For more information about these elements, choose the desired link below the picture. (*Note: The actual display of the interface will depend on your display settings.)

See also:

Document Window

Properties Palette

Document Object Model Palette

Overview Palette

Timeline Palette

Tool Palette

Tool Options Bar

Toolbar


New

Create a new WebDraw document as described below.

  1. Choose File > New, or click the New button [image] on the toolbar, or press <Ctrl> + <N>. The "New Image" dialog box, shown below, will appear.

  2. From the drop down boxes on the right, choose the desired unit type, and then enter the width and height for the file. Click OK to close the dialog.

Note: If you are unfamiliar with using the numeric edit controls on this or any other dialog box, refer to the related topic below.

A blank document of the dimensions you specified will appear in the workspace. You can now begin adding objects to the document.

SEE ALSO:

Opening a File

Using Numeric Edit Controls


Open

Open a file into WebDraw as described below.

  1. Choose File > Open, or click the Open button [image] on the toolbar, or press <Ctrl> + <O>. The Open dialog box, shown below, will appear.

  2. In the Open dialog box, navigate to the folder containing the file you wish to open.

  3. Select the file, and then click Open. The image will open in the WebDraw workspace.

SEE ALSO:

Closing a Document

Creating a New Document


Close

To close a file, choose File > Close, or click the Close button [image] in the upper right corner of the file's title bar.

If multiple files are open, you can close them all by choosing Window > Close All. When closing a file, you will be prompted to save any previously unsaved modifications.

see also:

Closing All Open Files


Revert

The Revert command allows you to remove all changes made to a file since it was last saved. After modifying the file, choose File > Revert to remove the modifications.

Note: This command is not available until you alter the saved file.

see also:

Undoing Actions


Save

To save a WebDraw document, choose File > Save, or click the Save button [image] on the toolbar, or press <Ctrl> + <S>. If the file has not yet been saved, the standard Windows Save As dialog box will appear. Use this dialog box to choose a destination and enter a file name.

To save the current file under a different name, choose File > Save As.


Save As

Use the Save As command to save a file to a different file name. When you choose File > Save As, the standard Windows Save As dialog box opens. Use this dialog box to navigate to the desired folder, and then enter a new file name.


Export > Raster Image

Export your WebDraw document as either a Windows Bitmap (.BMP) or a JPEG file as described below.

  1. Choose File > Export > Raster Image. The Save As dialog box will appear.

  2. Navigate to the folder where you wish to export the bitmap.

  3. In the "Save as type" drop down list, choose either the .BMP format or the .JPG format, and then click Save.


Print

To print a file, choose File > Print, or click the Print button [image] on the toolbar, or press <Ctrl> + <P>. The standard Windows Print dialog box will appear. Use this dialog box to set printing options, and then click OK to print the document.

see also:

Previewing a Document for Print

Setting up the Printer


Print Preview

To preview what the printed image will look like, choose File > Print Preview. The file will be displayed in the preview dialog box that appears.

Using the Print Preview Dialog Box

The preview dialog box displays the current WebDraw document in the currently selected page orientation. The six buttons across the top of the dialog include:

  • Print: Click this button to close the print preview window and display the Print dialog box.

  • Next Page: If your document spans multiple pages, click this button to display the next page.

  • Prev Page: If you have clicked the Next button, click this button to display the previous page in a multi-page document.

  • Two Page / One Page: If your document spans multiple pages, click this button to display pages side by side. After clicking this button, its label will change to "One Page" -- click this to return to a single-page display.

  • Zoom In: Click this button to zoom in on the document.

  • Zoom Out: Click this document to zoom out on the document.

  • Close: Click this button to close the preview dialog box.


Print Setup

To set up your printer's options, choose File > Print Setup. The standard Windows Print Setup dialog box will appear. Use this dialog box to choose settings for your printer. This can save you time if you wish to use non-standard printer settings when using the Print command.


Other Jasc Products

If you have other Jasc applications installed on your computer, you can start them up from within WebDraw by choosing File > Other Jasc Products, and then selecting the installed application you wish to start up. Be aware of the following points:

  • Only Jasc products installed on your computer can be selected and launched. Uninstalled products will appear grayed out. (See the graphic below.)

  • Starting up another Jasc product through this menu item will start up the most recent version of that application. For example, if you have versions 6 and 7 of Paint Shop Pro installed, choosing File > Other Jasc Products > Paint Shop Pro will start up version 7.

An Example

The graphic below shows an example of this menu item. Note that Image Robot (shown grayed out) is not installed.


Preferences > General Program Preferences

Choosing File > Preferences > General Program Preferences provides access the following WebDraw preferences:

  • File Locations: Allows you to assign external applications to launch when you wish to view or edit a file's source code, or view a file in a Web browser.

  • Rulers and Units: Allows you to define the way rulers, grids, and guides appear on the canvas.

  • Tool Drag: Allows you to set the behavior of the left and right mouse buttons, as well as their behavior when used in conjunction with the <Shift> and <Ctrl> keys.

  • Source Format: Allows you to set options affecting source code appearance and layout when viewed in the Document window's Source tab, or in an external text editor application.

For information on each tab, click the desired link below.

See also:

File Locations Preferences

Rulers and Units Preferences

Tool Drag Preferences

Source Format Preferences


Preferences > Source View Preferences

Choosing File > Preferences > Source View Preferences displays the "Font and Color Settings" dialog, shown below. This dialog allows you to choose settings that define the display of a variety of source code elements.

Using the Source View Font and Color Settings Items

Use the items in this dialog as described below.

  1. From the list on the left side of the dialog, choose a source code element by clicking it.

  2. To choose a text color for the element, click the Foreground color box. From the palette that appears, click a color to select it. The "Sample" area in the right side of the dialog (see graphic above) previews your choice. *Note: Mark the "Automatic" check box if you wish to use the default text color (black).

  3. To choose a text background color for the element, click the Background color box. From the palette that appears, click a color to select it. The "Sample" area in the right side of the dialog (see graphic above) previews your choice. *Note: Mark the "Automatic" check box if you wish to use the default text background color (white).

  4. To use a font and point size other than the default (10 point Courier), click the "Choose Font" button. The Font dialog appears (shown below). Choose the desired font and point size from the lists. Note that the available fonts are all "monospaced" fonts like Courier.

Reset All Button

To reset the items in this dialog to their default settings, click the Reset All button.

see also:

Source Format Preferences

Source Tab


Recently Opened Files

Listed above the Exit command are the most recently opened files in WebDraw. To open one of these, simply click the desired filename.

The most recently closed file will appear at the top of this list. Note, however, that if you just installed WebDraw and have not yet opened or created any files, the list will be empty.


Exit

To exit WebDraw, use any of the following methods:

  • Choose File > Exit,

  • Click the Close button [image] in the upper right corner of the WebDraw application title bar,

  • Double-click the WebDraw application icon [image] in the upper left corner of the application title bar.

If any open files have unsaved modifications, you will be prompted to save the changes before exiting.


Undo

To return the WebDraw file to its state prior to the most recent operation, choose Edit > Undo, or click the Undo button [image] on the Toolbar, or press <Ctrl> + <Z>. Be aware of the following points about the Undo command:

  • You can continue choosing Undo to undo all actions since the most recent save.

  • You cannot undo basic file management actions such as saving, printing, opening, etc.

see also:

Command History

Redoing Actions

Deleting Objects


Redo

To reapply the most recently undone action, choose Edit > Redo, or click the Redo button [image] on the Toolbar, or press <Ctrl> + <Y>.

see also:

Undoing Actions

Command History


Command History

To view a list of actions performed on the WebDraw file since it was last saved, and if you wish, undo several contiguous actions simultaneously, choose Edit > Command History, or press <Ctrl> + <Shift> + <Z>. The Command History dialog, an example of which is shown below, will appear.

Using the Command History Dialog

  1. Using the mouse or the arrow keys, select an action (or contiguous actions) to undo or redo. *Note: You cannot selectively choose any action in the list to undo/redo. For example, you could not choose action number 31 in the above graphic and undo just that action. If you were to click action number 31, all undoable actions after number 31 (32, 33, and 34) would also be selected.

  2. Click the Undo/Redo button to undo/redo the action(s). *Note: If you select actions labeled "Undo," the button will be labeled Undo; if you select actions labeled "Redo," the button will be labeled Redo.

Note: To undo all the changes made since the file was last saved, choose File > Revert.


Cut

To cut a selected object from the canvas or selected text from the source view, choose Edit > Cut, or click the Cut button [image] on the Toolbar, or press <Ctrl> + <X>. The contents will be removed from the file and placed on the clipboard. You can then use the Paste command to place the clipboard contents in the current file, or in another WebDraw file, or in an external application such as a text editor.

see also:

Paste

Copy


Copy

To copy a selected object from the canvas or selected text from the source view, choose Edit > Copy, or click the Copy button [image] on the Toolbar, or press <Ctrl> + <C>. The contents will be placed on the clipboard. You can then use the Paste command to place the clipboard contents in the current file, or in another WebDraw file, or in an external application such as a text editor.

see also:

Paste

Cut


Paste

To paste the clipboard contents into the active WebDraw document, choose Edit > Paste, or click the Paste button [image] on the Toolbar, or press <Ctrl> + <V>. If you are pasting an object into the canvas, the object will be pasted in the center of the canvas.

see also:

Cut

Copy


Delete

Delete a selected object using any of these methods:

  • Click the Delete button [image] on the Toolbar

  • Press the <Delete> key

  • Choose Edit > Delete

  • With the Select tool active, right-click to display the context menu, and choose Delete.


Select All

To simultaneously select all objects in the file, choose Edit > Select All, or press <Ctrl> + <A>.

To select individual objects, use the Select tool [image] from the Tool Palette.

see also:

Using the Select Tool


Select None

To simultaneously deselect all selected objects, choose Edit > Select None, or press <Ctrl> + <D>.

To deselect individual objects, use the Select tool [image] from the Tool Palette.

see also:

Using the Select Tool


Canvas Mode

The canvas is where you use WebDraw's tools and commands to create and edit files. To view the canvas, choose View > Canvas Mode, or click the Canvas tab in the Document window, or press <Ctrl> + <7>.


Source Mode

The Source tab allows you to view the WebDraw file's source code. To view the source, choose View > Source Mode, or click the Source tab in the Document window, or press <Ctrl> + <8>. Any modifications you make to the code will be reflected when you subsequently view the Canvas.

Note the following about viewing a file's source code:

  • The appearance of the source code can be modified by using the WebDraw preferences. Refer to the related topics below for more information

  • You can also view a file's source code in an external text editor by using the View > Send to Editor command.

Displaying Line Numbers

To display line numbers in the Source view, choose View > Line Numbers so that a check mark appears next to the menu item.

Displaying a Find Dialog

To display a Find dialog while in Source view, press <Ctrl> + <F>. After locating what you've entered in the dialog's "Find what" field, press <F3> to find the next occurrence, or <Shift> + <F3> to find the previous occurrence.

Error Reporting

If WebDraw encounters an error in the source code, a warning dialog will appear, indicating the line and column of the error. (Note that if line numbers are not displayed in the Source view, you can turn them on by choosing View > Line Numbers.) Until you correct the error, a panel displaying the error information will appear above the Source code panel.

see also:

Source Format Preferences

Source View Font and Color Preferences

Send to Editor command


Preview Mode

The Preview tab allows you to view the WebDraw file in the built-in Web browser. To view the preview, choose View > Preview, or click the Preview tab in the Document window, or press <Ctrl> + <9>. The file will be rendered in an Internet Explorer session built into WebDraw. This is an ideal way to test any links you have assigned, and view animations created.

see also:

Linking Objects to URLs

Using the Timeline Palette

Show in Browser command.


Grid

To display a grid inside the canvas area, choose View > Grid or click the Toggle Grid button [image] in the Toolbar. The grid's display units, line color, and horizontal/vertical spacing are set in the Rulers and Units tab of the General Program Preferences.

To turn off the grid display, click the Toggle Grid button again, or choose View > Grid again.

see also:

Rulers and Units Preferences


Guides

To display guides inside the canvas area, choose View > Guides or click the Toggle Guide button [image] in the Toolbar. The guide line color can be set in the Rulers and Units tab of the General Program Preferences. (*Note: Individual guide line color can also be set via the Guide Preferences dialog as described below.)

Placing Guides

To place a horizontal guide inside the canvas:

  1. Make sure the rulers are displayed.

  2. Place the cursor inside the horizontal ruler (the cursor shape changes to a crosshair), and then drag the mouse down to the canvas. As you drag, a guide line will follow in tandem. Release the mouse button to place the guide line. You can place as many guide lines as you wish.

To place a vertical guide inside the canvas:

  1. Make sure the rulers are displayed.

  2. Place the cursor inside the vertical ruler (the cursor shape changes to a crosshair), and then drag the mouse over to the canvas. As you drag, a guide line will follow in tandem. Release the mouse button to place the guide line. You can place as many guide lines as you wish.

Moving and Deleting Guides

Notice that after placing a guide line on the canvas, a guide handle will appear in the ruler, as shown in the graphic below.

To move a guide line, drag its guide handle inside the ruler. You can also move a guide line to a specific position via the Guide Properties dialog, described below.

To delete a guide line, double-click on its guide handle inside the ruler. You can also delete a guide line via the Guide Properties dialog, described below.

Using the Guide Properties Dialog

To display the Guide Properties dialog, shown below, right-click a guide handle.

Changing Guide Line Color

To change the guide line's color, click inside the Guide Color box to display the Jasc Color dialog, or right-click inside the box to display the Recent Colors dialog. Use these color dialogs to choose a new guide line color. Note that this does not affect the other displayed guides, nor does it affect guides you subsequently place on the canvas.

Repositioning a Guide Line

To reposition the guide line, enter a new pixel value in the Guide Position text entry box.

Deleting a Guide Line

To delete the guide line, mark the Delete Guide checkbox.

Hiding Guide Lines

To turn off the guide display, click the Toggle Guide button again, or choose View > Guides again.

see also:

Rulers and Units Preferences


Rulers

To display a horizontal ruler above the canvas area and a vertical ruler to the left of the canvas area, choose View > Rulers or click the Toggle Rulers button [image] in the Toolbar. The ruler's display units are set in the Rulers and Units tab of the General Program Preferences.

To turn off the ruler display, click the Toggle Rulers button again, or choose View > Rulers again.

see also:

Rulers and Units Preferences


Line Numbers

To display line numbers along the left side of the Source view, choose View > Line Numbers (a check mark will appear next to the menu item). To turn off the line numbers display, choose View > Line Numbers again.

Shown below is an example of line numbers set on and off in the Source view.


Send to Editor

Choose View > Send to Editor, or press F11, to view the active WebDraw file's source code in an external text editor application. Be aware that you must use the File Locations tab of the General Program Preferences to assign a text editor application that will launch. For more information on this preference setting, refer to the related topic link below

Note that if you have assigned multiple text editor applications via the File Locations preferences tab, this menu item will list the individual applications in a submenu.

see also:

File Locations Preferences

Source Tab


Show in Browser

Choose View > Show in Browser, or press F12, to view the active WebDraw file in an external Web browser application. Note that you must use the File Locations tab of the WebDraw Preferences tab to assign a Web browser application that will launch. Refer to the related topics links below

Note that if you have assigned multiple Web browser applications via the File Locations preferences tab, this menu item will list the individual applications in a submenu.

see also:

File Locations Preferences

Preview Tab


Toolbars / Palettes

This command provides check boxes that allow you to toggle on/off the view of:

  • Standard Toolbar

  • Status Bar

  • Overview Window

  • Tool Palette

  • Tool Options

  • Properties Palette

  • DOM Palette

  • Animation Timeline

It also allows you to revert to the default viewing options that came with WebDraw. To do this, choose Reset Palettes.

Toggling Views On and Off

If a view is set to On, you can toggle it Off by clicking the menu item. If a view is Off, you can toggle it On by clicking the menu item -- a marked check box will appear. In the example below, the Standard Toolbar is set to On, and the Status Bar is set to Off.


Apply Transform

To remove a transformation matrix from a selected object, choose Object > Apply Transform, or right-click and choose Apply Transform from the Select context menu.

For more details about this command, refer to section 7.6 of the SVG 1.0 Spec.


Apply Effect

To apply a preset filter effect to a selected object, choose Object > Apply Effect, or choose Apply Effect from the Select context menu. Use this command as described below.

  1. Select the Apply Effect to display the Effects dialog, shown below. The selected object will appear in the Effects drop down box.

  2. Click on the Effects drop down box to display the available effects.

  3. Choose the desired effect by clicking it.

  4. In the Effects dialog, the settings for the effect (Drop Shadow was chosen in this example) will appear in the right side of the dialog. Make the desired settings for the effect, and then click OK to apply the effect to the object.

*Note: You can only apply an effect to a single object or to grouped objects. You cannot apply an effect to multiple, ungrouped objects.

see also:

Removing an Effect

Editing an Effect


Remove Effect

To remove an effect that has been applied to an object, select the object and then choose Object > Remove Effect, or choose Effect > Remove Effect from the Select context menu. The effect will be removed from the object.

Note: Although the effect is removed from the object as it appears in the canvas and in the preview, the source code for the effect is not removed.

see also:

Editing an Effect


Group

To group selected objects, choose Object > Group, or right-click choose Group from the Select context menu. As shown in the example below, a group is denoted by a "g" in the DOM palette.

see also:

Ungroup


Ungroup

To ungroup selected objects, choose Object > Ungroup, or right-click to display the context menu and choose Ungroup.

see also:

Group


Link

To assign a Web address (URI) to a selected object, use the Link command as described below.

  1. Select the object and then choose Object > Link, or right-click and choose Link in the Select context menu. The Add Link dialog, shown below, will appear.

  2. In the "Link to:" text entry field, enter the Web address the object will link to. Note the following:

  3. You should include the "http://" prefix.

  4. The link is denoted by the [image] icon in the DOM Palette, and until you change it, the ID will be "a" (for anchor).

  3. In the "Target:" field, you can enter a target for the URI, such as when the parent document is a multi-frame HTML or XHTML document. For example, you could enter:

  4. _blank to load the linked page in a new browser window.

  5. _parent to load the linked page in the parent window or frameset of the link. If the link is not in a nested frame, the page loads in to the full browser window.

  6. _self to load the linked page in the same window or frame as the link.

  7. _top to load the linked page in the full browser window and removes all frames.

For more information on targets, refer to the appropriate HTML or XHTML specifications.

Modifying the "Link to" and "Target" Settings

To change the "Link to" and/or "Target" settings:

  • Select the object, click the Attributes tab in the Properties Bar, and then change the desired setting.

  • Change the desired setting in the file's source code.

A Note About Linked Objects

After assigning a link to an object, when you click it to select it, the Attributes tab in the Properties Bar will only display link-related attributes. If the linked object is a rectangle, ellipse, line, text, or image, you can display its non-link related attributes in the Attributes tab by:

  • Holding down <Shift> and <Ctrl> while clicking the object in the canvas; or

  • Selecting the object in the DOM Palette.

see also:

Unlink


Unlink

To remove the link assigned to an object, select the object and choose Object > Unlink, or right-click and choose Unlink from the Select context menu.

see also:

Link


Arrange > To Top

To send a selected object to the top level, choose Object > Arrange > To Top, or right-click and choose Arrange > To Top from the Select context menu. Shown below is an example of this command where the yellow rectangle was moved to the top.

see also:

Arrange > Move Up

Arrange > Move Down

Arrange > To Bottom


Arrange > Move Up

To send a selected object up one level, choose Object > Arrange > Move Up, or right-click and choose Arrange > Move Up from the Select context menu. Shown below is an example of this command where the black rectangle was moved up.

see also:

Arrange > To Top

Arrange > Move Down

Arrange > To Bottom


Arrange > Move Down

To send a selected object down one level, choose Object > Arrange > Move Down, or right-click and choose Arrange > Move Down from the Select context menu. Shown below is an example of this command where the cyan rectangle was moved down.

see also:

Arrange > To Top

Arrange > Move Up

Arrange > To Bottom


Arrange > To Bottom

To send a selected object to the bottom level, choose Object > Arrange > To Bottom, or right-click and choose Arrange > To Bottom from the Select context menu. Shown below is an example of this command where the magenta rectangle was moved to the bottom.

see also:

Arrange > To Top

Arrange > Move Up

Arrange > Move Down


Align to Canvas > Center Vertically

To center selected objects vertically on the canvas, choose Object > Align to Canvas > Center Vertically, or right-click and choose Align to Canvas > Center Vertically from the Select context menu. Note that the objects will not move horizontally. Shown below is an example of this command.

see also:

Align to Canvas > Center Horizontally

Align to Canvas > Center Both


Align to Canvas > Center Horizontally

To center selected objects horizontally on the canvas, choose Object > Align to Canvas > Center Horizontally, or right-click and choose Align to Canvas > Center Horizontally from the Select context menu. Note that the objects will not move vertically. Shown below is an example of this command.

see also:

Align to Canvas > Center Vertically

Align to Canvas > Center Both


Align to Canvas > Center Both

To center selected objects both horizontally and vertically on the canvas, choose Object > Align to Canvas > Center Both, or right-click and choose Align to Canvas > Center Both from the Select context menu. Shown below is an example of this command.

see also:

Align to Canvas > Center Vertically

Align to Canvas > Center Horizontally


Alignment > Top

To align selected objects relative to the top of the first selected object, choose Object > Alignment > Top, or right-click and choose Alignment > Top from the Select context menu. If all objects are selected simultaneously, the bottom-most shape will be the alignment target. Shown below is an example of this command where the green rectangle was selected first.

see also:

Alignment > Bottom

Alignment > Left

Alignment > Right

Alignment > Center Vertical

Alignment > Center Horizontal

Alignment > Center Both


Alignment > Bottom

To align selected objects relative to the bottom of the first selected object, choose Object > Alignment > Bottom, or right-click and choose Alignment > Bottom from the Select context menu. If all objects are selected simultaneously, the top-most shape will be the alignment target. Shown below is an example of this command where the green rectangle was selected first.

see also:

Alignment > Top

Alignment > Left

Alignment > Right

Alignment > Center Vertical

Alignment > Center Horizontal

Alignment > Center Both


Alignment > Left

To align selected objects relative to the left edge of the first selected object, choose Object > Alignment > Left, or right-click and choose Alignment > Left from the Select context menu. If all objects are selected simultaneously, the bottom-most shape will be the alignment target. Shown below is an example of this command where the green rectangle was selected first.

see also:

Alignment > Top

Alignment > Bottom

Alignment > Right

Alignment > Center Vertical

Alignment > Center Horizontal

Alignment > Center Both


Alignment > Right

To align selected objects relative to the right edge of the first selected object, choose Object > Alignment > Right, or right-click and choose Alignment > Right from the Select context menu. If all objects are selected simultaneously, the bottom-most shape will be the alignment target. Shown below is an example of this command where the green rectangle was selected first.

see also:

Alignment > Top

Alignment > Bottom

Alignment > Left

Alignment > Center Vertical

Alignment > Center Horizontal

Alignment > Center Both


Alignment > Center Vertical

To align selected objects relative to the vertical center of the first selected object, choose Object > Alignment > Center Vertical, or right-click and choose Alignment > Center Vertical from the Select context menu. If all objects are selected simultaneously, the bottom-most shape will be the alignment target. Shown below is an example of this command where the green rectangle was selected first.

see also:

Alignment > Top

Alignment > Bottom

Alignment > Left

Alignment > Right

Alignment > Center Horizontal

Alignment > Center Both


Alignment > Center Horizontal

To align selected objects relative to the horizontal center of the first selected object, choose Object > Alignment > Center Horizontal, or right-click and choose Alignment > Center Horizontal from the Select context menu. If all objects are selected simultaneously, the bottom-most shape will be the alignment target. Shown below is an example of this command where the green rectangle was selected first.

see also:

Alignment > Top

Alignment > Bottom

Alignment > Left

Alignment > Right

Alignment > Center Vertical

Alignment > Center Both


Alignment > Center Both

To align selected objects both horizontally and vertically relative to the first selected object, choose Object > Alignment > Center Both, or right-click and choose Alignment > Center Both from the Select context menu. If all objects are selected simultaneously, the bottom-most shape will be the alignment target. Shown below is an example of this command where the green rectangle was selected first.

see also:

Alignment > Top

Alignment > Bottom

Alignment > Left

Alignment > Right

Alignment > Center Vertical

Alignment > Center Horizontal


Distribution > Vertical Top

To distribute three or more selected objects between the highest and lowest top edges, choose Object > Distribution > Vertical Top, or right-click and choose Distribution > Vertical Top from the Select context menu. Note that objects will be distributed relative to the first and last selected objects. Shown below is an example of this command where the green rectangle was selected first and the blue polygon was selected last.

see also:

Distribution > Vertical Center

Distribution > Vertical Bottom

Distribution > Horizontal Left

Distribution > Horizontal Center

Distribution > Horizontal Right


Distribution > Vertical Center

To distribute three or more selected objects between the highest and lowest vertical center points, choose Object > Distribution > Vertical Center, or right-click and choose Distribution > Vertical Center from the Select context menu. Note that objects will be distributed relative to the first and last selected objects. Shown below is an example of this command where the green rectangle was selected first and the blue polygon was selected last.

see also:

Distribution > Vertical Top

Distribution > Vertical Bottom

Distribution > Horizontal Left

Distribution > Horizontal Center

Distribution > Horizontal Right


Distribution > Vertical Bottom

To distribute three or more selected objects between the highest and lowest bottom edges, choose Object > Distribution > Vertical Bottom, or right-click and choose Distribution > Vertical Bottom from the Select context menu. Note that objects will be distributed relative to the first and last selected objects. Shown below is an example of this command where the green rectangle was selected first and the blue polygon was selected last.

see also:

Distribution > Vertical Top

Distribution > Vertical Center

Distribution > Horizontal Left

Distribution > Horizontal Center

Distribution > Horizontal Right


Distribution > Horizontal Left

To distribute three or more selected objects between the left edges of the left-most and right-most objects, choose Object > Distribution > Horizontal Left, or right-click and choose Distribution > Horizontal Left from the Select context menu. Note that objects will be distributed relative to the first and last selected objects. Shown below is an example of this command where the green rectangle was selected first and the blue polygon was selected last.

see also:

Distribution > Vertical Top

Distribution > Vertical Center

Distribution > Vertical Bottom

Distribution > Horizontal Right

Distribution > Horizontal Center


Distribution > Horizontal Center

To distribute three or more selected objects between the horizontal centers of the left-most and right-most objects, choose Object > Distribution > Horizontal Center, or right-click and choose Distribution > Horizontal Center from the Select context menu. Note that objects will be distributed relative to the first and last selected objects. Shown below is an example of this command where the green rectangle was selected first and the blue polygon was selected last.

see also:

Distribution > Vertical Top

Distribution > Vertical Center

Distribution > Vertical Bottom

Distribution > Horizontal Left

Distribution > Horizontal Right


Distribution > Horizontal Right

To distribute three or more selected objects between the right edges of the left-most and right-most objects, choose Object > Distribution > Horizontal Right, or right-click and choose Distribution > Horizontal Right from the Select context menu. Note that objects will be distributed relative to the first and last selected objects. Shown below is an example of this command where the green rectangle was selected first and the blue polygon was selected last.

see also:

Distribution > Vertical Top

Distribution > Vertical Center

Distribution > Vertical Bottom

Distribution > Horizontal Left

Distribution > Horizontal Center


Transformation > Mirror

To mirror a selected object on its centerpoint, choose Object > Transformation > Mirror, or right-click and choose Transformation > Mirror from the Select context menu. Shown below is an example of this command.

Note: Depending on the type of object you are modifying, this action may apply a transformation matrix to the object.

see also:

Transformation > Flip

Transformation > Rotate Left 90

Transformation > Rotate Right 90


Transformation > Flip

To flip a selected object on its centerpoint, choose Object > Transformation > Flip, or right-click and choose Transformation > Flip from the Select context menu. Shown below is an example of this command.

Note: Depending on the type of object you are modifying, this action may apply a transformation matrix to the object.

see also:

Transformation > Mirror

Transformation > Rotate Left 90

Transformation > Rotate Right 90


Transformation > Rotate Left 90

To rotate a selected object 90 degrees to the left from its centerpoint, choose Object > Transformation > Rotate Left 90, or right-click and choose Transformation > Rotate Left 90 from the Select context menu. Show below is an example of this command.

Note: Depending on the type of object you are modifying, this action may apply a transformation matrix to the object.

see also:

Transformation > Mirror

Transformation > Flip

Transformation > Rotate Right 90


Transformation > Rotate Right 90

To rotate a selected object 90 degrees to the right from its centerpoint, choose Object > Transformation > Rotate Right 90, or right-click and choose Transformation > Rotate Right 90 from the Select context menu. Show below is an example of this command.

Note: Depending on the type of object you are modifying, this action may apply a transformation matrix to the object.

see also:

Transformation > Mirror

Transformation > Flip

Transformation > Rotate Left 90


Make Same Size > Horizontal

To resize selected objects to have the same width as the first selected object, choose Object > Make Same Size > Horizontal, or right-click and choose Make Same Size > Horizontal from the Select context menu. Shown below is an example of this command where the red circle was selected first.

Note: Depending on the type of object you are modifying, this action may apply a transformation matrix to the object.

see also:

Make Same Size > Vertical

Make Same Size > Both

Scaling Objects


Make Same Size > Vertical

To resize selected objects to have the same height as the first selected object, choose Object > Make Same Size > Vertical, or right-click and choose Make Same Size > Vertical from the Select context menu. Shown below is an example of this command where the red circle was selected first.

Note: Depending on the type of object you are modifying, this action may apply a transformation matrix to the object.

see also:

Make Same Size > Horizontal

Make Same Size > Both

Scaling Objects


Make Same Size > Both

To resize selected objects to have the same width and height as the first selected object, choose Object > Make Same Size > Both, or right-click and choose Make Same Size > Both from the Select context menu. Shown below is an example of this command where the red circle was selected first.

Note: Depending on the type of object you are modifying, this action may apply a transformation matrix to the object.

see also:

Make Same Size > Vertical

Make Same Size > Horizontal

Scaling Objects


Convert to Path

The Convert to Path command allows you to convert non-curved paths into curved paths which can then be modified in a variety of ways with the Node Edit tool. You can use the Convert to Path command on all objects except the following:

  • <path> objects created by the Path tool [image] and the Freehand tool [image], or

  • <image> objects created by the Image tool [image].

To use this command, select the applicable object, and then do one of the following:

  • Choose Object > Convert to Path, or

  • Right-click and choose Convert to Path from the Select context menu, or

  • Choose the Node Edit tool [image] from the Tool Palette, and then right-click and choose Convert to Path from the Node Edit context menu.

After applying this command you may not immediately notice a visual difference in the object in the Canvas. But if you now view the source code, you'll notice a dramatic difference since the object is now a Path object. Path objects can be modified quite differently than non-Path objects due to the presence of nodes.

Note also that the object ID in the DOM Palette will now be "Path." In the example below, notice two things:

  • The top graphic shows the selected circle with the normal selection handles. It's labeled "Circle" in the DOM Palette.

  • The bottom graphic shows the same object after the Convert to Path command is applied. The object is then selected with the Node Edit tool — note the nodes that appear, and also that the object's DOM Palette ID is now "Path."

Before Convert to Path is applied

After Convert to Path is applied

SEE ALSO:

Using the Node Edit Tool


Cascade

With multiple files open in the workspace, you can arranging them by choosing Window > Cascade. This cascades the windows from the upper left of the workspace to the lower right. An example is shown below with three open files in the workspace.

Before choosing Window > Cascade

After choosing Window > Cascade

see also:

Tile Horizontally

Tile Vertically


Tile Horizontally

With multiple files open in the workspace, you can arranging them by choosing Window > Tile Horizontally. This arranges the windows in rows, modifying the window size to fill up the workspace area. An example is shown below with three open files in the workspace.

Before choosing Window > Tile Horizontally

After choosing Tile > Horizontally

see also:

Tile Vertically

Cascade


Tile Vertically

With multiple files open in the workspace, you can arranging them by choosing Window > Tile Vertically. This arranges the windows in columns, modifying the window size to fill up the workspace area. An example is shown below with three open files in the workspace.

Before choosing Tile > Vertically

After choosing Tile > Vertically

see also:

Tile Horizontally

Cascade


Close All

To close all open files simultaneously, choose Window > Close All. Note, however, that if any open file has unsaved modifications, you will be prompted to save those changes before closing the file.


Duplicate

To copy a file that is open or minimized in the WebDraw workspace, choose Window > Duplicate. This can be very useful when you want to create multiple, slightly varying versions of a file. Use this command as described below.

  1. Select the file you want to duplicate.

  2. Choose Window > Duplicate. A new window containing the image opens in the workspace.

To save the new file, choose File > Save As.


Fit Window to Image

To automatically adjust the Document window to show the entire image within the current workspace, choose Window > Fit Window to Image, or click the Fit Window to Image button [image] on the Toolbar.

see also:

Fit Image to Window


Fit Image to Window

To automatically increase or decrease the zoom level to fit the image within the current Document window size, choose Window > Fit Image to Window, or click the Fit Image to Window button [image] on the Toolbar.

see also:

Fit Window to Image


Tip of the Day

To display a series of briefly worded tips on using WebDraw, choose Help > Tip of the Day. The Tip of the Day dialog, shown below, will appear

  • Click the Next Tip button to cycle through the tips.

  • If you wish to automatically display this dialog box each time you start up WebDraw, mark the "Show Tips on Startup" check box. If you do not mark this checkbox, you can only display the tips by choosing the menu item.

  • Click the Close button to close the dialog box.


Help Topics

To display the WebDraw Help file, choose Help > Help Topics. The WebDraw Help file will appear, displaying the first topic, "Welcome to WebDraw." For more details on using the Help file, refer to the related topic below.

see also:

Using the WebDraw Help File


Readme

To display the Readme.htm file that was installed with your copy of WebDraw, choose Help > Readme.... The file will open in your Web browser application, displaying pertinent information about WebDraw.


Jasc Software Online

When you choose Help > Jasc Software Online, you can access a number of Web links and Email addresses related to WebDraw and Jasc.

  • WebDraw User Forum: Choose this option to access a newsgroup dedicated to WebDraw issues. This newsgroup is frequented by other WebDraw users, SVG enthusiasts, and the Jasc WebDraw team.

  • Email Ideas/Feature Requests: Choose this option to open a new e-mail message addressed to "webdraw@jasc.com." Use this message to send Jasc an idea or feature request you have regarding WebDraw.

  • Report a Problem: Choose this option to open a new e-mail message addressed to "webdrawbugs@jasc.com." Use this message to report the details of a problem you've experienced using WebDraw.

  • Jasc Software Web Site: Choose this option to access Jasc's Web site.

  • Check for Updates: Choose this option to access a Jasc Web site where you can check for updates to WebDraw that you can download.


About WebDraw

If you wish to view information about your version of WebDraw, as well as more detailed information about your computer, choose Help > About WebDraw, or click the Help button [image] on the Toolbar. The WebDraw splash screen, shown below, will appear.

The application version number is displayed in the upper right corner of this screen. If you only want to know the version number, click OK to close this screen. To view more detailed information, click the System Info button. The System Information dialog, an example of which is shown below, will appear.

This displays more detailed information about your copy of WebDraw, as well as details about your computer. This information can be very helpful if you need to contact Jasc Software with a support issue. To copy the System Information dialog box details to the clipboard, click the Copy button. You can then paste the information into a text editor, a word processing application, or an e-mail message.


About the Select Context Menu

The Select context menu, accessed by right-clicking in the canvas when the Select tool is active, provides an alternative method of executing a number of frequently used commands.

For details on using a Select context menu item, choose the desired topic below.

see also:

Cut

Copy

Paste

Delete

Apply Transform

Effect

Group

Ungroup

Link

Unlink

Arrange

Align To Canvas

Alignment

Distribution

Transformation

Make Same Size

Convert To Path


About the Node Edit Context Menu

The Node Edit context menu, accessed by right-clicking in the canvas when the Node Edit tool is active and a node editable object is selected, provides access to commands specific to node editing.

The main Node Edit context menu, shown below, contains four items: the Convert to Path command, the Edit submenu, the Node Type submenu, and the Drawing Mode command.

The Edit Submenu

The Edit submenu, shown below, contains items for working with one or more nodes.

The Node Type Submenu

The Node Type submenu, shown below, contains items for modifying properties of individual nodes.

For a description of the Convert to Path command, click the "Convert to Path command" link below. For a description of each Edit submenu item, each Node Type submenu item, and the Drawing Mode command, click the "Using the Node Edit Tool" link below.

see also:

Convert to Path command

Using the Node Edit Tool


Using the Document Window

The Document Window contains the current WebDraw file, and has three tabs:

  • Canvas tab: This tab is where you use WebDraw's tools and commands to create a file, and it is the default tab when you open a file.

  • Source tab: This tab displays the source code for the current file. If you edit the source code in this tab, the changes will be immediately reflected when you go to the Canvas tab.

  • Preview tab: This tab displays a Web browser preview of the current file.

Document Control Icon

The WebDraw Document Control Icon [image], located in the left corner of the document title bar, contains the standard window manipulation commands: Restore, Move, Size, Minimize, Maximize, Close, and Next. Double-clicking this icon will close the current file (you will be prompted to save modifications if you haven't already done so).

Window Buttons

The Window buttons [image], located in the right corner of the document title bar, allow you to Minimize, Maximize, Restore, or Close the current file.


Canvas Tab

The Canvas tab, the Document window's default tab, displays the WYSIWYG interface where you use WebDraw's tools and commands to create and modify your files.

Note: If you assign a URL Link to an object, or apply animation to an object, you cannot test/view these in the Canvas tab. Use the Preview tab or choose View > Show in Browser instead.

see also:

Preview Tab

Show in Browser command


Source Tab

To view the source code for your WebDraw file, click the Source tab. The source code will be displayed using the current settings in the Source Format tab of the General Program Preferences, as well as the font and color setting in the Source View Preferences.

see also:

Source Mode

Source Format Preferences

Source View Font and Color Preferences

Send to Editor command


Preview Tab

To preview what your WebDraw file will look like in a browser window, click the Preview tab in the Document window. The file will be rendered in an Internet Explorer session built into WebDraw. This is an ideal way to test any links you have assigned and view animations you have created.

see also:

Linking Objects to URLs

Using the Timeline Palette

Show in Browser command


Using the Overview Window

The Overview window displays a smaller view of the active WebDraw document. This can be useful when you have zoomed in on a small area for a detailed operation.

To pan around the Document window, move the cursor inside the Overview window rectangle (the cursor shape will change to the Hand icon) by moving the rectangle inside the Overview window to the desired position.

  1. Note: As you adjust the view in the Document window (via zooming, using the scroll bars, using the Hand tool, etc.), the Overview window rectangle will adjust accordingly.

Showing and Hiding the Overview Window

If the Overview window is not displayed, choose View > Toolbars / Palettes, and choose the Overview option -- a check mark will appear to signify that this option is displayed.

To hide the Overview window, click the Close button [image] in the upper right corner of the window's title bar, or choose View > Toolbars / Palettes, and choose the Overview option -- the check mark will disappear and the Overview window will close.

see also:

Using the Document Window

Viewing Toolbars / Palettes


Using the Properties Palette

The Properties Palette displays editable properties of the selected object. The palette contains four tabs:

  • Attributes: Displays editable SVG attributes of the object. When attributes cannot be edited in this tab, you'll see the message "No Editable Attributes."

  • Fill and Stroke: When applicable, displays current Fill and Stroke property settings of the object.

  • Font: When applicable, displays the current Font property settings of the text object.

  • Miter: When applicable, display the current Miter property settings of the Object.

About the Visibility Setting

The Visibility setting at the top of the Properties Palette determines an object's visible state. Unless otherwise specified, all objects will be visible. The checkbox options are:

  • Visible: The graphics element will be visible

  • Hidden: The object will not be seen on the canvas or in the browser (i.e. it will be fully transparent). The object, however, is still there -- if you select its ID in the DOM Palette, you will see its outline in the canvas.

  • Collapse: The object will be visible in the canvas, but not in the browser. Note that this option is mostly used in creating dynamic rows and column effects in tables.

  • Inherit: The object will take the same "visibility" setting as its parent object.

"Visible" Checkbox

Mark this checkbox to include the "visibility" element in the source.

Moving and Resizing the Palette

You can move the Properties Palette by dragging it from the title bar to another location in the workspace. To adjust the viewable area of the palette, drag from its sides, top, or bottom.

see also:

Attributes tab

Fill and Stroke tab

Font tab

Miter tab


Attributes tab

When applicable, the Attributes tab displays editable SVG attributes of selected objects, including object ID, size, position, radius, etc. Some objects only have ID as an editable attribute, while others, such as Rectangles (an example is shown below), have a number of editable attributes.

Attributes for Rectangle:

Any changes you make in the Attributes tab will be immediately reflected in the file. If you enter a new ID, it will appear in the DOM Palette.

Gradient, Pattern, and Effect Editing

If you have applied a gradient or pattern fill or stroke, or applied an effect, you can adjust some of these settings on the attributes tab. To do so, select the property in the "Defs" section in the DOM Palette, and then make the desired modifications in the Attributes tab. Shown below is an example.

see also:

Fill and Stroke Tab

Font Tab

Miter Tab


Fill and Stroke Tab

The Fill and Stroke tab displays the selected object's current fill and stroke settings. Each Fill and Stroke tab item is described below.

Fill Settings

The graphic below points out the fill settings.

Fill Element Checkbox

Mark the Fill checkbox to include the "fill" property in the source.

Fill Style

To choose a fill style, click the drop down button, and then select one the following fill style options:

  • None: specifies no fill for the object.

  • Inherit: specifies that the object will take the same fill value as the parent object.

  • Solid Color: specifies a solid color fill. To choose a new color, click the current fill box. The Jasc Color dialog will appear.

  • Gradient: specifies a gradient fill. To choose a new gradient, click the current fill box. The Gradient dialog will appear.

  • Pattern: specifies a pattern fill. To choose a new pattern, click the current fill box. The Pattern dialog will appear.

Fill Opacity Checkbox

Mark the checkbox to include the "fill-opacity" property in the source.

Fill Opacity Control

Use the numeric edit control to set an opacity for the fill.

Stroke Settings

The graphic below points out the fill settings.

Stroke Element Checkbox

Mark the Stroke checkbox to include the "stroke" property in the source.

Stroke Style

To choose a stroke style, click the drop down button, and then select one the following stroke style options:

  • None: specifies no stroke for the object.

  • Inherit: specifies that the object will take the same stroke value as the parent object.

  • Solid Color: specifies a solid color stroke. To choose a new color, click the current stroke box. The Jasc Color dialog will appear.

  • Gradient: specifies a gradient stroke. To choose a new gradient, click the current stroke box. The Gradient dialog will appear.

  • Pattern: specifies a pattern stroke. To choose a new pattern, click the current stroke box. The Pattern dialog will appear.

Stroke Opacity Checkbox and Setting

Mark the checkbox to include the "stroke-opacity" property in the source. Use the numeric edit control to set an opacity for the stroke.

Stroke Width Checkbox and Setting

Mark the checkbox to include the "stroke-width" property in the source. In the Width field, enter a stroke width. If you do not specify unit type, pixels will be used by default.

Link Opacity Checkbox

Mark the Link Opacity checkbox to keep the stroke and fill opacity settings the same.

Overall Opacity Checkbox and Setting

Mark the Overall Opacity checkbox to include the "opacity" element in the source. Use the numeric edit control to set an overall opacity for the object.

see also:

Attributes Tab

Font Tab

Miter Tab


Font Tab

For Text objects, the Font tab, shown below, allows you to modify the following settings:

Font Setting

Use this drop down list to select a font. To include the "font-family" property in the source, mark the checkbox to the left of this drop down list.

Size Setting

Use this numeric edit control to set a point size. To include the "font-size" property in the source, mark the checkbox to the left of this numeric edit control.

Editing Text

Note that you can only edit the selected text in the Attributes tab.

see also:

Using the Text Tool

Attributes Tab


Miter Tab

The Miter tab displays the current line cap style, line join style, and miter limit settings of the selected line segments and their ends/corners.

Line Cap Options

The Cap options determine how the end of a line segment is capped. Options include:

  • Flat [image] produces a line without a protruding cap. *Note: If you mark the "Cap" checkbox (described below), this option will be labeled "butt", not "flat."

  • Round [image] produces a line with a round protruding cap.

  • Square [image] produces a line with a square protruding cap

  • Inherit [image] assigns the line cap inherited from the parent object.

The graphic below shows how the Flat, Round, and Square cap options differ visually.

Cap Checkbox

Mark this checkbox to include the "stroke-linecap" property in the source.

Line Join Options

The Join options determine the shape of the corners. Options include:

  • Miter [image] produces mitered (pointed) corners when the Miter Limit value, described below, is set to a high enough value.

  • Round [image] produces round corners.

  • Bevel [image] produces flattened corners.

  • Inherit [image] assigns the line join inherited from the parent object.

The example below shows how the Miter, Round, and Bevel join options differ visually.

Line Join Checkbox

Mark this checkbox to include the "stroke-linejoin" property in the source.

Miter Limit Setting

The miter limit is the maximum allowed ratio of the miter length to the line width. The miter length is the distance from the inside corner of the join to the outside corner. This is shown in the graphic below.

If a Miter join exceeds the limit value, the point is cut off at the limit. This option is not applicable for the Round and Bevel join types.

Use the Miter Limit numeric edit control to set a value from 1 to 30. Depending on the shape you are modifying, higher values can create more pointed joins. The example below shows an object created with the Path tool and the results achieved with various Miter Limit settings.

Miter Limit Checkbox

Mark this checkbox to include the "stroke-miterlimit" property in the source.

see also:

Attributes Tab

Fill and Stroke Tab

Font Tab


Using the Document Object Model Palette

The Document Object Model (DOM) governs the way scripting and programming languages refer to the elements on a Web page. WebDraw's DOM Palette presents a heirarchical, Windows Explorer-like representation of the components that make up your WebDraw file. An object's attributes and properties, including filters, filter primitives, and gradients, appear in the DOM Palette, where they can be selected and in some cases modified in the Properties Palette.

Selecting DOM Palette Items

Select DOM Palette items simply by clicking them. The graphics below show examples of what you can do in the Properties Palette after selecting specific DOM Palette items.

In this example, the <rect> is selected, and its editable attributes appear in the Properties Palette.

In this example, a gradient stop is selected, and its editable attributes appear in the Properties Palette.

Moving and Resizing the Palette

As with any other WebDraw bar or palette, the DOM Palette can be resized, moved, or hidden.


About the Tool Palette

The Tool Palette contains the tools you use to create objects, make selections, and manipulate the document window. Shown below is the WebDraw Tool Palette with each item labeled.

For more information on each tool, click the desired topic below.

See also:

Using the Select Tool

Using the Node Edit Tool

Using the Rectangle Tool

Using the Ellipse Tool

Using the Symmetric Shapes Tool

Using the Preset Shapes Tool

Using the Line Tool

Using the Polygon Tool

Using the Path Tool

Using the Freehand Tool

Using the Spiral Tool

Using the Text Tool

Using the Image Tool

Using the Hand Tool

Using the Zoom Tool


Using the Select Tool

The Select tool [image] is used to select objects. Selected objects can then be moved or modified in a variety of ways. To use the tool:

  1. Select it from the Tool palette.

  2. *Optional: Set the Tool Options (described below) as desired.

  3. Click the desired object, or drag a selection marquee around the objects.

Note the following additional features of the Select tool:

  • To select multiple objects, hold down <Shift> while clicking the objects.

  • To deselect objects, you can click anywhere outside the selection marquee, or hold down <Ctrl> and click the object you want to deselect.

  • You can use the Select tool to move, rotate, scale, or skew selected objects. For more information, choose the related topic below.

Select Tool Options

The Select tool options are shown below.

Use this numeric edit control to set the zoom level.

Click this button to reset the zoom to 1:1 (100%).

Click these buttons to incrementally zoom in or out.

Click these buttons to fit the window to the image, or the image to the window.

see also:

Moving an Object

Rotating an Object

Scaling and Skewing an Object


Using the Node Edit Tool

The Node Edit tool [image] is used to modify nodes on eligible objects in a wide variety of ways. Like the Select tool, the Node Edit tool is used to select editable objects and nodes, and has its own right-click Context menu (described below). Note that before you can use the full range of Node Edit tool commands, you may have to apply the Convert to Path command to the object. (Refer to the related topic link below.)

To use the tool:

  1. Select it from the Tool palette.

  2. *Optional: Set the Tool Options (described below) as desired.

  3. Select the node editable object or nodes on the object. Selected objects or nodes can then be modified in a variety of ways as described below. You can also use the Node Edit tool to move the editable object; to do so, place the cursor on any part of the object's path, and then drag the object.

Node Edit Tool Options

The Node Edit tool options are shown below.

Use this numeric edit control to set the percentage at which selected nodes will expand or contract when the Expand Selected or Contract Selected commands are chosen from the tool's context menu.

Use this numeric edit control to set the number of pixels to offset the duplicated path when the Duplicate and Offset command is chosen from the tool's context menu.

These tool options become available when a <path> object is selected. These options allow you to create the following segment types while in Drawing Mode: To draw a Line Segment, choose the [image] Segment Type button; to draw a Cubic Bezier, choose the [image] Segment Type button; to draw a Freehand Segment, choose the [image] Segment Type button.

These tool options become available when a <path> object is selected. These options allow you to modify paths while in Drawing Mode: To close the path, choose the [image] button; to add a break in the path, choose the [image] button.

Selecting Nodes

To select an individual node:

  • Click the node, or

  • Drag a marquee around it with the Node Edit tool.

To select multiple nodes:

  • Hold down <Shift> while clicking nodes, or

  • Drag a marquee around them with the Node Edit tool.

To select all nodes:

  • Double-click a node, or

  • Drag a marquee around the object with the Node Edit tool, or

  • Right-click to display the context menu, and choose Edit > Select All.

Adding Nodes

To add a node at any point on an object's path:

  1. Place the cursor anywhere over the path except on a node, and then hold down <Ctrl>. The cursor will display the characters [image].

  2. Click to add a node.

Note the following:

  • The new node will have properties consistent for its segment.

  • You can also add nodes via Drawing Mode, which allows you to add to the Start or End of a contour (when those nodes are selected), or to add new contours. To enter Drawing Mode, with the Node Edit tool active, right-click to display its context menu, and select Drawing Mode.

Moving Nodes

You can move nodes via the mouse or the arrow keys as described below.

Using the Mouse

Place the cursor over the node and drag the mouse.

Using the Arrow Keys

You can move selected nodes or the entire object (when all nodes are selected) by using the arrows keys:

  • To move in 1-pixel increments, press the arrows keys.

  • To move in 10-pixel increments, hold down <Ctrl> while pressing the arrow keys.

Node Edit Context Menu Commands

The Node Edit context menu contains the following items:

  • Convert to Path command: This command will only be available when the object is not a <path> object. Select this command to convert eligible objects into <path> objects. For more information on this command, see the related topic link below.

  • Edit submenu: This submenu contains a number of node editing related commands as described in the table below.

  • Node Type submenu: This submenu contains a number of commands affecting node types as described in the table below.

  • Drawing Mode command: This command allows you to add to the Start or End nodes, or to add new contours. To enter Drawing Mode, simply select the command (a checkmark will appear next to it), and then click or drag to add or create contours.

The tables below describe the commands in the Edit and Node Type submenus.

Edit Submenu Commands

Delete | Deletes the selected node from the path.
Select All | Selects all nodes on the object.
Select None | Deselects all selected nodes on the object.
Join | Joins the starting and ending nodes of a path. Note that this command will only be available when just the starting and ending nodes are selected.
Merge | Removes the selected node from the path and merges the two segments on either side, forming one contiguous segment. The path shape will be maintained as much as possible based on the remaining nodes.
Break | Breaks a node into two, one becoming a Start node and the other an End node. This command works on one node at a time. If the original path was closed, it will become open. If the original path was open, it will be split into two paths. Note that you cannot break a starting or ending node.
Close | Closes the Start node and End node on an open path. Note that you can select any node on the path to execute this command.
Reverse Contour | Reverses the direction of a contour. This command only works on one selected node at a time.
Reverse Path | Reverses the direction of a entire path, in effect switching the "Start" node and "End" node designations, as well as the direction of each node's control arm handles. The path retains its shape, but node control handles point in the opposite direction.
Duplicate & Offset | Duplicates the entire object and offsets it by the amount set in the tool's Duplication Offset tool option. You must select one or more nodes to make this command available.
Duplicate | Duplicates a selected node, placing the new node directly on top of the original node.
Expand Selected | Expands selected nodes by the percentage set in the tool's Expansion % tool option.
Contract Selected | Contracts selected nodes by the percentage set in the tool's Expansion % tool option.

Node Type Submenu Commands

Asymmetric | This type of node can connect two dissimilar curves on either side of the node. An asymmetric node's control arms can have unequal lengths, thus allowing you to modify the length of one side of a node's control arm without affecting the other side. .
Symmetric | This type of node can connects two similar curves. A symmetric node's control arms have the same length on either side of the node, thus modifying either end of the control arm applies an equal modification to the adjoining curve segments.
Cusp | This type of node is often applied to connect two lines. It will constrain neither the length nor the direction of a node's control arm handles, thus allowing you to independently modify the bend point and the angles on either side of the node.
Smooth/Tangent | This type of node is often applied to connect a curve and a line. Modifications to it affect how smoothly the curve and line connect.
Convert to Line | For a node that has a curve before and/or after it, this will remove the curve from the node. It will also remove the curve's control arm.
Line Before | Replaces a curve with a line that comes before the node.
Line After | Replaces a curve with a line that comes after the node.
Curve Before | Replaces a line with a curve that comes before the node.
Curve After | Replaces a line with a curve that comes after the node.

see also:

Convert to Path


Using the Rectangle Tool

The Rectangle tool [image] is used to draw non-rounded and rounded rectangles. To use the tool:

  1. Select it from the Tool palette.

  2. *Optional: Set the Tool Options (described below) as desired.

  3. Drag the mouse to create the rectangle.

Rectangle Tool Options

The Rectangle tool options are shown below.

Click the drop down button to choose a Fill/Stroke style (None, Inherit, Solid Color, Gradient, Pattern). Click the Fill/Stroke current setting box to choose a new color/gradient/pattern. Mark the Fill or Stroke checkbox to include the "fill" or "stroke" property in the source.

Enter a stroke width value in this text entry box. Mark the Width checkbox to include the "stroke-width" property in the source.

To draw an non-rounded rectangle, choose the [image] Type button. To draw a rounded rectangle, choose the [image] Type button.

see also:

Tool Drag Preferences

Convert to Path

Using the Node Edit Tool

Choosing a Fill or Stroke


Using the Ellipse Tool

The Ellipse tool [image] is used to draw ellipses and circles. To use the tool:

  1. Select it from the Tool palette.

  2. *Optional: Set the Tool Options (described below) as desired.

  3. Drag the mouse to create the ellipse/circle.

Ellipse Tool Options

The Ellipse tool options are shown below.

Click the drop down button to choose a Fill/Stroke style (None, Inherit, Solid Color, Gradient, Pattern). Click the Fill/Stroke current setting box to choose a new color/gradient/pattern. Mark the Fill or Stroke checkbox to include the "fill" or "stroke" property in the source.

Enter a stroke width value in this text entry box. Mark the Width checkbox to include the "stroke-width" property in the source.

To draw an ellipse, choose the [image] Type button. To draw a circle, choose the [image] Type button.

see also:

Tool Drag Preferences

Convert to Path

Using the Node Edit Tool

Choosing a Fill or Stroke


Using the Symmetric Shapes Tool

The Symmetric Shapes tool [image] is used to create polygons with symmetrical sides. To use the tool:

  1. Select it from the Tool palette.

  2. *Optional: Set the Tool Options (described below) as desired.

  3. Drag the mouse to create the polygon.

Note: Symmetric shapes can be node edited and still retain their radial symmetry. To node edit the shape without retaining its radial symmetry, apply the Convert to Path command.

Symmetric Shapes Tool Options

The Symmetric Shapes tool options are shown below.

Click the drop down button to choose a Fill/Stroke style (None, Inherit, Solid Color, Gradient, Pattern). Click the Fill/Stroke current setting box to choose a new color/gradient/pattern. Mark the Fill or Stroke checkbox to include the "fill" or "stroke" property in the source.

Enter a stroke width value in this text entry box. Mark the Width checkbox to include the "stroke-width" property in the source.

To draw an obtuse (blunt) symmetric polygon, choose the [image] Type button. To draw an acute (sharp) symmetric polygon, choose the [image] Type button.

Use this numeric edit control to set the number of sides for the symmetric polygon. Values range from 3 to 100.

Use this numeric edit slider to set a percentage value for an acute symmetric polygon's radius. Values range from 1 to 100. Note that this setting does not apply to obtuse shapes.

A preview of the shape, representing the current Tool Option settings, appears after the radius tool option.

see also:

Convert to Path

Using the Node Edit Tool

Choosing a Fill or Stroke


Using the Preset Shapes Tool

The Preset Shapes tool [image] is used to draw a variety of pre-defined shapes. To use the tool:

  1. Select it from the Tool Palette.

  2. *Optional: Set the Tool Options (described below) as desired.

  3. Drag the mouse to draw the currently selected shape.

Preset Shapes Tool Options

The Preset Shapes tool options are shown below.

Click the drop down button to choose a Fill/Stroke style (None, Inherit, Solid Color, Gradient, Pattern). Click the Fill/Stroke current setting box to choose a new color/gradient/pattern. Mark the Fill or Stroke checkbox to include the "fill" or "stroke" property in the source.

Enter a stroke width value in this text entry box. Mark the Width checkbox to include the "stroke-width" property in the source.

The shape shown in this preview box represents the current selection with the current Fill, Stroke, and Width settings applied. To choose a different preset shape, click anywhere in this preview box. The available shapes will drop down. Click a shape to select it.

See also:

Convert to Path

Using the Node Edit Tool

Choosing a Fill or Stroke


Using the Line Tool

The Line tool [image] is used to draw straight lines. To use the tool:

  1. Select the tool from the Tool Palette.

  2. *Optional: Set the Tool Options (described below) as desired.

  3. Drag the mouse to draw the line. The "Start" point will be where you begin dragging; the "End" point will be where you release the mouse.

Line Tool Options

The Line tool options are shown below.

Click the drop down button to choose a Fill/Stroke style (None, Inherit, Solid Color, Gradient, Pattern). Click the Fill/Stroke current setting box to choose a new color/gradient/pattern. Mark the Fill or Stroke checkbox to include the "fill" or "stroke" property in the source.

Enter a stroke width value in this text entry box. Mark the Width checkbox to include the "stroke-width" property in the source.

see also:

Convert to Path

Using the Node Edit Tool

Choosing a Fill or Stroke


Using the Polygon Tool

The Polygon tool [image] is used to draw closed <polygon> and open <polyline> objects. To use the tool:

  1. Select the tool from the Tool Palette.

  2. *Optional: Set the Tool Options (described below) as desired.

  3. Draw the object by clicking, moving the mouse, clicking, and so on, where each click sets another point in the object. To set the "End" point, either double-click or select another tool. To modify the points on the object, use the Node Edit tool. (Note that you must apply the Convert to Path command to use the full range of node editing commands.)

Polygon Tool Options

The Polygon tool options are shown below.

Click the drop down button to choose a Fill/Stroke style (None, Inherit, Solid Color, Gradient, Pattern). Click the Fill/Stroke current setting box to choose a new color/gradient/pattern. Mark the Fill or Stroke checkbox to include the "fill" or "stroke" property in the source.

Enter a stroke width value in this text entry box. Mark the Width checkbox to include the "stroke-width" property in the source.

To draw a closed polygon, choose the [image] Type button. To draw an open polyline, choose the [image] Type button.

see also:

Convert to Path

Using the Node Edit Tool

Choosing a Fill or Stroke


Using the Path Tool

The Path tool [image] is used to draw paths using a variety of segment types. Note that <path> objects created with this tool can be node edited without applying the Convert to Path command. To use the tool:

  1. Select it from the Tool Palette.

  2. *Optional: Set the Tool Options (described below) as desired.

  3. Draw the path object as follows:

  4. When drawing the Segment Type labeled "Line Segment", draw the path by clicking, moving the mouse, clicking, and so on, where each click sets another point in the path object. To set the "End" point, either double-click or select another tool.

  5. When drawing the "Cubic Bezier" Segment type, you can draw the path by clicking, moving the mouse, clicking, and so on, where each click sets another point in the path object. You can also draw by clicking to set the "Start" point, and the dragging and releasing the mouse to set subsequent points; the dragging motion introduces curvature to the segment. To set the "End" point, either double-click or select another tool.

  6. When drawing with the Segment Type labeled "Freehand Segment", draw the path by dragging the mouse as though you were using the Freehand tool. The "End" point will be at the cursor position where you release the mouse button.

  7. Note that while drawing the path, you can use any combination of Segment Types.

  8. To modify the points on the object, use the Node Edit tool.

Path Tool Options

The Path tool options are shown below.

Click the drop down button to choose a Fill/Stroke style (None, Inherit, Solid Color, Gradient, Pattern). Click the Fill/Stroke current setting box to choose a new color/gradient/pattern. Mark the Fill or Stroke checkbox to include the "fill" or "stroke" property in the source.

Enter a stroke width value in this text entry box. Mark the Width checkbox to include the "stroke-width" property in the source.

To draw a Line Segment, choose the [image] Segment Type button. To draw a Cubic Bezier, choose the [image] Segment Type button. To draw a Freehand Segment, choose the [image] Segment Type button.

To close the path, choose the [image] button. To add a break in the path, choose the [image] button.

see also:

Using the Node Edit Tool

Choosing a Fill or Stroke


Using the Freehand Tool

The Freehand tool [image] is used to draw freehand lines. Note that the <path> objects created with this tool can be node edited without applying the Convert to Path command. To use the tool:

  1. Select it from the Tool Palette.

  2. *Optional: Set the Tool Options (described below) as desired.

  3. Draw the freehand line segments by dragging the mouse. The "End" point will be at the cursor position where you release the mouse button.

Freehand Tool Options

The Freehand tool options are shown below.

Click the drop down button to choose a Fill/Stroke style (None, Inherit, Solid Color, Gradient, Pattern). Click the Fill/Stroke current setting box to choose a new color/gradient/pattern. Mark the Fill or Stroke checkbox to include the "fill" or "stroke" property in the source.

Enter a stroke width value in this text entry box. Mark the Width checkbox to include the "stroke-width" property in the source.

see also:

Using the Node Edit Tool


Using the Spiral Tool

The Spiral tool [image] is used to draw a spiral path object having either rounded corners or square corners. To use the tool:

  1. Select it from the Tool palette.

  2. *Optional: Set the Tool Options (described below) as desired.

  3. Drag the mouse to create the spiral.

Spiral Tool Options

The Spiral tool options are shown below.

Click the drop down button to choose a Fill/Stroke style (None, Inherit, Solid Color, Gradient, Pattern). Click the Fill/Stroke current setting box to choose a new color/gradient/pattern. Mark the Fill or Stroke checkbox to include the "fill" or "stroke" property in the source.

Enter a stroke width value in this text entry box. Mark the Width checkbox to include the "stroke-width" property in the source.

To draw a square corner spiral, choose the [image] Type button. To draw a rounded corner spiral, choose the [image] Type button.

Use this numeric edit control to set the number of revolutions for the spiral. Values range from 1 to 100.

Use this numeric edit control to set the number of edges for the spiral. Values range from 3 to 360.

To create a spiral with evenly expanding edges (spacing between edges remains the same with each revolution), choose the [image] Expansion button. To create a spiral with unevenly expanding edges (spacing between edges increases with each revolution), choose the [image] Expansion button.

A preview of the shape, representing the current Tool Option settings, appears after the Expansion option.

see also:

Convert to Path

Using the Node Edit Tool

Choosing a Fill or Stroke


Using the Text Tool

The Text tool [image] is used to add text to your WebDraw file. To use the tool:

  1. Select the Tool from the Tool Palette.

  2. *Optional: Set the Tool Options (described below) as desired.

  3. Click where you want the left edge of the text to begin, and then type the text. Note that you can only type one text line at a time.

Editing Text

To edit a text line:

  1. Select the text source (not the <text> object label) in the DOM Palette. This is shown in the graphic below.

  2. In the Attributes tab of the Properties Palette, edit the text as desired. Click the More button to display a larger editing pane.

Text Tool Options

The Text tool options are shown below.

Click the drop down button to choose a Fill/Stroke style (None, Inherit, Solid Color, Gradient, Pattern). Click the Fill/Stroke current setting box to choose a new color/gradient/pattern. Mark the Fill or Stroke checkbox to include the "fill" or "stroke" property in the source.

Enter a stroke width value in this text entry box. Mark the Width checkbox to include the "stroke-width" property in the source.

Choose a font from this drop down list.

Use this numeric edit control to set a point size.

To specify bold, italic, or underlined text, use these buttons.

see also:

Convert to Path

Using the Node Edit Tool

Choosing a Fill or Stroke


Using the Image Tool

The Image tool [image] is used to place a bitmap into the current WedDraw file. Supported file formats include JPG, PNG, or SVG. To use the tool:

  1. Select it from the Tool palette.

  2. *Optional: Set the Tool Options (described below) as desired.

  3. To place the image on the canvas at 100% of its size, click the mouse where you wish to place the image's upper left corner. To set your own image size, drag the cursor to create a square placeholder.

  4. After you've clicked or dragged as described in the previous step, the "Select an image to import" dialog appears.

  5. Navigate to the desired file and open it. The file will appear in the WebDraw document.

Image Tool Options

The Image tool options are shown below.

Use this numeric edit control to set the zoom level.

Click this button to reset the zoom to 1:1 (100%).

Click these buttons to incrementally zoom in or out.

Click these buttons to fit the window to the image, or the image to the window.


Using the Hand Tool

The Hand tool [image] is used to pan around the document when parts of it are not visible in the window (i.e. when scroll bars are present). To use the tool:

  1. Select it from the Tool Palette.

  2. *Optional: Set the Tool Options (described below) as desired.

  3. Drag the hand icon inside the document window.

Hand Tool Options

The Hand tool options are shown below.

Use this numeric edit control to set the zoom level.

Click this button to reset the zoom to 1:1 (100%).

Click these buttons to incrementally zoom in or out.

Click these buttons to fit the window to the image, or the image to the window.


Using the Zoom Tool

The Zoom tool [image] is used to set a magnification level. To use the tool:

  1. Select it from the Tool Palette.

  2. *Optional: Set the Tool Options (described below) as desired.

  3. Left-click to zoom in, or right-click to zoom out. Note that you can also click and drag the magnifying glass icon to specify a zoom area; the bounding box you drag maintains the document's aspect ratio.

Zoom Tool Options

The Zoom tool options are shown below.

Use this numeric edit control to set the zoom level.

Click this button to reset the zoom to 1:1 (100%).

Click these buttons to incrementally zoom in or out.

Click these buttons to fit the window to the image, or the image to the window.

Other Zooming Methods

Two other ways you can zoom in and out include:

  • If your mouse has a wheel between the left and right buttons (example: Microsoft IntelliMouse), roll the wheel to zoom in and out.

  • Press the <+> key on the numeric keypad to zoom in, or press the <-> key on the numeric keypad to zoom out.


Using the Tool Options Bar

The Tool Options bar contains settings and options relevant for the current tool. For example, the graphic below shows the Tool Options for the Rectangle tool.

The tool options available depend on the current tool. (Some tools, however, share the same tool options.) Generally, you would use the Tool Options bar in this way:

  1. Select the desired tool from the Tool Palette or from the Tool Selector [image].

  2. In the Tool Options bar, set the desired options for the tool. Be aware that these settings dictate the tool's behavior.

  3. Use the tool in the canvas to apply the Tool Options settings.

Note that modifying settings in the Tool Options bar will not affect an object you've already created. Instead, use the related settings in the Properties Palette (or modify the source code) to modify editable attributes.

For information on using each tool and its options, choose the desired topic below.

About the Tool Selector Button

The Tool Selector button [image] displays a list of the WebDraw tools. Click the button to display the list, and then click the desired tool you wish to use.

About the Lock Paint Styles Button

The Lock Paint Styles button [image] toggles on and off, controlling whether each drawing tool keeps its own fill and stroke settings or whether all the drawing tools will use the current fill and stroke settings.

  • Toggle the button on (the button will appear sunken [image]) to use the same fill and stroke settings for every drawing tool.

  • Toggle the button off to have each tool retain its most recent fill and stroke settings.

see also:

Using the Select Tool

Using the Node Edit Tool

Using the Rectangle Tool

Using the Ellipse Tool

Using the Symmetric Shapes Tool

Using the Preset Shapes Tool

Using the Line Tool

Using the Polygon Tool

Using the Path Tool

Using the Freehand Tool

Using the Spiral Tool

Using the Text Tool

Using the Image Tool

Using the Hand Tool

Using the Zoom Tool


Using the Toolbar

The WebDraw Toolbar contains a number of frequently-used commands that can be executed simply by clicking the associated button. Each Toolbar button, labeled in the graphic below, displays its identifying tooltip when you place the cursor over the button.

For more information about each Toolbar button, click on the desired topic below.

See also:

Creating a New File

Opening a File

Saving a File

Printing a File

Undoing an Action

Redoing an Undone Action

Cutting an Object from the Document

Copying an Object to the Clipboard

Pasting the Clipboard Contents

Deleting a Selected Object

Viewing the Rulers

Viewing the Grid

Viewing the Guides

Viewing System Information


Tour of the Animation Timeline

WebDraw lets you animate objects by editing their properties over time. The Animation Timeline palette is where you assemble and modify animations. The graphic below points out the features of the Animation Timeline. Each feature is described in the table below the graphic.

Animation Timeline Features

The table below describes the features highlighted in the graphic above.

Zoom Control | This numeric edit control is used to set the scale of the timeline. The default setting is 1.00 (which will display time in 1-second increments), and the setting ranges from 0.01 to 100.00. Higher settings will display more time.
Record Button | Toggles "record" mode on and off.
Animation DOM | This basically mimics what is displayed in the DOM Palette.
Timeline | A graphical representation of the time that comprises the animation.
Timeline Marker | The arrowhead-shaped marker that you drag along the timeline to set the animation time.
Animate Bar | A graphical representation of an animation. Animate bars consist of a beginning point and and endpoint, and in between can contain keyframe markers.
Keyframe Marker | The diamond-shaped markers on an animate bar. Each marker represents a "keyTime" property value in the <animate> statement. A keyframe can be thought of as a control point in the values that define a change in the target object.
Endpoint | The marker at the end of the animate bar. Its position correlates to the "end" property value in the <animate> statement.
Animation Workspace | The area that displays the animate bars which graphically define the animation.

see also:

Using the Animation Timeline


Using the Animation Timeline

Use the Animation Timeline as described below.

  1. Click the Record button [image]. While in Record mode, the button will change to a red circle [image].

  2. Move the Timeline marker [image] to the desired point on the timeline.

  3. If it is not already selected, select the object you wish to animate. You may select it on the canvas, or by clicking it on the Animation Timeline DOM, or by clicking it on the DOM Palette.

  4. Modify the target object's properties. You can do this via the Select tool (to move the object or reshape it), or by using the Properties Palette. Depending on the modification you apply, an appropriate number of <animate> or <animateTransform> statements will be added to the file. These statements will appear in the Animation DOM and in the DOM Palette. These modifications are referred to as keyframes.

Note: When animating attributes such as color, opacity or stroke-width, create smoother transitions by setting the animation's initial value at the first keyframe of the animation.

Note: When animating transformations, the order in which the transformation operations are applied makes a big difference. The ideal order would be to create translate operations first, then scales, then rotates, then skewXs, and lastly skewYs.

  5. To record multiple keyframes, repeat steps 2 through 4 until you are satisfied with the animation.

  6. To end the recording, click the Record button again.

Viewing the Animation

To view what the animation will look like in a browser, click the Preview tab, or choose View > Preview in Browser to view the animation in an external web browser application.

Be aware that you can also get a general look at the animation by dragging the Timeline marker back and forth across the animate bars. Doing this will show you precisely how the animation will appear at a given point in time.

Making Animation Timing Adjustments

Note that you can make the following adjustments to the timing of the animation:

  • To adjust an <animate> statement's "keyTime" values, drag the diamond-shaped markers inside the Animate bar.

  • To adjust the beginning and ending time of an <animate> statement, drag the body of the Animate bar inside the Animation workspace.

  • To adjust the ending time of an <animate> statement, drag the Animate bar's endpoint to a new position.

  • To change the repeat count of an <animate> statement without changing the "keytime" values, hold down the <Shift> key while dragging the Animate bar's endpoint to a new position.

  • To adjust the duration of the animation, drag the Timeline marker to a new position in the timeline, and then drag the Animate bar's endpoint to a new position.

Making Animation Value Adjustments

  • To remove a keyframe marker from an animation, drag it off the Animate bar. Note that you can undo this action.

  • To add a keyframe to an Animate bar, turn on the Record button, place the Timeline marker at the desired position, and then apply the desired modification.

  • To alter the value associated with a particular keyframe, turn on the Record button, place the Timeline marker over the keyframe, and then apply the modification.

Modifying Animation Properties

Most animation attributes can be edited directly via the Attributes tab of the Properties Palette. To do so, select an animation in the DOM Palette (or in the Animation DOM), and edit its attributes in the Properties Palette's Attributes tab. An example is shown below.

The modifiable animation-related attributes in the Properties Palette are described below.

  • Dur: This attribute sets the amount of time assigned to the animation.

  • Begin: This attribute sets when the animation begins.

  • Repeat Count: (Note: To include this attribute in the source, and to make its options available, mark the checkbox next to the attribute.) This attribute indicates the number of iterations of the animation. Options are Indefinite (choosing this will extend the animate bar indefinitely along the timeline), or 1.

  • Fill: (Note: To include this attribute in the source, and to make its options available, mark the checkbox next to the attribute.) This attribute sets the behavior of the animation at its end. Options are Freeze (the animation effect is frozen for the remainder of the duration, or until the animation is restarted), or Remove (the animation effect is removed, or not applied when the active duration of the animation is reached.)

  • Additive: (Note: To include this attribute in the source, and to make its options available, mark the checkbox next to the attribute.) This attributes sets whether or not the animation is additive. Options are Sum (specifies that the animation will add to the underlying value of the attribute and other lower priority animations ), or Replace (specifies that the animation will override the underlying value of the attribute and other lower priority animations ).

  • Accumulate: (Note: To include this attribute in the source, and to make its options available, mark the checkbox next to the attribute.) This attribute sets whether or not the animation is cumulative. Options are Sum (specifies that each repeat iteration after the first builds upon the last value of the previous iteration), or None (specifies that repeat iterations are not cumulative).

  • Calc Mode: (Note: To include this attribute in the source, and to make its options available, mark the checkbox next to the attribute.) This attribute sets the interpolation mode for the animation. Options are Linear (simple linear interpolation between values is used to calculate the animation function), or Discrete (the animation function will jump from one value to the next without any interpolation).

Source Code Items Associated with Animation Timeline Features

The table below shows the source code items associated with the given Animation Timeline feature.

Animate Bar | · <animate> · <set> · <animateTransform>
Keyframe (start-point) | · "from" (the first entry in "values", and this may also include "keyTimes" · "begin"
Keyframe (intermediate point(s)) | · any non-terminal entry in "values", and this may also include "keyTimes"
Keyframe (end-point) | · "to" (the final entry in "values", and this may also include "keyTimes" · "dur" (the actual distance between the start-point and the end-point)

Deleting Animations

You can delete animations as follows:

  • To remove an <animate> statement, select the statement in the Animation DOM or in the DOM Palette, and the press <Delete>. You can also delete an individual <animate> statement from the source code.

  • To delete all animations from the WebDraw file, select and then delete each <animate> statement via the Animation DOM, the DOM Palette, or the source code.

see also:

Tour of the Animation Timeline


Choosing a Fill or Stroke

When using the Tool Palette tools, the current Fill and Stroke settings are shown in the Tool Options palette. A selected object's Fill and Stroke settings can be modified in the Fill and Stroke tab of the Properties Palette.

Choosing a fill or stroke style is a simple two-step process, as described and shown below.

  1. If the current Fill/Stroke style is not what you want, click the drop down button next to the Fill/Stroke swatch. From the list that appears, choose the desired style. Your options are None, Inherit, Solid Color, Gradient, or Pattern.

  2. If you've chosen Solid Color, Gradient, or Pattern, the current color/gradient/pattern will appear in the Fill/Stroke swatch. To choose a new color/gradient/pattern, click the swatch.

  3. If you've chosen Solid Color, left-clicking the swatch will open the Jasc Color dialog. Right-clicking the swatch displays the Recent Colors dialog.

  4. If you've chosen Gradient, clicking the swatch displays the Gradient dialog.

  5. If you've chosen Pattern, clicking the swatch displays the Pattern dialog.


Moving an Object

You can move a selected object using any of the following methods:

  • Place the cursor anywhere inside the object's bounding box and then drag the object to the desired position.

  • When applicable, enter new X and Y coordinates in the Attributes tab of the Properties Palette.

  • When applicable, edit the object's X and Y values in the source code.


Rotating an Object

You can rotate a selected object by using the mouse, the arrow keys, or in 90-degree increments using two menu items. Each method is described below.

Using the Mouse

Go into free rotation mode in one of two ways:

  • Double-click on the object; or

  • With the object selected, click anywhere on the dotted selection rectangle except on the eight selection handles. Note that as you place the cursor over the dotted line, the cursor shape changes to two arrowheads with a line between them. This is shown below.

While in free rotation mode, drag one of the object's four rotation handles. As you drag, the object will rotate around its centerpoint. Unless you move the centerpoint (described below), it will be in the center of the object's bounding box. Release the mouse button to set the object's new orientation.

Moving the Centerpoint

You can move a selected object's centerpoint (indicated in the graphic above) anywhere on the canvas -- even off the canvas if you wish. Doing this sets a new centerpoint around which the object will rotate. Note the following points:

  • The object will only rotate around the moved centerpoint during the current selection; upon subsequent selections of the object, its centerpoint will again be in the center of the object's bounding box.

  • Moving the centerpoint has no effect if you are rotating the object by using the arrow keys or menu items as described below.

Using the Arrow Keys

To rotate a selected object using the arrow keys, you have the following options:

  • To rotate 1 degree clockwise, hold down <Ctrl> and then press the Down or Right arrow key.

  • To rotate 1 degree counterclockwise, hold down <Ctrl> and then press the Up or Left arrow key.

  • To rotate 10 degrees clockwise, hold down the <Ctrl> + <Shift> keys, and then press the Down or Right arrow key.

  • To rotate 10 degrees counterclockwise, hold down the <Ctrl> + <Shift> keys, and then press the Up or Left arrow key.

Using the Menu Items

You can rotate selected objects in 90 degree increments using the following menu items:

  • To rotate a selected object 90 degrees to the left, choose Object > Transformation > Rotate Left 90, or right-click to display the context menu, and then choose Transformation > Rotate Left 90.

  • To rotate a selected object 90 degrees to the right, choose Object > Transformation > Rotate Right 90, or right-click to display the context menu, and then choose Transformation > Rotate Right 90.


Scaling and Skewing Objects

Scaling Objects

You can scale selected objects symmetrically or asymmetrically as described below.

Symmetric Scaling

  • Hold down <Shift> and drag the object up or down from a corner selection handle.

  • When applicable, enter size-related coordinates (such as Height and Width, or Radius) in the Attributes tab of the Properties Palette, or in the source code.

Asymmetric Scaling

  • Drag the object from any of the selection handles.

  • When applicable, enter size-related coordinates (such as Height and Width, or Radius) in the Attributes tab of the Properties Palette, or in the source code.

Skewing Objects

You can skew (tilt) objects horizontally or vertically as described below.

Horizontal Skewing

  1. After selecting the object, go into "Free Rotation and Skewing" mode by clicking anywhere on the dotted selection rectangle except on the eight selection handles. Note that as you place the cursor over the dotted line, the cursor shape changes to two arrowheads with a line between them.

  2. Place the cursor over the top middle or bottom middle handle, and then drag the mouse left or right.

Vertical Skewing

  1. After selecting the object, go into "Free Rotation and Skewing" mode by clicking anywhere on the dotted selection rectangle except on the eight selection handles. Note that as you place the cursor over the dotted line, the cursor shape changes to two arrowheads with a line between them.

  2. Place the cursor over the left middle or right middle handle, and then drag the mouse up or down.


Editing a Gradient

Gradient editing takes two forms: 1) Using the Gradient dialog to edit a copy of an existing gradient, or 2) using the Properties Palette to edit a gradient that has already been applied to an object. Both are described below.

  • Using the Gradient Dialog: The Gradient dialog allows you to create new gradient files, copy a gradient file, edit a copy of a gradient file, or delete a gradient. For information on using the Gradient dialog, click here or click the related topic below.

  • Editing via the Properties Palette: After applying a gradient to an object, you can alter the gradient by selecting the gradient object in the DOM (or in the Animation Timeline DOM), and then editing gradient properties in the Attributes tab of the Properties Palette. For more information on editing a gradient via the Properties Palette, click here or click the related topic below.

see also:

Using the Gradient Dialog

Gradient Editing Via the Properties Palette


Using the Jasc Color Dialog

The Jasc Color dialog box, shown below, is the most full-featured and dynamic method of choosing a solid color.

After setting the Fill or Stroke style to Solid Color, the Color dialog box is displayed by left-clicking the Stroke or Fill contents box in the Tool Options palette or in the Attributes tab of the Properties Palette. There are a number of ways to create and select a new color to use. You can also save up to 16 custom colors. Described below are the items in this dialog box.

The 48 Basic Colors

You can choose from 48 basic colors from the color boxes in the upper left of the dialog box. To select one of these colors, place the cursor over the desired color (the cursor shape will change to a dropper), and then click. The color will appear in the New Color box, and the Current Color panel will be updated to reflect the values associated with the color. Click OK to close the dialog box and use this color.

The Hue Color Wheel

The Hue color wheel is used to dynamically adust the Hue, Red, Green, and Blue values of the color displayed in the New Color box. To adjust these values, drag the Hue picker (the small white circle) inside the color wheel. As you move the picker, the color will appear in the New Color box, and the Current Color panel will be updated to reflect the values associated with the color. Click OK to close the dialog box and use this color.

The Saturation and Lightness Color Box

The Saturation and Lightness color box is used to dynamically adjust the Sat. and Light. values of the color displayed in the New Color box. To adjust the Sat. value, drag the Sat./Light. picker (the small white circle) horizontally inside the color box; to adjust the Light. value, drag the picker vertically inside the color box. The color will appear in the New Color box, and the Current Color panel will be updated to reflect the values associated with the color. Click OK to close the dialog box and use this color.

The Current Color Panel Items

The items in the Current Color panel will update as you select colors from the 48 Basic Color boxes, or from the Custom Color boxes, or as you drag the picker in the Hue circle or the Sat./Light. box.

The RGB and HSL Numeric Edit Controls

You can also use any of the six numeric edit controls in this panel to adjust that specific color value. Note that when you adjust the slider for one of the six values, a color preview will appear inside the slider. The contents of the slider's color preview depend on whether or not the Link Colors checkbox (described below) is marked. For information on using numeric edit controls, see the related topic listed below.

The Link Colors Checkbox

When you mark this checkbox, adjustments you make to any of the grouped color settings (RGB and HSL) will reflect the current setting for the other grouped settings. In effect, you can mark this checkbox if you wish to adjust these grouped color settings and see an accurate color preview. Do not mark this checkbox if you do not want to see an accurate color preview.

AN EXAMPLE:

Shown below is an example of how the Red numeric edit slider contents can differ dramatically when the Link Colors checkbox is marked (on) or not marked (off).

The HTML Code Box

The HTML Code box displays the HTML hex code for the color displayed in the New Color box. If you know the HTML hex code for a color you wish to use, you can enter it in this box; the color will appear in the New Color box. Click OK to close the dialog box and use this color.

The New Color and Old Color Boxes

The New Color box displays the current/active color. This color box automatically updates as you adjust any setting in the dialog box. When you click OK to close this dialog box, the color displayed in the New Color box will become the active color.

The Old Color box displays the color that was the active color before you opened this dialog box. If you choose to use this color again, simply click it— the color will be displayed in the New Color box.

Adding a Custom Color

To add a color to any of the Custom Color boxes, click the box into which you want to add a color. You can then use any of the other items in this dialog box to create/modify a color. When you then click the Add Custom button, the color displayed in the New Color box will be placed in the Custom Color box you clicked.

To use a custom color, click the desired custom color box. The New Color box will display the custom color, and the Current Color panel will be updated to reflect the color's values. Click OK to close the dialog box and use this custom color.

SEE ALSO:

Using Numeric Edit Controls

Using the Recent Colors Dialog Box


Using the Recent Colors Dialog

The Recent Colors dialog box, shown below, provides a quick way to display the 10 most recently used non-standard colors, as well as 10 standard colors.

After setting the Fill or Stroke style to Solid Color, the Recent Colors dialog box is displayed by right-clicking the Stroke or Fill contents box in the Tool Options palette or in the Attributes tab of the Properties Palette. Use this dialog box as described below.

Choosing a Standard Color

To use any of the 10 standard colors displayed, simply click the desired color from the top two rows. The color you click will become the active color, and the dialog box will close.

Choosing a Recently Used Non-Standard Color

To use a recently used non-standard color, simply click the desired color from the bottom two rows. The color you click will become the active color, and the dialog box will close. *Note: Non-standard color will only appear if you have previously used one in a WebDraw session.

Displaying the Color Dialog Box

To display the full-featured Jasc Color dialog box, click the Other button. The Recent Colors dialog box will close and the Color dialog box will appear.

Closing the Recent Colors Dialog Box Without Choosing a Color

You can close this dialog box without choosing a color by simply clicking anywhere outside the dialog box.

SEE ALSO:

Using the Jasc Color Dialog Box


Editing an Effect

After applying an effect to an object, you can edit the components that comprise the effect as described below.

  1. Select an object and apply an effect. The screen captures below show that the Bevel effect was applied to a gradient-filled polygon.

  2. In the Document Object Model (DOM) Palette, notice that the Bevel effect is listed in the "Defs" section. Click the + sign next to Bevel to show the components (referred to as "primitives") that make up the Bevel effect.

  3. You can fine-tune the effect by clicking Bevel or any of the primitives, such as feGaussianBlur. When you click the effect or its primitives, editable attributes will appear in the Attributes tab of the Properties Palette. Shown below are the editable attributes of Bevel and feGaussianBlur.

The object will be updated in the canvas as you edit the effect in the Properties Palette.

Note: For more detailed information about the components for effects and primitives, refer to Chapter 15 (Filter Effects) of the SVG Spec, provided below.

www.w3.org/TR/SVG/

see also:

Apply Effect

Remove Effect


WebDraw Keyboard Shortcuts

You can open WebDraw menus and choose WebDraw commands using the keyboard shortcuts listed below.

Menu Item | Keyboard Shortcut
File | Alt + F
New | Ctrl + N
Open | Ctrl + O
Save | Ctrl + S
Print | Ctrl + P
Edit | Alt + E
Undo | Ctrl + Z, or Alt + Backspace
Redo | Ctrl + Y, or Alt + Ctrl + Z
Command History | Ctrl + Shift + Z
Cut | Ctrl + X, or Shift + Delete
Copy | Ctrl + C, or Ctrl + Insert
Paste | Ctrl + V, or Shift + Insert
Delete | Delete
Select All | Ctrl + A
Select None | Ctrl + D
View | Alt + V
Canvas Mode | Ctrl + 7
Source Mode | Ctrl + 8
Preview | Ctrl + 9
Send to Editor | F11
Show in Browser | F12
Object | Alt + O
Window | Alt + W
Help | Alt + H


Using the WebDraw Help File

If you are unfamiliar with using an HTML-based Help file such as WebDraw's, the graphic below points out the main Help interface items you need to be aware of.

A Note About Context-Sensitive Help

To display the help topic associated with the currently active user interface item, press the F1 key. For example, to see the help topic associated with the Toggle Guides button [image] on the Toolbar, select that button and then press F1.

See also:

Printing Help File Topics


Printing Help Topics

To print a displayed Help file topic, click the Print button [image] in the Help window's Toolbar. When you click this button, the standard Windows Print dialog box will appear. Use the Print dialog to make printer settings (if necessary) and print the topic.

see also:

Using the WebDraw Help File


Using Numeric Edit Controls

There are a number of dialog boxes, as well as some tabs on the Tool Options bar, that use numeric edit controls to set values. The screen capture below shows an example of the numeric edit controls.

There are a number of ways to set a value, including:

  • Click inside the box and enter the desired value.

  • Click the spin control buttons. Click the up arrow icon to increase the value by one; or press and hold the pointer over the arrow to rapidly increase the value. Use the down arrow icon in the same way to decrease the value.

  • Click and hold on the slider button; this displays the slider bar. Continue holding down the mouse button as you move the mouse left (to decrease the value) or right (to increase the value).

The meter bar displays a relative indication of the value in proportion to its minimum and maximum settings.


Valid Units of Measurement

Throughout WebDraw there are a number of dialogs in which you enter units to specify settings such as coordinates, length, or width. WebDraw allows you to enter a variety of units for these settings.

The graphic below shows a selected rectangle and its attributes. Notice how seven different units are specified for the various attributes of the rectangle.

The table below lists the variety of units you can specify in WebDraw. Note that if no two-character unit designation is entered, the default units, pixels, will be used.

Enter this: | To specify this:
em | Ems (the width of an uppercase M in the current font)
ex | Exs (the height of a lowercase X in the current font)
px | Pixels (the default if nothing is specified)
pt | Points (72 points = 1 inch)
pc | Picas (1 pica = 1/6th of an inch)
cm | Centimeters
mm | Millimeters
in | Inches
% | Percent (of default browser window width or height**)

** Subject to change

Entering Units in a Dialog

When you want to specify a unit type other than the default, enter the two-character unit designation after the numerical value without a space between them. You can see this in the graphic above.

see also:

Rulers and Units Preferences


More Information on SVG

To obtain more information about Scalable Vector Graphics, go to the Web site link provided below.

www.w3.org/TR/SVG/


Purchasing WebDraw

This trial version of WebDraw is set to expire (in effect, lock you out of the application) after 30 days of the initial use. To purchase (unlock) your copy of WebDraw:

  1. Call Jasc Customer Service at 800-622-2793 between the hours of 8:00am and 6:30pm CST, Monday through Friday.

  2. Place your order with a representative.

  3. After your order has been placed, Jasc will send you an e-mail confirming your order. In addition, the e-mail will contain your unlocking key and instructions.

  4. Follow the instructions in the e-mail to unlock your copy of WebDraw. If you have any problems unlocking your application, just call Jasc Customer Service.


About Filter Effects

A filter effect is a modification you apply to a selection as a way to enhance its look. The filters you can apply in WebDraw are actually comprised of one or more separate filters, called "primitives." Thus, you apply a general effect to a selection, and if you wish to fine-tune the effect, you make modifications to the primitives associated with the effect.

For more information on applying, editing, or removing an effect, choose the desired topic below.

see also:

Applying Effects

Editing Effects

Removing Effects


About the View Modes

There are three Document Window view modes you can choose:

  • Canvas: This displays the canvas on which you design your WebDraw document by using the application's tools and features. This is the default view mode when you open a document.

  • Source: This displays the source code for your document.

  • Preview: This displays your WebDraw document in an Internet Explorer browser session.

To choose a view mode, simply click the desired tab at the top left of the Document Window, or choose View > Canvas Mode/Source Mode/Preview.


Aligning Object to the Canvas

The Select context menu item Align To Canvas contains three choices:

  • Center Vertically: Choose this item to vertically center the selection to the canvas.

  • Center Horizontally: Choose this item to horizontally center the selection to the canvas.

  • Center Both: Choose this item to vertically and horizontally center the selection to the canvas.

For more information on each command, refer to the related topics below.

See also:

Align to Canvas > Center Vertically

Align to Canvas > Center Horizontally

Align to Canvas > Center Both


Aligning Selected Objects

The Select context menu item Alignment contains seven choices:

  • Top: Choose this option to align selected objects relative to the top of the first selected object.

  • Bottom: Choose this option to align selected objects relative to the bottom of the first selected object.

  • Left: Choose this option to align selected objects relative to the left edge of the first selected object.

  • Right: Choose this option to align selected objects relative to the right edge of the first selected object.

  • Center Vertical: Choose this option to align selected objects relative to the vertical center of the first selected object.

  • Center Horizontal: Choose this option to align selected objects relative to the horizontal center of the first selected object.

  • Center Both: Choose this option to align selected objects both horizontally and vertically relative to the first selected object.

For more information on each command, refer to the related topics below.

see also:

Alignment > Top

Alignment > Bottom

Alignment > Left

Alignment > Right

Alignment > Center Vertical

Alignment > Center Horizontal

Alignment > Center Both


Applying and Removing Effects

The Select context menu item Effects contains two choices:

  • Apply Effect: Choose this command to display the Effects dialog, where you can select an effect to apply.

  • Remove Effect: After applying an effect, you can choose this command to remove it.

For more information on each command, refer to the related topics below.

see also:

Apply Effect

Remove Effect


Arranging Object Order

The Select context menu item Arrange contains four choices:

  • To Top: Choose this item to move the selection above all others.

  • Move Up: Choose this item to move the selection up one level.

  • Move Down: Choose this item to move the selection down one level.

  • To Bottom: Choose this item to move the selection below all others.

For more information on each command, refer to the related topics below.

see also:

Arrange > To Top

Arrange > Move Up

Arrange > Move Down

Arrange > To Bottom


Distributing Objects

The Select context menu item Distribution contains six choices:

  • Vertical Top: Choose this option to distribute selected objects between the highest and lowest top edges.

  • Vertical Center: Choose this option to distribute selected objects between the highest and lowest vertical center points.

  • Vertical Bottom: Choose this option to distribute selected objects between the highest and lowest bottom edges.

  • Horizontal Left: Choose this option to distribute selected objects between the left edges of the left-most and right-most objects.

  • Horizontal Center: Choose this option to distribute selected objects between the horizontal centers of the left-most and right-most objects.

  • Horizontal Right: Choose this option to distribute selected objects between the right edges of the left-most and right-most objects.

For more information on each command, refer to the related topics below.

see also:

Distribution > Vertical Top

Distribution > Vertical Center

Distribution > Vertical Bottom

Distribution > Horizontal Left

Distribution > Horizontal Center

Distribution > Horizontal Right


Editing a Pattern

[this may not be a function of the app]

[spec. def of boundingbox and userspaceonuse follows]

If patternUnits="userSpaceOnUse", x, y, width, height represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the 'pattern' element is referenced (i.e., the user coordinate system for the element referencing the 'pattern' element via a 'fill' or 'stroke' property) and then applying the transform specified by attribute patternTransform.

If patternUnits="objectBoundingBox", the user coordinate system for attributes x, y, width, height is established using the bounding box of the element to which the pattern is applied (see Object bounding box units) and then applying the transform specified by attribute patternTransform.

If attribute patternUnits is not specified, then the effect is as if a value of objectBoundingBox were specified.


File Location Preferences

The File Locations preferences tab, shown below, allows you to assign external applications to launch when you wish to view a file's source code, or view a file in a Web browser.

Using the File Locations Preferences Items

Assign an external text editor or Web Browser application as described below. Note that the Text Editor application you assign here will be launched when you choose the View > Send to Editor command, and the Web Browser application you assign here will be launched when you choose the View > Show in Browser command.

  1. In the "Show files/directories for" drop down list at the top of the tab, choose either Text Editors or Web Browsers.

  2. To assign a new application, click New. The standard Windows Open dialog will appear.

  3. Navigate to the folder containing the text editor or Web browser application you wish to launch, highlight the desired .exe file, and then click Open. The Open dialog will close, and the application's path will appear in the File Locations list, as shown above.

  4. If you wish to add additional applications to the list, repeat steps 1 through 3 above. Click OK to close the WebDraw Preferences dialog.

When you subsequently choose the View > Send to Editor command or the View > Show in Browser command the active WebDraw file will open in the application you chose.

Note: If you assign multiple applications as text editors or Web browsers, the applications will appear in a submenu under the View > Send to Editor (for text editors) or the View > Show in Browser (for Web browsers) commands.

Deleting and Rearranging Applications

Use the Delete, Move Up, and Move Down buttons as described below:

  • Delete: To remove an application from the list, highlight the directory path and then click Delete.

  • Move Up: To move an application up the list, highlight the directory path and then click Move Up.

  • Move Down: To move an application down the list, highlight the directory path and then click Move Down.

see also:

Send to Editor command

Show in Browser command


Gradient Editing Via the Properties Palette

To alter a gradient already applied to an object without affecting the original gradient, use the Properties Palette as described below.

Editing the Overall Gradient

Select the gradient object in the DOM Palette (or in the Animation Timeline DOM), and then view the Attributes tab of the Properties Palette. Here is an example showing the "red-yellow-red" linear gradient (note that radial gradients have different attributes).

Here you can modify a number of attributes affecting the overall gradient, such as positioning and gradient stop attributes.

  • To move a gradient stop, drag it horizontally.

  • To add a gradient stop, click the Add Stop button [image], and then use the "Stop Attributes" dialog as desired.

  • To view a stop's attributes, double-click or right-click the desired stop. The "Stop Attributes" dialog will appear, displaying the attributes.

  • To delete a gradient stop, click the desired stop, and than click the Delete Stop button [image].

Editing Gradient Stops

Select the gradient stop object in the DOM palette (or in the Animation Timeline DOM), and then view the Attributes tab of the Properties Palette. Here is an example showing attributes of the first stop in the "red-yellow-red" gradient.

Here you can modify a stop's Offset, Color, and Transparency.

  • In the "Offset" field, use the numeric edit control to set a location for the stop (values range from 0 (far left) to 100 (far right)).

  • In the "Color" field, choose a stop color by left-clicking (for the Jasc Color dialog) or right-clicking (for the Recent Colors dialog) in the color box.

  • In the transparency numeric edit control, set an opacity value for the stop. Click OK to add the stop to the gradient.

A Note About Using Paint Shop Pro Gradients

To use a gradient from Paint Shop Pro, copy the .JGD file from Paint Shop Pro's "Gradients" folder to WebDraw's "Gradients" folder. You can immediately begin using the gradient in WebDraw.

see also:

Using the Gradient Dialog


Making Objects the Same Size

The Select context menu item Make Same Size contains three choices:

  • Horizontal: Choose this option to resize all objects to have the same width as the first selected object.

  • Vertical: Choose this option to resize all objects to have the same height as the first selected object.

  • Both: Choose this option to resize all objects to have the same width and height as the first selected object.

For more information on each command, refer to the related topics below.

see also:

Make Same Size > Horizontal

Make Same Size > Vertical

Make Same Size > Both


Rulers and Units Preferences

The Rulers and Units preferences tab, shown below, allows you to assign properties to the way rulers, grids, and guides appear on the canvas.

Using the Rulers and Units Preferences Items

Use the items in this tab as described below.

Setting Ruler Properties

In the "Display Units" drop down list, choose the type of units to display in the rulers.

Setting Guide Properties

The "Line Color" color box displays the current guide color. Change the guide color as described below.

  1. Place the cursor inside the color box (the cursor shape changes to a dropper), and then left-click to display the Jasc Color dialog, or right-click to display the Recent Colors dialog.

  2. Use the color dialog to choose a new guide color, and then click OK to return to the Rulers and Units preferences tab. The new color will appear in the Guide Properties "Line Color" color box.

Setting Grid Properties

Set the Grid Properties as described below.

  1. In the "Display Units" drop down list, choose the type of units for the grid. Note that the unit type you choose can be different than the display units for the rulers

  2. To choose a line color for the grid:

  3. Place the cursor inside the "Line Color" color box (the cursor shape changes to a dropper), and then left-click to display the Jasc Color dialog, or right-click to display the Recent Colors dialog.

  4. Use the color dialog to choose a new guide color, and then click OK to return to the Rulers and Units preferences tab. The new color will appear in the Grid Properties "Line Color" color box.

  3. In the Horizontal Spacing and Vertical Spacing text entry boxes, enter the desired amount of space between grid lines. *Note: We recommend that you use the same unit type as the chosen "Display Units" from step 1 above.

see also:

Viewing Rulers

Viewing Guides

Viewing the Grid

Valid Units of Measurement

Using the Jasc Color Dialog

Using the Recent Colors Dialog


Setting Preferences

When you choose File > Preferences, you can choose from two sets of preferences:

General Program Preferences:

Source View Preferences:


Source Format Preferences

The Source Format preferences tab, shown below, allows you to set options affecting the way WebDraw writes the source code when you create a new file or modify an existing file.

Using the Source Format Preferences Items

"Save Color As" Options

When writing out color names in the code, your choices are:

  • Hexidecimal: Denotes a color by its hexidecimal values. Values are written as #nnnnnn, where n is a hexidecimal digit.

  • Name: Denotes a color by its common name, or the closest name to its hexidecimal representation.

  • RGB: Denotes a color by its RGB values. Red, for example, would be written as (255,0,0).

"Line Break" Options

When new lines of code are written out, your line termination options are:

  • Newline: This is the Microsoft Windows standard.

  • LF/CR: (Stands for Line Feed/Carriage Return) This is the Unix standard.

"Indentation" Options

When setting indentation, your choices are:

  • Spaces per Level: Use this numeric edit control to set the number of extra spaces at each level.

  • With Spaces Only: Choose this option to indent only with spaces, not with tabs.

  • With Tabs Only: Choose this option to indent with a combination of tabs and spaces.

  • Tabs per Level: Use this numeric edit control to set the number of tabs at each level.

Setting Column Breaks

Use this numeric edit control to set the number of characters in a column. The value ranges from 40 to 120 characters.

"Styling" Options

Choose a style for displaying the SVG code. Your choices are:

  • CSS: Displays code using the CSS (Cascading Style Sheet) method.

  • XML: Displays code using the XML (eXtensible Markup Language) method.

  • XML and CSS: Displays code using a combination of XML and CSS

Note the following points regarding the Styling options:

  • If you chose a different Styling option while working on a previously saved file, you'll need to modify the file and save it before you'll notice the new style while viewing the source code.

  • More detailed information about the Styling options can be found in the Styling chapter (chapter 6) of the W3C's SVG Spec.

see also:

Source Tab

Send to Editor command

Source View Font and Color Preferences


Tool Drag Preferences

The Tool Drag preferences tab, shown below, allows you to set the behavior of the left and right mouse buttons, as well as their behavior when used in conjunction with the Shift and Control keys. Be aware that these settings apply to all of the tools.

Using the Tool Drag Preferences Items

Use the options in this dialog as described below.

  1. Choose either Left button or Right button. *Optional: To set the button's behavior with the Shift and/or Control key held down, mark the desired check box(es). This dialog allows you to set eight different configurations:

· Left button (without Shift or Control) | · Right button (without Shift or Control)
· Left button with Shift key | · Right button with Shift key
· Left button with Control key | · Right button with Control key
· Left button with Shift and Control keys | · Right button with Shift and Control keys

  2. In the "Behavior for Keyboard/Mouse Settings" area, choose from among the following options:

  3. Drag - Corner to corner: The X,Y coordinates from which you begin dragging the object's bounding box will be one of its corners.

  4. Drag - Center to corner: The X,Y coordinates from which you begin dragging the object's bounding box will be its centerpoint.

  5. Shape - Square: As you drag to create the object, its bounding box is constrained to be square (proportional width and height). Note that choosing this option makes the Alignment options available.

  6. Shape - Rectangle: As you drag to create the object, its bounding box can be rectangular (disproportional width and height).

  7. Alignment - Axis aligned: Creates an unrotated bounding box as you drag to create the object.

  8. Alignment - Free rotation: As you drag to create the object, move the mouse to freely rotate the object.

  9. Alignment - Constrained rotation: As you drag to create the object, move the mouse to rotate the object in the degree increments chosen in the drop down box.

Resetting the Tool Drag Options

To reset the Tool Drag options to their defaults, click the Reset button.

see also:

About the Tool Palette

Rotating an Object


Transforming Objects

The Select context menu item Transformation contains four choices:

  • Mirror: Choose this option to mirror a selected object on its centerpoint.

  • Flip: Choose this option to flip a selected object on its centerpoint.

  • Rotate Left 90: Choose this option to rotate a selected object 90 degrees to the left.

  • Rotate Right 90: Choose this option to rotate a selected object 90 degrees to the right.

For more information on each command, refer to the related topics below.

see also:

Transformation > Mirror

Transformation > Flip

Transformation > Rotate Left 90

Transformation > Rotate Right 90


Using the Gradient Dialog

Use this dialog to create new gradients, copy gradients, edit gradients, or delete gradients.

Accessing the Gradient Dialog

To access the Gradient dialog:

  1. Select the Gradient option in the Fill or Stroke style control.

  2. The contents swatch displays the current gradient. Click the contents swatch to display the Gradient dialog.

Note: For more information on choosing a Fill or Stroke, refer to the related topic below.

Using the Gradient Dialog

The illustration below points out the Gradient dialog items to be aware of.

Choosing a Gradient

The preview in the upper left of the dialog displays the current gradient. To choose a different gradient, click the preview, and then choose the new gradient from the displayed choices.

Note: The appearance of the preview is affected by the current Style, Spacing, and Repeats settings.

Editing a Copy of a Gradient

To alter an existing gradient:

  1. Click the Edit button [image] in the upper right of the dialog. A "Save As" dialog will appear.

  2. In the "File name" field, enter a unique name for the gradient, and then click Save. The editing dialog will appear, it's title matching the name of the original gradient. The example shows the "red-yellow-red" gradient.

  3. Edit the gradient in the following ways:

  4. To move a gradient stop (the right-most stop above is shown selected), drag it horizontally.

  5. To modify a gradient stop's color, click the desired stop and then left-click in the Color box to choose a new color from the Jasc Color dialog, or right-click to choose a new color from the Recent Colors dialog.

  6. To modify a gradient stop's opacity, click the desired stop and then use the Opacity numeric edit control to set an opacity value.

  7. To view a gradient stop's attributes, right-click on the desired stop. The "Stop Attributes" dialog will appear, displaying the attributes.

  8. To add a gradient stop, click the Add Stop button. The "Stop Attributes" dialog will appear. In the "Offset" field, use the numeric edit control to set a location for the stop (values range from 0 (far left) to 100 (far right)). In the "Color" field, choose a stop color by left-clicking (for the Jasc Color dialog) or right-clicking (for the Recent Colors dialog) in the color box. In the transparency numeric edit control, set an opacity value for the stop. Click OK to add the stop to the gradient.

  9. To delete a gradient stop, click the desired stop and then click the Delete Stop button.

Creating a New Gradient

To create a new gradient:

  1. Click the Create button [image] in the upper right of the dialog. A "Save As" dialog will appear.

  2. (Note: The "Object Name" field of this dialog will display "New Black/White Gradient.") In the "File name" field, enter a unique name for the gradient, and then click Save. The "New Black/White Gradient" dialog will appear. Edit the gradient in the ways described in step 3 of the Edit a Copy of a Gradient section above.

Copying a Gradient

To copy an existing gradient:

  1. Click the Copy button [image] in the upper right of the dialog. A "Save As" dialog will appear.

  2. (Note: The "Object Name" field of this dialog will display "Copy_of_[gradient name].") Enter a unique name for the copied gradient, and then click Save.

Deleting a Gradient

Note: There is no confirmation message box warning that you are about to delete the gradient.

To delete an existing gradient:

  1. Click the Delete button [image] in the upper right of the dialog. A confirmation message box will appear.

  2. Click Cancel to skip this operation, or click Delete to delete the gradient.

About the Style Settings

Gradient style can be Linear [image] or Radial [image]. Note the following about each setting:

  • If you choose Linear, the "Angle" numeric edit control will be available. You can use this to set an angle (from 0 to 359 degrees) for the gradient.

  • If you chose Radial, the preview box will display a vertical and horizontal slider. As shown in the source code, the vertical slider affects the radial gradient's "cy" attribute (the equivalent of the "Perimeter Y" value in the Properties Palette), and the horizontal slider affects the gradient's "cx" attribute (the equivalent of the "Perimeter X" value in the Properties Palette).

About the Spacing Settings

Gradient spacing can be set to Bounding Box [image] or User Space on Use [image]. The graphic below shows these two settings used on identical 100 x 100 pixel rectangles. For more detailed information about each setting, refer to the SVG 1.0 Spec.

About the Repeats Settings

Repeats can be set to Repeat [image] or Reflect [image]. The Repeat setting repeats fills the target start-to-end, start-to-end, start-to-end, etc., the number of times indicated by the Repeats numerical edit control. The Reflect setting, however, fills the target start-to-end, end-to-start, start-to-end, etc., the number of times indicated by the Repeats numerical edit control.

Note: The Repeats numerical edit control must be set to 1 or higher in order to make the Repeat and Reflect buttons available.

A Note About Paint Shop Pro Gradients

To use a gradient from Paint Shop Pro, copy the .JGD file from Paint Shop Pro's "Gradients" folder to WebDraw's "Gradients" folder. You can immediately begin using the gradient in WebDraw.

see also:

Gradient Editing Via the Properties Palette

Choosing a Fill or Stroke


WebDraw Context Menus

WebDraw has two right-click context menus:

  • Select context menu: With the Select tool [image] active, right-click to display this menu. It contains a number of frequently used commands for editing your WebDraw file.

  • Node Edit context menu: With the Node Edit tool [image] active, right-click to display this menu. It only contains commands related to the use of the Node Edit tool.

For more information on either context menu, choose the related topic below.

see also:

About the Select Context Menu

About the Node Edit Context Menu