Pattern Power in Illustrator CS6

An Adobe Illustrator workshop by Laura Coyle

Note: this class is also compatible with Version CC

Welcome! In this workshop we’ll thoroughly explore the Pattern Making mode in
Illustrator CS6 while working on three projects. The class downloads include art for the
projects so you can dive right in and begin working on creating patterns, including tiling
patterns for the web and fabric patterns for on-demand printing.

This PDF guide contains condensed information from the video lessons, along with some
additional information that can enhance what you learn in the lessons.

Your support keeps this class free and available to all! Donate http://www.illustratoring.com
Thank You!

Laura Coyle

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 1
Pattern Power in Illustrator CS6 Lesson Outline
The Basics
Lesson 1 : Introduction, Naming & Saving (10:38) 3

Lesson 2 : Tile Boundaries & Swatch Boundaries (6:53) 5

Lesson 3 : A Look Inside Pattern Fills (8:30) 6

Lesson 4 : Transforming Pattern Fills (11:14) 9

Project 1 - The Space Pattern

Lesson 5 : Sizing the Pattern Tile (11:21) 11

Lesson 6 : The Pattern Tile Tool (11:13) 13

Lesson 7 : Workflow Tips for Pattern Mode (14:19) 16

Project 2 - The Web Brocade Pattern

Lesson 8 : Pixel Perfect for Websites (7:28) 18

Lesson 9 : Creating & Saving Colorways (7:55) 19

Lesson 10 : Exporting for the Web (9:18) 20

Lesson 11 : Exporting Multiple Artboards (4:40) 22

Project 3 - Layered Patterns

Lesson 12 : Layering Patterns (8:32) 23

Lesson 13 : Small Scale Patterns (12:03) 24

Lesson 14 : The Floral Pattern Unit (11:30) 26

Lesson 15 : Layering with Hex Repeats (7:00) 27

Lesson 16 : Screen Tiling Artifacts (2:33) 27

Lesson 17 : Color & Spoonflower (6:12) 28

Lesson 18 : Printing & Exporting to Spoonflower (7:51) 31

Lesson 19 : Resizing & Troubleshooting (14:12) 32

Lesson 20 : Thank You & More Information (1:20) 33

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 2
Lesson 1 : Intro to Pattern Mode, Naming & Saving (10:38)

In this lesson we start with the basics of working in Pattern Editing Mode:

Select some artwork on the artboard and choose Object> Pattern> Make.
This automatically opens the Pattern Options Panel and places the artwork in the
center of a repeating pattern inside a separate work area referred to as Pattern Editing
Mode. Illustrator places a pattern fill swatch for the pattern in the swatches panel.

Saving Patterns

Make changes to the art by creating new art or editing the existing artwork in the center of
the screen. There are several ways to save the change to your pattern swatch:

• Use the shortcut command/control S

• Click the arrow icon in the top left corner of the window.
• Click Done at the top of the window
• Hit the esc key on your keyboard

Any of these options will save your pattern while returning you to normal mode. Any
artwork that has the pattern fill applied to it already, will update on the artboard to reflect
the change to the swatch.

To return to editing your pattern double-click on the pattern swatch in the

swatches panel.

To exit Pattern Mode without saving your change click Cancel at the top of the
window.

Save a Copy at the top of the window creates a duplicate pattern swatch in the
swatches panel and launches a dialog box where you can name the copy.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 3
In this case the original pattern is still active in Pattern Mode, so any changes you make
will effect the original. To edit the copy, exit pattern mode (click Cancel) and then locate
your new copy swatch on the swatches panel and double-click it to begin editing.

It’s easier to make a copy of a pattern in normal mode. In the swatches panel,
drag the swatch you want to copy to the New Swatch icon at the bottom of the panel.
Illustrator creates a duplicate with the number 2 after the name. Double-click the new
swatch to change it’s name and edit the swatch.

Pattern Preference Settings

Use the shortcut command/control K to open the preferences box:

Show Tool Tips, checked

Transform Pattern Tiles, checked

Double click to isolate, un-checked

Naming Patterns

At any time you can name your pattern or change it’s name in the Pattern Editing Panel. By
default, the panel will only be open inside Pattern Editing Mode, but there are two ways you
can open the panel in normal mode. Having the panel open in normal mode will
allow you to change the name of any of your pattern swatches without having to
enter Pattern Editing Mode.

Choose Window> Pattern Options to open the panel in Normal mode.

On the Pattern Panel, open the options menu from the icon at the top right of the
panel and un-check “Auto-Close on Exiting Edit Mode.”

To rename a pattern swatch, single-click it in the swatches panel to select it and

rename it on the Pattern Options Panel.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 4
When you have your Pattern Options Panel open, you have the option to choose “Make
Pattern” from it’s options menu instead of choosing Object> Pattern> Make from the main
menu. To return to working on the last pattern, double-click the thumbnail on the panel.

Lesson 2 : Tile Boundaries & Swatch Boundaries (6:53)

In this lesson I demonstrate the difference between Tile and Swatch boundaries using a
single 1” diameter circle for the repeating art in my pattern. To follow along, make a 1” circle
and enter Pattern Editing Mode.

The settings at the bottom of the Pattern Panel affect how the pattern displays:

Change the Dim Copies setting to help distinguish between the editable repeating
art in the center and the repeating preview copies. Change the number of copies to
see more or less of the repeating preview copies.

Keep Show Tile Edge and Swatch Bounds checked for this lesson.

By default Illustrator creates a grid repeat from the art you select. By default, the tile
edge will match the size of the art you choose with no space surrounding the tile.

There are several repeat tile types to choose from in the menu:

• Grid - the default

• Brick by Row - tiles in alternating rows are offset by 1/2 the tile width by default
• Brick by Column - same as above, but vertical. Also known as a Half-Drop repeat.
• Hex by Column - repeating in a honeycomb pattern, offset is 1/2 the height of the art
• Hex by row - same as above but vertical, offset is 1/2 the width of the art

Switch from a grid repeat to a brick repeat to see the difference between the Tile Edge and
the Swatch Boundary.

The Tile Edge encloses the repeating art.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 5
 The Swatch Boundary is a dotted line that shows the artwork for the Fill Swatch. The
thumbnail displayed in the Pattern Options Panel is a preview of the Fill Swatch.

