Posts

Ortl-placeholder-post

Using the Style Inspector

One of the most powerful aspects of Ortelius is its ability to go way beyond simple stroke and fill styles. The Style Inspector is used to create and edit expert “stacked” styles, comprised of various style components, such as gradients, arrows, and pattern fills.

The Style Inspector is also used to save custom styles to the user’s Library collection.

Play with the Style Inspector’s many style components to build “stacked” styles and you’ll be an expert in no time flat. See Available Style Components for more information.

To Open the Style Inspector:

To_Open_the_Style_Inspector.png

Do one of the following:

  • Click the Style Inspector icon in the toolbar.
  • Choose Window > Style Inspector from the main menu.

To Reset the Style to the Default:

  1. Click the ‘Reset’ button in the Style Inspector to reset to the default style (grey fill, black stroke).
  2. Edit the style properties as desired.
  3. Continue drawing (subsequent objects have the same style properties until they are changed).

To Copy a Style using ‘Clone’:

To_Copy_a_Style_using__Clone_.png

‘Clone’ makes a copy of an existing style so you can make changes to it and continue drawing without affecting the original. This makes it easy to adjust some properties, such as a stroke’s width or color, while retaining other style component settings as desired.

1. With the Style Inspector open, make an existing style the active style (it should show in the Style Inspector ‘Preview’) by doing one of the following:

  • Select an object with the style to be cloned.
  • Select a style in the Styles & Clip Art palette.
  • Select a style in the Library Manager.

2. Click the ‘Clone’ button in the Style Inspector to copy to the style.
3. Edit the style properties as desired.
4. Continue drawing (subsequent objects have the same style properties until they are changed).

HINT: Styles in the built-in Mapdiva collection cannot be over-written – to enable editing styles in the built-in collection, use “Clone” to make a copy of the original.

To Work with Non-Saved (Ad Hoc) Styles:

Styles you create while you draw are called “ad hoc” styles unless they are added to your user library. Unless you want to save a style for future re-use, there is no need to rename or add these styles to your Library collection. Simply create styles as desired and continue drawing.

To Enable Editing a Library Style:

Saved styles are “master styles” and when saved they are, by default, set as not editable to prevent unintended changes.

  1. With the style active, check “Editable” in the Style Inspector.
  2. If presented with a confirmation message, click ‘Make Editable’.
  3. After editing, we recommend unchecking the box ‘Editable’ to prevent further unintended changes.

HINT: Styles in the built-in Mapdiva collection cannot be over-written – to enable editing styles in the built-in collection, use “Clone” to make a copy of the original.

To Build a Style Using the Style Inspector:

To_Build_a_Style_Using_the_Style_Inspector.png

Styles are “built” by combining various style components.

  1. Select or draw an object to receive the new style.
  2. With the object selected, press the ‘+’ button to add a style component from the drop-down list.
  3. Adjust the properties of the style component as desired. Multiple components may be added. See Available Style Components for more information about style component settings.

For example, to build this cased line with a center dash, three strokes of varying widths are defined and stacked. Here 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 (bottom) 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.

To Remove a Style Component:

  1. With the style active, click onto the style component name in the style component list.
  2. Do one of the following:
  • Click the ‘-‘ button to remove the style component.
  • Right-click the style component name and choose ‘Delete Component’ from the contextual menu.

To Enable (or Disable) a Style Component without Removing It:

  1. With the style active, click onto the style component name in the style component list.
  2. Check (or uncheck) the ‘Enable’ box to show (or hide) the style component without removing it.

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

To Copy/Paste Style Components:

Each style component carries its own adjustable properties. You can copy and paste a component (and its associated property settings) to the same or other styles.

  1. With the style active, click onto the style component name in the style component list.
  2. Right-click the style component and choose ‘Copy Component’ from the contextual menu.
  3. Do one of the following:
  • Right-click again in the style component list area and choose ‘Paste Component’ from the contextual menu. Adjust style properties as desired.
  • Make a new or different style active, right-click in the style component list area and choose ‘Paste Component’ from the contextual menu. Adjust style properties as desired.

