Posts

Artboard 2 Featured Image

The Text Tab

Text properties, such as font and color, are applied directly through controls in the Text Tab.

Read more

Map Text Label Styles Included with Ortelius for Mac

Map Text Styles Included with Ortelius

Ortelius’ Styles & Symbols palette includes a series of text styles designed for map text, titles and labels perfect for cartography and map design. Text styles are formatted to provide a complimentary selection of text for map feature names, such as countries, regions, rivers and towns. To edit built-in styles, Clone a style and customize it to suit your project.  These are just some of the styles & clip art among a wide assortment of over 1700 fully editable vector map symbols and custom styles included in the built-in Ortelius Library.

To Get This Collection

This collection is included with the Ortelius software for Mac OS X. Don’t have Ortelius? Try it free!

Terms of Use

Creative Commons License Media provided by Mapdiva LLC are licensed under a Creative Commons Attribution 3.0 Unported License unless otherwise noted. Attribution to Mapdiva.com is requested, however not required.

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

Ortl-placeholder-post

Using the Ortelius Fonts Panel

Text is styled directly through the Fonts panel and Text commands in the main menu. With one or more text objects selected, open the Fonts panel. As desired, choose the font and associated style elements, such as size, color, and shadow. Alternatively, colors can be dropped on text objects directly from the Colors panel.

To Open the Fonts Panel:

To_Open_the_Fonts_Panel.png

Do one of the following:

  • Choose the Fonts icon in the toolbar.
  • Choose Text > Show Fonts from the main menu.

To Use the Fonts Panel:

To_Use_the_Fonts_Panel.png
  1. Choose one or more text object.
  2. Use the Fonts panel to choose typefaces, font sizes, and other font formatting, including text shadows and strikethrough.

Here is a summary of the text effects buttons, from left to right across the top:

  • Text Underline pop-up menu to choose an underline style (such as single or double).
  • Text Strikethrough pop-up menu to choose a strikethrough style (such as single or double).
  • Text Color pop-up menu to apply a color to text.
  • Text Shadow button to apply a shadow to selected text.
  • Shadow Opacity, Shadow Blur, Shadow Off set, and Shadow Angle controls affect the appearance of the shadow.

To Set Outlined and Masked Text in the Object Inspector:

To_Set_Outlined_and_Masked_Text_in_the_Object_Inspector.png

Use the Object Inspector to add advanced styling, including text outline and text mask. Text outline and masking are particularly useful for making text stand out on top of dark, colored, or complex backgrounds.

  1. Make text active for editing.
  2. Open the Object Inspector.
  3. Do one of the following:
  • To outline text, use the slider, highlight the text and type, or use the up/down arrows to adjust the outline thckness as a percentage of font size. Click the color well to change the outline color.
  • To mask text, use the slider, highlight the text and type, or use the up/down arrows to adjust the mask (knockout) size as a percentage of font size. Click the color well to change the mask color.

HINT: Masking can be any color as well as semi-transparent, and the size of the mask is fully adjustable.

Ortl-placeholder-post

Working with Text Objects

Several text formatting options are available through the main menu. Choose Text > to choose from styles, alignment, case, kerning, and more. The Fonts panel offers font selection and custom effects, including outline, shadow, and mask. Align, tighten and loosen kerning, change case and baseline are available menu options and keyboard shortcuts. Font effects and options can be applied to blocks of text, individual words, and and even individual glyphs. For full creative control, text can be converted to a graphic shape or path to allow any drawing manipulation.

To Add and Edit Text:

To_Add_and_Edit_Text.png
  1. Choose the Text [t] tool.
  2. Do one of the following:
  • Click on your drawing canvas to place the text box.
  • Press and drag to place a custom size text box.

3. Begin typing.
4. To end typing, do one of the following:

  • Click on the drawing canvas to place another text box.
  • Click the Esc-key to end typing and return to the Select tool.
  • Choose the Select tool or another drawing tool.

HINT: If you prefer to have the Return-key end editing, disable (uncheck) ‘Return-key inserts a new line when editing text boxes’ in the Artboard > Preferences… Editing pane; while disabled, use SHIFT-Return-key to insert a new line in multi-line text.

To Edit Existing Text:

  1. Double-click existing text with the Select [s] tool to make the text active for editing.
  2. Do one of the following:
  • Start typing to replace the selected text.
  • Click to place the cursor within the selected text to insert new text.