The Swatch Boundary and Tile Boundary are equal in grid repeats. When you choose a
different tile type, the Swatch Boundary gets larger to include whatever art is necessary to
translate the repeat into a grid repeat. Illustrator Pattern Fill swatches can only repeat
in a grid formation, therefore the swatch art will have to include some of the repeating art
beyond the tile edge to create a grid repeat from a Brick or Hex repeat style.

Brick repeats offer the option of changing the amount of offset. The default offset is 1/2
the width or height of the tile (depending on whether you are working with Brick by Row or
Column). Notice when you change the offset amount, the Swatch Boundary grows to
include more of the repeating art. This is important particularly if you are creating a
pattern for the web. Patterns for web backgrounds generally repeat in a grid formation,
just like Illustrator Fill Swatches do. The swatch boundary represents the final size of the
repeating unit - if the repeating unit is too large, it will take longer to load on a web page.

Lesson 3 : A Look Inside Pattern Fills (8:30)

In this lesson we take a Pattern Fill Swatch apart in order to learn more about how Illustrator
pattern fills work.

I begin this lesson by applying the Red Dot Pattern from the last lesson to a square on the
Artboard by selecting the square and clicking the pattern Fill swatch in the swatches panel.
The Red Dot pattern has no background color, so colored objects placed behind it will show
through. I have created a grid on a separate layer to illustrate how the pattern fills the
square in a grid formation.

Prior to Illustrator version CS6, Pattern Editing Mode did not exist and so editing Pattern Fill
Swatches involved dragging the fill swatch directly to the artboard to access the
paths within the swatch. Once edited, the completed swatch art could be dragged back into
the swatches panel to create a new fill swatch.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 6
This technique still works in version CS6 and it is important to explore because it offers a
deeper understanding of how pattern fills work that will give you more options for working
with patterns in Illustrator.

Drag a pattern fill swatch to the artboard, select the art and notice that the art is
grouped, and that there is a square or rectangular path within the art that corresponds to
the Swatch Boundary we talked about in the last lesson.

In previous versions of Illustrator, this was known as the bounding shape. This shape
serves to mask/crop the art into a Pattern Fill Swatch, a single repeating unit of the
pattern. The bounding shape is invisible, it has no stroke and no fill, just like any
other clipping path in Illustrator. The bounding shape must also be arranged at the
very bottom of the stacking order of the swatch art for the pattern to tile
seamlessly. In CS6, Illustrator automatically generates the no-fill no-stroke
bounding shape in Pattern Mode, placing it underneath the pattern art.

Pattern Fills are like abbreviations for pattern art. Look at an object that is filled with a
pattern in Outline Mode and you will only see the path of the shape - not the internal paths
of the pattern fill.

The swatch art you dragged to the artboard is a copy of the original art used to create the
pattern fill.
If you are following along, select the swatch art and isolate it on it’s own layer so
that you can look at it’s stacking order in the layers panel. The swatch art is
contained in a group - ungroup it. To view the individual objects contained in the
swatch art, twirl down the triangle on the layer. You’ll see a stack of objects with
the no-fill, no-stroke bounding shape at the very bottom.

Expanding Pattern Fills

When a shape is filled with a pattern fill, the pattern art you see is a preview or abbreviation -
the paths that make up the pattern fill are inaccessible. Expanding a pattern fill makes
the internal paths of the pattern accessible and breaks the link between the fill
swatch and the object it was applied to.

Note: As you become more experienced in working with patterns in Illustrator you may
find an instance where you want to gain access to the paths within a pattern fill by
expanding the fill. It is not important to be able to do this now, as we are just getting
acquainted with the new pattern feature in Illustrator, but the following description is
something you can refer to later.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 7
To expand a pattern fill, select the object and choose Object> Expand from the main
menu. In the dialog box, check Fill to expand only the pattern fill. The expanded fill will be
a series of clipping groups, just like the swatch art we dragged to the artboard. Expanded
pattern fill art can be complex to work with, so it is helpful to isolate an expanded pattern
on it’s own layer, so it can be inspected in the layers panel, just like we did with a single unit
of the swatch art.

Anatomy of an Expanded Pattern

Not covered in the video lesson, here’s a basic hierarchy for future reference of what is
contained inside an expanded pattern and how to take it apart:

1. The main clipping group - the individual units are masked into the original shape
the fill was applied to. To gain access to the clipping path and the art within, select the
group and choose Object> Clipping Mask> Release.

2. Once released, you will have a group containing the path for the original shape at
the top of the stacking order with a series of groups below. Each group is a single unit
of the pattern. Ungroup to select the individual unit groups of the pattern.

3. Each unit of the pattern is a clipping group, masked by the bounding shape which
corresponds to the swatch boundary from Pattern Editing Mode. To access the art
within the clip group, select it and choose Object >Clipping Mask> Release.

Once you have released the mask from an individual unit group, you’ll notice that objects
that cross the bounding shape are no longer masked and will overlap objects in
surrounding units.

Editing an expanded pattern fill is not for the faint of heart because of all the leftover
invisible masking shapes and the now un-masked objects that overlap their counterparts in
the surrounding units. When I find a situation where I need to expand a Pattern Fill, I start
by isolating the object on it’s own layer first so I can keep track of what I’m uncovering in the
layers panel. Switching between outline mode and preview mode will help too.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 8
Lesson 4 : Transforming Pattern Fills (11:14)
Illustrator comes with a library of pattern swatches that you can experiment with and
use in your own projects. Click the Swatch Libraries button at the bottom of the Swatches
panel. To find the patterns that were created specifically for use in CS6 choose Patterns>
Decorative> Vonster Patterns.

Tip: Display a larger thumbnail size by opening the options menu at the top right
corner of the library panel. Use the arrows at the bottom of the panel to page through
the libraries.

Patterns created in earlier versions of Illustrator have been adapted to work with the new
pattern feature - however, the Vonster Patterns offer the best examples of CS6 patterns for
exploring and taking apart.

Click a swatch in the library to add it to your swatches panel.

With an object selected and the fill active on the color panel, click a swatch to apply the
pattern to the object.

To edit the pattern on your swatches panel, double-click the swatch. The original pattern
in the library will remained unchanged.

Tip: To save your swatch collection for use in other files, save your swatches panel as
a swatch library - choose Save Swatches... in the Swatch Libraries menu. You can access
the library by choosing User Defined in the same menu. Start by deleting anything on
the panel you don’t want saved in the library.

