Menu Search
Jump to the content X

GuideGuide: Free Plugin For Dealing With Grids In Photoshop


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. 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. 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.

Take a moment and think about creating a multi-column grid in a Photoshop comp. Have your palms started to sweat? Yes, creating grids in Photoshop is a pain indeed. Some designers just estimate and drag guides arbitrarily onto the stage. Others draw vector shapes, duplicate them to represent columns, then stretch them to fit their design. 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. If you were to boil that math down, it probably ends up looking something like this:

(siteWidth - (gutterWidth × (numberOfColumns - 1) ) ÷ numberOfColumns = columnWidth

I was sitting at my desk one day doing this exact equation when I thought, “Man, this looks just like code. 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.

Enter: GuideGuide Link

I created GuideGuide for the sole purpose of making one of the most time consuming parts of Photoshop based design as easy as possible. Enter in a few numbers and GuideGuide will draw a grid on your document using Photoshop’s guides. You’ll become drunk with power the first time you watch it happen, I promise. Even better, GuideGuide’s real power is Photoshop’s marquee. If you have an active selection in your Photoshop document, GuideGuide creates the grid you specify within the selection’s boundaries. Anything GuideGuide can do, can be done using either the document or a selection.

Columns and Rows Link

Designing a site that needs multiple columns and gutters? GuideGuide has your back.

Columns and Rows

Midpoints Link

GuideGuide makes finding the midpoint of items within your design a breeze. Simply draw a selection or + click (ctrl + click on Windows) to create a selection around the item you want to find the midpoint of. To find its midpoint, click one of the midpoint buttons.


GuideGuide places a guide at the midpoint of the selection. Now you can easily center align elements under the original item.

Save It For Later Link

If you find yourself frequently using the same grid over and over, you can save it as a set for later use.

The Fun Part Link

Sure, GuideGuide has its basic rows, columns and midpoints, but with a little creativity it can do a whole lot more.

Measure Navigation Link

I hate figuring out how wide a navigation element needs to be to evenly fit across the width of a site. Instead, I let GuideGuide do the work for me.

  1. Make a selection the width of your site
  2. Enter your info, thinking of the columns field as the number of navigation items and the gutter field as the space you want between each item (if you want it).

Measure Navigation

Element Padding Link

Want to draw a box around an item but don’t feel like measuring it out exactly?

  1. + click (ctrl + click on Windows) the item to make a selection around it.
  2. Enter a negative margin in one of GuideGuide’s margin fields, and click the icon next to it. GuideGuide will fill that value into all the margin fields.
  3. Use the newly placed guides to draw your box.

Element Padding

Baseline Grid Link

Using GuideGuide’s explicit row height, you can easily create a baseline grid for your design.

  1. Enter your desired line height in the row height field.
  2. Align your type and other elements to your new baseline grid.

Baseline Grid

Thoughts? Link

Do you have an unconventional use for GuideGuide? Post it in the comments of this post. I love hearing the clever and unusual ways people use GuideGuide. Found a bug or have a feature request? If you’d like to request a feature or have found something that is broken, please create an issue on GuideGuide’s support repo over on GitHub.

To download GuideGuide and learn more about some of its hidden features, head on over to OS X Lion users with CS5 will need to download a patch for Adobe Extension Manager before they will be able to install GuideGuide.


Smashing Book #5

Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? For example, Smashing Book 5, packed with smart responsive design patterns and techniques.

↑ Back to top Tweet itShare on Facebook

Cameron McEfee is a creative mind working from the octocat nest deep within GitHub. Ever dissatisfied with the tools available to designers and developers, he spends his days designing and creating tools that answer the question “Why hasn’t someone built this yet?” You can find him spouting nonsense on Twitter, flaunting pixels on Dribbble, and denying the fact that he has a blog.

  1. 1

    its about Layout, right? :)
    awesome guide!

  2. 2

    One of, if not the best Photoshop plugin well worth getting!

    Thanks Cameron

  3. 3

    Thanks a lot! I’ve been looking for something like this for ages!

  4. 4

    I have used GuideGuide for quite some time now, and I have to say, it’s one of the most useful tools I have for creating web designs. I have to update this plugin though (doesn’t this happen automatically in Photoshop?).

    • 5

      Unfortunately, no. You’ll need download this version and install it. When I built the first version I wasn’t expecting it to take off, so I didn’t build in the update functionality.

      • 6

        I love this little thing!

        One question is there a way to add shortcuts to the sets? I use “outline” (untill now without GG) all the time, and I wish I could do it even faster.

        Thank You for this little treasure! It will make my work much, much easier! :-)

        • 7

          That’s a good question. It would be cool to be able to hotkey sets. I’ll look into it.

  5. 8

    Can’t wait to check this out :)

  6. 9

    FINALLY! This is great!! Have been wanting & waiting for something like this for ages!

  7. 10

    Is it possible to install on photoshop elements too?

  8. 11

    Finally, I found it again.

    I lost my copy and bookmark of the site. Thank you very much for sharing this awesome plugin.

  9. 12

    Awesome tool, looking forward to using it. Something like it in Illustrator would be nice!

  10. 13

    Oh how exciting gg has finally been updated as promised. Been using this for the past year and love it.

  11. 14

    Or you could just use the program which already has this features and much more build right into it-> Adobe Fireworks.

    Photoshop is not ment for Webdesign. The whole interface, tools, the way they are used, the layer system makes it very hard compared to using Fireworks for this task.

    • 15

      True about Fireworks, but for many like me, Photoshop was a gateway into web design. So we end up using the tools that we know best. Ultimately, good design is the result of a good designer, not the tool they use.

      • 16

        Good points!

        However, each tool has its strengths and weaknesses. You wouldn’t normally use Fireworks for print, yes? The same way, Photoshop may feel quite awkward and slow when used for web/screen design — after all, it wasn’t built for that, but for photographers and heavy bitmap editing. Yes, some web features were later added “on top”, but even now, its layer-based system and lack of “real” vectors makes screen/UI design with it a bit of a pain…

        Ultimately, good design is the result of a good designer, not the tool they use.

        Absolutely true! Tools, on the other hand, allow us to perform certain tasks, the easy way or the hard way. Imagine 2 hours per day saved, just because you spent 10 or 20 hours to learn a new tool — would you invest the time? Yes, there is some time investment, but in the long run, you would be winning… Just sayin’ :)

        • 17

          I have to design a poster today but the customer wants me to do it in PS, not InDesign. This tool is so helpful, thanks a lot!

  12. 19

    Hello, I am using PS CS5 on Windows 7 and not able to install the plugin, any advice?

    • 20

      Works fine in PS 5.0 and 5.1 on windows 7 here (64-bit).
      Did you follow Cameron’s instructions carefully?

      • 21

        Hi Leon, thanks for your reply but in downloaded zip there is no extension for windows but only for mac .. can you give me the right link to download .mxp or email me please.

        • 22

          The extension is not OS specific. It will work for both Windows and OSX systems.

        • 23

          When I installed it on my windows machine Adobe extension manager had to be running as administrator to install the plugin. After that it installed and works great.

  13. 24

    This is great. Thanks.

    I continue to wait for Photoshop to allow the user to right click a line and choose from a selection of guide line colors – helping to distinguish a single or, perhaps, group of line(s) in an otherwise sea of turquoise.

    • 25

      I don’t build complete (baseline) grids as I find typography in Photoshop rather cumbersome but to distinguish gutters from columns and rows, that would be a very useful function indeed.

  14. 26

    Great tool! I’ve always dreaded calculating width’s in PS.

  15. 27

    I can just Thank You! :) Great plugin!

  16. 28

    I’ve been using it for about a year now. Very helpful. Thanks, Cameron!

  17. 29

    Awesome tool, been using it for a while now. Mostly to create a ‘rule of thirds’ grid quick and easy. This article pointed me towards some very useful other features though. Thanx!

    Frankly, I think it’s ridiculous it isn’t already part of Photoshop right out of the box. Pay attention to Cameron, Adobe!

  18. 30

    Simply amazing! The best guide tool for Photoshop so far, thanks for this man!

  19. 31

    This is wonderful! I can’t wait to install and start using.

  20. 32

    you’re great, thank you for the beautiful plugin that helps make my work elegant.
    Happy New Year to one and ALL.

  21. 33

    this sounds awesome! downloading it already. can’t wait to use it!

  22. 34

    The link for CS4 downloads the plugin for CS5 :(

  23. 35

    I’ve been using this for quite a while, I’ts an amazing tool, love it!!

  24. 36

    Thanks Cameron! A really nice plugin!

  25. 37

    It’d be interesting to see how many people actually still use grids in PS (to create a “full” design before coding) or develop directly in-browser?

  26. 38

    This is exactly what I have been after for years, no more calculator needed!!! Is their a CS3 version available?

  27. 39

    Well, I might be a noob. I like what you can do with GuideGuide, so I installed it. But this is my first time using Adobe Extensions. And now I am puzzled. Where can I open the GuideGuide window in photoshop? (I am running photoshop cs5 on a windows computer)

  28. 42

    Amazing! This is going to save me a lot of time. Thank you Cameron.

  29. 43

    Nice guide line of photoshop.Thank you for sharing.

  30. 44

    downloaded this morning and already used in some projects, it works perfectly well and i really needed this kind of tool! thank you soooo much!!!!!

    (@Margaret: you can open it by clicking window>extensions)


↑ Back to top