Custom patterns (repeatable)

Creating repeatable patterns is not easy. They are not as popular today as they were a couple of years ago (well let’s say at least eight), yet repeatable patterns have their merits and can be creatively used to spice up a boring web design.

I’m not referring to background images, of course. A much smarter use is as texture maps (think wallpapers and floor tiles) or as an overlay. Most photographer’s sites are filled with the already old overlay of dots or diagonal lines repeating over the main image.

The issue with repeatable patterns is that, well, they have to be seamless. Otherwise junction lines will appear and ruin the effect.

In 3D texturing this has long been studied and dealt with. Softwares such as PixPlant and ImageSynth allowed to create low contrast seams and there’s plenty of tutorials on how to obtain the same results with Photoshop alone.

In a nutshell:

  1. Use the Other / Offset filter to move the region until you can clearly see the seams.
  2. Then patch them and retouch using smudge and clone tools until they are gone.
  3. Repeat the Offset, but this time negate the original offset values, so that the tile will return in place.

This works well for photographic images, or more abstract subjects, but it will fail (miserably) as soon as you have recognizable high frequency detail in the image.

Say, something as simple as a series of crossing circles, or a pattern made out of stars.

There are solutions for this as well, it’s called texture bombing, but there is a much easier way to obtain the same result. A free web app, developed by Sergii Iavorskyi. You can generate your own patterns directly at BgPatterns, for free and with no annoyingly registrations.

BgPatterns does much more than creating background patterns. Don’t be fooled by the limited amount of shapes to choose from. Stacked with a nice grunge pattern from MediaLoot, here’s the result of an one-minute-straight session.

Need to texture a spooky design? Here's what you can do with a free web app, some stock grunge textures and a minute of work.

Need to texture a spooky design? Here’s what you can do with a free web app, some stock grunge textures and a minute of work.

This kind of patterns is useful but can’t cover all the bases, of course. the main drwaback being that you can’t upload your beautiful bat-vampire like design as a PNG and have it replicated. But there are paid-for apps for that (and Photoshop is still an excellent solution even if the workflow with “pattern definitions” and “pattern selections” feels a bit old fashioned).

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>