The directory path where your custom swatch library is saved:

Mac: HD / Users / [User Name] / Library / Application Support / Adobe /

Adobe Illustrator CS6 / en_US / Swatches

PC: C: \ Documents and Settings\[User Name]\Application Data\Adobe\

Adobe IllustratorCS6 Settings\en_US\ Swatches
(Directory path varies depending on the version of Windows in use. Refer to Adobe Help
for more information)

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 9
When you transform (scale, stretch, rotate) an object that has a pattern fill applied to it, the
pattern will also scale, stretch and rotate along with the object, as long as you have the
general preferences set to “Transform Pattern Tiles.” Once stretched, you can reset the pattern
fill to it’s original proportion or orientation by clicking the swatch in the panel to reapply the
pattern.

To transform a pattern fill independent of it’s object:

Select the object and double click the tool you want to use in the in the tool panel,
for example, the Scale Tool.

Uncheck the Transform Objects option and leave the Transform Patterns option
checked. Check Preview, to see the changes before committing to them.

Enter a percentage in the Uniform Scale field and use the up and down arrow keys
to make adjustments. Add the shift key to the arrow key to jump in increments of 10.

Each subsequent object you draw will contain the pattern at the same percentage. To
reset the pattern fill to it’s original scale, click the fill swatch to reapply it.

The steps above work with other transform tools: the Rotate Tool, the Reflect Tool and the
Shear Tool. You can transform the pattern fills across a selection of multiple objects too. There
are more options for transforming objects in the main menu under Object> Transform.

Transforming Pattern Fills on the Fly with the Tilde Key

For this part of the video lesson, I demonstrate with a chevron pattern. To watch my YouTube
tutorial on how to create the pattern, visit this link on my blog:

www.illustratoring.com/chevron-pattern-illustrator/

The tilde key is located at the top left corner of your keyboard ~

1. Select a pattern-filled object and select a tool: to start choose the Black Arrow

2. Hold the tilde key while clicking and dragging on the fill with the Black Arrow Tool.

3. A guide appears to show the position of the fill as you move it. Release the cursor and
the tilde key.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 10
Repeat the above steps using the Scale Tool.

Next, reset the pattern fill by clicking the swatch in the swatches panel to reapply it. Now, try
scaling the pattern fill while maintaining it’s proportions:

With the object selected and the Scale Tool active, hold the Tilde key and click and drag
on the fill.

Then, add the Shift key. You will see the guide snap to a shape that is proportional to the
object. Continue dragging/scaling as needed while holding both tilde and shift. Release
the cursor and then the keys.

Tip: Tiling Artifacts may appear in your patterns. To determine whether these faint
white lines will affect your final print or export, zoom in and out on the pattern fill. If you
see the lines disappear at some zoom levels and reappear in others, you can rest assured
that the lines are merely artifacts of the screen rendering process. If the lines remain at
every zoom level, then they are likely a flaw in the pattern, showing that something is
misaligned in your pattern swatch art.

Lesson 5 : Project 1 - Sizing the Pattern Tile (11:21)

In this lesson we begin the first of three pattern projects, each one designed to teach about
working in Pattern Mode.

For Project 1, the Outer Space pattern, we’ll learn the methods for controlling the size and
spacing of your pattern. Begin by open the exercise file from the downloads:

LCPatternCS6_space.ait

This is an ait Illustrator template file, so name and save it before continuing.

1. Select all the art and enter Pattern Editing Mode, give the pattern a name.
2. (optional) Hide the artboard edge: View> Hide Artboards.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 11
 3. Settings: Copies = 5x5, dim percentage = 50% and show Tile and Swatch boundaries.
4. Confirm the Width and Height are both 3” and both Size Tile and Move Tile checkboxes
are unchecked.

Two Approaches to Tile Sizing:

To Specify Tile Dimensions Directly - Uncheck Size Tile to Art

To Let Illustrator determine Tile Size Automatically - Check Size Tile to Art

Specify Tile Dimensions Directly

With the Size Tile box unchecked, you can enter dimensions in the Width and Height fields,
using the lock to constrain the proportions of the tile. Use the arrow keys on your keyboard to
adjust the dimensions as needed. When working with tile dimensions (Size Tile box is
unchecked) you will only have access to the Width and Height fields in the center of the
panel; the H and V Spacing fields will be dimmed.

While the Size Tile box is unchecked, the Move Tile with Art checkbox will only move the
tile when all the artwork is selected, allowing you to reposition the tile in another location
in the window. By default the tile is positioned in the center of the window. Leave Move Tile
unchecked unless you need to reposition the tile away from the center of the window.

Let Illustrator determine Tile Size Automatically

With the Size Tile box checked, you can move and scale objects in the pattern and
Illustrator will automatically resize the tile boundary to fit the art. By default, the Tile Edge will
hug the outer edges of the art when you start a new pattern and therefore the Horizontal and
Vertical spacing will be 0 by default. This means that from one tile to the next, there will be no
spacing between objects at the outer edges. To add space between objects at the outer
edges of the tile, enter a number in the H and V Spacing fields. Once you set the amount of
spacing, you can move objects and Illustrator will maintain that spacing, readjusting the tile
size as you move objects at the edge of the tile.

The Move Tile with Art checkbox is most helpful in this automatic sizing approach when
you check it at the very beginning of the sizing process. With Move Tile checked, Illustrator
will consistently maintain the position of the Tile Edge in relation to the objects as you move
them around. The Tile Edge will fall in-between objects from one tile to the next - this
prevents objects at the edge of the pattern tile from being bisected by the Tile Edge.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 12
Technically the pattern fill will work regardless of where the Tile Edge falls, but you may find
the automatic tile-sizing process to be visually clearer with Move Tile checked.

Assignment: Use the art in this exercise file to experiment with the two tile sizing
approaches, as I do in the video lesson. Begin with a grid repeat and then experiment
with other repeat types. Your objective is to familiarize yourself with both the Direct and
Automatic sizing methods. In the next lesson, we will add the Pattern Tiling Tool to these
methods.

Tip: I find that these two tile sizing approaches are the easiest to understand in the
beginning when you choose one and stick with it, rather than switching back and forth
between the two. Of course, you should explore and discover whatever way makes the
most sense for the art you’re working on.

