illustrator techniques: part 1 defining patterns
(This is a repeat of a post that somehow has been deleted! It is a technique that is requested often so it’s worth re-posting.)
This is a rather long post, but I have gotten this question repeatedly so this is an attempt to point my students to one place for the answer. (Who knows? It could also be the germ of a book.) This is also a 2-part tutorial. The second part takes up the question of how to quickly and easily test different colorways for a pattern.
I am always in search of vintage motifs to use in designing repeat patterns, backgrounds, borders, or textures for both print and web projects. Often I can find something in my library of Dover publications that I have been collecting since the 1970s. (Note: Though it is tempting to search for online sources for design, it is necessary to carefully negotiate the copyright minefield, even for “vintage” material. Before you offer something for commercial purposes, be mindful of use rights.)
Since I may want a design to do double-duty as both backgrounds for websites (at 72 ppi) and at larger scale in print (at 300 ppi), I prefer to render patterns in vector format to maintain a clean appearance at any scale. Printing a scanned image from a printed book creates all sorts of moire madness. Whether the source was from a book or from the web, a vector pattern has the following advantages:
- It is scalable without loss of quality
- The repeats are seamless (if set up correctly)
- Colors are clearer and more uniform
- Colors can easily be edited
For that reason, I have developed some basic skills with vector tools using Illustrator. There are other vector drawing programs (CorelDRAW, Xara Xtreme) but I prefer Illustrator for many reasons, but chiefly because of the robust color management tools. More about that in Part 2.
Manual tracing is a good way to hone Pen tool skills. It also causes you to think about pattern repeats and timesaving ways to manipulate objects (Rotate, Reflect). The more recent versions of Illustrator include some powerful and easy to use drawing tools (Blob Brush and Eraser, to name a couple).
What about Live Trace? Illustrator provides a “Live Trace&rdquot; utility which I almost never use for this purpose. I find it faster and more precise to hand trace simple design motifs using the drawing tools rather than manipulate the Live Trace options to get the best rendering and then adjust the paths to remove wayward anchor points or to smooth curves–too much fussing! Also, very low resolution images are just not suitable for Live Trace.
To prove this point, the source for our example is a Japanese textile pattern from an online (low resolution) source. The image was scanned from an antique book. This seems like a good choice for background texture at very small scale as well as an interesting large scale pattern. You can download the image to follow along with this tutorial.
The steps in this tutorial are followed by an image that illustrates them. This tutorial is aimed toward the beginner, using Illustrator for the first time, however the first steps involve a little Photoshop.
The original is dark and low contrast making accurate tracing a little difficult. It’s worthwhile to take the extra time to correct this.
Open the image in Photoshop and bring up the Levels dialogue box: Image > Adjustments > Levels…
Click on the eyedropper on the right to set the white point. Since there is a portion of the unprinted page showing that should be white, click on this area. If there is no indication of white in your image (page edge or a white portion of the motif) this step can be skipped.
To increase the contrast, move the leftmost triangular slider under the histogram to the right to darken the darkest regions. Then, move the middle slider to the left to lighten the midtones. Adjust these as required until you can clearly see the intricacies if the design.
Save the image.
In Illustrator:
Open a new, blank document (preferably for print, though a web document will do).
Place the image file: File > Place…
Open the Layers panel. The image will be on a layer with the name of Layer 1.
Hint: if a panel noted below is not visible, select it from the Window menu:
Add a new layer (A) which should be above Layer 1 (if not, click on Layer 1 in the Layers panel and drag it beneath Layer 2). Lock Layer 1 by clicking in the square next to the layer name (B).
Still in the Layers panel. click on the image layer (Layer 1) to make it active and then double-click on this layer (to the right of the layer name) to bring up the Layer Options dialogue box.
Check the box to Dim Images to 50% (C).
Select the Eyedropper Tool (A) to sample the colors from your image.
As you click on the image, the sampled color will appear in the Fill/Stroke color boxes (B) and the Color panel (C)
(Hint: double-click the Eyedropper Tool to bring up the Eyedropper Options dialogue box. At the bottom you can change the Raster Sample Size from Point Sample to 3 x 3 Average or 5 x 5 Average. This may result in better color matching.)
For each sample, click the Color panel options (D) to reveal a flyout menu and select Create New Swatch (E) to add this color to the Swatches panel.
After each of the colors have been sampled and added to the Swatches panel (A), click on Layer 1 to make it active.
Next, make sure that the Rulers are visible at the top and left side of the window. If they are not, select View > Show Rulers.
To be able to precisely align the guides for the repeat, zoom in (or magnify) the view (View > Zoom In).
Drag a horizontal Guide line by clicking on the top ruler and dragging down to a point where the pattern repeat will begin (Guide B – C).
Drag a second horizontal Guide to find the next instance of the same position on the motif (Guide D – E).
Drag a vertical Guide from the left ruler to align with the beginning point of the pattern repeat (Guide B – E).
Drag another vertical Guide and find the next instance of the same position on the motif (Guide C – D).
Points A, B, C and D will be in the same position on the motif and will define the extents of the pattern to be repeated.
Drag Guides to the midpoint of the pattern repeat area.
Lock the guides in place (View > Guides > Lock Guides).
Zoom in (View > Zoom In) further to be able to clearly see the design detail.
Select the pen tool and set the Fill color to [None] and the Line color to a visible color such as white. If necessry, change te Stroke Width in the Stroke panel to 0.25 pt or 0.5 pt. Tracing with a very heavy stroke is difficult and will result in a distorted path.
Trace around the flower. In this case, since the flower is symmetrical, it is only necessary to draw one-quarter of the flower. The rest can be generated by copying and reorienting this quarter.
Switch the Line and Fill colors (Shift-X).
Using the Selection Tool, select the object and click once on the Reflect Tool.
Find the center-marker (A) and, as you hold down the Option key, drag the center-marker to the center of the flower motif (B). This will also be the intersection of two guides.
As you release the mouse button the Reflect dialogue box will appear.
Choose the Horizontal Axis and click on the Copy button.
These two quarters can now be joined.
Zoom in (View > Zoom In) further, if needed to see individual anchor points.
Using the Direct Selection Tool, drag across the first two anchor points that are to be joined (A) and choose Object > Path > Average…
Choose Both axes from the Average dialogue box.
Choose Object > Path > Join to connect the two paths.
Repeat for the two opposite anchor points (B).
Change back to the Selection Tool. Select this new object and click once on the Reflect Tool.
Position the center point on the intersection of the two Guides again (Option-drag).
The Reflect dialogue box appears when you release the mouse button. Choose Vertical Axis and click on Copy.
Choose the Ellipse Tool (found by clicking and holding down the Rectangle Tool to reveal a flyout menu.) To complete the flower, draw a circle in the center by holding down the Shift button as you drag.
With the Selection Tool, reposition the circle, if necessary.
Average the anchor points and Join the two halves of the flower, as described above.
Deselect everything (Select > Deselect) and zoom out, if necessary to see more of the design.
Exchange the Fill and Line colors again (Shift-X) and draw a rectangle at the intersection of the lattice with the Rectangle Tool (A). Using the Stroke panel, set the Stroke weight to 2 pt (B) and the style to rounded (C).
Using the Reflect Tool as you did for the flower, copy the rectangle in the Vertical Axis first, by positioning the center maker in the center of the circle in the middle of the flower.
Then, with the Selection Tool, select one of the rectangles and hold down the Option key as you drag a copy into position at the intersection of the two Guides on the left side of the repeat.
Using the Reflect Tool, reposition the center marker and copy the rectangle in the Horizontal Axis.
Using the Line Segment Tool (A), draw a line between the left and top rectangles.
With the line still selected, open the Stroke panel and change the Stroke Weight to 3 pt (B) and the style to Butt Cap/MiterJoint (C).
Using the Reflect Tool, copy the other 3 line segments.
The lattice is bordered by a slightly darker shade. The best way to achieve this effect is to make a double stroke using the Appearance panel (A).
Choose the Selection Tool and select all 4 line segments.
In the Appearance panel, select the Stroke appearance and click on the Duplicate Selected Item icon (B). This will set a new appearance (C) below the original stroke.
With the new Stroke appearance selected, click on the color icon (D) and change the color to black.
The new stroke is the same weight as the original and it is underneath so it will not show until you change the stroke weight (E). Use 5 pt in this example.
Select the 4 rectangles and copy them (Edit > Copy).
Then paste them in back of the originals (Edit > Paste In Back). IMPORTANT: Do not deselect or click away from the copied rectangles. They will not be visible until the color and stroke weightare changed.
Usine the Appearance panel, change the stroke color to black and the stroke weight to 4 pt.
With these 4 black rectangles still selected, send them behind all of the other objects (Object > Arrange > Send To Back).
The flower and 3 sides (+ 2 rectangles) will be copied to the upper right. If the Guides are not visible, make them visible (View > Guides > Show Guides).
Select these elements by shift-clicking on each one or dragging a marquee around them and start dragging them to the new position. As you drag, hold down the Option key to turn the selection into a copy.
Be as precise as you can in placing the objects to achieve a smooth pattern repeat.
Select everything (Select > All) and, while holding down the Shift key, click on the 2 line segments and drag a marquee selection around a portion of each of the 3 rectangle groups. This will deselect these objects.
Option-drag to copy these elements into position to complete the motif.
Shift-click on each of the flower motifs (and their center circles) to select them all.
Change the Fill color of the flowers using the sampled colors in the Swatches panel (A).
Make Layer 1 invisible (B) to more clearly see the changes.
Select the line segments and using the Appearance panel, change the stroke colors.
Select one of the white rectangles and select similar elements using Select > Same > Stroke Color. Change the color.
Selecting the remaining black rectangles is tricky since they are exactly underneath the rectangles that you have just colored. Drag a selection marquee around one of the rectangles. Shift-click to deselect the topmost rectangle (you won’t see anything different, except that the Stroke Color box at the bottom of the Tool Bar should now be black).
When you have successfully selected one of the black rectangles, select all similar elements using Select > Same > Stroke Color. Change the color.
Choose the Rectangle Tool and set the Fill Color to the darkest of the previously selected colors.
Draw a rectangle that covers all of the other elements.
Send this rectangle to the back (Object > Arrange > Send To Back).
Deselect all elements (Select > Deselect).
Set both the Fill Color and Stroke Color to [None].
Choose the Rectangle Tool and draw a blank rectangular box with corners at points B, C, D, and E.
Immediately, while the box is still selected, send it to the back (Object > Arrange > Send To Back).
Select everything (Select > All).
Make a pattern swatch (Edit > Define Pattern).
In the Define Pattern dialogue box give it a name.
It will now appear in the Swatches Panel.
Deselect all elements (Select > Deselect).
Zoom out and move away from the pattern design.
Using the Rectangular Tool, draw a large rectangle and set the Fill Color to your new pattern.
The pattern should fill the entire rectangle, or any object that has the Fill Color set to this pattern.
Save the pattern for future use by selecting Save Swatch Library As AI… from the flyout menu in the Swatches panel (found by clicking in the upper right corner of the panel).
In the next window, navigate to the decorative pattern swatches folder in the Illustrator Application folder (this navigation trail may be slightly different, depending on the version of Illustrator. For CS4:
Applications > Adobe Illustrator CS4 > Presets > en_US > Swatches > Pattern > Decorative
Next tutorial, use Illustrator CS4 Color Editor to simply change the colors of patterns.
