Design a Trendy Yet Professional Website Layout

Final Image

As always, this is the final image that we’ll be creating:

Step 1

Start by creating a document (1100X1400px). Then create some guides to help form the basis of your layout.
Create a vertical guide at 100px and another at 1000px. Then create a horizontal guide at 250px. We will add new guides layer, but these form the start of our layout.

Step 2

Create a new layer called ‘main background’.
Select your entire canvas and fill it with efeade.

Step 3

Now select the top 250px of your canvas using your guides.
Create a new layer called ‘blue header’. Fill your selected area with a linear gradient ranging from 006fa3 to 0a92d2.

Step 4

Create a new layer called ‘header highlight’.
Grab your radial gradient tool and create a gradient ranging from white to transparent.
Then drag this upwards from the bottom-center of your blue header area.
Once you’ve done this, change this layer’s blend mode to ‘overlay’ and reduce it’s opacity to 50%. Then use your marquee selection tool to select and delete the part of the gradient overlapping into the main cream background.

Step 5

Now paste in this awesome paper texture.
Crop/resize it to fit your canvas size perfectly. Call this layer ‘old paper texture’. Then go to image>adjustments>desaturate, to grayscale your texture. Then go to filter>sharpen>sharpen just to bring out the details of the texture.
Reduce this layer’s opacity to 40%, and change it’s blend mode to ‘multiply’.

Step 6

Now download this great clouds photo.
Paste it into your document and resize/crop it as necessary.
Call this layer ‘clouds’.
Go to image>adjustments>desaturate. Then go to filter>sharpen>sharpen.
Now reduce this layer’s opacity to 30%, and change it’s blend mode to ‘multiply’.

Step 7

Now with your clouds layer still selected go to layer>layer mask>reveal all.
You’ll notice that the bottom of your clouds photo has a sharp edge, and doesn’t blend smoothly into your main cream page background.
With your mask created, select a large, soft black paintbrush, and brush over the edges of your clouds image that you want to mask off. This will let you smoothly and non-destructively blend your cloud image into your background.

Step 8

Create a new layer called ‘divider’.
Now use your marquee tool to create a 1px white line underneath your blue header area. Then change this layer’s blend mode to ‘overlay’ and reduce it’s opacity to 30%. This should create a subtle bit of definition between your header and main background areas.

Step 9

The use of multiply layers has dulled the colors of our layout slightly, so create a new vibrance adjustment layer.
Vibrance Adjustment Layer:
Vibrance: +100
Saturation: +40
This added a level of brightness to our design:

Step 10

Now added some more guides to your document. Add two horizontal guides set at 130px and 1100px.
Using these new guides and your side guides, create a new layer called ‘main content area’. Create a selection using your guides and fill this area with ‘f1efe9′.

Step 11

Now go to blending options and add an ‘outer glow’ effect.
Outer Glow Settings:
Color: Black
Blend Mode: Normal
Opacity: 15%
Noise: 0%
Spread: 0%
Size: 32px

Step 12

Now download this blogging icon and paste it into your header. Call this layer ‘logo icon’. Then create some logo text:
Font Settings
Font: AW Conqueror Slab (light)
Size: 30pt
Color: ffffff (and also: ffcc01).
Kerning: -75

Step 13

Now use your rounded rectangle shape tool (5px radius) to create a shape for your header’s search form. Call this layer ‘search form’.
Make sure you create a white rounded rectangle in the top right of your header, and then reduce this layer’s opacity to 30%.

Step 14

Now create a button for your search form. Use your rounded rectangle tool again, and then apply a gradient overlay and inner shadow blending option:
Gradient Overlay Settings
Gradient Ranging From: 1d9ed0 to 028bc0.
Blend Mode: Normal
Opacity: 100%
Angle: 90 degrees
Inner Shadow Settings
Blend Mode: Normal
Color: White (ffffff)
Opacity: 10%
Angle: 90 degrees
Distance: 3px
Choke: 0%
Size: 0px

Step 15

Now add some text over your search form/button.
Font Settings
Font Face: Arial
Color: b0e8ff
Size: 14pt
Kerning: -50

Step 16

Now we want to construct a menu design. First of all, let’s plan it out using guides.
Create two new vertical guides (90px and 1010px). Also create a horizontal guide (180px).
The image below shows where we are at with our guides:

Step 17

Now create a new layer called ‘menu bar’. Use your marquee selection tool to create a menu shape within your guides. Then fill this selection with a linear gradient ranging from ffc000 to ffa200.

