How To Make A Seamless Grid Pattern In Photoshop CS4

Grid patterns as backgrounds on websites are very hip and trendy. They instantly give the feel of a moleskin cahier or graph paper style sketch book, which is quite a coveted look. The best way to achieve this is to make a seamless grid pattern in Photoshop and use that image as a tiling background in your code. You can even convert that into a pattern (.pat) file or a brush (.abr) and reuse it in a variety of ways. Grid patterns are a little tricky to create, but not very difficult. In today’s quick tutorial, I will show you how to create a seamless grid pattern in Photoshop CS4.

Software – Photoshop CS4
Level – Beginner To Intermediate

Step 1
In Photoshop CS4 create a new document by clicking File>New. Make width and height of the document 200px, resolution 72dpi and color mode RGB. Set Fill color to #ebebeb and fill this in the first layer. Rename the layer to "Fill".

Step 2
Create a new layer by clicking on the "new" tab at the bottom of the Layers Panel. From the toolbox, choose the "Line" tool. Set Fill color to #fff799 and weight to 1px. Draw a straight line on one end of the document, just inside the edge. Go to Layer>Rasterize>Shape. Now the line is visible in yellow. Move it to make sure it is just inside the left edge of the document as shown in the picture. Duplicate this layer by dragging the layer onto the "new layer" tab at the bottom of the Layers Panel. Select the "Move" tool from the toolbox and using the right arrow key, nudge the line 5 times. Now duplicate this layer as before and repeat the nudge to the right. Continue doing this till you have vertical lines reaching all the way to the right edge of the document.

Step 3
Make the first "Fill" layer invisible by clicking on the "eye" icon on the left of the layer in the Layers panel. Now click the Layers Menu on the top right corner of the Layers Panel and choose "Merge Visible". This will condense all your yellow lines in one single layer.

Step 4
Now duplicate this lines layer by dragging it onto the "new layer" tab at the bottom of the Layers Panel. Making sure the new layer is selected, go to Edit>Transform>Rotate 90^oCW. The vertical lines will now become horizontal and you’ll get the first glimpse of your grid. Nudge the lines to the right to make sure there is no gap between the lines and the edge of the document. At this point save the file as a .psd [Photoshop Layered File] which will come in handy when you want to make newer grids with different colors.

Step 5
Go to Layer>Flatten Image.This will flatten your file in one single image. Now go to Filter>Other>Offset. Set the values to 80 for horizontal, 0 for vertical and make sure "Wrap Around" is selected as shown in the picture. This offsets your design horizontally to make your pattern seamless. You can experiment with different values for both horizontal and vertical and come up with different results. Your seamless file is now ready. Save this file as a .jpg or .png to be used as a background image on websites.

Step 6
Go to Edit>Define Pattern. Name your pattern and it gets converted into a pattern swatch which you can access by clicking on the bucket "Fill" tool on the toolbox and switching "Foreground" to "Pattern" on top.

Step 7
Go to Edit>Define Brush Preset. Name your brush in the pop up that opens and your seamless background is now stored as a brush. Access the brush by clicking on the "Brush" tool and using it from the Brush Preset Manager.

I hope you enjoyed the tutorial. Please support it by tweeting, bumping, mooing and just spreading the word. If you have any other questions, please feel free to email me or leave a comment to this post. If you know of an alternative method, easier or harder [that doesn't matter], it will be great if you could share it with us. Keep designing and discovering!