Create your own Grid System in Photoshop

Grid systems are an important part of the design process. Grids help you better organize the content on the page and balance the design, by designing in proportions with respect to the size of the grid. This will create an uniform look in your designs, allowing you to display the content in a more readable way.
In this lesson we’ll build our own Bootstrap based grid system in Photoshop.

A grid system consists of intersecting vertical and horizontal lines, that are used as guides in the process of arranging the content on a page. The vertical lines create columns and the horizontal lines represent the baseline grid used to arrange the line-height between elements.

Most popular CSS frameworks that use a grid system have a 12 column or 16 column grid system: Foundation, Bootstrap, 960 Grid System, Skeleton and others.

The baseline grid creates vertical rhythm in your design and is build with respect to the content font-size. Usually the font-size is set to 14px or 16px. To calculate the baseline grid size, you have to use this formula: font size * 1.5 = baseline size or font size * 1.4 = baseline size. I prefer the first formula. This means that for a 16 pixel font-size, your baseline will be 24 pixels.

In the example picture you can easily see how the content is aligned with the grid system: each service item uses 4 grid columns and the elements are vertical aligned with respect to the baseline grid.

The Agency services section
Example of content aligned with the grid system

A useful tool to show your baseline grid when you’re building a site in the browser is Basehold.it. It will display a baseline overlay allowing you to easy structure and arrange your content.

Column grid rules

We’ll base our grid system on the Bootstrap’s popular CSS framework and we’ll create the grid for a large device resolution, at least 1200 pixels wide.

To create the grid, we have to establish some simple rules:

  • the container size that will house the 12 columns is 1170 pixels wide
  • one column is 70 pixels wide
  • 12 columns are used
  • the space between the columns (the gutter width) is 30 pixels
This is what we'll be building
This is what we’ll be building

Download Template

 

Building our column grid in Photoshop CC or newer

If you’re using Photoshop CC or a newer version of Photoshop you can easily create the grid with the New Guide Layout tool. You won’t need an external plug-in like GuideGuide and you won’t have to create the guides manually.

Step 1

Begin by  creating a new file (CTRL + N or File > N) and set the document width to 1280px, the height to 500px and the name to “1170 Template by AcasA Programming.” Feel free to use other settings or name.

The dialog box for a new document
Create new document dialog

Step 2

Go to View > New Guide Layout and create the guide layout by following the rules previously mentioned.

New guide layout settings
New guide layout settings

Step 3

Now we can very easily add rectangles inside the guides, that will act as columns background. Draw a 70 pixels wide rectangle with a height of 500 pixels and set it’s color. I chose red: ff0000.
Align the rectangle with the left guide. Now we have the first column ready.

Step 4

Now simply duplicate the rectangle and align it with the guides. To duplicate an item select the item’s layer and right click the layer and Select Duplicate Layer, or hit CTRL+J or a faster and more visual method is to hold the ALT + SHIFT + Click and Drag.

The 12 column grid with guidelines
The 12 column grid with guidelines

Step 5

We’re almost done. We have to merge the rectangles together. To merge them, select all the rectangle layers and then hit CTRL + E. Rename the new layer to Grid and decrease the opacity to about 15%.

The final form of the Bootstrap grid
The final form of the Bootstrap grid

Congratulations! Now we have a Bootstrap grid that we can use to organize our designs.

The baseline grid

Now that we’ve finished the Bootstrap column grid, we can start building the baseline grid. We’re going to use 24 pixels between the horizontal lines.

Step 1

Create a new document with the width of 1 pixel and the height of 24 pixels and a transparent background.

Create a new 1px wide file
Create a new 1px wide file

Step 2

Draw a 1 pixel square and it fill it with your preferred color. My color of choice is blue: #328ff7. Place the square at the bottom of the document.

Step 3

Save the file as a pattern. To do this go to Edit > Define Pattern. Enter a name like: “24 pixels Baseline”

Define pattern
Define pattern

Step 4

In our main document create a new layer and fill it with white. Right click the layer and select Blending Options. Go to the Pattern Overlay option and select your baseline pattern we created in Step 3.

Pattern overlay settings
Pattern overlay settings

Step 5

Place the baseline grid layer under the column grid layer and reduce the opacity to 20%.

Final result and opacity settings
Final result and opacity settings

Building the column grid in older versions of Photoshop

Step 1

Begin by creating a new file (CTRL + N or File > N) and set the document width to 1280px, the height to 500px and the name to “1170 Template by AcasA Programming.” Feel free to use other settings or name.

The dialog box for a new document
Create new document dialog

Step 2

Now it’s time to add the margin guides. To add a new guide, go to View > New Guide. Add a new guide at 55 pixels and the right margin guide at 1225 pixels.

The left and right guide settings
The left and right guide settings

Step 3

No that we have set the margins, we can create the rectangles that will represent the columns.
Draw a 70 pixels wide rectangle with a height of 500 pixels and set it’s color. I chose red: ff0000.

The settings for the grid column
Grid column settings

Align the rectangle with the left guide. Now we have the first column ready.

Step 4

To create the right column, we simply have to follow Step 3. Align the new rectangle to the right guide. You should now have something like this:
05 - Margin columns

Step 5

Duplicate on column and then move it 30 pixels to the right
Duplicate on column and then move it 30 pixels to the right

Now we have to create 10 more columns. You can either duplicate the columns and spread them 30 pixels apart, or you could create 20 new guides, with the exact pixel location.
Creating (or duplicating) the columns is an easier and faster method and is my preferred method.

To duplicate an item select the item’s layer and right click the layer and Select Duplicate Layer, or hit CTRL+J or a faster and more visual method is to hold the ALT + SHIFT + Click and Drag.
Duplicate the first column and position it 30 pixels from the first one. To easily place the second column 30 pixels, position the new column right next to the first one, and then, holding the Shift key, hit the right arrow 3 times.

Step 6

Repeat step 5 until you have 12 columns.
Tip: you can duplicate 2 (or more layers) at the same time using your preferred method.

Duplicating 2 columns
Duplicating 2 columns

The result:

12 columns
12 columns

Step 7

Now that we have the 12 columns, we can add the guides. Instead of adding a new guide and directly entering the pixel location, you can simply drag and drop the guides from the rulers located in the left of your workspace. If your rulers are not showing, press CTRL+R to display the rulers.
Add the guides to the left and right margins of the rectangles.

How to place the Guides
How to place the Guides

The column grid with the added guidelines:

The 12 column grid with guidelines
The 12 column grid with guidelines

Step 8

We’re almost done. We have to merge the rectangles together. To merge them, select all the rectangle layers and then hit CTRL + E. Rename the new layer to Grid and decrease the opacity to about 15%.

The final form of the Bootstrap grid
The final form of the Bootstrap grid

Congratulations

Now we have an awesome grid system based on the popular Bootstrap framework. You can now use this grid in your designs to easily manage and organize your site content.

Tags: , , ,

Gabriel Neagu

Gabriel Neagu

I'm a developer from Bucharest, Romania passionate about design and clean code. In my free time I enjoy playing guitar.

Follow Gabriel:

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Privacy Preference Center

Necessary

Advertising

Analytics

Other