Create Own Custom Grid System In Photoshop
Grid is a popular approach to creating websites. This is more consistent and makes the sections proportionally correct. Here are some examples of CSS grid frames 960.gs or skeleton. However, one of the limitations of using a grid frame is that we will have less flexibility.
We are bound by the framework specification and the author’s methodology, which in many matters may not be suitable for the requirements of our website.
In this article, we will show you how to create a custom grid for CSS and Photoshop. To simplify the process, we will use different tools. Check.
Install GuideGuide
First of all, we need to install GuideGuide, a Photoshop extension to create guides specially designed to easily create a grid. To install GuideGuide, your Photoshop must be at least CS4.
The Photoshop extension can be installed from Adobe Extension Manager as follows.
Calculate Your Grid
Before configuring the guides in Photoshop, we need to calculate the grid containing the total width, the column width, the column number and the column bar. These can be easily done by using the grid calculator of Heroku.com .
In this example, I want to specify the total width for 1000 pixels, 30 pixels for the width of the gutter and 10 for the number of columns. This tool then automatically generates the actual content width as well as the corresponding column width. You can also download the generated CSS grid.
Create the grid
It’s time to get back to Photoshop. Go to this menu: Window > Extensions to display the GuideGuide panel in the sidebar of Photoshop. Then create a new Photoshop canvas and set the width of the canvas according to the total width–in my matter it is 1000 pixels.
Fill in the fields in the GuideGuide panel–column bridge, column width and column numbers – according to the grid calculator fields.
Then, in the GuideGuide panel, go to The Sets tab. In this tab, you will find some predefined markers. Select the default outline to create marks on the edge of the canvas.
We are done and here is our custom grid ready to use for the design of a website.
In addition, on the left and right sides of the canvas, you can create more breathing space by expanding the width of the canvas, then adding a rectangle in new layers to create a visual aid for the grid columns.