To Save a New Library Style:

To_Save_a_New_Library_Style.png

Optionally, use the Style Inspector to name your styles and add them to “My Collection…” for future use.

  1. When you’re satisfied with your new style, click back onto the “Style” heading in the component list to return to the front dialog.
  2. Click onto the ad-hoc name, highlight it and type a new style name.
  3. Optionally, click the text ‘Optional description’ and type a description for your new style.
  4. Click the ‘Add to User’s Collection…’ button. The Library Manager is launched and the style is added to My Library > My Collection.

New styles are immediately available in the Styles & Clip Art Palette where you can use them for drawing.

Ortl-placeholder-post

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. Ortelius’ Style Inspector helps you build and save your creations – enabling more creativity and greater productivity.

To Add a Stroke and Edit Its Properties:

To_Add_a_Stroke_and_Edit_Its_Properties.png
  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 (app) > Preferences … Performance dialog.

To Add an Arrowed or Dimension Line Stroke:

To_Add_an_Arrowed_or_Dimension_Line_Stroke.png
  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.

To Add a Rough Stroke:

To_Add_a_Rough_Stroke.png
  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.

To Add a Tagged Stroke:

To_Add_a_Tagged_Stroke.png

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.

To Add a Tapered Stroke:

To_Add_a_Tapered_Stroke.png

Ortelius’ 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.

To Add a Zig-Zag Stroke:

To_Add_a_Zig-Zag_Stroke.png
  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.

To Add a Path Decorator:

To_Add_a_Path_Decorator.png

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.

To Add a Color Fill:

To_Add_a_Color_Fill.png
  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 (app) > Preferences … Performance dialog.

To Add a Gradient Fill:

To_Add_a_Gradient_Fill.png

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.

To Add a Zig-Zag Fill:

To_Add_a_Zig-Zag_Fill.png
  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.

To Add a Pattern Fill:

To_Add_a_Pattern_Fill.png

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.

About Suppressing Clipped Images:

About_Suppressing_Clipped_Images.png

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.

To Add a Hatch Fill and Dot Screen:

To_Add_a_Hatch_Fill_and_Dot_Screen.png

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.

To Add an Image Adornment:

To_Add_an_Image_Adornment.png

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.

To Add a Bridge Adornment:

A bridge adornment is a custom overlay style used when your needs are beyond what is supplied with the standard bridge symbol accessed through Edit > Insert Special > Bridge. Unlike normal styles, an overlay style is created and saved to your library in one step, then applied to a track in another step.

CREATE THE OVERLAY STYLE

  1. Use the Linear Select [n] tool to highlight the section of track to accept the new style.
  2. Open the Style Inspector and click ‘Clone’ – using ‘Clone’ helps to visualize how the custom bridge style will look with your track as you create it.
  3. Press the ‘+’ button and choose ‘Bridge’ from the drop-down menu.
  4. Drag the ‘Bridge’ style component to the top of the style component list so it appears under the other track styles.
  5. Adjust the style component properties as desired. The following properties can be edited for Bridge adornment:
  • COLOR – Press and hold the color-well to display the color array, or click once on the color-well to open the Colors panel.
  • 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.
  • PIER SIZE – Size of the bridge piers.
  • SPACING – Distance between each pier (is automatically adjusted to evenly space piers between bridge ends).
  • WIDTH – Width of the bridge.
  • AUTO-SIZE PIERS AND SPACING – Bridge parameters are automatically derived from the path width of the track object to which they are to be applied.

6. Remove the other non-bridge style components from the style components list.
7. Return to the main Style Inspector view, then name and save the new bridge style to your user library.

APPLY THE OVERLAY STYLE
Remember, to place a custom overlay style to a track, save the style to your User collection and do the following:

  1. Use Linear Select [n] to highlight the section of track to accept the new overlay style.
  2. Hold down the OPTION-key and double-click the style in the Styles & Symbols palette.

HINT: If you inadvertently deselect the track with the bridge while you are in the process of formatting its custom style, use the Linear Select tool to highlight the bridge and it will appear again in the Style Inspector.

