Making Basic Patterns in Pixelmator
MAR 11th 2008 • 3 Comments
Textures and patterns are becoming more and more popular in web design today. It gives websites an almost physical characteristic that is lacking in solid colors. Real life is full of texture and different surfaces, why not make it part of the web too? Since websites are fluid and dynamic forms of design, it's almost essential to have a good pattern for any sort of repeating texture. I find that the best patterns are simply black and white pixels that can be played with in photoshop and applied to any layer. I'll show you one method I've been using a lot recently using Pixelmator
Pixelmator
I got pixelmator as part of the MacHeist bundle, and I'm glad I did. It's not as advanced as photoshop, but at $59 it's a great substitute for someone who's not ready to shell out $650 for Photoshop. Pixelmator's image processing is powered by Apple's Core Image technology, so it's got some really nifty features in that regard. Frankly, it kicks the pants off of Photoshop in terms of it's user interface. But, this isn't a pixelmator review.
Pixelmator's Tiling Filters
I primarily use Pixelmator for one thing, it's tiling filter. There are a total of fifteen different tiling filters you can run a portion of an image through. It's a lot like a souped up brush mirrors from MacPaint! You can create countless different patterns all by simply making one simple squiggle on your canvas and then choosing a filter to use. I drew a a little spiral and then chose the twelvefold reflected tile (Filter > Tile > Twelvefold Reflected...).
Create Your Pattern
Once you've selected the filter to use you're presented with a control for editing the angle and width. Attached by a string to the control is a focal point that the filter is using to create the pattern. You can just click and drag it around your doodle to see a kaleidoscope of patterns flash by. I was absolutely blown away by the variations of patterns that I could create with one simple squiggle on the canvas.
Define the Pattern in Photoshop
Once I decided on a pattern to use I brought it into photoshop to create and define a pattern. I wish I could say I had a brilliant method for finding the pattern square to repeat, but it's pretty much a matter of eyballing it. Just start at the middle of one element and drag your selection horizontally till you reach the other side of the same element. Then do the same thing vertically.
Use the Pattern in Photoshop
Once you have your selection made in photoshop. Simply go to [Edit > Define Pattern...] to save your pattern into photoshop. Now you can use the pattern on any layer or element in photoshop that you desire. You can play with the scale, blend mode, or opacity however you need. For the example on the left, I set the blend mode to Multiply, opacity to 50%, and the scale to 25%.
You can also throw a regular image file or photograph you want into pixelmator and achieve a wealth of different patterns. In all sorts of colors. I find it's best to desaturate any pattern that's made, then adjust the brightness and contrast.
Once the pattern is desaturated, you can apply it to any background or layer using a variety of different blend modes within photoshop.
I've been using this technique for patterns more and more. Sometimes it's tricky to find a pattern that fits perfectly with a design since it can be a random process. And it's not a replacement for a well crafted pattern, but it has some good uses! The pattern on the left side of this blog was created this way.
glucko • Mar 23rd 2008 • 4:04 pm
Thank u! This is a great tutorial. I hardly ever use pixelmator despite i have one licence too, but i´m going to probe it.
glen • Mar 24th 2008 • 9:31 am
The filter need MAC leopard system.I only have 10.4 system.
Dave Joyce • Mar 24th 2008 • 9:48 am
@glen - Hmm, I didn't know that, makes sense though since there were a lot of enhancements to the Core technologies in Leopard.