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.