PSDFan Extra

Final Image

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

Step 1

Today I’m going to teach you how to create a very simple but professional looking website layout. This tutorial should demonstrate how even absolute beginners can construct a great looking website in a short space of time.

Start by creating a 1000X1000px document. Then create some guides:

Verticals guides at: 50px and 950px
Horizontal guides at: 170px, 550px and 900px.

The guides will form the basis of our layout:

Step 2

Now we want to pick out an appropriate color palette. I decided to use Adobe Kuler, a fantastic service for picking out color-schemes.

I decided to go with Copy of This Green.

You can see the color palette below:

Step 3

It can be useful to grab the color swatch for your chosen color scheme and paste it into your Photoshop document. This way you can use your eye-dropper at any point to copy each color that you wish to use.

With you guides turned on select the top 170px of your canvas. Then create a new layer called ‘header area’. Fill your selected area with a linear gradient ranging from 065e31 to 013224.

Step 4

Now apply a drop shadow blending option to your header area:

Drop Shadow Settings:

Color: Black
Blend Mode: Normal
Opacity: 100%
Angle: 90 degrees
Distance: 1px
Spread: 0px
Size: 0px

Step 5

Now option+click on your ‘header area’ layer within your layers palette. This will select all data on this layer.

With your selection in place create a new layer called ‘radial gradient header’. Drag out a white to transparent radial gradient in the top left of your header area.

Then change this layer’s opacity to 20% and change it’s blend mode to ‘overlay’.

Step 6

Now type out some logo text in the top-left area of your header. (font settings below):

Font Settings for ‘Modern’ Wording:

Font Face: DejaWeb
Style: Normal
Size: 36pt
Kerning: -50
Color: ffffff

Font Settings for ‘Layout’ Wording:

Font Face: DejaWeb
Style: Bold
Size: 36pt
Kerning: -50
Color: 8ffd71

Step 7

Now create a rounded rectangle in the right area of your header section. This will act as your menu area:

Apply an inner shadow, outer glow and gradient overlay blending option to style it.

Inner Shadow Settings:

Blend Mode: Overlay
Opacity: 40%
Angle: 90 degrees
Distance: 1px
Choke: 0%
Size: 0px

Outer Glow Settings:

Blend Mode: Normal
Opacity: 15%
Color: 000000
Spread: 0%
Size: 5px

Gradient Overlay Settings:

Blend Mode: Normal
Opacity: 100%
Gradient Ranging From: 05522e to 044a2a
Angle: 90 degrees

Step 8

Now type out some text over your menu area.

Menu Font Settings:

Font Face: DejaWeb
Style: Normal
Size: 14pt
Kerning: -50
Color: ffffff

Step 9

Now create a new layer called ‘center area’.

Create a selection beneath your header using your guides created earlier.

Fill this area with a linear gradient ranging from 59ca58 to 20903e.

Step 10

Now apply a drop shadow, inner shadow and pattern overlay blending option to your ‘center area’ layer:

Drop Shadow Settings:

Color: 2b9b1d
Blend Mode: Normal
Opacity: 75%
Distance: 1px
Spread: 0%
Size: 0px

Inner Shadow Settings:

Color: ffffff
Blend Mode: Normal
Opacity: 50%
Angle: 90 Degrees
Distance: 1px
Choke: 0%
Size: 0px

Pattern Overlay Settings:

Blend Mode: Luminosity
Pattern: Choose any appropriate pattern from: SquidFingers.
Opacity: 20%

Step 11

Now paste in a screengrab of a relevant website (a client work, or personal project).

Then apply an outer glow blending option to this image layer:

Outer Glow Settings:

Blend Mode: Normal
Opacity: 15%
Color: 000000
Spread: 15%
Size: 50px

Step 12

Now apply some text to the right of your screenshot:

Heading Font Settings:

Font Face: DejaWeb
Style: Bold
Size: 48pt
Color: ffffff
Kerning: -50

Underlying Text Settings:

Font Face: DejaWeb
Style: Bold
Size: 18pt
Color: ffffff
Kerning: -50

Step 13

Now apply a drop shadow to your text:

Drop Shadow Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 30%
Angle: 90 degrees
Distance: 1px
Spread: 0%
Size: 0px

Step 14

Now create a rounded rectangle beneath your words ‘LEARN MORE’ with a 10px radius.

Apply a drop shadow, inner shadow, outer glow and gradient overlay blending option to your rounded rectangle shape layer:

Drop Shadow Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 30%
Angle: 90 degrees
Distance: 1px
Spread: 0%
Size: 0px

Inner Shadow Settings:

Blend Mode: Overlay
Color: ffffff
Opacity: 40%
Angle: 90
Distance: 1px
Choke: 0%
Size: 0px

Outer Glow Settings:

Blend Mode: Overlay
Opacity: 15%
Color: ffffff
Spread: 0%
Size: 5px

Gradient Overlay Settings:

Blend Mode: Normal
Opacity: 100%
Gradient Ranging From: 3bbb3e to 6ee368
Angle: 90

Step 15

Now create a new layer called ‘bottom area’.

Use your guides to create a selection beneath your ‘center area’ area.

Fill this selection with a linear gradient ranging from 013324 to 065e31.

Step 16

Apply an inner shadow blending option to this layer:

Inner Shadow Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 50%
Distance: 2px
Choke: 0%
Size: 5px

Step 17

Now apply some text to your ‘bottom area’.

Headings Text Settings:

Font Face: DejaWeb
Style: Bold
Color: 6be065
Size: 30pt
Kerning: -50

Regular Text Settings:

Font Face: DejaWeb
Style: Bold
Color: ffffff
Size: 14pt
Kerning: -50

Step 18

Now apply a footer area layer called ‘footer’.

Fill the bottom area of your site (again using your guides) with a linear gradient ranging from 002412 to 013224.

Step 19

Then apply an inner shadow blending option to your footer layer:

Inner Glow Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 50%
Distance: 2px
Choke: 0%
Size: 5px

Step 20

To complete your layout add some footer text:

Footer Text Settings:

Font Face: DejaWeb
Style: Bold
Color: 44b446
Size: 14pt
Kerning: -50

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.

Download Source File for this Tutorial

Related Posts

• How to Create an Effective Coming Soon Page
• Create a Professional Portfolio Design in 17 Easy Steps
• Create a Professional App Store Web Layout