After learning several things reading the tutorials on PhotoShop CS3 of FlepStudio, it’s time to see how to create a layout for a website.
In this tutorial we will go through the design process needed to construct a simple homepage layout.
The first thing we need to keep in mind is that not all internet surfers use the same resolution as our monitor does, so we need to adjust our layout so it can be seen on all or most monitors.
We are going to choose an 850px wide layout because it will be seen on all monitors 1024×768 and up without the need for the user to scroll the page horizontally.
It is technically advisable to make your page even smaller in order for it to be seen on monitors sporting an ancient 800×600px resolution, but many new websites completely ignore the existence of such monitors as they are almost considered to be antiquities.
Create a new document big enough to contain a 850px wide layout.
I usually choose 2000×2000px documents because I find them to adapt well to my monitor’s resolution (1440×900) and allow for a great deal of content to be placed vertically in our layout.
It also gives me a lot of unused space which I use to display and try out new things.
Activate the ruler on your document (Press CTRL+R on the keyboard) and set the measure to “Pixels” by clicking on it with the right mouse button.
Calculate your 850px and drag the correspondent guidelines to your document.
Whatever you do, never let your design go outside those guidelines…
{ 0 comments… add one now }