GuideGuide 3 Alpha

Sep 09, 2013

Today I’m excited to ship the public alpha of GuideGuide 3. Check it out here:

Get excited, but not too excited. I’m calling it an alpha because GuideGuide doesn’t technically exist in Photoshop yet, and it’s still missing all of the functions found in the flyout menu of GuideGuide 2. You can try out all the features in a simulated environment to help me try to sort out some of the bugs, but actual panels won’t be available for a few weeks.

What’s new in GuideGuide 3?

GuideGuide Notation

GuideGuide 3’s major new feature is GuideGuide Notation (GGN), a language that makes it possible for you to “write” a grid. Whereas in previous versions you were limited to the constraints of the form, GuideGuide Notation allows you to create any combination of guides you can think up. Sidebars, baselines, golden ratio, you name it. If you can think of it, GuideGuide can create it.

Sets are now built on top of GuideGuide Notation. Saving a set from the Grid tab will generate GGN that is then saved as a set.

GuideGuide Notation can be entered on the new Custom tab.

For more information about GuideGuide Notation before the new GuideGuide site is launched with complete documentation, check out the GuideGuide Notation spec.

Create set from document guides

Since GuideGuide is built on top of GuideGuide Notation, it’s possible for GuideGuide to save sets based on guides in your document.

As with may GuideGuide features, the context of this feature can be used in a specific area by using a selection. If a selection is active, GuideGuide will capture only the guides within the selection area, positioned relative to the selection’s boundaries.

There are certain things that GuideGuide can’t automatically detect, such as grid position intent or wildcards, but it will capture your grid as basic GGN and will let you edit it to position it as desired.

To capture a set from the existing guides in the document, click the “New set” button while on the Sets Tab.

Selective guide removal

If a selection is active at the time that GuideGuide’s Remove guides button is pressed, only the guides in the selection will be removed.

Due to the fact that Photoshop has no native way to clear specific guides, GuideGuide captures the document guides, clears all guides, and then re-renders the guides that were not removed.

Edge guides

Along with horizontal and vertical midpoints, GuideGuide now has buttons to place guides at each of the edges of the document or selection.

Duplicate value to similar inputs

In all inputs in the GuideGuide form, clicking the icon in the input will duplicate the input’s value to other similar inputs. For example, clicking the icon next to the Left margin input will duplicate that value to all margin inputs. This goes for Column count, Column width, and Gutter width.

Toggle guide visibility

Don’t care to learn the keyboard shortcuts for showing and hiding guides? Simply click the eye icon to toggle guide visibility.

Duplicate guide detection

GuideGuide will no longer render two guides in the same place.

New design

GuideGuide features a new design that iterates on the previous UX a bit. The new design is not intended so much for wow-factor, but for extensibility as feedback comes in through open source channels and new features demand more flexible layouts.

GuideGuide is first and foremost a tool, so I’ve shifted the focus of the design to be optimized for getting work done and being not-terrible to look at.

Adobe Exchange

GuideGuide 3, when launched officially, will be downloaded through Adobe Exchange. This is in an effort to make things easier on my end for maintaining updates, versions, and distribution.

To be compliant with the Exchange’s policies, I’ll be removing the donation prompt from GuideGuide that happens after 20 uses. I haven’t yet decided completely what I would like to do in lieu of this. GuideGuide will always be free. My current plan is to have two versions of GuideGuide in the exchange, one free and one paid, with the paid version indicating that an identical free version is available and vice versa. Feedback about this idea is appreciated.


GuideGuide now supports localization. There is currently only English support, but I will happily accept pull requests for translations. If you are interested in contributing a translation prior to the official launch, let me know and I’ll make it possible for you. Try not to make me look foolish :-)

Unship automatic updates

While I slaved over the project of creating an automatic updater for GuideGuide, ultimately the feature has been a hassle to maintain. I certainly got a kick out of pulling it off, but it is a hack at best. In future versions of GuideGuide, the panel will prompt you when updates are available and direct you to the appropriate native update channel.

Technical stuff

Mid-way through the development of a feature release (GuideGuide Notation), I learned that the next version of Adobe’s Extension Builder 3 will be built on web languages. Previous extensions were built using Flex/Actionscript and Air. While this meant that GuideGuide would have to be completely rebuilt (for the third time), I rejoiced at the fact that I’d finally be able to work in a comfortable environment. While I’ve gotten by in the Flex universe, my skill lies in Javascript.

Around the same time I read about Creative Market building a Photoshop panel on web languages. While what they’ve built will unfortunately not carry over to Extension Builder 3 extensions very well in its current form (caching), the idea of an HTML extension solved some interesting problems for me, like speeding up development and making it easier to adapt GuideGuide to other applications.

With this in mind, I halted develpment on GuideGuide Notation and rebuilt GuideGuide. I ported over large chunks of the more recent logic code (the not terrible stuff) and rewrote all of the UI. In about two weeks with my native languages I was able to build what took about 6 months to build in Flex.

Aside from the obvious personal benefit of being able to write an extension in my preferred languages, being web-language based opens up the possibility of embedding GuideGuide in places it hasn’t been able to exist. GuideGuide 3 panels will exist as a shell that loads the GuideGuide Core HTML file. All that is necessary is writing an adapter that can handle GuideGuide’s events the way the application needs. This means that it will likely be possible to backport GuideGuide 3 as far back as CS4 (or cs3 if someone else wants to do it). It also means that it will be much easier to add GuideGuide to other Adobe and non-Adobe applications.

Open source

I’m super excited to announce that GuideGuide 3 will be nearly 100% open source. I’ve wanted to open source GuideGuide from almost the beginning of the project but it hasn’t been practical from a technical standpoint until recently.

GuideGuide v1 was an abomination of code. I started learning Flex development the day I started building GuideGuide. As much as I wanted to show its source to the world, the world is better off for not seeing it.

GuideGuide v2 was much better, but was ultimately still a rat’s nest of code. Version two represented about two years of learning and evolving code. It was undocumented and low performance. As it was built with Flex, Actionscript, and compiled with Flash Builder, the barrier for entry to contributing and development was very high. Open sourcing the project would have meant me having to troubleshoot bugs in other people’s environments that I barely understood myself.

Being able to start fresh, GuideGuide 3 has been built with open source as the goal from the very beginning. I’ll be running as much of the process through GitHub as possible. I hope that doing this will not only improve GuideGuide, but will also encourage other designers with a knowledge of web languages to start experimenting with panel development. The repos are closed for now while I get everything polished and documented, but once v3 goes live I’ll open everything up.

Official launch

I don’t have a launch date. Deadlines are terrible and I like having a life. I can say that I’ll launch panels as they become available. Due to the open source nature of the project, it’s possible other people will launch panels of their own.

Since Extension Builder 3 is still just a preview, I’ll be building the CS5,6, and CC panel as a Flex panel that loads the HTML of GuideGuide core. Once Extension Builder 3 has been released, I will launch separate panels for CC applications based on it.

Be excited

I’m super happy with this new generation of GuideGuide. Every day the Twitter feed for “GuideGuide” blows my mind with how far it’s gone. GuideGuide 3 represents a huge step forward for the panel in terms of extensibility, and a huge step forward for myself, being a large, codified portion of my soul, soon to be exposed to the general public.

I hope you like where it’s headed. If you come across any issues, please don’t hesitate to let me know.