This tutorial will teach you how to properly set up your Photoshop canvas for a pretty standard web design. This will be part of a long series about webpage creation. All shortcuts work with the mac version of Photoshop CS3. However, I may include pc shortcuts too.
OK here we go. First you need to set up a canvas. Fire up PS and go to File > New ( ⌘ + N on a mac or ctrl + N on a pc ). A dialog will pop up asking you about Resolution and Height + Width.
The settings are above, here is the explanation. The standard screen resolution accepted today is 1024×768, however of the total screen size you need to take into account scrollbars, toolbars and so on. I will be using blueprintcss later in this series so the standard accepted width for a webpage has a total of 950 pixels(Yes there are full-width sites that basically stretch together with your window size, these however will be covered in a later tutorial). So why do I need 1200 pixels if I can only use 950? You, the designer need to think of the typical user profiles: Ok, sure you are already sure that users with a low screen resolution can see the site properly. How about the guys with those nice 27” iMacs? Yes, you need to make sure they find your webpage pretty too. So the extra pixels are for simulating a widescreen. The height is not that important at the time being, just make sure you have enough space to work with. The actual webpage will have a flexible height, meaning that it will stretch when filled with content. The resolution should stay at 72 pixels per inch. Go ahead an click OK and a new canvas be created.
Now we need to make sure we are working with pixels. Go into Photoshop > Preferences > Units & Rulers (⌘ + K or ctrl + K and then select Units & Rulers in the menu on your left). Set units to pixels if it isn’t already (it should be the first option but it depends on your Photoshop version).
Go to View > Rulers (⌘ + R or ctrl + R) to enable your rulers(if they are already enabled they will disappear, make sure you have them enabled).
Go to Window > Info (or F8) to enable your Info Window (if it isn’t already there).
Your window should now look like this:
Now we need to setup our guides. Out of the total 1200 pixels we need to use 950 pixels. 1200 – 950 = 250 pixels. So we have 250 extra pixels. 250 / 2 = 125 pixels. We need to have 125 between the canvas margin and our content on each side. Use the Marquee Tool(or press M) together with your Info Window to make a selection that is 125 pixels wide.
Now use the Move Tool(or press V) to place your selection right on the canvas margin.
Click the ruler and drag a guide right to where the inner margin of your selection is. It will snap to the selection at exactly 125 pixels from the canvas margin.
Do the same thing on the other side as well. Now you know how to use Selections together with Guides to define layouts. You can do the same thing vertically. Suppose our website has 3 sections, a header, a menu and our content. Let’s create these areas using Guides. Make the header 100 pixels high and the menu 35 pixels. The content area does not matter because it stretches anyway. It should now look like this:
The last important thing you want to do with guides is set your text paddings. We want the menu to be 965 pixels in and 15 pixels away from the start of the defined area. Do the same: create a selection that’s 15 pixels wide and draw new guides on each side.
Congratulations! Now you know how to setup your canvas for web design.
