Contemporary Layout

Step 11.

Next l'm going to add a logo to the mix.

Here is a simple logo (simple is good when it comes to logo's... look at nike if you don't believe me.)

Design Tip: You want to place your logo & company name as close to the top left corner of the page as possible. This is the very first thing that the human eye looks at when viewing a webpage. And what's more important than your logo and company name? That's right, nothing is.

Next l added a simple drop shadow to the logo, via the "blending options":

Result:

Next l held Ctrl and clicked on the layer with my logo to make a circular selection of it, created a new layer and filled it with a black to white gradient, and then drop the opacity of the layer to around 20 percent.

Result:

Finally l created a new layer got out the eclipse marquee tool and made a selection as shown, and filled it with a white to transparent gradient. The opacity of this layer was also dropped to around 75 percent.

Result:

Step 12.

Okay, we're getting there. Next create a new layer, and make a selection like so with the rectangular marquee tool, and just like before go to selection->modify->smooth with a setting of around 4 pixels.

Fill this selection with white #FFFFFF / white.

Double click this layer, and apply the following blending options:

Outer Glow:

Gradient Overlay:

Stroke:

Result:

Step 13.

Next I used the same technique used in step #8 and created a "dashed divider" for my content area.

Step 14.

Next we'll add some "content boxes" for the right sidebar.

Create a new layer, and using the rectangular marquee tool, make a selection like so:

Fill this selection with #AAB2BE

Next I used the elliptical marquee tool to make a selection like so over my content box's corner, and pressed delete to create an inverted curved corner:

Design Tip: If you hold down the Shift key while drawing your circle selection it will ensure that you get a perfect circle.

Tap delete:

Next draw a circle the same size over the right corner, and tap delete as well:

Step 15.

Go ahead and get out your marquee selection tool again, and make a selection like so, 1 pixel bellow the content header box we just created.

Fill this selection with: #DDE0E3

Step 16.

Set your foreground to: #AAB2BE and get out the pencil tool.

Draw a line 1 pixel bellow the box we just made to give it some depth like so:

Here's how my content box looks:

Step 17.

Next l added my company name to the page in a few spots, and replicated the logo. This helps drill the name of your company, and your logo into the head of the user sub-consciously. The font used here is called Bitstream Vera Serif. I also went ahead and added a few buttons to the page that l can use once content is added.

Here's how the layout looks before being sliced, without any refining.

Step 18.

After spending some time refining, and adding small detail to the page, such as a diagonal background, and a few other small hubs here and there, here's what l've got:

Click to enlarge

So the only thing left to do is slice the layout up, reassemble it in your favorite HTML editor (l'm an old school fan of NotePad myself...).

In any event, here is how my final page turned out.

Looks pretty good in my opinion:

Click to enlarge

Good luck, and l hope you've taken away some good techniques, and ideas form this tutorial!