Geometric Background Patterns

When the design is finished and you’re about to start the coding process, you have to prepare your graphics. If you’re working with a pattern background you need to export only the repeating fragment. It can be a bit tricky to isolate a fragment to achieve a seamless pattern background. For geometric patterns there is a method I always follow and that I want to share with you. Take for example a perfect 45° diagonal line pattern.

diagonal pattern background

How do you define this pattern fragment so it will be rendered seamlessly?

wrong pattern fragment

Here is the method I usually follow to avoid a mismatch. First, zoom in so you see enough detail and you can distinguish the pixels. Select the Rectangular Marquee Selection tool and start your selection at the intersection of 2 different colors of a diagonal line. Hold down the Shift key while dragging so you drag a perfect square.

wrong pattern fragment

Release the mouse when you reach the exact same intesection (as your starting) point at the top right.

wrong pattern fragment

Copy this fragment (using Copy Merged: Cmd/Ctrl + Shift + C) and paste the fragment in a new layer. Give this layer the name ‘pattern’. Now hold down the Command Key (Control Key on Windows) and click on the ‘pattern’ layer in the Layers Palette to select the fragment. Now go to Edit > Define Pattern, enter a name for your pattern and click OK. Test your pattern in a new document. Create a new document of 600 px by 400px, hit Cmd/Ctrl + A and go to Edit > Fill… and choose your pattern. If the result is OK, you have created a perfect pattern fragment.

wrong pattern fragment

Below you see this pattern enlarged. The guides show the boundaries of the pattern fragment and the red pixels are the reference points. The red pixels at the top right, bottom right and bottom left should match the red pixel at the top left.

wrong pattern fragment

This technique should work for every geometric pattern. Some patterns are easier than others, but this, and the Photoshop pattern fill test, has always been my guideline.

Other geometric pattern examples

Example 1

Not all geometric pattern fragments are squares. Some patterns look easy at first sight, because they look very repetitive, but they can be a bit tricky.

geometric pattern example

Zoomed in pattern fragment with point of reference shown:

geometric pattern example - zoomed in pattern fragment

Example 2

Some patterns have a clear repeating point that can guide you, such as the blue small circle of this pattern as you can see from this zoomed in screenshot:

geometric pattern example

Zoomed in pattern fragment with point of reference shown:

geometric pattern example - zoomed in pattern fragment

Example 3

The different diagonal colors makes a bit more tricky to extract the correct pattern fragment.

geometric pattern example

The orange dot, which is the starting point of the selection is captured a few times inside the fragment selection:

geometric pattern example - zoomed in pattern fragment

About the author

Veerle Pieters is a graphic/web designer based in Deinze, Belgium. Starting in ’92 as a freelance graphic designer, Veerle worked on print design before focussing more on webdesign and GUI (since ’96). She runs her own design studio Duoh! together with Geert Leyseele. Veerle has been blogging since 2003 and is considered number 39 on the list of “NxE’s Fifty Most Influential ‘Female’ Bloggers“.

More articles by Veerle

Comments