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!

Great post Veerle, you explained it well! Good to see you on 24ways. -Richard

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

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!

Thanks Veerle,

This is a great resource to me. You have no idea how long it took me to find out how this should be done.

But as always, its learning by doing.

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.

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?

Always tough to define your own repeating background patterns. Very nice post. Thanks Veerle!

Nice! The fourth screen grab is the money shot. This will definitely help.

Smells like M.C. Escher in here. =)

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?

I’ve only ever used basic scan line type … Lines but this has definitely opened my eyes to some neat tricks to add to my bag in the future. Thanks

Thanks Veerle, nice post!

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

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!

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!

A very helpful article and something that I was struggling with in the summer.

Like Ben this is my first time following 24 ways.

Good simple tutorial for designers who just can’t grasp this technique.

Great post, I also found this repeat pattern article very useful when creating more complex repeat patterns

This is great stuff! really love this site!

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.

Thanx that is quite useful, it has been a pain to do that and i hope someday there will be some auto crop finding the minimum required image to reproduce the pattern

Simple explained. Thanks!

This is very helpful. Thanks!

Great post Verlee, very nice !

Thanks

Patterned background can be such a b*** to cut up sometimes :p This is a great tip, very helpful Veerle! Thank you!

Nice and simple post, thanks !

Simple, direct, effective. Once you see it, you think “I could do it!”. But no, you do it, and you do it just great!!
Congratulations!!!

Nice post. Nice redo of the website.

Thanks Veerle!

Thanks. Great post! Simple yet very effective.

I’ve had a lot of trouble in the past with patterned backgrounds. This is a good reference.

That’s nice Veerle, I always wanted to make a free resource of patterns… if I only have enough free time to do it…

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

…and all these years I was just doing it by trial and error!

This is really handy. Thanks Veerle!!!

Thanks! I can get enough of this site. I love your design work from you design studio.

I’ve just used this technique and it works! Epic win!!

Just the kind of article I come to 24ways for :>

Thank you Veerle,
I did some of your techniques , and i thought i have to give you a “thank you” for this nice article
my best regards

Mustafa

Oh .. I guide my designer the way he should think about design. Now he think his boss is a real genius.

Thanks Veerle.

Fairly new to ps and fireworks, but these are great tips.. thank you!