You will find GuideGuide at Plugins GuideGuide Open GuideGuide. You may also launch GuideGuide with ⌘ + opt + shift + g. Clicking the Toggle menu item or pressing the shortcut again toggles GuideGuide visibility on and off. GuideGuide is the Photoshop and Illustrator panel that makes working with guides painless. GuideGuide has been saving design time since 2010. During its early days as a free plugin, it was Photoshop’s.
Today I’m excited to ship the public alpha of GuideGuide 3. Check it out here: http://guideguide.me/alpha
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.
Localization
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
Guideguide Free
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.
Smashing Newsletter
Every week, we send out useful front-end & UX techniques. Subscribe and get the Smart Interface Design Checklists PDF delivered to your inbox.
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:
Guideguide Free Download
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
Guideguide Free Alternative
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.
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.
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.
- Make a selection the width of your site
- 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).
Element Padding
Want to draw a box around an item but don’t feel like measuring it out exactly?
⌘+click(ctrl+clickon Windows) the item to make a selection around it.- 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.
- Use the newly placed guides to draw your box.
Baseline Grid
Using GuideGuide’s explicit row height, you can easily create a baseline grid for your design.
- Enter your desired line height in the row height field.
- Align your type and other elements to your new baseline grid.
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 GitHub.
To download GuideGuide and learn more about some of its hidden features, head on over to guideguide.me. OS X Lion users with CS5 will need to download a patch for Adobe Extension Manager before they will be able to install GuideGuide.