PSDFan Extra

Design a Cool Textured Portfolio Website

Final Image

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

Step 1

Open up a new document (1000px X 1150px).

Start by setting up the guides for your layer. Use the following guides:

Vertical Guides:

50px, 100px, 300px, 350px, 400px, 600px, 650px, 700px, 900px, 950px

Horizontal Guides:

100px, 350px, 750px, 1050px.

Step 2

Select the top 350px of your canvas and create a new layer called ‘header area’.

Fill this selection with a linear gradient ranging from 590e00 to a10055.

Step 3

Now apply a pattern overlay blending option. This will add a nice amount of texture to your header. dark coarse weave

Pattern Overlay Settings:

Blend Mode: Luminosity
Opacity: 15%
Pattern: Dark Coarse Weave (this is a default pattern included with most version of Photoshop)
Scale: 40%

Step 4

Now create a new layer called ‘radial gradient’. Option+click on your ‘header area’ layer within your layer’s palette. This will select your header area, meaning that your radial gradient won’t go outside of the bounds of this area.

Drag out your radial gradient, ranging from the bottom-center of your header. Use a gradient ranging from white to transparent.

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

Step 5

Now create a new layer called ‘light beams’. You will now create a cool lighting effect for your header.

Use your lasso tool to create rays of light stemming up from the bottom-center of your header area:

Step 6

Now go to filter>blur>gaussian blur and apply a 12.5px gaussian blur.

Then change your light beams layer’s blend mode to ‘overlay’ and reduce it’s opacity to 20%.

Step 7

Now select the top 100px of your canvas. Create a new layer called ‘top header’ and fill your selection with black.

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

Step 8

Now add a drop shadow blending option to your ‘top header’ area. See the settings and a close up of the effect below:

Drop Shadow Settings:

Blend Mode: Overlay
Color: ffffff (white)
Opacity: 50%
Angle: 90 degrees
Distance: 1px
Spread: 0%
Size: 0px

Step 9

Now type out some logo text in the top left of your header.

Font Settings:

Font Face: Reklame Script (DEMO)
Size: 40pt
Kerning: -50
Color: ffffff (and ff3099 on pink text)

Step 10

Now type out some menu text in the top right of your header.

Font Settings:

Font Face: DejaWeb
Size: 12pt
Kerning: -50
Color: ffffff

Step 11

Now use your rounded rectangle shape tool to create a rounded rectangle behind your ‘home’ menu link. I used a 6px radius for my shape, and created it ‘white’. Then I reduced this layer’s opacity to 20% and changed the layer blend mode to ‘overlay’.

Step 12

Now type out some text for your welcome heading.

Heading Text (White) Strong:

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


Heading Text (Pink) Strong:

Font Face: DejaWeb
Size: 36pt
Kerning: -50
Color: ffb5dd

Learn More Text Settings:

Font Face: DejaWeb
Size: 14pt
Kerning: -50
Color: 272727

Step 13

Now create a rounded rectangle behind your ‘learn more’ text to act as a button.

Apply the blending options shown below (drop shadow, inner shadow, gradient overlay):

Drop Shadow Settings:

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

Inner Shadow Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 15%
Distance: 3px
Choke: 0%
SIze: 0px

Gradient Overlay Settings:

Blend Mode: Normal
Opacity: 100%
Gradient: c9c9c9 to f6f6f6
Angle: 90 degrees

Step 14

Now use your guides to create a selection between your 350px and 750px horizontal guides. Create a new layer called ‘middle area’ and fill your selection with e8e8e8.

Step 15

Now apply an ‘inner shadow’ and ‘gradient overlay’ blending option to your light gray middle area.

Inner Shadow Settings:

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

Gradient Overlay Settings:

Blend Mode: Normal
Opacity: 10%
Gradient: Transparent-Black (only introduce the black right at the edge, so set another transparent marker at around 75% along your gradient settings.
Angle: 90 degrees

Step 16

Now add some text to your middle area.

Heading Text Settings:

Font Face: DejaWeb
SIze: 40pt
Color: 595959
Kerning: -50

Smaller Text Settings:

Font Face: DejaWeb
Size: 14pt
Color: 7c7c7c
Kerning: -50

Step 17

Now use your guides to past in 3 examples of your best work. Each image should be 200px wide and 150px high.

Step 18

Now add some text below each work (again using DejaWeb as your font choice):

Step 19

We want a divider between our middle area and the bottom area. Select between the 750px and 1050px horizontal guides. Then create a new layer called ‘bottom area’. Fill this area with white, and then apply an inner shadow blending option:

Inner Shadow Settings:

Blend Mode: Multiply
Color: cdcdcd
Opacity: 100%
Angle: 90 degrees
Distance: 1px
Choke: 0%
Size: 0px

Step 20

Now add some text to your bottom area.

Pink Heading Text Settings:

Font Face: DejaWeb
Size: 24pt
Kerning: -50
Color: aa0c5e

Regular Text Settings:

Font Face: DejaWeb
Size: 14pt
Kerning: -50
Color: 737373

Step 21

Now duplicate your header area layer. Move it down to the bottom of your canvas and rename this layer ‘footer’. Then transform this area to fit into the bottom 100px of your canvas.

Step 22

Now to finish add a copyright notice to your footer:

Footer Text Settings:

Font Face: DejaWeb
Size: 14pt
Color: ff9dd1
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

8 Comments:

  1. pk says:

    Very very cool ! As usual. you rocks :]]
    Thank you very much !

  2. HD Guy says:

    Great layout, I love it!

  3. markcung says:

    How Sweet, Tom!
    You always made cool website
    Thank you for sharing
    You Rock!

  4. Personally, I think the headers in the 3 column row have to much padding space below them. They really discourage the proximity of the content.

  5. This looks a beautiful website. Thanks for sharing the Procedure for Designing such cool website

  6. Blog Site says:

    This Website looks amazing and eye catchy. Thank You for sharing this Beautiful website Tutorial

  7. Logomondo says:

    Very nice. Keep up the good work

  8. Carl - Web Courses Bangkok says:

    Oh we are looking for a nice tutorial to recommend our intermediate web design students, this will be a good one. THanks

Leave a Comment:

Related Posts

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