Behind every beautifully designed website is a strong grid. Setting up a grid structure for your design project is beneficial for designers as it allows you to quickly add elements to a layout and create a defined structure to your site. Additionally, content heavy sites are more easily digested when created on a grid, because it helps guide you through the content.
One time-tested tool is the GuideGuide extension for Photoshop. This little tool is so handy for creating grid structures. Below, find out how to create a grid and how to save it for future use:
1. Download and install the GuideGuide extension for Photoshop here:
2. Create a new document in Photoshop. We recommend starting at 1280px wide by 2000px tall at 144dpi.
3. Open the GuideGuide panel by clicking on “Window” and going to “Extensions” and checking “GuideGuide.”
4. The panel has inputs for different lines you can make to create your grid:
-The first two rows are your margins, these create one line that originates from the left, top, right, or bottom.
-The middle row are for how many rows or columns you’d like.
-The next row sets the width and height of your columns and rows.
-The final row sets the size of the gutters of your columns and rows.
-The icons at the bottom of the panel create preset lines: left border, right border, midpoint both vertical and horizontal. There’s also a button in the center for clearing your file of all guides.
If you hover over an input it will highlight related inputs (middle screenshot below). If you hover over the icons at the bottom, it will tell you what that icon creates (right screenshot below).
5. To create a grid, I like to set my left and right margins, number of columns, and gutter size. I also like to set the horizontal midpoint for quick reference.
You don’t have to fill in every input in order to make a grid, it’s totally up to you! This is just my preference.
Here is an example of a grid:
And here’s how it looks once you hit “Add guides.”
6. Overtime I have found that I generally use the same two or three grid structures. So I really like that you can save your grids within GuideGuide for future use. To save a grid, once you have all your inputs set up click the arrow toggle next tob “Add guides” and hit “Save grid.”
On the next screen you can add a name for your grid and make any final adjustments before hitting “Save grid” one last time.
To view and use your saved grids click on the “Saved” tab at the top of the panel.
That’s it! There are lots of other useful ways you can use the GuideGuide extension but this is a primary use. It’s definitely a favorite add-on tools for Photoshop.