To Add a Tunnel Adornment:

To_Add_a_Tunnel_Adornment.png

A tunnel adornment is a custom in-line style used when your needs are beyond what is supplied with the standard tunnel symbol accessed through Edit > Insert Special > Tunnel. Unlike normal styles, an in-line style is created and saved to your library in one step, then applied to a track in another step.

CREATE THE IN-LINE STYLE

  1. Use the Linear Select [n] tool to highlight the section of track to accept the new style.
  2. Open the Style Inspector and click ‘Reset’ or ‘Clone’ .
  3. Press the ‘+’ button and choose ‘Tunnel’ from the drop-down menu.
  4. Optionally, remove the other style components from the style component list.
  5. Adjust the style component properties as desired. The following properties can be edited for Tunnel adornment:
  • COLOR – Press and hold the color-well to display the color array, or click once on the color-well to open the Colors panel.
  • 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.
  • TUNNEL TYPE – Choose among a rounded or angular tunnel “portal” type.
  • DEPTH – The depth of the tunnel “portal”.
  • SPAN – The breadth (span) or the tunnel “portal”.

6. Return to the main Style Inspector view, then name and save the new bridge style to your user library.

APPLY THE IN-LINE STYLE
Remember, to place a custom in-line style to a track, save the style to your User collection and do the following:

  1. Use Linear Select [n] to highlight the section of track to accept the new overlay style.
  2. Double-click the style in the Styles & Symbols palette.

To Add a Cutting & Embankment Adornment:

A cutting or embankment adornment is a custom overlay style used when your needs are beyond what is supplied with the standard bridge symbol accessed through Edit > Insert Special > Cutting (or Embankment). Unlike normal styles, an overlay style is created and saved to your library in one step, then applied to a track in another step.

CREATE THE OVERLAY STYLE

  1. Use the Linear Select [n] tool to highlight the section of track to accept the new style.
  2. Open the Style Inspector and click ‘Clone’ – using ‘Clone’ helps to visualize how the custom style will look with your track as you create it.
  3. Press the ‘+’ button and choose ‘Cutting & Embankment’ from the drop-down menu.
  4. Adjust the style component properties as desired. The following properties can be edited for Bridge adornment:
  • CUTTING/EMBANKMENT – Choose among cutting or embankment overlay style.
  • COLOR – Press and hold the color-well to display the color array, or click once on the color-well to open the Colors panel.
  • SCALE – Image scaling factor.
  • SCALE VARIABLE – Sets a variable scaling factor.
  • SPACING – Distance between each image.
  • WOBBLE – “Wobbliness” factor or random offset of images.
  • END RAMP – Proportion of path length where images are gradually scaled up to their final size.
  • OFFSET – Lateral displacement of images from path center line.
  • ALTERNATING OFFSET – Alternate images are displaced to opposite sides and with 180-degree rotation when checked.
  • CLIPPING – Images may be clipped to the inside or outside of the path.

6. Remove the other non-cutting/embankment style components from the style components list.
7. Return to the main Style Inspector view, then name and save the new cutting/embankment style to your user library.

APPLY THE OVERLAY STYLE
Remember, to place a custom overlay style to a track, save the style to your User collection and do the following:

  1. Use Linear Select [n] to highlight the section of track to accept the new overlay style.
  2. Hold down the OPTION-key and double-click the style in the Styles & Symbols palette.

HINT: If you inadvertently deselect the track with the cutting/embankment while you are in the process of formatting its custom style, use the Linear Select tool to highlight the cutting/embankment and it will appear again in the Style Inspector.

To Add a Label Adornment:

To_Add_a_Label_Adornment.png

A label adornment pre-defines the label styling properties to be used with a style. Once defined, the label style component is changed to ‘Disabled” so it is displayed only when applied interactively to an object in your map.

  1. Draw a path or shape to let you visualize how the label will look with the style.
  2. With the object still selected, open the Style Inspector and click ‘Reset’ or ‘Clone’ to create a new style.
  3. Press the ‘+’ button, and choose ‘Label’ from the drop-down menu ‘Adornment’ section.
  4. Do one of the following:
  • If you have a shape object to receive the label, choose ‘Flow text into object’s rectangle’ from the ‘Layout’ drop-down menu.
  • If you have a path object to receive the label, choose ‘Along object’s path’ from the ‘Layout’ drop-down menu.
  • Choose another option (such as ‘Along reverse path’) from the ‘Layout’ drop-down menu as desired.

