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.
Create a new document that is 778x440 in size. This is pretty much the maximum viewable window area of a computer set to 800x600. (which is what you should design most of your sites for, unless you're using "liquid css" techniques on your page). Fill the background with: #E9E9E9
Create a new layer, and while using the rectangular marquee tool, make a selection like so:
Go to "selection->modify->smooth" with a setting of: 10 pixels
fill this selection with: #FF9A12
Now with the rectangular marquee tool, make a selection like so:
and tap "DELETE" on your keyboard to delete this portion of the box.
This will give us a box with rounded corners on the left side, and perfect 90 degree angles on the right.
Double click on this layer, and apply these layer settings: Inner Shadow
Here's what you should end up with:
Next l found a nice "vacation" type photo (this one is a beach in Hawaii), and placed it on a new layer above this box. I also clipped the top right corner of the picture off with the polygon marquee tool just to add a little detail.
I then applied these blending options to the photo: Inner Shadow:
Lets create an area to add a "special of the month" content box. Create a new layer, now using the rectangular marquee tool, make a selection like so, and go to: selection->modify->smooth with a setting of 3 pixels:
Fill this selection with white:
Next double click this layer, and apply the following blending options: Drop Shadow: