So far our project we have decided that we want to have as much control over the design and layout of the site. So we are going to go with a fixed web layout and we are going to optimize our site for 1024X768 resolution display, but do so in a way that will work on 800X600 displays. Now those 60% of all monitors are set to resolutions of 1024X768, it's important to consider your audience and for our site the audience is expected to be young and web savvy.

So we expect them to have displays set at higher resolutions. Having said all that let's start by creating a new Photoshop document. We already have Photoshop open so we will go to our File menu and we will select New. Let's type in a new title. For the document dimensions, let's take a look at the Preset dropdown. You will see that one of the Presets is Web. This will automatically convert the units of measurement to pixels.

Now in the Size dropdown there is a number of common screen resolutions listed. Since we are designing for 1024X768, that's the option that I am going to select and that gives me Width and Height of 1024X768. However, we really don't want to use these dimensions because someone is looking at our website, their browser chrome or the browser user interface inevitably takes up some of the real estate. Instead, I am going to input a Width of 955 in the Height of 600 pixels. By the way, I am getting these values from our Preset in Dreamweaver and the 600 pixels is important to remember as it determines the fold. Basically, content on our web page that falls the below 600 pixels will not be immediately available to our visitors using a 1024X768 resolution settings. They will have scroll down to see the rest of the content.

Generally, speaking people don't like to scroll. So when you are designing, you should keep this in mind and put the most important content up front. So let's Save these Presets by clicking on the Save Preset button this will bring up the New Document Preset dialog box. By default Photoshop retains all these attributes in the Preset. We will leave these options as they are and we will click on OK to create our new preset and then we will click OK again to accept these settings and let Photoshop create this new document.

So the layout that I have in mind is fairly straightforward. I am thinking about a two column fixed width layout with a header and a footer and a sidebar on the right-hand side. The content area will have a prominent Flash messaging area and a couple of smaller areas for other content features and video. So before I do anything else I want to make sure that the units of measurement used by Photoshop are in pixels. So I will open up my Photoshop Preferences by going to my Edit menu. On the Mac you can always find Preferences in the Application menu and go down to Preferences and select Units and Rulers. I want to make sure that both Rulers and Type are using pixels as their unit of measurement.

Now, of course, it's important to remember that pixels as a unit of measurement are well suited for web projects, but if you are working on a print project later on in Photoshop you will want to revert these Preferences back to Points and Inches. So we will click OK to accept these Preferences and now I am going to draw out some guides to help me visualize the page, so I know what part goes where. So I am just going to zoom into my document to 100% by pressing Ctrl+=, Command+= on a Mac and I am going to go ahead and go to my View menu and make sure that the Rulers are displayed and again to add a New Guide, I am going to go back to my View menu and select New Guide.

I have the option of inputing a pixel Position as well as the Orientation. So the first guide that I am going to enter in is 760 pixels and what this does is it just tells me the cut off point for an 800X600 resolution display. Again I will go back to my guides so I will go to View and New Guide and this time I am going to add a Horizontal Guide at 110 pixels and this will be the area that my header will occupy.

So before I add a new additional guides I am going to maximize this document. So I can continue adding guides by going to my View menu or I can actually drag the guides directly from the Rulers on to the canvas. So in order to do that I am just going to select the Info tab from my palette here and now I am just going to drag a guide down to 140 pixels and that is for my navigation. I am going to bring another guide in at about 350 pixels or so and this area will be my Flash messaging area and I also want to add another guide another at 420 pixels and this is really the fold for somebody that maybe viewing this page on in an 800X600 display.

And I am going to go back into my View menu again and add one more guide and it's a horizontal guide at 600 pixels and this is the fold for a 1024X768 display and I am actually going to go ahead and resize to the canvas just a little bit to 800 pixels and we are going to set the Anchor point to the top of the documents, so that the additional pixels are added to the bottom of the document and we will go ahead and click OK.