


If you have an active selection in your Photoshop document, GuideGuide creates the grid you specify within the selection’s boundaries. Even better, GuideGuide’s real power is Photoshop’s marquee. You’ll become drunk with power the first time you watch it happen, I promise.

Enter in a few numbers and GuideGuide will draw a grid on your document using Photoshop’s guides. I created GuideGuide for the sole purpose of making one of the most time consuming parts of Photoshop based design as easy as possible. I wish someone would make a plugin that would do this for me.” Several months and many grids later, it occurred to me that I could probably build the plugin myself. I was sitting at my desk one day doing this exact equation when I thought, “ Man, this looks just like code. (siteWidth - (gutterWidth × (numberOfColumns - 1) ) ÷ numberOfColumns = columnWidth If you were to boil that math down, it probably ends up looking something like this: The hardy few who don’t say things like, “I’m a designer, not a mathematician,” generally use a little math and logic to calculate their grid. Others draw vector shapes, duplicate them to represent columns, then stretch them to fit their design. Some designers just estimate and drag guides arbitrarily onto the stage. Have your palms started to sweat? Yes, creating grids in Photoshop is a pain indeed. Take a moment and think about creating a multi-column grid in a Photoshop comp. Today we are happy to present Cameron McEfee's Photoshop extension GuideGuide which provides a tool to create pixel accurate columns, rows, midpoints and baselines. The first article covered PrefixFree the second introduced Foundation, a responsive framework the third presented Sisyphus.js, a library for Gmail-like client-side drafts.
PHOTOSHOP GUIDEGUIDE FREE SERIES
This article is the fourth in our new series that introduces the latest, useful and freely available tools and techniques, developed and released by active members of the Web design community.
