# Available Style Components

From the Style Inspector, a wide assortment of components are available to create awesome custom styles.

What you can achieve with custom styles is nearly limitless. For example, with the Roughened Stroke, you can easily mimic pencil lines or markers. The Tagged Stroke offers an amazing flexibility for easily creating hatched strokes. Add repeatable patterns along strokes, such as adding flowers along a path. Create tile fills for textures. Stack multiple style components together. Artboard's Style Inspector helps you build and save your creations – enabling more creativity and greater productivity.

## Show Hide To Add a Stroke and Edit Its Properties:

1. Press the '+' button and choose 'Stroke' from the drop-down menu.
2. The following properties can be edited for strokes:

- COLOR – Press and hold the color-well to display the color array, or click once on the color-well to open the Colors panel.
- WIDTH – Set line width with the slider, highlight the text and type the line width, or use the up/down arrows to adjust the line width.
- SOLID LINE or DASH – Choose 'Solid Line' or a dash pattern from the drop-down list, or choose 'Other…' to define a custom dash pattern in the dialog that is presented.
- LINE-CAP and CORNER-JOIN – Click the icons to choose butted, rounded or square line caps (the appearance at the end of the stroke); and mitered, round, or beveled corners.
- CLIPPING – Choose from 'None' for no clipping, 'Inside' to clip the visual stroke to the inside of the path centerline, or 'Outside' to clip the visual stroke to the outside of the path centerline.
- OFFSET – Use the slider to offset the visible stroke to the left or right of the path centerline.
- SHADOW – Check the box to enable the stroke shadow. Press and drag the knob to adjust the shadow angle. Move the sliders to adjust the shadow distance and blur. Press and hold the color-wells to display the color array, or click once on the color-well to open the Colors panel and change the shadow color.

HINT: 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. See Making the Most of Your Apple Color Picker for more information.

HINT: Heavy use of shadows can affect drawing speed. For good performance, a preference hides shadows when viewing the document above 800% zoom. This preference can be changed and/or disabled in the Artboard > Preferences … Performance dialog.

## Show Hide To Add an Arrowed or Dimension Line Stroke:

1. Press the '+' button and choose 'Arrowed Stroke' from the drop-down menu.
2. Color, line width, dash, and shadow properties are set in the same way as a standard stroke.
3. The following additional properties can be edited for Arrowed stroke:

- ARROW HEAD (END) STYLE – The Arrowed Stroke is highly flexible in that you can set arrow head style on one or both ends. Choose a beginning and/or end style from the drop-down lists.
- ARROW SIZE / SHAPE – Set the arrowhead size by dragging the knob (small square) In the arrow preview area.
- DIMENSION LINE LABEL – 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.

## Show Hide To Add a Rough Stroke:

1. Press the '+' button and choose 'Roughened Stroke' from the drop-down menu.
2. Color, line width, dash, and shadow properties are set in the same way as a standard stroke.
3. The following additional properties can be edited for Roughened stroke:

- ROUGHNESS – Use the slider, highlight the text and type, or use the up/down arrows to adjust the percent roughness of the stroke.

## Show Hide To Add a Tagged Stroke:

The Tagged Stroke offers an amazing flexibility for easily creating strokes with "tags" or hatches.

1. Press the '+' button and choose 'Tagged Stroke' from the drop-down menu.
2. Color, line width, dash, and shadow properties are set in the same way as a standard stroke.
3. The following additional properties can be edited for Tagged stroke:

- SHOW MAIN STROKE – Check to show the main stroke, uncheck to hide the main stroke and show tags only.
- TAG KIND – Press the 'Kind' drop-down list to choose the appearance of the tag, such as lines, squares, triangles, semi-circles, circles and "v"s.
- TAG WIDTH – Use the slider, highlight the text and type, or use the up/down arrows to adjust the width of the tags.
- TAG LENGTH – Use the slider, highlight the text and type, or use the up/down arrows to adjust the length of the tags.
- TAG SPACING – Use the slider, highlight the text and type, or use the up/down arrows to adjust the spacing of the tags along the path.
- TAG PHASE – Use the slider, highlight the text and type, or use the up/down arrows to adjust the percent of the path shown before the tags start.
- TAG ANGLE – Press and drag the knob to adjust the tag's angle.
- ALTERNATING TAGS – When checked, alternating tags are placed to opposite sides of the stroke.
- TAG TAPER – Check the boxes to taper the tags off as they reach the left or right side of the path. Choose the type of taper to be applied. Use the slider, highlight the text and type, or use the up/down arrows to adjust the percent distance of the taper to ends of the path.

