Create a Diagonal grid pattern in Photoshop

Grids are very popular among web designers. While working on my current project I decided to use a grid for the background. Normal grids didn’t give my design the edge I was looking for. I wanted to add a diagonal grid. Normal grids usually get associated with technical, futuristic design, where as diagonal grids give a more funky, modern feel to a design.

Let’s get started on creating the diagonal grid.

Note: If you get confused at any point, start again at Step 1.

Step 1

Open Photoshop and create and new document.

File > New

The shortcut

Windows: ctrl + n
Mac: cmd + n

step1

I will be using a 20 x 20 square for this tutorial. Feel free to experiment with different sizes if you’d like.
Make sure you set the background contents to transparent, otherwise we won’t be able to reuse this pattern in future projects.

Step 2

Zoom in to a 3200% so that we can see what we are doing.

Windows: ctrl + + (plus sign)
Mac: cmd + + (plus sign)

Step 3

Select a foreground colour, I chose black (#000000)
Grab the line tool and draw a line form the top-left hand corner to the bottom-right hand corner.
Then do it for the other corner as well (top-right hand corner to bottom-left hand corner).
step 3

Note: Remember to hold shift while dragging your line to get a perfect 45 degree line.

You should end up with a image resembling an “X”.

Step 4

Go to Edit > Define pattern
step 4

Step 5

Give you pattern a relevant name. I prefer to always put the size of the grid at the back of my pattern name. That way I don’t get confused if I had 5 different “diagonal grid” patterns.
step 5

Step 6

Create a another new document. I made mine 500px by 500px.

Step 7

Go to Edit > Fill

The shortcut

Windows: shift + backspace
Mac: shift + return
step 7

Step 8

Under Contents, from the drop down menu. Select Pattern.
step 8
Select the pattern we created. This will always default to the last pattern in the box. Hit OK.
step 8

End Result

end result

The colours can obviously be changed to whichever colours you’d prefer.
You can change the colours if you’d like.

Any questions or comments?

  1. Piet says:

    Nice tut Andre.

    I’d be interested to know how to make a tiling texture from a crumpled peace of paper or maybe from an interesting vintage texture I’ve scanned from a book cover. The trick is to make the tile not look tiled but still keep the image file size down.

    Would be cool to see a tut like that on CSS-PLUS 😉

  2. andre says:

    Thanks Piet,

    great idea :)

    Crumpled paper. I have done tiling of crumpled paper before. This took me a while to figure out, but once you get it. You will be able to tile nearly anything.

    For example, one of my past projects I managed to tile water

  3. Arjun says:

    Thank you very much!
    A simple and easy to follow guide :)