3. Click outside of the text box, or the Esc-key, to end editing.

To Expand the Text Box When Some Content is Hidden:

To_Expand_the_Text_Box_When_Some_Content_is_Hidden.png

When text extends beyond the confines of the text box an indicator “+” is shown in the lower right-hand corner of the text box prompting you to enlarge it.

HINT: Text in a box will not be visible if the font size is larger than the text box. Use the sizing handles on the text box to make it bigger, or right-click the text box and choose ‘Fit To Text’ from the contextual menu.

To Add Text On a Path:

To_Add_Text_On_a_Path.png

Artboard makes curved text beautifully. A bit of practice is all it takes to give your curved text an expert look. Text On Path uses curves with the same controls as the Path tool.

  1. Choose the Text Path [e] tool.
  2. Press and drag to place the starting point for your text on a path, release the cursor and continue placing points along the curve.
  3. Double click (or hit ESC-key) to end the path.
  4. Begin typing.
  5. To end typing, do one of the following:
  • Click on the drawing canvas to place another text path.
  • Click the Esc-key to end typing and return to the Select tool.

6. With the Select [s] tool, adjust the curve handles as desired.

HINT: It is a good practice to keep your text curves simple. With only two points you can create smooth c-shaped and s-shaped curves simply by adjusting the points themselves (the orange dots) and the curve handles (the blue squares). The longer the curve handles, the steeper your curve. Experiment by moving the curve handles around and altering the shape of the curve.

To Edit Text on a Path:

To_Edit_Text_on_a_Path.png
  1. Double-click the text with the Select [s] tool to edit (make sure you click onto a letter when double-clicking to recognize the selection).
  2. When selected, the text to be edited will float above the path and be highlighted.
  3. Do one of the following:
  • Start typing to replace the selected text.
  • Click to place the cursor within the selected text to insert new text.

4. Open the Font panel to change the font and appearance of text.

To Change Text Alignment Along the Path:

To_Change_Text_Alignment_Along_the_Path.png

Text On Path has “Justified” alignment by default, giving it a stretched appearance across the entire length of the path.

  • Choose Text > Align > Left / Right / Justified / Center to change text along a path to your desired alignment.

Flipping Upside-down Text:

Flipping_Upside-down_Text.png

Like normal paths, Text On Path has a direction from its start point to its end point. Text On Path follows the direction of the path – typically reading from left to right.

  1. To draw text upside-down, start the path from right to left.
  2. To flip text that is upside-down, choose Edit > Path > Reverse from the main menu.

To Fit Text to a Shape (for example a circle)

To_Fit_Text_to_a_Shape__for_example_a_circle_.png

In addition to drawing a Bezier curve with the Text Path tool, you can fit text to any shape.

  1. Use the Text Path [e] tool to place your text on your drawing canvas (don’t worry about the shape of the path).
  2. Begin typing.
  3. To end typing, do one of the following:
  • Click the Esc-key to end typing and return to the Select tool.
  • Choose another drawing tool.

4. Next, draw your shape.
5. While the shape is sected, copy it to the clipboard.
6. Select the text and choose Edit > Paste Text Clipping Path from the main menu. The text will now follow the path of the object.

HINT: To wrap text only partially around a circle, use the Arc tool to draw an arc to the desired length and paste it onto your text using the above method.

To Use Spreading (or Tracking) on Text:

To_Use_Spreading__or_Tracking__on_Text.png

Text can be spread out across and area (called “tracking”).

  1. Select the text.
  2. Do one of the following:
  • Hold the Option-Command keys and repeatedly pressing the right Arrow (end) key to spread text.
  • Choose Text > Kern > Loosen from the main menu. Repeat as necessary to get a wide spread.
  • Hold the Option-Command keys and repeatedly pressing the left Arrow (end) key to tighten tracking.
  • Choose Text > Kern > Tighten from the main menu. Repeat as necessary to tighten the spread.
  • Choose Text > Kern > Use Default from the main menu to reset to the original tracking.

HINT: Tracking command may also used to add (or tighten) space between selected letters, rather than the entire text box or path.

To Make Text Bigger, Smaller, Bold, Italic, and Underline:

To_Make_Text_Bigger__Smaller__Bold__Italic__and_Underline.png