## Show Hide To Add a Tapered Stroke:

Artboard's Tapered Stroke supplies an easy way to build styles for elegant paths.

1. Press the '+' button and choose 'Tapered Stroke' from the drop-down menu.
2. Color, line width, dash, and shadow properties are set in the same way as a standard stroke.
3. The following additional properties can be edited for Tapered stroke:

- TAPER – Check the boxes to taper the tags off as they reach the left and/or right side of the path. Choose the type of taper to be applied. Use the slider, highlight the text and type, or use the up/down arrows to adjust the percent distance of the taper to ends of the path.

## Show Hide To Add a Zig-Zag Stroke:

1. Press the '+' button and choose 'Zig-Zag Stroke' from the drop-down menu.
2. Color, line width, dash, and shadow properties are set in the same way as a standard stroke.
3. The following additional properties can be edited for Zig-Zag stroke:

- AMP – Use the slider, highlight the text and type, or use the up/down arrows to adjust the amplitude (distance from centerline) of the zig-zag wave effect.
- WAVE – Use the slider, highlight the text and type, or use the up/down arrows to adjust the wavelength (distance between waves) of the zig-zag wave effect.
- SPREAD – Use the slider, highlight the text and type, or use the up/down arrows to adjust the curvature of the peaks of the wave.

## Show Hide To Add a Path Decorator:

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.

1. Press the '+' button and choose 'Path Decorator' from the drop-down menu.
2. The following properties can be edited for Path Decorator:

- IMAGE – Copy a small graphic from your drawing and click 'Paste Image', or click 'Image File…' to launch Finder and select an image. Vector graphics (such as those copied/pasted from your drawing) are converted to PDF images and are not editable when part of a style component.
- TANGENT TO PATH – When checked, each image will be aligned to the paths curvature. When uncheck each image will be aligned to the page.
- SCALE – Use the slider, highlight the text and type, or use the up/down arrows to adjust the percent scale factor of the image.
- SPACING – Use the slider, highlight the text and type, or use the up/down arrows to adjust the distance between each image.
- LEAD-IN – Use the slider, highlight the text and type, or use the up/down arrows to adjust the distance from the start of the path before images are applied.
- END RAMP – Use the slider, highlight the text and type, or use the up/down arrows to adjust the proportion of path length where images are gradually scaled up to their final size.
- OFFSET – Use the slider, highlight the text and type, or use the up/down arrows to adjust the lateral displacement of images from the path centerline.
- ALTERNATING OFFSET – When checked, alternating images are placed to opposite sides and with 180-degree rotation.
- CLIPPING – Choose from the drop-down list to clip images to the inside or outside of the path.

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

## Show Hide To Add a Color Fill:

1. Press the '+' button and choose 'Color Fill' from the drop-down menu.
2. The following properties can be edited for Color Fill:

- COLOR – Press and hold the color-well to display the color array, or click once on the color-well to open the Colors panel.
- IMAGE – Copy a small graphic from your drawing and click 'Paste Image', or click 'Image File…' to launch Finder and select an image. Vector graphics (such as those copied/pasted from your drawing) are converted to PDF images and are not editable when part of a style component. Useful for tiled images whose properties do not need adjusted.
- SHADOW – Check the box to enable the stroke shadow. Press and drag the knob to adjust the shadow angle. Move the sliders to adjust the shadow distance and blur. Press and hold the color-wells to display the color array, or click once on the color-well to open the Colors panel and change the shadow color.

HINT: 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. See Making the Most of Your Apple Color Picker for more information.

HINT: Heavy use of shadows can affect drawing speed. For good performance, a preference hides shadows when viewing the document above 800% zoom. This preference can be changed and/or disabled in the Artboard > Preferences … Performance dialog.

## Show Hide To Add a Gradient Fill:

Use Gradient Fill for stylish linear and radial gradients. The gradient well gives you the "big" picture as you build the style. Gradients can have 2 or more color-stops for awesome effects.

1. Press the '+' button and choose 'Gradient Fill' from the drop-down menu.
2. The following properties can be edited for Gradient Fill:

