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 1024x768 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 800x600px 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 2000x2000px documents because I find them to adapt well to my monitor’s resolution (1440x900) 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.
One of the most important things to design in our layout is the header.
While indicative of the content of the page, the header should never be too attractive.
It is advisable to keep your headers relatively short in height to attract the visitors to the content of the page.
We will make our header about 250 pixels in height
We will now accommodate a horizontal menu below our header, we will make it about 100px tall:
We should now create a side-menu for our layout.
Pull out your guideline so it’s 200px wide.
The height of the content is irrelevant right now because it will vary accordingly to what the actual page contents will be.
Use the rounded rectangle tool to draw rounded rectangles that fill up the spaces we defined with the guidelines plus a big one for the main content.
I used a radius of 5 pixels for mine.
Deactivate guidelines visibility by going to View -> Show -> Guides.
What you’ll want to do now is separate all of these boxes (except the header one) a bit from each other.
Note that you will have to resize the grey box we will use as our side menu.
To do this you will simply select each layer containing a box individually and drag the contents of the layer down until you see fit.
To resize the side menu, just select the layer and hit CTRL+T.
This will bring up the free transform box.
Resize it by dragging one of the angles to the center of the box while holding CTRL+SHIFT on the keyboard.
We now have a very basic structure to work with.
Let’s start the actual design!
We will start by designing the horizontal menu.
Let’s style the box representing the menu by going into the blending options.
Add a pinkish gradient overlay:
Create a duplicate of this layer (CTRL+J on your keyboard) and rasterize it.
With the rectangular marquee tool, cut the rectangular box in half.
Go to the blending options and invert the gradient’s direction.
Play with the opacity of the layer a little bit to get this effect:
Merge this layer with the original one and add these styles:
That’s pretty. We will now style the background.
Choose a nice gradient or solid color for it.
I’m going to go with a very dark grey to make it contrast with the bright pink of the menu.
We will now style the main content layer.
Make the box white and add a soft inner glow with a black color just like this:
Closeup:
We will now style the side menu.
The first thing you want to do is rasterize the layer containing the side menu and cut a portion of it so we can resize it the way we want.
To do this just use the rectangular marquee tool to select the portions of the layer you wish to cut or move.
Let’s style this box.
Make it a really light yellow color.
Think post-it.
Let’s start adding some content to see where we’re going.
Start by adding text in the horizontal menu and menu entries in the side menu.
Remember to use web-safe fonts and sizes and to deactivate the photoshop anti-alias to get an idea of what it will look like once it’s coded if you intend to use standard text links instead of images for your menus.
Duplicate the side menu and move the copy below it.
It will serve as a newsbox.
Add some main content to the page.
Let’s add some graphic to separate both the side and the horizontal menu entries.
We will use a dashed line for the side menu (just type: “ - - - - - -“) and a small white circle with a 50% transparency for the horizontal one.
Play around a bit with colors and opacity to get something that looks nice.
Let’s design our header now.
Delete the header box and put the website logo on the left side and start drawing shapes with the pen tool on the right side.
Add gradients and styles similar to the ones in the rest of the homepage.
In this example I made very small squares and filled them with a gradient using the same colors of the menu bar.
These squares are then repeated to form a bar that will expand horizontally and cover the entire computer screen.
I also created a wavy shape with the pen tool, duplicated it and flipped it vertically to obtain an interesting effect.
Both the shapes and the squares use the same gradient.
One of the two wave-shapes has it’s opacity lowered to around 50%.
And voilà!
Your design is finished!
Feel free to mess around with the PSD included in the download, as well as use this template for your designs.
01-07-08, 15:28
Linear Mode
