l'atelier

I’ve devoted a post or two to creating seamless pattern swatches in Illustrator, but what about Photoshop? I’ve been requested to include more tutorials in Photoshop for beginners.

Fortunately, seamless patterns are easier to define in Photoshop as long as they are sized correctly for the intended use. As raster images, these cannot be greatly enlarged without deterioration of image quality. For instance, if you set your pattern up using a resolution of 72 ppi (suitable for viewing on screen) but later decide to use it in a printed piece where the resolution must be 300 ppi, enlarging the
pattern by a factor of 4x will result in pixelated edges. But with that in mind, let’s see how easy it is to define and use Photoshop patterns, using the pattern below as an example.

1. I’m going to start by using a couple of motifs from Christoper Dresser’s Studies in Design (Series 1):

These are Illustrator (.ai or .pdf ) vector files, but they can be opened directly into Photoshop. This is the all-important point at which you must decide the largest size your image will be used.

Tip: Size your pattern elements for print, even though you think they will only be used for screen viewing. Image size (and resolution) can always be reduced with no deterioration in quality.

In this case, I set the Resolution to 300 ppi and made sure that the Image Size was large enough to print (even as wallpaper!)

Keep both of these files open.

2. Using the Eyedropper tool , sample the background color. This will be needed to match the pattern background.

3. Exchange the Forground color with the Background color by clicking the small double-headed arrows next to the color boxes (at the bottom of the toolbar).

4. Open a New File (File > New…) and set the Resolution to 300 ppi and the overall size to be comfortably larger than your pattern repeat. In this case, the larger motif is 2.25″ wide (625 pixels/300 ppi) so I made the new file 19″ x 19″ and set the Background to Background Color.

Save this file.

5. Make sure that the Rulers are visible (View > Rulsers) and the units are set to pixels to make the placement of elements more precise. Units are defined in Preferences (Photoshop > Preferences > Units & Rulers…)

6. Return to the motif that you want to use to anchor the four corners of the pattern and Select All (Select > All), the Copy the file to the clipboard (Edit > Copy).

7. Return to your new, blank (except fort he background color) image and Paste (Edit > Paste) the motif from your clipboard onto the new image. This will place the motif in the middle of the image. Use the Move tool to reposition the motif to the top, left corner.

8. With your cursor positioned on the top ruler, drag a Horizontal Guide and position it somewhere in the motif, such that the point can easily be referenced again.

9. Place your cursor on the left ruler and drag a Vertical Guide. Position it along the center axis of the motif.

10. The intersection of these guides will be your first reference point for the pattern grid. To make it easier to calculate the grid, establish the ruler origin (0, 0) at this intersection by clicking on the ruler intersection and dragging to the guide intersection.

11. Drag guides (as in Steps 8. and 9.) to section the image into a 4 x 4 grid, using the ruler units to be as precise as possible. The overall grid size is up to you and the sections don’t have to be squares, however it is important to use exact measurements to make the sections as uniform as possible.

It is also important to leave enough room on the right and bottom to accommodate the seamless repeat. Make the overall size at least 20% larger than the size of one full instance of the pattern.

12. Paste the same motif again and position it in the upper right corner. Take care to align it as precisely as you can with the first instance of the motif. Repeat until you have copied and positioned this motif into all four corners.

Tip: Open the Layers panel (Window > Layers) and note that each motif is on a separate layer. If you need to adjust the position of one of the motifs, click on it’s layer to make it active and reposition it. It will move independent of the others.

Bonus Tip: For fine adjustments, Nudge the motif into position using the arrow keys on your keyboard.

13. Place one more instance of this motif in the center of the grid. Use the reference points at the intersection of the grid on the motif to precisely place this motif so that it matches the others.

14. Save this file and switch to the other motif.

15. Select All and Copy this motif to the clipboard, as in Step 6.

16. Switch to the pattern grid and Paste and position this motif into the center, top intersecting grid lines. Repeat for center, left; center, bottom; and center, right intersecting grids.

17. Repeat again for the interseting grids that are diagonally midway between these.

This establishes the pattern extents but it must be trimmed to achieve a seamless repeat.

18. Once you are sure that all motifs are positioned correctly, Flatten this layers (Layer > Flatten Image).

19. Using the Rectangular Marqee tool draw a marquee starting at the upper left intersection and extending to the lower right intersection.

20. (Without clicking on the drawing area) click on the top ruler to drag a horizontal guide midway between the top two guides. Repeat to place a vertical guide midway between the two leftmost guides.

21. Click inside the marquee and drag it to match the upper left corner with the intersection of the new guides. Note that is is important to have left enough space to accommodate the new position of the marquee.

22. Crop (Image > Crop) the image. This will be one instance of the pattern repeat.

23. To create the pattern, select Edit > Define Pattern…, give the pattern a name in the dialogue box, and press OK.

OK so far, but now how do you apply a pattern?

In Photoshop patterns are not stored as swatches, as they are in Illustrator. They are associated with certain tools, such as the Pattern Stamp tool and the Paint Bucket tool .

24. First, create a New document (File > New…) of any size and use the same Background color. Select the the Pattern Stamp tool and from the Options Panel. click on the Pattern Picker and click on the pattern just saved (the last one in the array).

25. Set the brush size, hardness and other parameters and then draw on the blank document. Experiment with different brushes and brush modes to discover new effects.

Mode: Divide using a soft-edge brush

26. Find the Paint Bucket tool .

27. Click once on the document to fill completely with the pattern, as in the example at the start of the tutorial. Or, define an area using one or more of the selection tools to confine the pattern “paint” to that area.

Other places patterns are used:

As a Layer Effect (Pattern Overlay) in which the scale of the pattern can be adjusted.

As a Layer Fill (Adjustment Layer). The scale can be adjusted here as well.

Now available: 30 custom art nouveau pattern swatches for Illustrator by René Beauclair — $11.00 USD Purchase Now for immediate download.

 

These are vector pattern swatches by the celebrated art nouveau designer, René Beauclair. The first series in the Beauclair collection includes 27 seamless Illustrator pattern swatches. They require Illustrator v. 10 or higher.

Pattern designs are "hand" traced (not using "Live Trace") and matched to render as seamless vector patterns. The colors are approximate matches to the original source.

Swatches are customizable so experiment with different colorways and in combination with linear pattern borders or motifs.

For more information concerning installation and use, please see the online version of the "read-me" file.

To view pattern detail, roll the mouse over the thumbnail.

 

(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.