Adobe Photoshop

Web Page Dimensions

Our first consideration is the dimensions of our Home Page.  We’ve decided we want to reach the widest audience possible in terms of resolution, which means we design to the lowest common denominator, a screen resolution of 640x480.  Because browsers have scroll bars and other elements that take up space, we’re going to design our page at 600 pixels wide.  As a rule, people are used to scrolling up and down, but do not like to scroll from side to side.  Selecting a maximum width of 600 pixels ensures users will not have to scroll to the side to view and read the content of the Home Page.  Additionally, users do not like to scroll up and down too much.  It’s a good idea to present most of your information immediately, particularly for the initial or Home Page of your site.  We’ll do our best to keep all the information in our Home Page fit on screen, so we’ll try to limit our vertical dimension (height) to 400 pixels.

Our first step is to create our master document that we’ll use to create our Home Page.  In ImageReady create a new document, dimensions 600x400, transparent background.  Select View/Show Rulers  to use as a frame of reference as we layout our Home Page.  [ALT] + {Double-Click} “Layer  1” and rename it “background.”  We’re prepared to begin building our Home Page.

Back to Index