When starting a new layout in Photoshop, guides are the first thing
that any self respecting web designer should lay down.
Guides impose some limits on your design. And limits are good.
Good guides speed up your HTML+CSS implementation while bad guides
can give you tremendous nightmares.
But you already know this.
No matter if you slice and dice your layouts (bleah) or cut them
by hand, below you will find some trivial but redbull tips.
Rule the ruler
When starting a new project, Photoshop will remember the ruler
measuring unit from your last project. If you worked something for print
you will get inches or centimeters. And now you need pixels.
No need to go into the Edit > Preferences menu, just right click the ruler and
choose pixels.
Ok, you knew that? How about the next one?
Sexy guides
Personally I don’t dig the guides as plain lines. I find them a bit hard to ignore.
So go ahead and try something else.
Go into Edit > Preferences > Guides, grids and Slices.
From the dropdown list choose “Dashed lines” as style for the Guides.
And if you’re there, adapt their color for your project.
If you’re starting on white background, choose black guides. And vice-versa.
Now they really feel like guides.
Did this one sucked or what? Bear with me, the plot thickens.
Guide the guides
In rare cases, you will draw guides by entering numbers, coordinates.
But most of the time, you will draw them by dragging from the ruler.
A little known secret: if you draw a guide by dragging from the ruler
it will mostly land at a non integer value. The guide could actually split a pixel!
If you are using a misplaced guide as base for your other guides, they will
all be messed up. When you’ll start the HTML+CSS implementation you might end up
pushing and pulling both the guides and everything that was snapping to them.
In this case, you need to look at things the other way around.
Instead of drawing guides and snapping everything else to them,
first snap the guides to something that’s well positioned.
I know it sounds stupid, but its actually simple.
If you make a regular (rectangle) selection it will always be placed at integer coordinates.
When you need to draw a guide, first make a selection and then snap the guide to it.
This is ideal because you can always control the width or height of a selection (if you have a good mouse and a fine hand).
If the above two paragraphs left you staring at your nails, just remember this list
- [this will sound cool] Don’t drag guides into the void, always snap them to something
- Good things to snap guides are: selections, layers and document bounds
- If you already have well positioned guides, combine them with measured selections to draw new guides
I told you this is redbull.