Step 18

Now go to blending options for this layer and apply a drop shadow and inner shadow.
Drop Shadow Settings
Color: Black
Blend Mode: Multiply
Opacity: 50%
Angle: 90 degrees
Distance: 5px
Spread: 0%
Size: 15px
Inner Shadow Settings
Color: White
Blend Mode: Overlay
Opacity: 75%
Angle: 90 degrees
Distance: 1px
Choke: 0%
Size: 0px

Step 19

Now create a new layer called ‘menu 3d edge’. Use your lasso tool to create a black triangle beneath the part of your menu that juts out into your background. This should give the impression of your menu wrapping around your main content area:

Step 20

Now type out some text over your menu area.
Font Settings
Font Face: Arial
Color: 55462b
Size: 14pt
Kerning: -50

Step 21

Now create a rounded rectangle (5px radius, fill: 55462b) behind your ‘Home’ link in the menu.
Call this layer ‘menu hover’ and reduce it’s opacity to 15%.

Step 22

Now paste in an attractive landscape photo. I went with this nature photo.
Ensure that you paste your photo BENEATH your menu layers. Then resize/crop the photo to fit well.
I noticed that the drop shadow effect cast by my menu became less noticeable, so I upped the drop shadow opacity from 50% to 75%.
Then apply a gradient overlay and drop shadow blending option:
Gradient Overlay Settings
Blend Mode: Hard Light
Overlay: 40%
Gradient Ranging From: 557305 to 7ea80e
Angle: 90 Degrees
Drop Shadow Settings
Blend Mode: Multiply
Opacity: 40%
Angle: 90 Degrees
Distance: 1px
Spread: 0%
Size: 0px

Step 23

Now create a new layer called ‘black bar’. Use your marquee selection tool and paintbrush to create a black bar at the base of your photo.
Then reduce this layer’s opacity to around 50%

Step 24

Now add some text over the left part of your black bar.
Font Settings
Font Face: Reklame Script DEMO
Size: 60pt
Kerning: -50
Color: dde16b

Step 25

Then use your elliptical marquee tool to create a couple of circles in the right side of your black bar. This acts as the controls for your slideshow setting:

Step 26

Now download this great photo of lined paper.
Paste it into your document, cropping and resizing it to fit as a left column within your main content area. You should position this layer beneath your main slideshow image layers.

Step 27

Now create a layer mask for your lined paper layer and mask off the right side of your image, so that it blends smoothly into your main content area.
Then reduce your lined paper layer’s opacity to 40%.

Step 28

Now apply some text to your left column.
Heading Text Settings
Font Face: Arial
Size: 18pt
Color: 323232
Kerning: -50
Sub-Category Text Settings
Font Face: Arial
Size: 12pt
Color: 544f41
Kerning: -50

Step 29

I don’t usually like to do this, but the main photo wasn’t really working for me. I picked out this great desert landscape photo as a suitable replacement. This was an easy change, simply pasting in the new photo and hiding the original.
The only other change required was that I needed to change the color of my slogan text to f4cb96.

Step 30

Now I want to create a divider to separate my left column from the rest of my main content area.
I start by creating a 1px line (544f41). Then I reduce this layer’s opacity to 25%, and use a rough eraser brush to erase various sections of this dividing line:

Step 31

Now type out some text in your right column area. Be sure to leave a space for an image:
Header Text Settings
Font Face: Arial
Size: 36pt
Color: 313131
Kerning: -75
Main Text Settings
Font Face: Arial
Size: 12pt
Color: 737373
Kerning: -50

Step 32

Now paste in a suitable image into your content area.
I went with this photo of the Sahara.

Step 33

Now time to get to work on that footer!
Start by downloading this wonderful icon set:
WPZOOM Social Networking Icon Set.
Paste the Facebook/Twitter icons into your footer:

Step 34

Finally, add some footer text, including links to your social networking profiles, your contact details and a basic copyright notice.
Facebook/Twitter Text Settings
Font Face: Arial
Size: 18pt
Color: 535353
Kerning: -75
Address Details Text Settings
Font Face: Arial
Size: 14pt
Color: 545454
Kerning: -75
Copyright Text Settings
Font Face: Arial
Size: 14pt
Color: 7f7e7e
Kerning: -75

And We’re Done!

You can view the final outcome below. I hope that you enjoyed this tutorial and would love to hear your feedback on the techniques and outcome.