PSDFan Extra

Design a Quick and Clean Portfolio Website

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


About the Author:

Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.

Leave a comment

4 Comments:

  1. Hello,

    I really appreciate you tutorial here : it’s good food for the noobs like me. But, since this is the first page of your portfolio, do you have some guidelines/little shots how you may build your internal pages from here.

    Cheers!

  2. Thank You for this tutorial!!! It’s very simple, but look very cool

  3. sumanth says:

    I want to learn photoshop for web designing which is very essential for designing professional web sites …can u send some photoshop materials from basics which is very useful for learning photoshop easily …
    Aactually this web site having very good material which is very useful for me..After learning basics i want to utilize this material which is in your website ..

    Thank you……!!

Leave a Comment:

Related Posts

Subscribe to PSDFAN and Get Your Free Designer Toolkit

Have every post delivered to your inbox and get access to hundreds of useful design freebies.

Your Design Work, But More Awesome:

Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.

JOIN OUR FANEXTRA COMMUNITY TODAY