Mapdiva, LLC | Mac OS X Software

One of the most powerful aspects of Artboard is its ability to go way beyond simple stroke and fill styles. The Style Inspector is used to create and edit expert "stacked" styles, such as styles with gradients, arrows, and images adornments.

To open the Style Inspector, click the Style Inspector icon in the toolbar, or choose Window > Style Inspector from the main menu.

Remember the Basics: Drawing Tool + Style = Draw

• To draw with a style you create, choose a drawing tool from the Tools palette and draw a shape or path. With the shape still selected, click the "Reset" button in the Style Inspector to build a new style, or the "Clone" button to copy the style currently in use and then edit it. Use clone, for example, when you want to change the stroke width but keep all other settings the same. Click the "+" and "-" buttons in the Style Inspector to add and remove style components as desired. Drag style components to rearrange their stack order in the Style Inspector. Continue drawing with the style you have defined. When you are ready to change styles, click "Reset" or "Clone" to build a new style.

• To change styles, click "Reset" or "Clone" in the Style Inspector, edit the style, and continue drawing.

The following sections describe how to use the different style components to define expert styles.

To create a new style from scratch, the "Reset" button resets the default simple style with a black stroke and gray fill. To customize the style, add or remove any of the many available style components by clicking the "+" or "-" buttons and adjust the and settings as desired. Continue drawing.

A "Clone" is a copy of the style you are currently using so you can make changes to it and continue drawing without affecting the original. To create a style from an existing style, click the "Clone" button and adjust some properties, such as a stroke’s width or color, while retaining other style component settings as desired.

HINT: Styles in the built-in Mapdiva collection cannot be over-written. To edit styles in the built-in collection, use "Clone" to make a copy of the original.

Styles you create while you are drawing are called "ad hoc" styles unless they are added to your user library.

Optionally, use the Style Inspector to name your styles and add them to "My Collection…" for future use. Saved styles are “master styles” and by default are set as not editable to prevent unintended changes. To enable editing of a library style, check "Editable" in the Style Inspector. Note, styles in the built-in Mapdiva collection cannot be over-written – to enable editing of styles in the built-in collection, use "Clone" to make a copy of the original.

Play with the Style Inspector’s many style components to build "stacked" styles and you’ll be an expert in no time flat.

Styles are "built" by combining various style components. Click the "+" button to add a style component from the drop-down list. For example, to build this cased line with a center dash, three strokes of varying widths are defined and stacked. In this example, we combine a black solid line, a narrower magenta solid line, and a green dashed line. The black stroke is defined first, then the magenta, then the green line. The list shows the order that components are drawn, so the last item in the list is drawn last, which will appear ‘on top’ of components already drawn. Drag to rearrange the stacking order of style components.

From the Style Inspector, you can add a wide assortment of components to create custom styles.

Note, to edit a style component it must be enabled (check box). Disabled components can neither be edited, nor show up when the style is used to draw an object. If desired, individual components of a style can be uniquely named by double-clicking in the master list of the Style Inspector.

In the Style Inspector, the following properties can be edited for strokes: color, width, dashes, cap and join, clipping, offset, and shadow. Note shadows will affect drawing speed and should be used sparingly for good performance while using Artboard.

An Arrowed Stroke component is easily customizable. Color, line width, and dash properties are set in the same way as a standard stroke. Linear, diameter, radius, and angle dimension settings are available.

Set the arrowhead size by dragging the knob (small square) In the arrow preview area. The Arrowed Stroke is highly flexible in that you can set arrow head style on one or both ends. Choose from these options for styling the ends of Arrowed Strokes.

Dimension lines can be created with an arrowed stroke. Choose the dimension setting, including the location along the line, tolerance, and the dimension unit (linear, diameter, radius, or angle). Edit the font appearance by clicking the "A" button. Dimensions will be displayed in the current drawing units.

Occasionally, you may want your work to have a roughened appearance. With the Rough Stroke, you can easily mimic pencil lines or apply color and transparency to mimic markers or even watercolor. Adjust roughness properties in the Style Inspector.

The Tagged Stroke offers an amazing flexibility for easily creating strokes with "tags" or hatches. Properties include options to define the type of tag, including lines, squares, triangles, semi-circles, circles and "v"s. Color, size, and spacing can be set, as well as the option to show or hide the main stroke and taper the tags at either end of the stroke.

Artboard’s Tapered Stroke supplies an elegant way to form styles for such linear features. Options include tapering at one or both ends, as well as setting color, off-set, and stroke width.

The Zig-Zag Stroke adds settings for the amplitude, wavelength, and spread of the zig-zag. Color, line width, and dash are set in the same way as a standard stroke.

