All of which is a long-winded, roundabout way of introducing some notes on how I constructed Yeeaahh!, the theoretical redesign of a famous Web portal that I created in order to demonstrate the principles of grid-based layouts. Folks have asked whether all of this work was done in Photoshop or not, and how I work with that program’s guides to create accurate grids.
The first answer is that yes, unequivocally, Photoshop is my tool of choice for creating designs for the Web. In this task, it has tremendous drawbacks, but I’ve yet to find another tool that will as accurately translate a designer’s intentions.
The second answer is that I just don’t use Photoshop’s built-in guides to try and create grids, at all. I find that feature to be particularly inaccurate when accuracy is exactly what I want; its unreliable snap-to behavior never leaves me feeling reassured whether or not an object is aligned to the right or left of a guide. It’s maddening.
Instead, I create blocks of solid color — usually in Web-safe #FF0000 red — to represent my grid, group them together in a layer folder ordered at the top of my layers palette, and set each of them at roughly 40% transparency. This allows me to toggle the grid on and off, and also to swap variants on the grid — different combinations of units and columns — at will. Much, much easier than using Photoshop’s guides.
Right: A working document with layers turned on to reveal the grid’s units. The red color blocks are set to 40% transparency.
Right: Layers turned on to reveal the grid’s columns.
Upgrade and Away
To wrap all of this up, I wanted to say that I haven’t completely given in to old age. After five years of using Photoshop 7.0, I’m finally considering upgrading to the most recent version. This latest edition of the program, which comes bundled with any of Adobe’s many confoundingly bundled variants of its Creative Suite 3 product, looks promising in that it’s been rewritten to take advantage of the modern day speed available in Intel-based Macs. Hooray. I’ll admit though that I don’t know what the difference between, say, Adobe Creative Suite 3 Premium Standard Pro Home Ultimate Edition and the other seventy-three options are, but I have faith that with a slide rule and a farmer’s almanac, I’ll be able to suss out the right upgrade for me. I’ll let you know.