In the beginning, black was just that. Black. Then came orange, and it was the new black. Then we toned it down a bit. Got into Drop shadows. Then came patterns, and we all rejoiced.

I love patterns. I want to feed them, pamper them and spoon with them at night. But I digress. The point (and yes, there is a point to this) is that patterns are lovely, and they are one of the re-emerging Web Design trends that are taking over. From Cameron to Todd, to the other Cameron, you can see that they’re back, and they’re here to stay (at least until the next big thing in design comes along).

I’ve been bitten by the pattern bug recently, too, as evidenced by this design that I quickly threw together to replace this one (because it was burning my eyes and haunting me at night).

So, how do we go about getting awesomely cool tileable patterns for our site? Well, the quick way is: We go to Squidfingers and steal some from Travis. The longer, more roundabout but more configurable way, is, of course: we make our own.

See? I told you there was a point to all this.

Making tileable patterns
in Photoshop

Our objective is to make this →

Nice and simple. This is a tileable stripey barbershop pattern that we can use with the fill tool in Photoshop. We’ll be able to color it, blend it, slice it and dice it.

I’m not very fond of the automatic pattern maker that Photoshop sports, which usually gives rather crude —if not altogether hideous— results, so this will be a strictly by hand affair. Most images are linked to bigger versions, and all hotkeys and shortcuts are in Mac notation. If you need the PC equivalents, see the pertinent reference.

First, create a new blank image (Cmd+N) of 100 by 100 pixels with transparent background.

Now, grab the line tool (U) and set the weight to 5 px. Holding down the shift key, draw a 45° line. Make it bigger than your current image canvas. The result should look something like this:

You should have the line in one layer and the background in another one. Now, what we’ll do is copy the line several times and align the copies side by side. The easiest way to do this is by selecting the Move tool (V), and holding down the option/alt key. That should make your cursor into a double triangle, with the rightmost one being an outline. Make sure that the line layer is active, grab the line and drag it to copy it. Rinse and repeat.

Make sure that the lines are evenly spaced. There are many ways to do this. I recommend relying on the Grid Snap (View > Show > Grid + View > Snap To > Grid ).

You can also double check by making a small marquee of the width between lines, and moving it around to make sure all lines have the same space between them. Stop the copying when you have something that resembles this →

Now we’ll grab a square selection of arbitrary size. Select the marquee tool (M) and hold down the shift key to make a selection inside the line-covered area. Copy-Merge the selection (Shift+Cmd+C). When you do copy-merges, make sure you’re positioned on a visible layer, or the command will do absolutely squat.

Create a new image of 200 x 200 px. with white background. The white is just to make it easier to align the pattern. Paste your selection on it so that you have this:

Activate “Snap To Document Bounds” (View > Snap To > Document Bounds) and move your square into the lower left corner of the document. Now select the Move tool (V). Holding down both the option and shift keys, create a copy of the square and move it to the right until the lines align again. Now make the original layer active again, and repeat the process, but this time go up. In these screenshots I have set the extra layers’ blend mode to “multiply” to make it clearer and placed arrows to show the direction of the movement

Now we’ve isolated the square for our pattern. It’s the little guy at the corner, left after overlapping the two copies of the lines. Using the marquee tool and any combination of zooms and gridlines, select only that square, like this:

Now make the white background layer invisible, so that we don’t include it in the pattern. This is to make our pattern as flexible as possible. Once the square is selected and the background transparent, all we have to do is go to Edit > Define Pattern… and a new window with a preview of our pattern will appear.

Just give it a cool-sounding name, like Jay, or Rocko, and you’re done.

To try your newly birthed pattern, create a new image of say, 400px by 400px, select the Paint Bucket tool (G), set the fill mode to “Pattern” instead of “Foreground”, and your pattern should appear right there in the list. Select it and fill away!

The reason we did not include the white background in the pattern, and also the reason we did not use black for the lines, is that this gives us much more flexibility. Use the pattern in a transparent layer, and the background will show through. Add a Hue/Saturation adjustment layer, and you can change the color of the lines (which would be rather difficult if the lines were too dark). Here are a few examples of the variations you can try:

I used a variant of this basic pattern along with some drop shadows to give the ASSA site (work in progress) a bit more pizzazz. You can try more complex patterns too. The basic method is the same however complicated your pixelart is.

— sergio on October 05, 2004