In this tutorial l will explain how l created this contemporary layout for a travel agency. What makes this site contemporary? Simply put, the layout is modern. It breaks away from the traditional "header on top, then navigation, then content, then footer" mold that most sites are built around, and makes great use of the space given in the users viewable window area to stuff as much content on the screen as possible. The layout is very different than any other site, while pleasing to the eye, and easy to understand and use.
click to enlarge
The purpose of this tutorial is to both teach you some techniques used for website design, as well as to give you some ideas about how to break the mold and create a truly unique layout. Let's get started.
Next I used the same technique used in step #8 and created a "dashed divider" for my content area.
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.
Next draw a circle the same size over the right corner, and tap delete as well:
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
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:
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 it is available for free download here. 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.
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!