Add objects, symbols, or images repeatedly along a path using Path Decorator. For example, draw a circle on the drawing canvas and copy it. Paste it into the image well under Path Decorator. The circle is now added at regular intervals along the path and its scale, spacing, lead-in, end-ramp, off-set, alternating offset, and clipping can be fine-tuned as desired.

For good performance (drawing speed), the image should be small, not too complex, and not too closely spaced.

Use Gradient Fill for stylish linear and radial gradients. The color slider is the place to control the details of color and placement. The gradient well gives you the "big" picture. Gradients can have 2 or more color-stops for awesome effects.

To set gradient colors, select the color stops at each end of the gradient bar. Choose colors form the Colors panel. Add and remove color stops using the “+” and “-” on the left side of the gradient bar, or drag color stops off of the slider bar to remove them. Drag color stops to reposition along the gradient bar.

Rotate the knob on the Iris controls to set the angle of the gradient. Hold the SHIFT-key to constrain the angle of the gradient to 15-degree increments. The angle can be set relative to the object or relative to the page. The center point of a radial gradient is adjusted by moving the position of the gradient Iris controls. Adjust the color blend between two circles of color using the Iris controls to adjust the radius and center point.

The color fill component lets you select the color well and choose from millions of colors using the Colors panel. From the Colors panel, transparency can also be set using the Opacity Slider.

Fill objects with tiled images using the Paste Image command (pastes from clipboard) or use Image File… to add an image from a file. Images can also be dragged-and dropped from the Image Browser into the image-well.

Shadows can be applied to fill components by checking the Shadow option and setting the shadow color, angle, distance, and blur.

Zig-zag fills can be useful for defining styles for unusual shapes. The amplitude, wavelength, and spread are adjustable in the Style Inspector.

Using the Pattern Fill, objects, symbols, or images are regularly repeated within the fill area. Draw an object or add a symbol to your drawing canvas and copy it. Next, paste it by clicking Paste Image in the Style Inspector. Last, set the scale, spacing, alternating offset, and angle as desired.

Random spacing, random scale, and random angle properties allowing more stochastic pattern effects to be realized.

Keep the image small, not too complex and not too densely spaced for good drawing performance (drawing speed).

When a new object is drawn using a pattern fill style, the image objects in the pattern may appear clipped at the edges of the shape. You can use "Suppress clipped images" to hide images at the edge of a shape if they would otherwise appear as clipped.

Hatch fill is used to create patterns of lines or dots. This component offers control over line width, spacing, lead-in, color, and angle. Lines can be dashed, and roughness and wobble can even be added to create a wavy pattern. Add two or more Hatch Fill components with differing angles to create grid patterns.

Adjusting the “Density” setting will automatically generate a dot pattern. Changing “Line width” with a dot pattern will adjust the dot diameter. Changing the “Angle” will adjust the orientation of the pattern.

Several stroke and fill style components contain a "Transform…" setting enabling interesting 3-d visual effects. Based on user input, transform adds copies of the style component in a stacked fashion under the original object. The X and Y offset slide the stack in a distance and direction from the center of the object at the angle designated, whereas X and Y scale adjust the size of the copies. Finally, Blend applies a color blend from the original style component color to the color designated in the colorwell.

Apply an image to any shape using an Image Adornment style component. The Image Adornment style component enables various settings for scaling, clipping, angle and image opacity. Choose an image file or copy and paste an image into the image-well.

Dropping an image from the Image Browser or Finder onto any shape with a fill automatically adds the image as an Image adornment. Use the Style Inspector to adjust the Image Adornment settings.

Note: Although they look similar, an Image Adornment is different from adding a regular image object to your drawing. An Image Adornment is an actual component of the style, which can be applied like any style to any shape. Whereas a regular image object (for example, added from the Image Browser) is a single object.

Core Image Filters are advanced style component that apply filters to other style components. A wide assortment of image filters are available.

To use them, first add a Core Image Filter style component to your style. Drag the style component to which the filter will be applied into (under) the Core Image Filter Group. Our example shows an orange stroke moved into the Core Image Filter Group. From the Core Image Filter Group, choose the desired filter from the drop-down list. Filters are well suited to work with images such as an Image Adornment style component, while a limited number of filters work with strokes and fills, such as Gaussian Blur.

If you want to save a style for later, you can. When you’re satisfied with your new style, click back onto the "Style" heading in the component list to return to the front dialog. Click the untitled style name and enter a new name for your new creation. Click on "Optional Description" to enter a description. Click "Add To My Collection…" to save it into the Library Manager. By default, new styles are added to the My Library > My Collection in the Library Manager. To organize your styles and clip art, drag-and-drop them among categories. New styles are immediately available in the Styles & Clip Art Palette where you can use them for drawing. Your styles are retained in the Library Manager for future use, editing, and even sharing.