Geometric Background Patterns

44 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Chris Sparshott

    yet another “smack your head” moment of simple yet effective design tips.

    I use something similar, but never thought of the red square tip.

    Thanks for sharing!

    Chris

  2. Noel

    Example 1 can be halve the size
    check the top line, if you place the red pixel exactly in the middle you are already matching ;-)

    But nice explained!

  3. Derek Moore

    This is a really great focus put on the detail. A great article on “pixel perfection” I have been looking for a summary like this for a while, learned some great things!

  4. Todd Austin

    Thanks for the tips, Veerle. I’ve almost always used the offset filter in photoshop when making background patterns. I’ll definitely have to try out your methods.

  5. Si Jobling

    It’s useful to see the process you go through with geometric patterns – the same process could probably be adapted to Fireworks too by using Select > Save Bitmap Selection and repeating a pattern of an object instead.

    It would have been interesting to see how you would repeat a less repetitive, more organic pattern which seems to be the current trend among many designers today. Maybe something for your own blog, perhaps?

  6. BoltClock

    This is a really versatile technique which I picked up quite a while ago. I still use it occasionally when facing a pattern that I have to cut out like that.

    It’s a great way to play with those pixels, and very useful for striped patterns especially – like the subtle one here in the new design I suppose?

  7. Ahmad Fahad

    Very nice article Veerle, the issue I have come across with patterns, is that in most Middle Eastern patterns (Islamic Era) the basic pattern is too large for zooming-in in one screen without scrolling, which entirely kills my buzz, I use one for my Blog banner if you’d like an example of what I’m talking about, maybe you could elaborate on that.

    Thanx in advance

  8. kat neville

    I always struggle with this…. I’m glad someone has finally given me their technique for doing it. Great article.

    On a side note, I looked at 24ways.org yesterday in firefox2 at my office (don’t ask), and it looked horrendous! No boxes, no hovering, and all the links in link blue! When people started saying the new design was beautiful, I thought they were taking crazy pills, because it looked so unfinished. And now here at home in ff3, I can tell what people were raving about… it IS beautiful! Well done!

  9. Ben Spencer

    Another very useful article. Thanks Veerle. This is the first year I’ve followed 24 ways… loving it so far.

    Using red pixels as reference points is such a simple idea, yet it’s something I’ve never thought of doing!

  10. Martin Kulakowski

    It’s funny how something so obvious in many ways can help so many people, who apparently have been struggling with it before. Makes me wonder if I should write about some other everyday techniques in Photoshop that may be still unfamiliar to a lot of people. Anyway, thanks for sharing.

  11. Shane

    Very useful tutorial, and the stuff on here is tastier than my chocolate-based advent calendar (which I have to share with my wife!)

    @Kat – couldn’t agree more. :)

  12. Zach Leatherman

    I think this technique would be better served if it were called by its mathematical name “Tessellations,” instead of “Geometric Background Patterns” or “Repeat Patterns.”

Impress us

Be friendly / use Textile