Baseline Grid with GuideGuide
August 19, 2011
GuideGuide 2 (which isn’t released yet) has the ability to create a baseline grid, but with a little creativity and math you can use the current version of GuideGuide to create one as well.
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!
Plax
June 2, 2011
After doing the parallaxing illustrations for GitHub’s 404 and 500 pages, I decided it might be fun to put together some kind of jQuery plugin to make it easier to do parallax stuff in the future. I finally had a chance to get around to it while parallaxifying the illustration on the about page. There’s plenty of more I want to do with it, but this should be a good enough piece to get you Plaxing.
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
GuideGuide Video Tutorial
March 12, 2011
Russell Brown over at Adobe was kind enough to throw together a quick video tutorial about how to use GuideGuide. If you’re not quite sure how you might use GuideGuide or find yourself the visual learning type, be sure to check it out.
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.
GuideGuide
January 7, 2011
GuideGuide 2 is now available
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!
Glasses
October 22, 2010
After riding the bus countless times with a cute, glasses clad girl whom my friends would come to call “Bus Girl”, I finally found myself saying hello. I would later come to learn that as long as she had been known as Bus Girl to my friends, I had been known as “Bus Boyfriend” to hers. For her, each ride was spent wondering if I could see her through my dark aviators.
From this story of long rides, quiet bus stops, covert glances, and stylish eyewear choices comes my newest wallpaper: Glasses.
Desktop
1280×800 | 1680×1050 | 1920×1200
iPhone: Him
iPhone: Her
two6nine Wallpapers
July 29, 2010
A friend asked me to design a wallpaper for his hacker team two6nine. His suggested direction included ideas of dark colors schemes and vague references to ninjas. Click the images to download the full size image.
1680×1050
iPhone
iPad
For next year’s design, he asked for something that is a cross between a ninja and a jester. I can only imagine the fun I’ll have with that one.
The Anatomy of a Profile Picture
May 8, 2010
I redesigned my entire site so I could make this joke. My word, I hope it was worth it.
Think it’s funny? Let me know on Twitter.