Lesson 6 : Project 1 - The Pattern Tile Tool (11:13)

At the beginning of the lesson I change the dark color of the Illustrator Interface to a lighter
gray, using the preferences shortcut: command/control k. choose User Interface and
choose the level of brightness you prefer. You can also choose to make the Canvas color
white, or have it match the interface brightness.

To temporarily hide the outline of the artboard, choose View> Hide Artboards.
You can turn artboard visibility back on by choosing View> Show Artboards.

Begin this lesson by starting over with the original pattern. If the objects on the
artboard have moved, you can reopen the template file LCPatternCS6_space.ait and start
over with the original art. Select all the art on the artboard and enter Pattern Mode. You
should have a 3” square tile in Grid repeat with the tile edges hugging the edges of the art.

To follow what I do in the lesson:

1. Check both the Size Tile to Art and Move Tile with Art checkboxes.
2. Settings: Copies = 5x5, dim percentage = 50% and show Tile and Swatch
boundaries.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 13
 3. Select the Pattern Tile Tool in the upper left corner of the panel.
4. The Tile Edge now appears with handles. Drag a handle to add space around the
edges of your tile. Notice the H and V Spacing values change on the panel.

Tips for Working with the Pattern Tile Tool

• To scale and stretch the tile boundary from the center, hold option/alt as you drag.
• Hold shift as you drag to snap the tile shape to a square (or regular Hexagaon).
• Drag the center point to reposition the Tile Edge in relation to the art.
• Click and drag anywhere other than on a handle to redraw the tile from scratch.
• Toggle from the Tile Tool to the Arrow Tool by holding command/control.
• Click the Tile Tool on the panel to turn it off.
• To constrain, click the lock proportions icon on the panel, place your cursor in a
field and use the arrow keys on the keyboard to change dimensions/spacing.

Experiment with using the tile tool along with the above tips. We began the lesson with Size
Tile to Art option checked. With the Tile Tool engaged, this setting allows us to control the H
and V Spacing manually. When you turn off the Tile Tool or toggle to the arrow tool to move
objects, Illustrator resumes the “automatic sizing” behavior, maintaining the spacing you set
with the Tile Tool. Next, uncheck the Size Tile to Art box and experiment with using the Tile
Tool to change the dimensions of the tile.

The Tile Tool and Brick Repeats

Switch the Tile Type from a Grid repeat to a Brick by Column to follow along with the lesson.
With a Brick by Column repeat, diamond shaped handles will appear on the left and
right sides of the tile. These handles can be dragged up or down to control the amount of
offset. By default, the handles appear centered on the vertical, representing the 1/2 offset,
also known as a Half-Drop repeat. For Brick by Row repeats handles appear at the top and
bottom sides and move horizontally.

As you drag, the handle will snap to positions that correspond to the offset fractions in the
menu on the panel. There are 8 other options besides the 1/2 offset that can be looked at as
mirror image pairs because they create the same diagonal effect in opposite directions.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 14
Mirror image pairs:
• 2/5 and 3/5
• 1/3 and 2/3
• 1/4 and 3/4
• 1/5 and 4/5

Experiment with the different amounts of offset and notice how the size of the swatch
boundary changes as you change the offset. Brick repeats are the only tile type that have the
adjustable offset option.

Tip: When the offset is at the default, 1/2 the handles obscure the sizing handles, and so
you can use a corner handle to widen or lengthen a tile if needed.

The Tile Tool and Hex Repeats