Modify text properties in the Fonts panel, or by choosing various Text > options in the main menu. Use the convenient keyboard shortcuts to quickly modify text properties.

Need multi-styled text? Text boxes can use multiple fonts, sizes, colors, and more in a single text box.

  1. Make text active for editing.
  2. Press and drag to highlight individual text or words for editing.
  3. Open the Font panel to change the font and appearance of text.

To Edit Text and Text Properties in the Object Inspector:

To_Edit_Text_and_Text_Properties_in_the_Object_Inspector.png

The Object Inspector provides a controlled environment for text box editing, styling, layout, alignment and advanced styling.

  • The text well in the Object Inspector shows the selected text, which can be edited directly or from this interface.
  • Layout and vertical alignment controls are available for text-box and text on path.
  • Variable vertical alignment is further controlled with the slider bar.
  • Wrap lines is the default setting and enables a long string of text to flow to multiple lines within the text box.
  • Angle and text justification settings are available.
  • Click onto the color wells to change font, outline, and mask colors.
  • The “A” font button opens the Fonts palette, further enabling font and font size settings from this interface.
  • Advanced styling includes text outline and text mask.

To Make Shape Objects from Text and True Type Fonts:

To_Make_Shape_Objects_from_Text_and_True_Type_Fonts.png

Text and True Type Fonts (TTF) can be converted into individual editable shape objects. These new shape objects can be further styled, grouped, and saved as clip art as desired.

  1. Place text in the drawing area using the Text Box tool. Choose the font you want to use, or choose Edit > Special Characters from the main menu to open the Special Characters window.
  2. After typing, select the text box and choose Graphic > Convert To > Shape or Graphic > Convert To > Shape Group from the main menu (or right click and choose ‘Convert To…’ from the contextual menu). When converted to shape, the entire block of text is one shape. When converted to shape group, you can Ungroup to obtain each glyph as a separate object.
  3. To further explode and modify multi-layered objects, choose Graphic > Combine > Break Apart from the main menu and modify the shape or re-color individual components.

Ortl-placeholder-post

Using Map Text Labels

Labels go hand-in-hand with the map’s styles and symbols, so of course we’ve designed them to work together. Unlike ordinary text placed with the Text tools, labels are attached to map features. If the feature moves, the label moves with it. Labels make naming map features easy with intelligent naming, advanced styling, and just-right positioning.

Ortelius’ labeling system opens a new chapter in WYSIWYG (what-you-see-is-what-you-get) feature labeling. No more going through multi-level menus and dialogs to turn on labels and change settings, only to have to repeat the process multiple times to get the right look. Direct feature labeling provides a revolutionary way to add and edit labels – directly on your map.

About Labels with Style:

About_Labels_with_Style.png

Ortelius is loaded with hundreds of styles and symbols. Styles not only define the look of lines and areas, they can also define the initial style for labels. So, when you place a river using a river style, the river’s label style is already designed for you. As always, label styles are fully editable directly on the map, and you can easily create and share your own custom styles using the Style Inspector.

Changing a label directly will not over-write the Library style, rather these changed labels will be saved as “ad-hoc” styles unless they are created using the Style Inspector and added to the Library. Use ad-hoc styles when their use will be occasional. Use Library styles and symbols when they will be used repeatedly or need to be used later in other maps.

Changing label text styles is similar to changing them on simple text objects. Select the label(s) and edit the font in the Fonts palette. This method can be used with multiple labels at one time.

To Select Labels:

To_Select_Labels.png

Selected labels are shown using bubble-shaped highlights to distinguish the label selection from other kinds of selections in your drawing.

  1. Choose the Select [s] tool.
  2. Do one of the following:
  • Click onto an object label to select it.
  • To select multiple labels, hold the Shift-key and click additional labels, or hold the Command-key and click to select or deselect labels.
  • Double-click to make the label active for editing.

To Show (or Hide) Labels:

To_Show__or_Hide__Labels.png

Labels can be turned on or off (visible or hidden) on your map.

Do one of the following:

  • Selecting the labeled feature(s) and choosing Edit > Labels & Text > Hide(Show) Labels from the main menu.
  • Choose Edit > Select All and then Hide Labels to turn off all labels on a layer.

About Labels for Symbols, Tracks, and Shapes:

About_Labels_for_Symbols__Tracks__and_Shapes.png

