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.
Open Photoshop and create and new document.
File > New
Windows: ctrl + n
Mac: cmd + n
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.
Zoom in to a 3200% so that we can see what we are doing.
Windows: ctrl + + (plus sign)
Mac: cmd + + (plus sign)
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).
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”.
Go to Edit > Define pattern
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.
Create a another new document. I made mine 500px by 500px.
Go to Edit > Fill
Windows: shift + backspace
Mac: shift + return
Under Contents, from the drop down menu. Select Pattern.
Select the pattern we created. This will always default to the last pattern in the box. Hit OK.
The colours can obviously be changed to whichever colours you’d prefer.
You can change the colours if you’d like.