Jan 27 2011

photoshop techniques: defining and using seamless patterns

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.

Nov 13 2010

free vector drawings from christopher dresser, “studies in design”

Think of these as a part of a coloring book. Dresser included a number of black & white ‘skectches’ in Studies in Design and Modern Onamentation. We are offering 3 of these designs; just the black outlines so you can customize with your own color combinations. (Hint: Live Paint works nicely for this!) One of the designs offered is an Illustrator pattern brush and the other 2 are AI and EPS motifs that have a linear repeat but they are not rendered as brushes–we’ll leave that up to you.

Download Illustrator files (dresser_stInDe_012_ai.zip)

Download EPS files (dresser_stInDe_012_eps.zip)

(below, offered as an Illustrator pattern brush, only)

The full Dresser Coloring Book will be available for purchase and will include selections from Studies in Design and Modern Ornamentation. The elves are busy working on the designs now. We anticipate offering Series 1, consisting of 25 to 30 designs, by the end of the year.

Oct 2 2010

free samples: vector motifs from christopher dresser “studies in design”

As promised, here are two more samples from the Christopher Dresser: Studies in Design motif collection.

Designs are “hand” traced and in full color. The plates used as the tracing source have faded so the colors may not be an exact match to the original. Colors are rendered in RGB mode which provides the widest gamut for the closest match. Files are fully customizable (colors, proportions, shapes, etc.) using Illustrator. As vector drawings, the designs are fully scalable so they can be adapted for use in websites or for print. Color rendering can be changed to CMYK if needed for printing.

Files are available in Illustrator .ai format (including pattern swatches and pattern border brushes). Non-repeatable motifs are also available in .eps format.

These free examples are part of larger collections that can be purchased. The catalogue of currently available collections can be found in the Marketplace (in the right sidebar).

Purchase 40 motifs from Studies in Design — $11.00

Both the Marketplace and the collection of free samples is growing, so bookmark this page.

Be sure to check out the previously offered free samples from this collection.


Sample vector motifs from Studies in Design, Christoper Dresser (1834-1904):

Download Illustrator (.ai) files (dresser_motif036_ai.zip)

Download .eps files (dresser_motif036_eps.zip)