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.
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
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.
Step 2
Go to View > New Guide Layout and create the guide layout by following the rules previously mentioned.
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.
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%.
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.
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”
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.
Step 5
Place the baseline grid layer under the column grid layer and reduce the opacity to 20%.
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.
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.
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.
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:
Step 5
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.
The result:
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.
The column grid with the added 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%.
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.
