When people complain about Photoshop not being a robust tool for design, they’re essentially saying “I’m very frustrated that this tool I’m using beyond it’s scope doesn’t live up to my manufactured expectation.” You wouldn’t use a screwdriver as a hammer and complain that it doesn’t do a good job of hammering nails. So why do it with software?

Rather than complain about our applications not performing functions they were never intended to perform, why not start asking why no one is building tools that are designed specifically to solve the problems we complain about? I’m not talking about Photoshop plugins like GuideGuide. Things like that are just hacked together solutions to ease our pain. We need to start demanding, or better yet, creating bespoke tools and natural workflows that are created specifically for us.

I’m sure you’ve heard the expression, “Your sword should be an extension of your arm.” I’d venture to say our tools should be an extension of our creativity. We shouldn’t have to tolerate, hack, or be limited by our software. Our tools should be catalysts to the realization of our ideas.

TL;DR: It should be done by Christmas

With the end of the year coming up, GuideGuide is slowly creeping up on being one year old. When I first posted it in the beginning of January, it was simply a labor of love that I created as an answer to the question “Why can’t Photoshop do grids?” I then had the amazing fortune of being hired by GitHub the next week. After they posted about hiring me, someone out there caught wind of GuideGuide and shared with apparently just the right people. It caught like wildfire. It’s both amazing and humbling to see how far it has gone.

The Quick Backstory

For the most part I haven’t touched the original GuideGuide post. I certainly haven’t touched the original GuideGuide. The original version was built using a trial of Adobe Flash Builder. In the span of the development of GuideGuide, I switched computers three times, each time having to rebuild my development environment. After the launch of GuideGuide, I switched to yet another computer. This time, however, something went amiss and corrupted my project files. Or so I thought at the time.

The New Face Of GuideGuide

As it turns out, the “corruption” I experienced, was merely the deletion of a few unnecessary (to me) files that Flash Builder needs to recognize the project as an actual project. Lucky for me, and the over all quality of GuideGuide, I was already a couple months into developing a new version from the ground up.

After seeing the future usefulness of GuideGuide I tracked down a real copy of Flash Builder and got to work redoing everything I hated and everything that didn’t work in the panel. GuideGuide 2 is a completely new animal, but is still every bit as awesome as the first.

Why Has It Taken So Long?

People are important to me. When given the choice between spending time with the people I care about or spending hours over a keyboard, I choose the people. GuideGuide is a hobby — something for my free time — and I try to make sure it stays that way.

So Show Us Something Already, Dammit

Ok fine, since you’ve twisted my arm. I haven’t shown screenshots up until now because the design has changed quite a bit as the development has come along. Features have been added or turned out to not be possible. Some times I just decide I hate an interaction. However, for the most part, I think GuideGuide will look the same at launch as it does now, so here’s the new face of GuideGuide.

What Can It Do?

GuideGuide still does everything it always has. GuideGuide 2 is all about adding pieces to the workflow that I wasn’t able to anticipate it needing until it got some real world usage. So here’s the new feature list:

• Completely new design
• Guide Presets
• Negative and 0 margins — Outline your selection or create a margin outside it)
• Clear Guides
• Exact pixel measurements — No more half pixel guides.
• Quick clear inputs
• Quick equal margins — Fill in one and click its icon. They’ll all get that value.
• Define column/row measurements
• Remaining pixel distribution settings

What Is A Remaining Pixel Distribution Setting?

Let’s say you have a document that is 4 pixels wide and you want 3 columns. Which column gets the extra pixel? Now let’s say you want to make a 3 column grid in a 5 pixel document. Which column only gets one pixel?

This setting determines which measurement among the columns is least common, or most likely to stand out, and puts it where you specify in the remaining pixel distribution settings

So When Does It Come Out?

Soon. I’d like to have it out by Christmas.

The row height calculation for GuideGuide looks something like this:

To create a desired baseline grid, think of the equation like this:

To figure out how many baselines will fit in your existing document or selection, consider this equation:

As an example, let’s assume I want a 30 row, 16px baseline grid. I’ll make my document height 480px (30*16) and then have GuideGuide create 30 rows.

GuideGuide 2 is mostly complete, but I still need to figure out a way to make it easy for non-coders to install. Until I can sort that out, I hope this technique will hold you over!