5. Adjust the remaining style component properties as desired. The following properties can be edited for Label adornment:

  • VERTICAL – The vertical alignment options (align top, middle, bottom, center on path, variable); if ‘Variable’ is chosen, the vertical alignment slider becomes active letting you interactively set the vertical alignment.
  • WRAP LINES – The text is wrapped when checked; if unchecked only a single line is drawn (shapes only).
  • ANGLE – Rotation angle of the text.
  • ANGLE RELATIVE TO OBJECT – Text angle is relative to the object when checked.
  • CLIP TO PATH – Text is clipped to object’s path when checked.
  • TEXT COLOR – Text color.
  • JUSTIFICATION – Horizontal justification of text.
  • FONT – Opens Fonts panel.
  • OUTLINE – Text has an outline when checked.
  • MASK – Text has a mask when checked.

6. The default text label reads “Text Adornment”, is displayed as entered, and can be left blank. Alternatively, a look-up ‘tag’ can be applied that will look up the label value according to any object attributes that may exist (as defined in the Object Inspector – Attributes pane). To define the content of a label, do one of the following:

  • Double-click the text in the text-well to select it for editing and begin typing – when a text label is added to an object the label is displayed as entered.
  • Double-click the text in the text-well to select it for editing and delete it – when a text label is added to an object the label is displayed as “Label” and can be edited directly on the object with a double-click.
  • Double-click the text in the text-well to select it for editing and choose a tag from the ‘Tags’ drop-down list (Route Number, Sequence Number, Sequence Cardinal, or Name) – when a text label is added to an object the label is displayed as the attribute value, if it exists (if no attribute exists, it will be displayed as “Label”).
  • Double-click the text in the text-well to select it for editing and type “%%” followed immediately by a custom attribute to be used in the label (for example, ‘%%CITYNAME’). The ‘%%’ preface indicates to Ortelius that the value is to be looked up.

7. IMPORTANT: Once the label is formatted, uncheck the ‘Enabled’ check box in the style components list. This hides the label adornment until a label is interactively added to an object.
8. Return to the main Style Inspector view, then name and save the new style to your user library.

HINT: See Using Map Text Labels, Text Labeling Area Features, Text Labeling Point Features, and Text Labeling Linear Features for more information on using Ortelius’ powerful labeling system.

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:

Draw a shape or a path so you can visualize the label as you define the style.
Press the ‘+’ button, and from the drop-down menu ‘Groups’ section, choose ‘Core Image Filter’ or ‘Transform’.

  1. 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.

To Add a Core Image Filter Effects Group:

To_Add_a_Core_Image_Filter_Effects_Group.png

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.

To Add a Transform Effects Group:

To_Add_a_Transform_Effects_Group.png

‘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).

0-Chrome-Artboard-570x233

Create a Shiny Chrome Text Effect

In the following tutorial you will learn how to create a shiny chrome effect for text shapes. This style can be applied to a variety of graphics, including shapes and symbols. Let’s get started!

Tutorial Details

Program : Artboard for Mac OSX 1.0+
Difficulty: Intermediate
Topics Covered: Style Inspector; Gradients
Estimated Completion Time: 15-20 minutes

ATTENTION: As of Artboard 1.7, “shared” styles are no longer part of the default workflow, therefore, references to “New” and “Clone” in this tutorial are no longer current. As of Artboard 1.7, the “New” button in the Format Bar and Style Inspector becomes the “Reset” button. See the Users Guide for more information about shared styles.

Step 1

Add a text box to your drawing canvas using the Text Box [t] tool. With the Select [s] tool, double-click the text box and edit the text.

Step 2

