PSDFan Extra

Design a Modern, Textured Portfolio Website

Final Image

Here is a preview of the image that we are going to be creating:

Step 1

Create a new document (1000X2000px).

Start by pasting your leather texture into the top of your canvas:

Apply a color overlay blending option to your texture layer.

Color Overlay Blending Option Settings:

Blend Mode: Normal
Color: 585858
Opacity: 90%

Apply a hue/saturation adjustment layer, creating a clipping mask so that your adjustments only effect your underlying texture layer:

Hue/Saturation Adjustment Layer Settings:

Hue: 0
Saturation: -100
Lightness: -30

Step 2

Place your texture layer and adjustment layer in a layer group and then duplicate this layer group.

Move your duplicate texture area down to fill the bottom area of your canvas.

If you notice a harsh seam between your two textures, simply mask the top off your duplicate texture off using a soft black paintbrush. This should connect them seamlessly:

Step 3

Create a new layer called ‘darker bottom’.

Select the bottom of your canvas (from 350px downwards). Fill this area with black.

Then change this layer’s opacity to 30%:

Step 4

Apply some text to the top center of your canvas. Type out a huge letter ‘f’ using the text settings below:

Text Settings:

Font Face: PT Banana Split
Font Size: 480pt
Kerning: -50
Color: 000000

Now reduce this layer’s FILL opacity (not actual opacity) to 15%.

Apply an inner shadow, to give an indented look:

Inner Shadow Blending Option Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 10%
Angle: 90
Distance: 5px
Choke: 0%
Size: 5px

Step 5

Duplicate your ‘f’ layer and move the duplicate to the bottom right of your canvas.

Step 6

Create a new layer called ‘header highlight’.

Apply a large, soft white paintbrush to the top center of your canvas.

Reduce this layer’s opacity to 40% and change it’s layer blend mode to ‘overlay’ to make the effect more subtle:

Repeat this technique, applying a second light spot over the top left of your header (where you’re going to place your logo):

Step 7

Time to apply some layer guides to help setup our layout.

Apply the following guides to your layer:

Vertical Guides:

50px, 100px, 150px, 600px, 650px, 850px, 900px, 950px

Horizontal Guides:

200px, 900px

Step 8

Using your layout guides, create a main content area using a white rounded rectangle (20px radius).

Apply an outer glow and stroke blending option. This is to give definition to your content area:

Outer Glow Blending Option Settings:

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

Stroke Blending Option Settings:

Size: 4px
Position: Inside
Blend Mode: Normal
Opacity: 100%
Fill Type: Color
Color: d4d4d4

Step 9

Create a new layer, beneath your content area layer. Call this layer ‘sketchy lines’.

Use a rough Photoshop brush to brush around a subtle messy outline around your content area. Reduce this layer until the effect is suitably subtle (I used a 20% layer opacity).

Step 10

Apply some logo text to your header.

Logo Text Settings:

Font Face: Proxima Nova
Size: 48pt
Kerning: -50
Color: ffffff
Styling: Italics

Apply a subtle drop shadow blending option to your text layer.

Drop Shadow Blending Option Settings:

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

Step 11

Time to work on our logo icon!

Start by drawing out a basic icon shape. I actually used the shield default custom shape available in Photoshop. This shape can be any color you want:

Apply a drop shadow and gradient overlay blending option to this layer.

Drop Shadow Blending Option Settings:

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

Gradient Overlay Blending Option Settings:

Blend Mode: Normal
Opacity: 100%
Gradient: 0d77d0 to 38a3ff
Style: Linear
Angle: 90

Now option+click on your shield icon layer to select your shield shape.

With your selection in place create a new layer called ‘logo icon lighting’.

Drag out a white to transparent radial gradient from the top center of your icon. Due to your active selection this gradient shouldn’t exceed the bounds of your icon shape:

Change this lighting layer’s opacity to 50% and it’s blend mode to ‘overlay’ to make the effect more subtle:

Step 12

Type out some menu text in the top right of your canvas.

Menu Text Settings:

Font Face: Arial
Color: ffffff
Size: 18
Kerning: -50

Step 13

Create a new layer beneath your menu text layer called ‘menu hover’.

Use your pen tool to create a cool hover shape and fill this with black. Then reduce this layer’s opacity to 60%:z

Step 14

I’m going to be unconventional and jump straight down to applying our footer text. This is just so that we’ve covered every part of our layout except the content area.

Footer Text Settings:

Font Face: Arial
Size: 14pt
Kerning: -50
Color: a3a3a3

Step 15

Download your Imac image and paste it into the top right of your content area:

Step 16

Type out some welcome text to the left of your Imac.

Heading Text Settings:

Font Face: Arial
Styling: Bold
Size: 48px
Kerning: -50
Color: 3a3a3a

Smaller Text Settings:

Font Face: Arial
Styling: Regular
Size: 18pt
Kerning: -50
Color: 7a7a7a

Step 17

Create a learn more button under your welcome text.

Use the same gradient overlay settings as your logo icon, but then also apply a drop shadow and inner shadow blending option.

Inner Shadow Blending Option Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 10%
Angle: 90
Distance: 4px
Choke: 0%
Size: 3px

Drop Shadow Blending Option Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 10%
Angle: 90
Distance: 4px
Spread: 0%
Size: 0px

Just like with your logo icon also apply a lighting layer (using a radial gradient for subtle lighting):

Step 18

Using your paintbrush tool, brush out a faint gray divider line underneath your welcome area:

Step 19

In the center of your content area, underneath your sketchy divider, type out ‘FEATURED WORK’ as a subheading.

Sub Heading Text Settings:

Font Face: Arial
Size: 14
Kerning: +100
Color: 6e6e6e

Using your guides, paste in three thumbnails of your design work. Each thumbnail should be 200X150px.

Apply a stroke blending option to each thumbnail layer:

Stroke Blending Option Settings:

Size: 7px
Position: Outside
Blend Mode: Normal
Opacity: 5%
Fill Type: Color
Color: 000000

Step 20

Add a further area to the bottom of your content area called ‘featured clients’.

Rather than using thumbnails, paste in logos of clients you’ve worked with:

Step 21

Between your featured work and featured clients area add a light gray rectangle (color: f3f3f3).

This rectangle should jut out past the edges of your content area by about 15px either side:

Now apply a drop shadow, inner shadow and bevel/emboss blending option to this rectangle layer:

Drop Shadow Blending Option Settings:

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

Inner Shadow Blending Option Settings:

Blend Mode: Multiply
Color: d4d4d4
Angle: 90
Distance: 1px
Choke: 0%
Size: 0px

Bevel and Emboss Blending Option Settings:

Style: Inner Bevel
Technique: Smooth
Depth: 1000%
Direction: Up
Size: 0px

Angle: 90
Altitude: 1
Highlight Opacity: 0%
Shadow Opacity: 20%

Step 22

Create a new layer called ’3D area’. Using your lasso tool, create a little black triangle under the area of your light gray rectangle that juts out past your content area:

Step 23

Finally, to finish your layout apply a final call to action button in the center of your gray rectangle.

Simply duplicate your learn more button for this new button area:

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

• Design an Artistic Watercolor Blog Layout
• Create a Simple, Stylish Custom Youtube Background
• Design a Quick and Clean Portfolio Website