How to Create Your Own Custom Grid System in Photoshop
Grid is a popular approach to building websites. It is more consistent and makes sections proportionally right. A couple of examples of CSS Grid frameworks are 960.gs or Skeleton. However, one of the constraints of using a grid framework is that we will have less flexibility.
We are bound to the framework’s specification, and its author’s methodology, which in many cases might not be suitable for our website requirements.
In this post, we are going to show you how to create a custom grid both for CSS and Photoshop. To make the process easy, we are going to use several tools. Let’s check it out.
Install GuideGuide
First, We need to install GuideGuide, a Photoshop extension to create guide lines, specifically designated to create a Grid with ease. To be able to install GuideGuide, your Photoshop need to be at least CS4.
The Photoshop extension can be installed through the Adobe Extension Manager, as follows.
Calculate Your Grid
Before we setup the guide lines in Photoshop, we need to calculate the grid, which includes the total width, the column width, the column number, and the column gutter. These can be done easily using grid calculator by Heroku.com.
In this example, I would like specify the total width for 1000px, 30px for the gutter width, and 10 for the number of columns. This tool will then automatically generate the actual content width as well as the appropriate column width.
You can also download the generated CSS grid.
Create the Grid
Time to get back to Photoshop. Go to this menu: Window > Extensions to show the GuideGuide panel in the Photoshop sidebar. Then, create a new Photoshop canvas, and set the canvas width in accordance with the Fulll Width – in my case, it is 1000px.
Fill in the fields in the GuideGuide panel – Column Gutter, Column Width, and Column Numbers – in accordance to the ones in the grid calculator.
Then, in the GuideGuide panel, go to the Sets tab. In this tab you’ll find some preset guide lines. Select the Outline preset to create guide lines at the edge of the canvas.
We are done, and here is our custom grid ready-for-use for designing a website.
Additionally, you can add more room to breath at the left and right sides of the canvas by extending the canvas width, and then add rectangle in new layers for creating a visual helper for the columns of the grid.
Download the PSD of our example below.