Each feature type – lines, points, and areas – has context-sensitive positioning for labels. For example, symbol labels for point features can be placed in one of nine standard positions around and at the center point (the upper-right position is the default). Track labels follow linear features and are positioned above, on, or below the line. Area feature labels are placed at the visual center of the shape.

Labels can also be moved into any position around the symbol by simply holding the Shift-key on the keyboard while moving it into the perfect position. Optional leader-lines can be added by right-clicking the label and choosing “Show Leader Line.” Of course, if it is ever needed, you can always right-click the label and choose “Detach Label” to move it anywhere (the label will be completely detached from the feature and its attributes, and become an ordinary text object).

Free-text labels may be added to any point symbol, track, or shape object. Simple shapes, connectable tracks, symbols, and shapes from imported shapefiles support labeling. If you have an area object created with another drawing tool, for instance an irregular polygon, select the object and choose Graphic > Convert To > Shape from the main menu, or right-click the object and choose Convert To Shape.

To Add Free-Text Labels:

To_Add_Free-Text_Labels.png
  1. Do one of the following:
  • Select the symbol(s) or shape(s) and choose Edit > Labels & Text > New Label from the main menu. If the feature has attribute information behind it that includes the feature’s name, the label may automatically detect and label the feature with its name. Otherwise, the word “Label” will be inserted for editing.
  • For a single object, right-click and choose ‘New Label’ from the context menu.

2. With the Select [s] tool, double-click the label to select it. You may see a code starting with “%%” highlighted – ignore this tag and type a free-text label with the text you want. As with simple text objects, double-click the label to edit it any time.

HINT: Special shapes, such as stars, arcs, and rounded-rectangles must be converted to regular shapes before a label can be added. Select the special shape and choose Graphic > Convert To > Shape from the main menu, or right-click and choose ‘Convert To Shape’ from the contextual menu.

To Label Multiple Features:

The power of Ortelius’ labeling system includes swift labeling of the features you want – all features or just a select few. Manually adding a label to each feature is not necessary.

  1. Choose the Select [s] tool.
  2. Select the features you want to label and choose Edit > Labels & Text > New Label from the main menu.

HINT: To select the features you want labeled hold down the SHIFT key and click each object with the Select tool, or use Edit > Select All to select all features on a layer, or use Ortelius’ advanced search to select specific features (for example, to select and label cities with populations over 100,000). Then choose Edit > Labels & Text > Paste Label from the main menu.

To Create an Ad-Hoc Label to Apply to Multiple Objects:

  1. Add a label to a feature and use the Fonts palette to style the label; type the label text as desired (note, you can use the ‘%%’ intelligent label tag here).
  2. Right-click your new label and choose ‘Copy Label’ from the contextual menu.
  3. Select the feature(s) you want to label and choose Edit > Labels & Text > Paste Label from the main menu. The label and its properties will be applied to all the features you have selected.

To Edit the Style of Multiple Labels:

Properties applied to labels, such as Fonts, apply to all labels in the selection.

  1. Choose the Select [s] tool.
  2. Do one of the following:
  • Hold the Shift-key and click multiple labels, or hold the Command-key and click to select or deselect labels.
  • Choose Edit > Select All, then choose Edit > Labels & Text > Select All Labels.

3. Open the Fonts palette and change text styling. Properties applied to labels, such as Fonts, apply to all labels in the selection.

To Copy and Paste Labels:

To_Copy_and_Paste_Labels.png
  1. Choose the Select [s] tool.
  2. Right-click onto a label and choose ‘Copy Label’ from the context menu.
  3. Select the receiving object or objects and choose Edit > Text & Labels > Paste Label from the main menu, or right-click and choose ‘Paste Label’ from the context menu.

HINT: An object can have multiple labels associated with it. For example, a symbol can have two separate labels positioned such that they do not overlap.

To Delete Labels:

  1. Select one or more objects to delete labels.
  2. Do one of the following:
  • Choose Edit > Labels & Text > Delete Label from the main menu.
  • Right-click a label and choose ‘Delete Label’ from the contextual menu.

RaisedText-final-570x286

Create a Polished Raised Type Treatment

Use the Style Inspector along with Artboard’s new transform settings to create a polished raised type treatment. It is super easy to apply the style to other shape objects. Read more

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.