Griddify: a Tiny Photoshop Panel for Guides and Grids

Griddify is tiny and fast. It helps you compose custom grid systems, vertical rhythm, and do a bunch of other stuff with guides in photoshop.

Watch the short tutorial to learn how it works:

Download and Install (Photoshop CC)

  1. Download and install ZXPInstaller. It helps you install Griddify and other Adobe extensions easily.
  2. Download Griddify, unzip it, and install Griddify-CC.zxp using ZXPInstaller.
  3. Once installed, restart Photoshop CC. You can find the panel in the ‘Window’ menu, under ‘Extensions.’
  4. If you’re having trouble installing Griddify with ZXPInstaller, try installing it manually.

Download and Install (Photoshop CS6)

  1. Download the CS6 version of Griddify here and extract the zip file.
  2. Copy the ‘GriddifyCS6’ folder to the location where you installed Photoshop in "Program Files", under "Plugins/Panels".
  3. Restart Photoshop CS6, and hopefully you can see the panel in the ‘Window’ menu, under ‘Extensions.’

Gutters in divide

I’ve added one more feature to Griddify since recording the video, so it’s not demoed there. Basically, the ‘Divide’ feature now accepts more than one number, and it’ll use those extra numbers as gutters. So if you say '3 10', it’ll divide your document to 3 pieces, and put 10px gutters on each division. Thanks to @xdividr for suggesting this feature!

Issues regarding Photoshop CS6

HTML panels in Photoshop CS6 don’t work as well as they do in Photoshop CC, because CC uses an embedded version of Chromium to render HTML content while CS6 uses Flash, which is significantly less stable. So the panel will look and act a bit differently than the one I showed you in the demo.

What about CS4/5?

For Griddify to work on CS4/5, its HTML code should be wrapped in a Flex application. There are currently no efforts to do that, but PRs are more than welcome :)

Source Code

Griddify is free and open-source. The project is hosted on github.

Introducing Griddify