circlepattern-final

Make a Bold Statement with Patterns

Patterns can add punch to your design, and in Artboard there are several ways you can make a statement. Here we see two simple methods using the Style Inspector to create patterns instantly.

Tutorial Details

Program : Artboard 1.1+ for Mac OSX
Difficulty: Beginner – Intermediate
Topics Covered: Style Inspector
Estimated Completion Time: 10 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

This is a pretty quick and easy tutorial showing how to make pattern fills with Artboard’s Style Inspector. In fact, the longest part may be the time it takes to make your graphic for the pattern. Here we are drawing a target-circle pattern. You can make a repeatable pattern from any graphic – even images. Just keep in mind, very small and closely spaced patterns start using a lot of memory and may slow things down a bit.

With a “New” style and the Oval [o] tool, start by drawing a circle. Hold the SHIFT-key while drawing to maintain its aspect ratio. We sized the circle to 10-cm in the Geometry plane.

Step 2

With the Select [s] tool, use the quick-copy keyboard shortcut to make several copies pasted in place. Hold the Alt/Option-key and click the circle once to make your first duplicate of it. With the new circle still selected (it won’t look differently from your first circle since it is a copy pasted in place), change the size to 9-cm in the Geometry pane. Click the circle again with the Alt/Option-key and make another duplicate, resizing this one to 8-cm. Repeat this eight times until the inner circle is 3-cm. You now have your objects for your target-circle graphic.

Step 3

Next we’ll drag and drop some colors onto our graphic. You could apply any new style to the circles. Since we are using basic fill styles, we can drag a color onto each circle and a new ad hoc style is created. We’re making our target “Lead” black and a creamy white.

Step 4

Although the graphic is ready to-go, in this example I’m making my pattern a bit smaller so I’ve selected the objects, grouped and resized the graphic while holding the SHIFT-key to maintain its aspect ratio. We’ll use this smaller graphic in our patterns. Make a copy of the graphic by selecting the smaller graphic and choose Edit > Copy from the main menu, or use the CMND-C keyboard shortcut.

While you could make duplicates of your object and place them accordingly to lay out your pattern, you can make instant repeatable patterns using the Style Inspector. In the steps below, we are going to show you two different ways to create repeating patterns in Artboard.

Step 5

In the layers panel, click the “+” button to add a new layer. Draw a large rectangle using the Rectangle [r] tool. With the rectangle still selected, open the Style Inspector and click “New” to create a new style.

In the Style Inspector, click onto the “Fill” style component and click “Paste Image”. Your graphic (that you copied to the clipboard in the previous step) will be pasted into the image-well and used as a repeatable pattern in the new style. The underlying image is anchored to the drawing canvas and is tiled seamlessly across the page. When you move the shape around, the image pattern remains stationary. This is the most efficient way to add an image to a style and works particularly well with repeating seamless image pattern tiles.

Step 6

The fill style component (above) is the most efficient repeating pattern, but lacks the ability to fine tune the pattern design. In this next example, we’ll add a Pattern Fill style component.

First, un-check the “Fill” style component in the list since we are no longer using it. Click the “+” button to select Pattern Fill from the drop-down list. Click “Paste Image” to add your graphic to the image-well. In the Pattern Fill, we can adjust many settings. Type  “-1.5cm” into the Spacing dialog box to create a closely spaced overlapping pattern; we’ve kept a 50% alternating offset, and changed the angle of the pattern to 45-degrees.

Several options are available for image scale, spacing, offset, and angle, as well as some very cool options for randomness. Play with your settings based on the effect you are seeking. The underlying image fill is tied to (and will move with) the shape object. Pattern Fill provides the most flexibility for creating regular repeating and random image patterns.

Final Image

Congratulations! You now know two methods of creating regular repeating patterns using Artboard’s powerful Style Inspector. Now you can add your pattern to your drawing, and optionally name and save it to your user library for future use. To save the style, click onto “Style” at the top of the style components list to return to the style main interface, name your style and click the Enter-key, then click the bottom button to “Add To … Collection.”

We’ve finished our final image by turning off the layer holding our original graphics and adding some additional objects to add the “artboard” banner.

4 replies
  1. alfredo
    alfredo says:

    I’ve just downloaded a trial of your software and agree with Susan, the lesson is not easy to follow.
    Additionally, when using the Spacing slider I’m not allowed to reach values less than -.0706cm: I had to input the value by hand.

    • mapdiva
      mapdiva says:

      Thanks @alfredo & @Susan for your feedback. I’ve updated the tutorial to hopefully make it easier to follow. In particular, I’ve clarified on Step 5 to add a layer and new rectangle to hold the pattern fill, and to type the -1.5 spacing in the Style Inspector. Thanks for the feedback to help us make improvements where necessary.

  2. Susan
    Susan says:

    This lesson did not work as simply as you put it. I followed it step by step and did not get the results you did. I think you left out a few steps. The pattern showed up in my preview on the tools window but you don’t tell me to draw a box or anything. I played with it and did get a pattern of the circles but it did not overlap the way yours did and I could not figure out how to save it to styles. I’ll try a few more of these lessons but I can’t see buying it if I can’t follow your lessons and get the same results without having to “figure out the missing steps” on my own which in turn takes more time. It’s a real good idea though. Is there another “how to” to look at or download?

    • mapdiva
      mapdiva says:

      Hi Susan, Thanks for your feedback. We try to make the tutorials as step-by-step as possible. I’ll have a look through and see if there is something that I’ve inadvertently left out that has caused your difficulty. I’m away for a couple days and will address it as soon as I return. Thanks again! Jill

Comments are closed.