- COLOR SLIDER – The color slider is the place to control color selection and placement. 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.
- LINEAR GRADIENT – Choose for a linear gradient.
- **LINEAR GRADIENT ANGLE – In the gradient-well, rotate the knob on the Iris control to set the angle of the gradient. Hold the SHIFT-key to constrain the angle of the gradient to 15-degree increments.
- RADIAL GRADIENT – Choose for a gradient radiating outward from a point.
- **RADIAL GRADIENT POSITION AND RADIUS – In the gradient-well, drag Iris-control rings to adjust the center point of a radial gradient. Drag ring tabs to set gradient radius and adjust the color blend between two circles of color.
- ANGLE RELATIVE TO OBJECT – Checked makes the gradient angle to be set relative to the object. Unchecked makes the gradient angle to be set relative to the page.

## Show Hide To Add a Zig-Zag Fill:

1. Press the '+' button and choose 'Zig-Zag Fill' from the drop-down menu.
2. Color, and shadow properties are set in the same way as a color fill.
3. The following additional properties can be edited for Zig-Zag fill:

- AMP – Use the slider, highlight the text and type, or use the up/down arrows to adjust the amplitude (distance from edge) of the zig-zag wave effect.
- WAVE – Use the slider, highlight the text and type, or use the up/down arrows to adjust the wavelength (distance between waves) of the zig-zag wave effect.
- SPREAD – Use the slider, highlight the text and type, or use the up/down arrows to adjust the curvature of the peaks of the wave.

## Show Hide To Add a Pattern Fill:

Using the Pattern Fill, objects, symbols, or images are regularly repeated within the fill area.

1. Press the '+' button and choose 'Pattern Fill' from the drop-down menu.
2. The following properties can be edited for Pattern Fill:

- IMAGE – Copy a small graphic from your drawing and click 'Paste Image', or click 'Image File…' to launch Finder and select an image. Vector graphics (such as those copied/pasted from your drawing) are converted to PDF images and are not editable when part of a style component. Useful for tiled images whose properties do not need adjusted.
- SCALE – Use the slider, highlight the text and type, or use the up/down arrows to adjust the percent scale factor of the image.
- SPACING – Use the slider, highlight the text and type, or use the up/down arrows to adjust the distance between each image.
- ALT OFFSET – Use the slider, highlight the text and type, or use the up/down arrows to adjust the proportion of additional offset applied to alternating rows.
- ANGLE – Press and drag the knob to adjust the overall pattern angle around the center point.
- RAND SPACING – Use the slider, highlight the text and type, or use the up/down arrows to apply a randomness factor to the motif's position.
- RAND SCALE – Use the slider, highlight the text and type, or use the up/down arrows to apply a randomness factor to the motif's scale.
- RAND ANGLE – Use the slider, highlight the text and type, or use the up/down arrows to apply a randomness factor to the motif's angle.
- ANGLE RELATIVE TO OBJECT – When checked, the pattern's overall angle is relative to the object. When unchecked, the pattern's overall angle is relative to the page.
- IMAGE ANGLE IS RELATIVE TO PATTERN ANGLE – When checked, individual motif's image angle is relative to the overall pattern angle.
- SUPPRESS CLIPPED IMAGES – When checked, images that would be clipped by the object's path are not drawn.

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

## Show Hide About Suppressing Clipped Images:

HINT: 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.

## Show Hide To Add a Hatch Fill and Dot Screen:

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 checkered and grid patterns.

1. Press the '+' button and choose 'Hatch Fill' from the drop-down menu.
2. The following properties can be edited for Hatch Fill:

- LINE WIDTH – Set line width with the slider, highlight the text and type the line width, or use the up/down arrows to adjust the line width.
- SPACING – Use the slider, highlight the text and type, or use the up/down arrows to adjust the distance between each line.
- LEAD-IN – Use the slider, highlight the text and type, or use the up/down arrows to adjust the lead-in, or phase, of the hatch.
- ANGLE – Press and drag the knob to adjust the hatch line angle.
- ANGLE RELATIVE TO OBJECT – When checked, the hatch's overall angle is relative to the object. When unchecked, the hatch's overall angle is relative to the page.
- SOLID LINE or DASH – Choose 'Solid Line' or a dash pattern from the drop-down list, or choose 'Other…' to define a custom dash pattern in the dialog that is presented.
- COLOR – Press and hold the color-well to display the color array, or click once on the color-well to open the Colors panel.
- ROUGHNESS – Use the slider, highlight the text and type, or use the up/down arrows to adjust the percent roughness of the lines.
- WOBBLE – Use the slider, highlight the text and type, or use the up/down arrows to adjust the percent "wobbliness" or random offset of each line.
- DOT DENSITY – To generate a dot pattern, highlight the text and type the percent dot density, or use the up/down arrows to adjust the dot density. After setting a dot density, changing “Line width” with a dot pattern adjusts the dot diameter. Changes to other properties then apply to the dot pattern.

