Creating Seamless Patterns for the Web

Creating Seamless Patterns for the Web
Made with ❤ by Ellen Donovan © 2013
In this tutorial, I will show you how to create a seamless pattern and
then how to turn it into a seamless graphic that you can use to place
in your web pages as a background image. To create a seamless pattern there are many software tools that can help you accomplish this.
We are going to use a new feature called pattern maker in Illustrator
CS6, to create a pattern in a snap.
1. In Illustrator CS6, create a new
blank document. Go to the
File drop down and choose,
File > New. Add the following
dimentions of 300px by 300px.
2. In the Tool Bar, select the Ellipse Tool (L).
3. Select a fill color of your choice.
4. Choose no stroke for the stroke.
5. To draw a perfect circle, click
and hold down the shift key at
the same time.
Note: Turn rulers on and set them to
pixels if needed. (CTRL+ R). or View >
Rulers > Show Rulers.
Note: Turn on Smart Guides to see the
dimentions of the circle begin drawn.
(CTRL+ U). or View > Smart Guides.
SEAMLESS PATTERNS ➻ Page 1
6. Go to Window > Pattern
Options to open the
Pattern Options Panel.
With the circle still
selected, go to the Pattern
Options panel, options
menu and select Make
Pattern.
7. A pop up note will appear.
Click OK to adding the
pattern to the Swatches
pannel.
8. In the Pattern Option pannel
make the following selections.
• Name the pattern circles.
• From the Tile Type choose
Brick by Row.
• Leave Brick Offset to 1/2.
• Check Size Tile to Art box.
• With the constrant porportions
selected change the H
Spacing to 15px.
• In the upper right hand corner
of the the document, select
the Done button to save your
pattern.
SEAMLESS PATTERNS ➻ Page 2
9. Delete the circle you have
drawn on your art board.
Snap! You have made a
seamless pattern.
Now all you have to do is
make this pattern a seamless
image for web pages.
10.To do this, simply go to
your Swatch panel, click
and drag out a copy of your
circle pattern that you have
made to the art board.
11. Go to the Layers Panel
and twirl open Layer 1 and
Group.
12.Go to the bottom most
layer and you will see a
white box in the thumbnail.
Select the donut selector
to select the path on this
layer.
SEAMLESS PATTERNS ➻ Page 3
13. Select the Art Board Tool in the
tool box.
14. In the option menu under the
Preset drop down menu, select Fit
to Selected Art.
15. Last but not least, go to File >
Save for Web to optimize your
image.
Now you have your seamless image that you can apply in your webpages!
SEAMLESS PATTERNS ➻ Page 4