GuideGuide: Free Plugin For Dealing With Grids In Photoshop

Advertisement

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 PrefixFree1; the second introduced Foundation2, a responsive framework; the third presented Sisyphus.js3, 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

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

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

Columns and Rows4

Midpoints

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.

Midpoints5

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

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

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

Measure Navigation

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 Navigation6

Element Padding

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 Padding7

Baseline Grid

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 Grid8

Thoughts?

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

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

(il)

Footnotes

  1. 1 http://www.smashingmagazine.com/2011/10/12/prefixfree-break-free-from-css-prefix-hell/
  2. 2 http://www.smashingmagazine.com/2011/10/25/rapid-prototyping-for-any-device-with-foundation/
  3. 3 http://www.smashingmagazine.com/2011/12/05/sisyphus-js-client-side-drafts-and-more/
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2012/01/gg-cols-demo.png
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2012/01/gg-midpoint-demo.png
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2012/01/gg-nav-demo.png
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2012/01/gg-neg-demo.png
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2012/01/gg-baseline-demo.png
  9. 9 https://github.com/cameronmcefee/guideguide-support/issues
  10. 10 http://www.guideguide.me
  11. 11 http://blogs.adobe.com/cssdk/2011/12/fix-for-extension-signature-bug-on-mac-os-10-7-patch-posted.html

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

Advertising
  1. 1

    Great small useful tool.
    Just what I’ve been lloking for.
    Thanks a lot.

    0
  2. 52

    Very excited to see how it works…however I am having issue installing this plugin.
    It says ‘it cant copy it to the designated folder I have installed the patch already… did anybody have that issue?

    0
    • 103

      This is a common issue for Mac users. Double check to see that you have write permission to write to the folder mentioned in your error. Right click on the folder and “get info.” At the bottom under “Sharing & Permissions” Make sure your user has Read & Write permission.

      0
  3. 154

    anybody having issues installing the plugin on OS Lion, even after installing the patch?

    1
  4. 205

    Thank you for the information, I was actually looking for something like this a month ago but never found it. Anyways, I ended up buying a set of Photoshop actions to do the grids for me.

    0
  5. 256

    Just brilliant! Thank you SO much, Cameron. Now it’s just a must-have thing for every designer.

    0
  6. 307

    Great tool! Thank you so much, Cameron :)

    0
  7. 358

    There seems to be some confusion as to the nature of ‘enabling’ or finding GuideGuide once installed. It should be noted that the author of this article is unfortunate in calling it a plugin; its a custom panel. You can show panels by going to ‘Window > Extensions’. Hope this clears up any confusion.

    I too have been using this panel for over a year. It’s a huge time saver! I use it primarily for laying out columns and baseline vertical rhythm guides in website mock ups.

    0
  8. 409

    Really great man.
    Thank you!

    0
  9. 460

    Praveen Kumar Kunala

    March 4, 2012 1:29 pm

    Thanks a lot..It is very useful…

    0
  10. 511

    OMG this is such a blessings! thank you for creating such! makes life easier!

    0
  11. 562

    This equation lacks a parenthesis.

    -1
  12. 613

    Yeah, I know, this is not a math101 but this equation seems to lack a parenthesis.

    -1
  13. 664

    Could be a bit OT but personally I still find it difficult to believe Photoshop can be used as a proper tool for web design.

    0
  14. 715

    It’s an awesome tool, been using guideguide for some time now and I must say it has been a HUGE timesaver!

    1
  15. 766

    Very useful tool. Thank you ^.^

    1
  16. 817

    Is there a CS2 version?

    0
  17. 868

    Can you print the grid?

    -1
  18. 919

    I’m zuli from indonesia.
    I wonder,
    what have the photoshop had a line bleeds like in illustrator to the printing process?

    0
  19. 970

    I can see all kinds of possible uses for this, and I’m wondering how difficult it would be to adapt this panel for use with InDesign, since it looks much more powerful than the existing INDD guide tools (nudge, paste multiple, etc.), even though they are better than what PS has. Any thoughts?

    0
  20. 1021

    The question was already asked in the comments about printing but I don’t see that it was answered. Is there a way to print the image created in Photoshop with the GuideGuide lines on it? If not, is that something that could be considered for the near future?

    0
  21. 1072

    Guide guide is great! Been using it for some time now, saves time.

    0
  22. 1123

    Great tool! I’ve used it in CS5, but after upgrading to CC, I’m having a hard time with my plug-ins and Scripts. I had to manually install Tych Panel and was wondering if there are any instructions out here for a manual install of GuideGuide. I can use it in CS5, then export that product to CC, but it’s a bit of a pain.

    Thanks for the fantastic tool!

    0
  23. 1174

    Thanks for providing GuideGuide for free. It’s a handy tool. But I’m disappointed to see it isn’t available for Illustrator CC. Any plans in that direction?

    1
  24. 1225

    I have photoshop cc. It doesn’t want to install on my cc just my cs 5.1

    1
    • 1276

      So excited to use this, but it won’t install on my Photoshop CC!

      Adobe Extension Manager CS5.5 says that it “requiresPhotoshop version 12 or greater” ???

      1

↑ Back to top