{"id":17904,"date":"2019-08-28T18:01:18","date_gmt":"2019-08-28T10:01:18","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17904"},"modified":"2019-08-27T21:44:34","modified_gmt":"2019-08-27T13:44:34","slug":"photoshop-custom-grid","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/photoshop-custom-grid\/","title":{"rendered":"How to Create Your Own Custom Grid System in Photoshop"},"content":{"rendered":"

Grid is a popular approach to building websites. It is more consistent and makes sections proportionally right. A couple of examples of CSS Grid<\/a> frameworks are 960.gs<\/a> or Skeleton<\/a>. However, one of the constraints of using a grid framework is that we will have less flexibility.<\/p>\n

We are bound to the framework\u2019s specification, and its author\u2019s methodology, which in many cases might not be suitable for our website requirements.<\/p>\n

In this post, we are going to show you how to create a custom grid both for CSS and Photoshop<\/strong>. To make the process easy, we are going to use several tools. Let\u2019s check it out.<\/p>\n

Install GuideGuide<\/h2>\n

First, We need to install GuideGuide<\/a><\/strong>, 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.<\/p>\n

\"guideguide\"<\/figure>\n

The Photoshop extension can be installed through the Adobe Extension Manager<\/a><\/strong>, as follows.<\/p>\n

\"adobe<\/figure>\n

Calculate Your Grid<\/h2>\n

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<\/strong>. These can be done easily using grid calculator<\/a> by Heroku.com.<\/p>\n

In this example, I would like specify the total width for 1000px<\/strong>, 30px<\/strong> for the gutter width, and 10<\/strong> for the number of columns. This tool will then automatically generate the actual content width<\/strong> as well as the appropriate column width<\/strong>.<\/p>\n

\"calculate<\/figure>\n

You can also download the generated CSS grid.<\/p>\n

Create the Grid<\/h2>\n

Time to get back to Photoshop. Go to this menu: Window > Extensions<\/strong> 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<\/strong> \u2013 in my case, it is 1000px<\/strong>.<\/p>\n

\"new<\/figure>\n

Fill in the fields in the GuideGuide panel \u2013 Column Gutter, Column Width, and Column Numbers \u2013 in accordance to the ones in the grid calculator.<\/p>\n

\"guide<\/figure>\n

Then, in the GuideGuide panel, go to the Sets<\/strong> tab. In this tab you\u2019ll find some preset guide lines. Select the Outline<\/strong> preset to create guide lines at the edge of the canvas.<\/p>\n

\"canvas<\/figure>\n

We are done, and here is our custom grid ready-for-use for designing a website.<\/p>\n

\"custom<\/figure>\n

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.<\/p>\n

Download the PSD of our example below.<\/strong><\/p>\n