Creating grids in Photoshop is an essential piece of most web designers workflow. However, the process of setting up such grids can be quite tedious, considering that you have to drag out each guide individually and get your measurements precise on each one.
Up until recently I had been using something called Gridulator, which is still an awesome tool for creating grids that work in almost any application, but after I found GuideGuide my workflow was forever changed. GuideGuide is a Photoshop extension that allows you to create complex grid systems in Photoshop with just a few clicks, and it is awesome!
Getting Started with GuideGuide
To get started with GuideGuide, you need to download it. Just visit the GuideGuide website and click the big blue button if you’re using Photoshop CS5, CS6 or CC. You can also click the link that says “other versions” if you’re using something older than CS5.
After the download is completed, install the extension by using the Adobe Extension Manager. After the installation completes, you should see GuideGuide appear under your Photoshop Extensions. Go ahead and quit the AEM.
Once GuideGuide is installed, launch Photoshop and go to Window>Extensions>GuideGuide to launch the panel. The panel itself is pretty self-explanatory but here is a breakdown of what each section is for.
I still use Gridulator to map out my grids before going into GuideGuide. Basically it saves me the trouble of doing complex calculations in my head (I hate math). Once I have the grid dimensions, column widths, and gutter space all planned out, I enter those values into GuideGuide and press the blue GG button. Photoshop will then respond by creating guides based on your grid system and allowing you to start designing faster than ever before.
If you have a favorite grid that you like to use, be sure to save that as a Grid Set in the GuideGuide Panel so that you can use it over and over again on each new project you create. That’ll save you a ton of time as well.
Thanks for watching!