Veerle's blog

Sometimes when I create a pattern background in Illustrator I don’t end up with a Pattern Swatch. Instead, I create a Symbol of the repeating element and I create a whole background repeating this Symbol: duplicating 1, then 2, 4, 8, 16 and so on. It’s just not always that simple to create perfectly seamless patterns, especially with geometric forms. Today I’ll show you how to create a geometric pattern shape and fill a background with it using the method I just described.

Inspiration

I found this beautiful pattern on FFFFound and I thought, this is perfect for a tutorial. It's a beautiful geometric form with an interesting twist. It might look very simple at first glance, but it is a bit misleading. There is the mirrored effect, plus there is the vertical brown line to consider as well. After a bit of analyzing, I came up with the following method.

Creating a hexagon shape

Select the Polygon Tool from the Toolbox and draw a hexagon. Hold down the Shift Key while dragging the shape.

Give the hexagon a dark red fill and brown border of 75 pt. Open the Appearance Panel, select the brown Stroke of 75 pt and click the Duplicate Selected item icon at the bottom of the panel to add a stroke on top of the brown one. Give it an orange color and a thickness of 25 pt. This way we have a hexagon with 3 strokes with the exact same width: brown orange brown

Rotate the hexagon

Select the Rotate Tool from the Toolbox and click in the right corner of the hexagon to us as rotation point. Hold down the shift and rotate the hexagon 90° as shown in the image above. You might want to turn Smart Guide on for this exercise. Use command/control + u to switch Smart Guides on and off.

Add a vertical line to the hexagon

Make sure your Rulers are turned on: go to View > Show Rulers or hit command/control + r. Drag a vertical guide from the rulers to the middle of the hexagon. If you have Smart Guides turned on you should automatically notice where to release your mouse and it should also snap to the point. Select the Line Tool from the Toolbox and draw a vertical line by holding down the Shift key. Give the line the same dark brown color and a weight of 25 pt.

Turn strokes into fills

Hit command/control + a to select everything. Go to Object > Path > Outline Stroke to turn the strokes into filles. Chances are the tick stroke of 75 pt is not turned into a fill. Select your object and go to the Appearance Panel select the 75 pt stroke from the panel and go to Object > Path > Outline Stroke again. The reason why I turn the strokes into fills is because in the next stage I need to be able to make the object snap around its borders to make a perfectly seamless pattern background. Plus, I also need to tweak a little bit to make this pattern work.

Tweak the brown border

Select the Direct Selection Tool (white arrow) from the Toolbox and click the top corner point of the hexagon. Hold down the Shift key and drag the point down till it intersects with the inner brown border as shown in the image above.

Duplicate and rotate 180°

Select the Rotate Tool from the toolbox. Hold down Alt/Option Key and click somewhere to the top right of the hexagon just above the top right side of the orange hexagon as shown in the image above. In the window enter a value of 180 and click the Copy button to duplicate the object.

Move the duplicated object in place

Click and drag the bottom right corner of the orange hexagon using the Selection Tool (black arrow) and move the object until it intersects with the intersection corner of the inner brown hexagon and vertical brown line as shown in the picture above. Make sure Smart Guides are turned on so the object will snap to this point. It should be perfectly placed in that spot, that's why you need to turn on Smart Guides on and why we converted the Strokes into Fills. It makes the job much easier.

Create a pattern symbol

We're almost there now :) The shape we have now is the pattern that gets repeated to create a pattern background. Smart thing to do now is to create a Symbol of this. This way we keep our file size low and if we decide later to change something about this pattern. Add a Stroke, change its colors, change the shape or whatever, the whole pattern background will get updated. Make sure the Symbols panel is shown. Go to Window > Symbols to reveal the panel on your workspace. Hit Command/Control + a to select the entire object and drag it in the Symbols panel. Give it a name and hit the OK button.

Create pattern background from a pattern symbol

The object is now turned into a Symbol including the one still on your canvas. Now you can create a whole background with this pattern Symbol. Duplicate and move the Symbol by holding down the Alt/Option Key and Shift Key. If you have the 2nd pattern in place, select both and do the same so you have 4 in a row, or column, depending how you've moved/duplicated them (horizontal or vertical). Then do the same again by duplicate 8 symbols, 16 and so on and on. Then duplicate in the other direction until you have your canvas covered in a pattern background as shown in the above image.

Create a Photoshop pattern

Maybe you've created a pattern that you would like to use in Photoshop or you need this pattern for your homepage. So you need to extract a rectangle fragment that will create a seamless pattern background. I've opened my document in Photoshop on 72 dpi. To define this geometric pattern you need to make sure that the bottom edge matches the top edge and the left edge matches the right edge.

Update: To create a pattern swatch in Photoshop, select the your pattern fragment and go to Edit > Define Pattern.

So there you have it. Hope you enjoy this exercise. Don't forget to experiment and be creative ;)