Hex repeats are like the default 1/2 offset Brick repeats because the tiles are offset by 1/2 the
width or height of the tile. The difference is that they repeat in a honeycomb pattern which
can make it easy to create a tightly interlocking or packed pattern. Experiment by using the
Tile Tool with a Hex Repeat and practice toggling from the Tile Tool to the arrow tool to move
and scale objects. The Tile Tool works the same for Hex repeats as it does for Grid repeats,
except that holding shift will produce a regular or equilateral hexagon.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 15
Lesson 7: Project 1- Workflow Tips for Pattern Mode (14:19)
To resolve overlap issues in your pattern, use the buttons on the Pattern Options Panel. If you
place a large shape, or one that completely fills the tile area of your pattern, you may
encounter difficult overlap problems with Brick and Hex repeat styles. Rather than placing a
background shape to add background color to your pattern, you can change the background
color of your work area temporarily with the instructions below. Then, when your pattern is
finished you can add a separate background color fill in the Appearance panel (which we will
learn about in the next project.

Change the Artboard/Canvas Background Color

Choose View > Show Transparency Grid

Choose View > Document Setup...

1. On the panel double-click on the first color swatch next to the grid thumbnail.
2. This launches your system’s color picker, choose a new color.
3. Double-click the second color swatch next to the grid thumbnail and in the color
picker, change it to the same color as the first swatch. Hit ok.

The background of your work are will now display the color you selected. To hide the
color background choose View > Hide Transparency Grid. This setting will stay with
your file until you change it.

For more information on system color pickers, search the web and add your Mac OS
version or Windows version to your search.

More Background Tips: Don’t forget, you can choose View > Hide Artboards to
temporarily hide the artboard outline from your work area. To change the color of the
Tile Edge, choose Tile Edge Color... in the Pattern panel options menu.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 16
Content that will be Expanded on Saving/Exiting from Pattern Mode

Brushes Pattern Fills Live Effects Live Paint Groups

Width Profiles Symbols Blends Dynamic Plugin Art

Expanded Brush work, Pattern Fills or Effects, etc. will not retain their “live”
editability after you leave Pattern Mode.

Before saving a pattern that contains any of this type of content, copy it to your clipboard.
Then save and paste the copy to your artboard in normal mode to have it for future use, if
needed.

For more information about Expanded Pattern Fills, see this guide for Lesson 3

Some Illustrator features that will not work inside Pattern Mode are:

Shape Builder Tool Live Paint Groups Isolation Mode

Some things that will work and/or remain editable inside Pattern Mode are:

Type Gradients Gradient Mesh Pathfinder

Creating art for your patterns in normal mode, before entering Pattern Mode will allow
for the most versatility and future editability.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 17
Lesson 8: Project 2- Pixel Perfect for Websites (7:28)

In Project 2, the Brocade pattern, we’ll learn a method for creating patterns that tile
seamlessly on the web. We’ll also create and export the pattern unit in multiple color palettes
and use the Appearance Panel to create Graphic Styles for our patterns.

Begin by opening the exercise file from the downloads:

LCPatternCS6_web.ait

This is an ait Illustrator template file, name it brocade.ai and save it before continuing.

The exercise file is already set up with a Web Document Profile, but for your future
reference, when creating a pattern for a website, ensure the Align New Objects to
Pixel Grid is checked in the New Document dialog box, under Advanced options.

Tip: To find any objects in your file that are not aligned to the pixel grid, choose
Select> Object> Not Aligned to Pixel Grid

To create and save the basic pattern, follow these steps from the lesson:

1. Open the Transform Panel (Window> Transform) and choose Show Options in
the panel options menu.
2. Select the ornament. On the panel, Align to Pixel Grid should be checked already.
Unlock the proportions lock icon.
3. Using your arrow keys in the W and H fields, nudge the dimensions to round
numbers. Decimals will decrease the fidelity of your final web image.
4. On the Pattern panel choose Make Pattern and give your swatch a name. Set
copies to 9x9 and choose Hex by Column. Size Tile to Art is unchecked.
5. To change the spacing, use your arrow keys in the Width and Height fields to
maintain round numbers. If you use the Tile Tool, be sure to round the numbers
in the W and H fields afterward.
6. Save and exit Pattern Mode. In normal mode test the pattern swatch by
applying it to a shape.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 18
Lesson 9: Project 2- Creating & Saving Colorways (7:54)

In this lesson we’ll apply a solid color background to the pattern using the Appearance Panel.

To add a background to the pattern, follow these steps from the lesson:

1. Select the shape with the pattern fill. Open the Appearance Panel (Window>
Appearance).
2. Select the fill on the Appearance Panel and click the Add New Fill button at the
bottom of the panel to add a duplicate fill directly above the original fill.
3. Select the lower fill, click the swatch thumbnail to view a menu of the saved color
swatches in the file and choose a background color.
4. Select the top fill, the pattern fill, twirl the triangle to see the opacity setting for
the fill. Click the Opacity link and experiment with Blending Modes & Opacity.

To save the Appearance as a Graphic Style, follow these steps from the lesson:

1. Select the shape with the pattern fill/color background Appearance. Open the
Graphic Styles Panel (usually behind Appearance, or Window> Graphic Styles).
2. Click the New Style button at the bottom of the panel.
3. Double-click the name to rename it.
4. Create and save more Appearances in your Graphic Styles Panel. Do not scale
the pattern fill as you create and save Styles, keep the scale identical to it’s
corresponding FIll Swatch, otherwise, the final export will not tile seamlessly.
5. Click the Library button and choose Save Graphic Styles... to save the collection.
(Delete the styles you don’t want to save first, by clicking the trash icon.) The styles
on the panel will travel with this file without saving, but saving Styles allows you to
access the collection from other files: GS Panel> Library> User Defined.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 19
 Assignment: create and save a collection of colorways/color schemes for your pattern
fill. To add some variety to your collection, vary the foreground pattern fill by making
new color and spacing options from the original pattern fill.

1. Drag the original Fill Swatch to the New Fill icon in the Swatches Panel to
duplicate the swatch. Double-click the new swatch to edit the copy.
2. In Pattern Mode adjust the color, scaling and spacing of the ornament. Name the
swatch, Save and exit.
3. Remember that any edits you make to a Pattern Fill Swatch will update all the
Graphic Styles that use the pattern in your file.

Lesson 10: Project 2- Exporting for the Web (9:18)

In this lesson we’ll prepare the collection of patterns for use on the web, by exporting the
individual pattern units as image files.

To prepare your patterns for export, follow these steps from the lesson:

Important! Repeat patterns can be a tricky business. If anything is misaligned, the final
pattern will fail. Follow the steps carefully, and if you encounter problems retrace your
steps and try again. Review the video lesson if necessary. When things are off, even by a
fraction of an eyelash, the resulting pattern will not repeat seamlessly.

1. Drag a Pattern Fill Swatch to the artboard. We will be using this art to borrow it’s
tile size for the final export, so be aware of which Graphic Styles are linked to this
pattern swatch, avoiding Styles that were not created from this swatch.
2. Isolate the art on it’s own layer to inspect it in the Layers Panel. In the Transform
Panel, ensure that the art is Aligned to Pixel Grid, check the box if needed.
3. Ungroup the art and in the Layers panel, delete the ornaments, saving only
the no-fill, no-stroke bounding shape. This is the tile size of the repeat unit.
4. Select the bounding shape. Apply a saved Graphic Style to the shape. Make
sure you apply a Graphic Style that is linked to the Fill Swatch you’ve taken
this bounding shape from. If not, the final repeat will fail. Make sure that the

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 20
 Graphic Style contains the pattern fill at the original size and has not been
scaled. This shape is a single repeat unit of the pattern that we will export.
5. In the Transparency Panel confirm that the repeat unit is Aligned to the Pixel Grid
and it’s width and height are round numbers. If not, something may have been
missed in an earlier step and the final pattern will not tile seamlessly.
6. With the repeat unit selected choose Object> Artboards> Fit to Selected Art.
The artboard is now positioned and sized exactly to the repeat unit.
7. Choose File> Save for Web... choose the PNG-24 format and check Art
Optimized and Clip to Artboard, click Save. Name the file brocade.png, Save.

Tip: Choose View> Pixel Preview to see the repeat unit in pixel form (toggle off to go
back to Preview mode). If you have maintained round numbers and alignment to the
Pixel Grid, you should see solid color at the edges of your repeat unit. In Preferences>
Guides & Grid there is an option to Show Pixel Grid Above 600% Zoom that you
can turn off and on.

To test the final pattern on an html page, follow these steps from the lesson:

1. From the downloads for this class, get the file web-brocade.html
2. Put web-brocade.html in a new folder on your system and place the repeat
unit image we just exported, brocade.png in the same folder.
3. Then, double-click the html file to launch the page in a browser window (or drag
it into an open browser window) and view the pattern in repeat. If you don’t see the
pattern, check that the two files are in the same folder and that you have named
the image file correctly.
4. To edit the html file to display a different image file, open it in a text editor that
can edit html. I use Text Wrangler, a free text editor for the Mac. For Windows
try: NoteTab Light or Notepad++, both are free text editors.
5. Once tested, brocade.png is ready for upload to your blog or website!

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 21
Lesson 11: Project 2- Exporting Multiple Artboards (4:40)

In this lesson we will pick up where we left off in Lesson 10 with the .ai file containing the
repeat unit sitting on it’s same-sized artboard.

To copy the artboard and the repeat unit, follow these steps from the lesson:

1. Click the Artboard Tool in the tool panel to enter artboard mode.
2. In the options bar at the top of the window, turn on the option to Move/Copy
Artwork with Artboard.
3. Hover your cursor over the artboard and hold option/alt to drag out a copy of
the artboard and the art. Add shift as you drag to constrain to a straight line.
4. Repeat step 3 to copy the artboard again. Hit esc to exit artboard mode.
5. Apply a different Graphic Style to each shape. Only choose styles that
correspond to the original pattern fill you used to create the repeat unit shape,
otherwise the pattern will not repeat seamlessly.
6. If a shape becomes misaligned you can select it and use the “Align to Artboard “
buttons on the top control bar to realign it. Check that the x and y coordinates are
both 0 and that the dimensions are correct on the control bar, or in the Transform
Panel. Check that the art is still aligned to the pixel grid.
7. Choose the artboard you want to activate by selecting it’s art or by selecting it in
the artboards panel. (Save for Web will export only one artboard at a time.) Choose
File> Save for Web...
8. Choose PNG-24, check Art Optimized and Clip to Artboard, then Save. In the
next window, name the file to correspond to the test html file if you want to test it,
and save it to the folder with it’s partner html file.
9. Repeat Step 7 for the other artboards you want to export.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 22
Lesson 12: Project 3 - Layering Patterns (8:32)
This project teaches how to create multi-layer patterns that will tile successfully. At the end of
the project we’ll export the patterns to Spoonflower for fabric printing.

Begin by opening the exercise file from the downloads:

LCPatternCS6_LayeredPatterns.ait

This is an .ait Illustrator template file, so name it and save before continuing.

About the file: The swatches panel for this file contains a floral pattern swatch for
layering with 7 small scale pattern swatches. Color swatches were chosen from the
Spoonflower color map, which we discuss in Lesson 17. Layered patterns are saved as
Graphic Styles. Each pattern combination is exportable as a single pattern unit from the
6 smaller artboards in this file. There is also a letter sized artboard for testing.

To layer patterns for use in a working repeat unit, the smaller repeat unit must be at a size
that can evenly subdivide the larger repeat unit. The repeat unit size for the patterns we
create in this project is taken from the swatch boundary size created inside Pattern Mode.

Note: At the end of this project, we will export this pattern for upload to Spoonflower. When
creating patterns for export, it’s important to make sure the final dimensions of the unit can
be multiplied by 150 ppi, 300 ppi (or your desired resolution) and result in round number
dimensions. Illustrator cannot export artboards with measurements in fractions of pixels. We
cover exporting and troubleshooting patterns in Lessons 18 & 19.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 23
Lesson 13: Project 3 - Small Scale Patterns (12:04)
In this lesson we create polka dot, stripe and gingham patterns for layering with the 6 x 4”
floral pattern unit.

Polka dot pattern: We start with a .25” square, but any (fill only) square that evenly
subdivides a 6x4” repeat unit will do. The square becomes a guide for Pattern Mode to
size the tile to.

Center a dot on the square, select both and choose Make Pattern.

Choose Brick by Column and delete the square.

Name the pattern .5” dot. Naming with the final swatch dimension makes it easy to
use the pattern the swatches panel later. Save and exit.

Apply the pattern to a 6 x 4” rectangle. Layer it with a solid background and the
floral pattern in the Appearance Panel.

Test the repeat. Turn on Smart Guides (command/control u) and align copies of the
repeat unit to make a 12” x 8” field of pattern. Check to make sure both patterns are
repeating properly.

Make a copy of the polka dot swatch and vary it to create a collection of dot patterns. You can
change the scale of the dot and change the size of the tile, as long as the resulting swatch
boundary will evenly divide the 6 x 4” floral unit.

Tip: To measure the dimensions of the final swatch size, turn on Smart Guides
(command/control u) and use the rectangle tool as a measuring tool, drawing over the
swatch boundary. Smart Guides do not recognize the swatch boundary, (they do work
on the Tile Edge however). Align the rectangle as closely as you can to the Swatch
Boundary and look at the measurement label that pops up to read the approximate
dimensions, then delete or undo. (If you don’t see measurement labels, turn them on in
Preferences > Smart Guides.) Also, Smart Guides can recognize the Tile Edge.

Stripe pattern: We start with a 1” high stripe of any width you like. You can add another
stripe of a different width or multicolor stripes. Make them the same height and align
them together before choosing Make Pattern.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 24
 In Pattern Mode, keep the Tile Type set to Grid and widen the tile to add space
between the stripes, making sure the width is compatible with the 6 x 4” unit.

Name the pattern with a note of the dimensions. Save and exit.

Make a copy of the stripe swatch and vary it to create a collection of stripe patterns. Make
sure the resulting swatch boundary will evenly divide the 6 x 4” floral unit.

Gingham pattern: We start with a 1” square, give it a fill and no stroke and set it’s
Opacity to Multiply, 100% in the Transparency Panel.

Copy and Paste in Front, so the copy of the square is directly on top of the original. Use
Smart Guides and drag to change the width of the top square to a half inch, make the
bottom square a half inch high, so you now have the two overlapping rectangles in an
“L” formation. Select and choose Make Pattern.

In Pattern Mode, keep the Tile Type set to Grid, name the pattern 1” and Save & Exit.

Layer and test out the patterns as we did at the beginning of this lesson.

Tip: To save your swatch collection for use in other files, save your swatches panel as
a swatch library - choose Save Swatches... in the Swatch Libraries menu. You can access
the library by choosing User Defined in the same menu. Start by deleting anything on
the panel you don’t want saved in the library.

The directory path where your custom swatch library is saved:

Mac: HD / Users / [User Name] / Library / Application Support / Adobe /

Adobe Illustrator CS6 / en_US / Swatches

PC: C: \ Documents and Settings\[User Name]\Application Data\Adobe\

Adobe IllustratorCS6 Settings\en_US\ Swatches
(Directory path varies depending on the version of Windows in use. Refer to Adobe Help
for more information.)

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 25
Lesson 14: Project 3 - The Floral Pattern Unit (11:30)
In this lesson we look at the 6 x 4” floral pattern unit. The art is grouped, with nested groups
within for the petals, flowers with centers, etc.

Pattern Mode and Un-Grouping:

A Selection of one group - will be ungrouped once, entering Pattern Mode.

A Selection Multiple objects/groups - will be not be ungrouped.

For this lesson I have turned on the Transparency Grid background in View> Show
Transparency Grid. Settings are located in File> Document Setup... (see Lesson 7).

When creating your own larger scale patterns for layering:

• Size the pattern to fit the scale of it’s final application.

• Find the closest dimensions in Pattern Mode that will allow for easy subdividing.
• Then, resize your art to fit the tile/swatch dimensions.
• If you plan to export for Spoonflower at 150 dpi, make sure the final swatch
dimensions when multiplied by 150 are round numbers.
• Name the swatch with the dimensions. (Once you have created the pattern, in normal
mode, you can drag the swatch to the artboard and select it’s bounding shape if you
need to remember the swatch dimensions.)

Create a rectangle at the exact dimensions of the final swatch size and apply the
pattern to it to create a single repeat unit of the pattern. Test it out to make sure it works with
other patterns you have layered with it. Create an artboard the same size as the pattern
unit and align the pattern on the artboard exactly. When the artboard is active the x and y
coordinates from the upper left corner should read 0 and 0.

To adjust colors in pattern mode, you can use the Magic Wand Tool and the Select menu.

Any adjustments you make to the global swatches in the file will update all the art in the
file.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 26
Lesson 15 : Project 3 - Layering Hex Repeats (7:00)
Hex repeats allow for patterns that are more interlocking and packed looking. However, the
swatches can be a little more difficult to plan for when you’re trying to come up with an
evenly divisible width and height.

Here’s a handy chart for converting fractions of an inch into decimal numbers:

1/16” = 0.0625” 1/2” = 0.5”

1/8” = 0.125” 5/8” = 0.625”

1/4” = 0.25” 3/4” = 0.75”

3/8” = 0.375” 7/8” = 0.875”

In most cases, the final swatch width for a Hex by Column repeat will be 1.5 times the height
of the tile (the reverse is true for Hex by Row repeats). Multiplying by 1.5 can produce
numbers that are harder to evenly subdivide, and when we export odd dimensions as pixels,
decimal numbers can result (See Lessons 18 & 19 for more information). In this lesson I
present a simplified approach that will help you get consistent results.

First, I suggest layering hex repeats with hex repeats (rather than grid or brick repeats)
as you become familiar with the process:

A Simplified Method for Layering Hex Repeats

• Create the larger scale pattern by making the hex tile width and height the same size.

• Note the height of the swatch when you name it.

• Create the smaller scale pattern with a tile height that will evenly subdivide the larger
tile height. Then as we did before, make the tile width the same as the height.

• Check the size of the final (larger) unit at the intended resolution for decimal numbers
by multiplying the dimensions by the ppi. Decimal numbers are more common in hex
repeat swatches, but they are not difficult to remedy: See lesson 19 for more
information.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 27
Lesson 16 : Project 3 - Screen Tiling Artifacts (2:33)
This short and sweet lesson is here to help you in case you encounter lines in your pattern
exports that mysteriously appear even when you’re sure your original swatch art is flawless.

2 Ways to Confirm those lines are mere tiling artifacts and not something amiss with
your pattern:

1. Zoom in and out and the lines change or disappear at different zoom percentages.
2. Lines disappear after switching to the anti-aliased view in Preferences> General.

Once you confirm the lines are just Illustrator tiling artifacts, you can rest assured patterns will
print without lines. To export without lines, choose “Art-Optimized” anti-aliasing in the
export dialog box.

Lesson 17 : Project 3 - Color and Spoonflower (6:12)

Before uploading designs for print:

• Double-check your Artboard measurements and x and y coordinates.

• Use a printed test to select colors for print. Do not rely on your monitor.

Visit http://www.spoonflower.com to set up an account and find more information about the
Spoonflower printing process.

The book A Field Guide to Fabric Design by Kim Kight, is an excellent resource for detailed
information on digital fabric printing.

To order the Spoonflower Color Guide printed swatch (171 colors) visit the FAQ
page under: the “Beginners Guide to Color” section.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 28
 Tip: You can download the png digital copy of the Color Guide or Color Map and
use your Eyedropper Tool to sample the colors to your Color Panel, hold Shift while
clicking with the Eyedropper to sample the color, retaining the hex code.

Spoonflower uses Hex Codes to identify RGB colors. In Illustrator there is a space to
enter hex codes in the color picker. Double-click a color in the Color Panel to get the Color
Picker and look for the # symbol in the lower right area of the dialog. Enter a hex code from
the printed Color Guide or Color Map to see it’s screen equivalent.

The selected color is now active in the color panel and you can drag it to the swatches panel
to save it as a swatch. Double-click the new swatch to name it and check “Global” to convert it
to a Global Swatch. Global swatches have a white triangle in the lower right corner and allow
you to make changes to the swatch that will update any instance of the color on your
artboard. (We explore global swatches in Module 2 of my Beginning Illustrator class.)

Visit the forum for this class to download an Ai swatch library of the Color Guide.

The Spoonflower Color Map (over 1400 colors)

Information on ordering the Spoonflower Color Map is at:

http://www.spoonflower.com/color_map

From this page you can:

• Order the color map printed on fabric

• Download a digital copy of the Color Map (see eyedropper tip above)

• Download the Color Map .ase file (Adobe Swatch Exchange) which is a saved library of all

the colors that you can access from the swatches panel.

• Download icc profiles for soft-proofing (on screen) the colors in Ai for different fabric types.

Where to save the Color Map .ASE file on your system

mac: HD> Applications> Adobe Illustrator CS?> Presets> en_US> Swatches

pc: C Drive> Program Files> Adobe> Adobe Illustrator CS?> Presets> Swatches

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 29
This makes the Spoonflower Color Map Library accessible from any document, by clicking the
library button of your Swatches Panel. If you’ve taken Beginning Illustrator, this is not the
same folder as User Defined swatches, this is where swatch libraries that ship with Illustrator
are stored. You can use this same directory path to add the Color Guide library downloaded
from our Forum.

How to use the Color Map Library

Open the library by selecting it in the Swatches Panel library menu. In the panel options,
choose Show Find Field, this allows you to type hex codes from the printed color map and
locate them in the library. When you click a single color, it’s added to your swatches panel and
will travel with your document.

How to proof your colors on screen

Download the icc profiles for the fabrics you want to print on from the Color Map page on
Spoonflower. Then, save the profiles in the appropriate folder on your system:

mac: HD> Library> ColorSync> Profiles

pc: WINDOWS\SYSTEM32\SPOOL\DRIVERS\COLOR

In Illustrator choose View> Proof Setup> Customize...

In the dialog, choose the saved profile from the pull down menu for Device to Simulate.
Uncheck Preserve RGB numbers. Choose Relative Colorimetric for Rendering Intent.

When you hit OK, the colors onscreen will be in proof mode and you will see the document
tab reflects this change. To go back to the regular preview mode choose View> Proof
Colors, to uncheck Proof Colors. Proofing on screen can be helpful, but it’s not a substitute
for checking your color choices against a printed sample.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 30
Lesson 18 : Project 3 - Printing & Export (7:51)
Testing with your printer

To run a test sampling of all 6 patterns at once, choose File> Print. In the print options dialog
check Ignore Artboards and align the preview to encompass part of the 6 artboards. The
setting will remain after printing, so go back to the Print Options and uncheck Ignore
Artboards to print from artboards and use the Print Tiling Tool within this multi-artboard
document.

Use the Print Tiling tool, located in the tool bar under the Hand tool, to define the print area in
your document. To control visibility of the tiling edge choose View> Show Print Tiling.

Exporting for Spoonflower

Always check and double-check the size and position of your artboards
before exporting your designs. A measurement that is even slightly off can cause your
repeat to fail.

Use the Artboards Panel for navigating the artboards. Single-click an artboard name to
make it active, double-click to center the artboard in the window. In artboard editing mode,
you can avoid accidentally moving artboards by selecting them in the Artboards Panel.

Tip: When using pixel-based effects in your document, set the resolution by choosing
Effect> Document Raster Effects Settings... so your effects will display at the proper
resolution you intend to export at.

When exporting artboards, (File > Export...) it’s important to check Use Artboards and
designate the artboard number. Spoonflower accepts 150 ppi png files. If you send them
an .ai file, it will be converted to a png in their process. Specify the artboard number to export
and choose Art Optimized Anti-Aliasing. Exports from multi-artboard files will have their
name appended with the artboard name and number.

Tip: If you want to export your design at 300 ppi, Lesson 19 shows how to change the
base dpi on Spoonflower to accommodate a 300 ppi image.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 31
 • Go to http://www.spoonflower.com click the Create tab, choose Fabric, then click

Choose FIle and Upload File.

• Once the png export unit is uploaded, you will see it previewing on the next screen.

• Choose the Layout Option: Basic (Exports from this class are basic/grid style.)

• Preview the pattern on different fabric sizes to check the repeat for errors.

• Choose the fabric type and select Test Swatch to order a sample.
• Click Save This Layout to save the options you’ve set.

Lesson 19 : Project 3 - Resizing & Troubleshooting (14:12)

Resizing Pattern Units

To change the size of the repeat unit in Illustrator, select the pattern unit and get the
Scale Tool. Check Objects, Patterns and Preview, then enter a percentage in the Uniform
field and hit OK. Do a test to make sure the result is working in repeat. Then, resize the
artboard to fit the new pattern unit and check to make sure it’s aligned properly. Do a test by
multiplying the width and height by 150 ppi (or 300 ppi) to get the pixel dimensions of your
final swatch art/artboard export. If either dimension results in decimal number pixels, you will
need to do some troubleshooting before exporting and uploading your pattern

Troubleshooting Pattern Units

To troubleshoot a pattern unit export with a line/seam at the edge, check the dimensions.
Multiply the dimensions of your repeat unit by 150 ppi, (or 300 ppi, whatever resolution you
are exporting at). If you get a measurement with a decimal point, Illustrator will round to the
nearest pixel. In some cases, this will leave a fine edge of blank space in the image. You may
need to change the size of your repeat, but first try multiplying your dimensions by another
resolution to see if this results in a round number - then, see Changing Resolution on
Spoonflower on the next page for the steps for changing the base dpi after uploading.

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 32
Resizing a Pattern to Round Number Pixels

Illustrator cannot export an artboard that measures in fractions of pixels. To compensate,

Illustrator will round-up any decimal numbers, leaving you with a final image size that is a
fraction of a pixel larger than your original swatch. In some cases a white line will be visible at
the edge of your repeat unit image. The solution is to resize your swatch slightly, to round
number dimensions before exporting. Here are the steps from the lesson:

1. Multiply w and h by desired resolution to get final pixel dimensions.

2. Round decimals up to nearest pixel and make a note of this new size.
3. Change the document unit of measure to pixels (in Preferences).
4. Open the Transform Panel and Select the repeat unit.
5. Check “Align to Pixel Grid” and “Align New Objects” in the Transform Panel Options.
6. Unlock the proportions lock and resize the repeat unit to the new pixel dimensions.
7. Resize the Artboard: Object> Artboards> Fit to Selected.
8. Check all measurements, then export artboard at 72 ppi, Art optimized.

Changing resolution on Spoonflower

You can upload a 300 dpi image file to Spoonflower - and in the preview window, you’ll see
this results in a doubling of the original pattern unit dimensions. This is because, by default
Spoonflower uses 150 ppi as the basis for determining the size of your repeat unit. You can
change the base dpi to 300 by clicking on the “Change DPI” link next to Design Size. The
dimensions will reflect the original dimensions of your pattern unit at 300 ppi/dpi. Click Save
This Layout, to retain the information for the next time you want to view or print this design.

Thank you for taking Pattern Power!

It’s been my pleasure to guide you through these projects and I hope you’ll enjoy making
patterns in Illustrator. For more Illustrator tips and tutorials, and to donate to help us keep this
class free and available to all, visit my website www.illustratoring.com.

Laura Coyle

www.illustratoring.com

Pattern Power in CS6 with Laura Coyle ©2013 All Rights Reserved www.illustratoring.com 33