Photoshop Web Tip: Use guides in Photoshop to plan your layout

No matter how creatively you plan your web site design, the underlying structure of (X)HTML is grid based. Even if you aren't laying out your site using tables (you aren't right? good) you can think of multiple DIVs, headings, paragraphs, and images as a piece of your grid. So, if you're creating your web site mockups in Photoshop, dragging out some grid lines should be the first move you make.

First, create a new document for your web site mockup. If I'm doing 800 x 600 resolution, I like to use 760 x 480. If I get to use 1024 x 768 resolution, I create my mockup at 960 x 480. Once you have your new document created and ready to work on, make sure that you have your rulers turned on by going to View -> Rulers or pressing Command + R (or Control + R on a PC). Now, if the numbers on your ruler don't match up to the size of the document you created, your ruler units are not set to pixels. To fix this go to Preferences -> Units & Rulers and change the top option Rulers: to pixels:

Now you're finally ready to start dragging out your grid lines to create the structure of your mockup. I say dragging, because that's exactly what you do. Place your mouse cursor anywhere along the ruler and click. Hold in the mouse button and drag a ruler down onto your document. I find it helpful to watch the Info pallet (pictured below) to see at what pixel my grid is going to be placed at. That way you don't end up trying to place your grid line at 200 and end up with 203.

A typical web site has a header, a navigation bar, an left side navigation and a footer. In that header you typically have a logo. Below is a screen shot of a grid setup showing an example of how you might set this up:

screen2-thmb.png

From time to time, I will create "wireframes" based on these grids to give clients a choice of how their site will be laid out. This helps them visualize the site's structure without having them worry about colors, designs, or type faces. Using the Rectangular Marquee Tool (M), your selection will snap to your grid. I like to fill the areas with different shades of gray to create a wireframe that the client will review. Here's an example using the same grid layout:

wireframe-thmb.gif

The biggest benefit when designing mockups based on grids comes when you are writing your XHTML and CSS. We already know by looking at our grid the sizes of our page elements. Using my wireframe from above, we see that we have a header with a height of 100 pixels, a navigation bar with a height of 50 pixels, a left navigation area with a width of 200 pixels and a footer with a height of 50 pixels, so our CSS for that would be:

#header {
height: 100px;
}
#navbar {
height: 50px;
}
#leftnav {
float: left;
width: 200px;
}
#footer {
clear: left;
height: 50px;
}

One last example

You can get very indepth with your grids. Here is a mockup of our forthcoming InetSolution web site redesign with the grids turned on:

newinet-thmb.png

blog comments powered by Disqus
What can we do for you?

About

A blog by InetSolution about programming, security, design and marketing for banks, credit unions and e-commerce.

Subscribe to our feed