Open the Fonts panel from the Artboard toolbar. Pick a nice bold font that will hold up to the weight of your chrome style. For example, we’re showing the very stylish Velocette font downloaded from dafont.com. Adjust the size of your text accordingly (ours is rather large at 180 pts). Note, adjust the sizing handles of your text box if you’ve made your text very large (if you see the “+” in the lower right on the text box it indicates some text is hidden).

Step 3

This particular font comes with a few nice embellishments. Let’s add an underline to give our graphic some flair (note, this step is unnecessary if you aren’t adding special characters). Double-click the text with the Select [s] tool and position your cursor at the end of the word. Choose Edit > Special Characters… from the main menu to open the Special Characters panel. Navigate to your selected font and click onto the special character of interest. Click the “Insert with Font” button to place the character.

Step 4

Convert your text into a shape object so you can apply the new style. Select the text with the Select [s] tool. Choose Graphic > Convert To… > Shape from the main menu (or right-click and choose Convert To Shape from the contextual menu). You are now working with a shape object, therefore the text can no longer be edited.

Step 5

Now let’s start having some fun creating our chrome effect style. Select the shape and open the Style Inspector from the toolbar. Click onto the Expert pane and c (EDIT: As of Artboard 1.3 the “Simple” and “Expert” buttons have been removed from the Style Inspector (it edits all expert styles by default)) Click the “New” style button. Click the “+” button to add a “Gradient Fill” style component.

Step 6

Click onto the “Fill” style component in the Style Inspector list and add a shadow to the fill.

Click and drag the “Stroke” component name to reorder so the stroke is visually “on top” of the style stack (the stroke will actually be on the bottom in the layer list). Edit the stroke color and stroke width; ours is light gray with .05 cm stroke width (alternatively .02 in or 1.417 pt depending on your document’s drawing units setting).

Step 7

Click onto the “Gradient Fill” style component in the list. You will use a linear gradient with several color stops. Click the “+” button along the gradient slider to add a color stop.

The Colors panel will open automatically each time you click or add a color stop. Slide the color stops along the gradient to position them. The trick to creating a chrome-like effect is to have a light side and dark side, each with their own gradient stops, and position the middle transition from light to dark very close together. To remove a color stop, click and drag it off the slider or click the “-” slider button. Try experimenting with your own combinations. In this example, we’ve added a touch of blue to our darker scheme.

Step 8

Here’s how it looks so far with our background object turned on. Not too shabby :)!

Step 9

This participar font is designed with nice connecting strokes. However, when the style is applied to the shape the breaks between the original individual letters shows. The reason for this is the shape consists of multiple separate paths (from the original letters) within the shape object. The remedy is to break the object apart, then reassemble it as one unified object. Note, this step is unnecessary if you have used a disconnected font. Select the shape and choose Graphic > Combine… > Break Apart from the main menu.

Step 10

For each letter shape that originally had an enclosed circular or curved negative space (white space), that space is now a separate shape that must be subtracted from the primary shape. Select the letter shape and its corresponding counter (the enclosed space) and choose Graphic > Combine… > Difference Boolean operation from the main menu. You might find it convenient to customize your toolbar with buttons for these functions. For example, the “A” letter shape and its counter are selected and subtracted from each other with this command. Repeat as necessary for each affected letter shape. (Note, to keep font shapes true to their original, make sure Graphic > Combine… > Curve Fitting Policy is set to “Never Curve Fit”.)

Step 11

Once the counters have all been combined, select all the letter shapes and choose Graphic > Combine > Union from the main menu. It is now one unified shape object. Here’s how it looks with the background turned on.

Step 12

Once complete, you have the option to save the style in your user “My Library” (alternatively you can continue to use it as an ad hoc style). To add a style to your library make sure your shape is selected then click “Style” at the top of the style component list. Click into the Name text box and type a name for your style, then click the Enter-key on the keyboard. Alternatively, add a description. Click the Add To “Collection” button to add it to your library.

Final Image

Have fun experimenting with different gradient combinations to get your desired look. For example, see how it looks when you apply an angle to your gradient. Here is our finished product with a nice simple gradient used to great effect.