## Show Hide To Add an Image Adornment:

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.

1. Press the '+' button and choose 'Image Adornment' from the drop-down menu.
2. The following properties can be edited for Image Adornment:

- IMAGE – Copy a small graphic from your drawing and click 'Paste Image', or click 'Image File…' to launch Finder and select an image. Vector graphics (such as those copied/pasted from your drawing) are converted to PDF images and are not editable when part of a style component. Useful for tiled images whose properties do not need adjusted.
- FIT OBJECT – When selected, the image is scaled to fit the object (image may be stretched).
- FIT MAINTAINING ASPECT RATIO – When selected, the image is scaled to fit the object while maintaining the aspect ratio (image width or height may be artificially cropped).
- SCALE – When selected, the image is scaled according to a user-defined scale factor. Use the slider, highlight the text and type, or use the up/down arrows to adjust the percent scale factor of the image.
- OPACITY – Use the slider, highlight the text and type, or use the up/down arrows to adjust the percent opacity of the image adornment.
- ANGLE – Press and drag the knob to adjust the overall pattern angle around the center point.
- CLIP TO PATH – When checked, the image is clipped to the object's path.

HINT: 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.

## Show Hide To Add an Effects Group:

An 'Effects Group' applies certain effects, such as blurs and blooms, to other style components within your style. To apply an effects group:

1. Press the '+' button, and from the drop-down menu 'Groups' section, choose 'Core Image Filter' or 'Transform'.
2. Do one of the following:

- With the Effects Group (either 'Core Image Filter' or 'Transform') selected in the style components list, press the '+' button and choose any style component from the drop-down menu. The style component will be added nested within the group.
- Click onto other style components in the style components list and drag them into (or under) the Effect Group. They will appear as nested within the group.
- To remove a style component from an Effects Group, drag the component out of the group.

## Show Hide To Add a Core Image Filter Effects Group:

Core Image Filters are advanced style component that apply filters to other style components. A wide assortment of image filters are available. This example shows an orange stroke moved into the Core Image Filter Group.

1. Add the 'Core Image Filter' effects group and arrange the desired style components nested within the group (see above).
2. Click onto the effects group name in the Style Component list to reveal the available filters.
3. From the drop-down list, select a filter effect to apply to the group.
4. Once a filter effect is selected, a set of filter-specific properties is presented that may be adjusted by the user.

HINT: Filters are well suited to work with images such as an Image Adornment style component, while a limited number of filters work well with strokes and fills, such as Gaussian Blur.

## Show Hide To Add a Transform Effects Group:

'Transform' enables interesting 3-d visual effects. Based on user input, transform adds copies of the style component in a stacked fashion under the original object.

1. Add the 'Transform' effects group and arrange the desired style components nested within the group (see above).
2. Click onto the effects group name in the Style Component list to reveal the available properties.
3. The following properties can be edited for Transform:

- NUMBER OF ADDITIONAL COPIES – Highlight the text and type, or use the up/down arrows to set the number of copies to be added to the stack.
- X OFFSET – Use the slider, highlight the text and type, or use the up/down arrows to adjust the X offset and slide the stack in a distance and direction from the center of the object at the angle designated.
- Y OFFSET – Use the slider, highlight the text and type, or use the up/down arrows to adjust the Y offset and slide the stack in a distance and direction from the center of the object at the angle designated
- X SCALE – Use the slider, highlight the text and type, or use the up/down arrows to adjust the adjust the X scale (size) of the copies.
- Y SCALE – Use the slider, highlight the text and type, or use the up/down arrows to adjust the adjust the Y scale (size) of the copies.
- RELATIVE ANGLE – When checked, the transform is calculated relative to the object's angle.
- ROTATE – Press and drag the knob to adjust the rotation angle of each copy.
- REVERSE – When checked, that transform effects are applied in reverse order.
- BLEND – When checked, each copy's color is a blend between the original color and the blend color here (use the color-well to set color).

Previous Topic: Using the Style Inspector
| Next Topic: Making the Most of Your Apple Color Picker