GitHub recently launched their GitHub Issues iOS app featuring an icon I created. While the final icon is probably the coolest thing ever, I thought the original version would be worth showing as well. It was eventually rejected after testing it showed that it looked a little too much like the folders and not enough like an inset piece of technology like intended.

But I can parallax your url.

cameronmcefee.com/parallax-url/

Be sure to check out the demo and the documentation. You can also fork/contribute to Plax on GitHub

Download Plax

New to version 1.3

• Added the ability to specify an element as plax’s mouse target

New to version 1.2

• Fix bug where FF6′s usage of laptop accelerometers broke Plax.

New to version 1.1

• Support for Ender
• Frame rate limiter for better performance
• Accelerometer support for devices with gyroscopes

He also built a handy installer, if you’re into that kind of thing. Keep in mind, as GuideGuide gets updated, this link probably won’t get updated so use it with that in mind.

The original GuideGuide

I give you GuideGuide: a columns, rows and midpoints panel for Photoshop CS4 & CS5

*Note* Thanks to all the love you guys have been showing GuideGuide, I’ve come across a number of improvements and features I plan to fix/implement. Please see the bottom of this post to see what’s coming up.

After many hours spent meticulously nudging nav elements and building grids for layout in web comps, I began to wonder why Photoshop didn’t have a grid tool like InDesign. At a certain point I decided to stop thinking about it and just build a tool to do it for me.

How To Install
Download GuideGuide below. Unzip the file and copy the resulting guideguide folder into the Panels folder found at:

Windows (32 bit)*: \Program Files (x86)\Adobe Photoshop \Plug-Ins\Panels\
Windows (64 bit)*: \Program Files\Adobe Photoshop \Plug-Ins\Panels\
Mac: /Applications/Adobe Photoshop /Plug-Ins/Panels/

Once that is done, restart Photoshop and find your panel under Window>Extensions>GuideGuide.

*On 64 bit systems, Photoshop is installed in both locations by default. If you launch Photoshop and do not see GuideGuide, make sure you have installed it in the version you have launched.

Download GuideGuide 1.0

GuideGuide has 3 major features: finding midpoints, making margins, and creating rows and columns.

Midpoints
GuideGuide originally started as a script that drew guide lines at the middle of the document. I got tired of my old method which involved selecting all, transforming the selection, then dragging guides to the midpoint. The original script would draw the guides to the middle of the document in one click. Here, there are three options: horizontal middle, vertical middle, and both horizontal and vertical middles. Simply click the icon of the midpoint you want to find and a guide will be added to the document.*

Margins
Just like they sound. Fill in the desired margins and click “Create Guides” to place margins at the specified locations.*

Rows and Columns
The real power of GuideGuide is in the columns and rows. Add your desired numbers of rows, columns and gutter widths. When you click “Create Guides” your grid will be created on the canvas with guides.* As a handy spacing tool, create columns without gutters (I use this to align navigation elements evenly).

Mixing Units and Values
I’ve set up GuideGuide to work with multiple unit types. Want a 10 px top margin and a 50% bottom margin? Do it! If it’s mathematically possible, GuideGuide will create it for you. Leaving a field blank will cause it to be omitted. Forget to specify units? The current ruler units will be used.

*Stage Vs. Selection
Making columns and rows or finding the middle of a document is fine and dandy, but what if you want to find the midpoint between two objects? Here’s GuideGuide’s secret trick. If you have an active marquee selection, it will be used as the reference point for anything GuideGuide can do, rather than the stage. Simply draw a selection between the two items you want to measure between and click the desired midpoint button.

Beta
GuideGuide is still very new. I’ve hardly had a chance to find every bug, so it may break on you now and then. If you find any problems with it, please screenshot what the panel looks like and email me the details.

Future updates
A number of you have emailed me about bugs or improvements. While I may not implement everything you suggest, I’m certainly listening to your suggestions. Here’s a list of things I plan to do in the future. I’ll keep track of features suggested by other people and give them credit as they are implemented.

Next Version:
• Fix the focus problem causing keyboard shortcuts to be ignored until you click back on the document.
• Include the ruler zero point in the calculation so guides don’t get thrown off when it’s adjusted.
• Fix the issues where each guide shows up in the history, instead making it a single entry.

Future Versions
• Duplicate guide checking
• Clear all guides
• Savable Guide Presets

And of course, if you like GuideGuide, spread the word on Twitter!

Check them out in action:
404 Error
500 Error