Dec 14

Design a Cool Textured Portfolio Website

Tue, 12/14/2010 - 02:00 — julie

psdfanmembersbut Design a Cool Textured Portfolio Website

Final Image

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

textureportfolio22b Design a Cool Textured Portfolio Website

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.

textureportfolio1 Design a Cool Textured Portfolio Website

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.

textureportfolio2 Design a Cool Textured Portfolio Website

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%

textureportfolio3a Design a Cool Textured Portfolio Website

textureportfolio3b Design a Cool Textured Portfolio Website

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%.

textureportfolio4a Design a Cool Textured Portfolio Website

textureportfolio4b Design a Cool Textured Portfolio Website

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:

textureportfolio5 Design a Cool Textured Portfolio Website

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%.

textureportfolio6a Design a Cool Textured Portfolio Website

textureportfolio6b Design a Cool Textured Portfolio Website

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%.

textureportfolio7a Design a Cool Textured Portfolio Website

textureportfolio7b Design a Cool Textured Portfolio Website

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

textureportfolio8a Design a Cool Textured Portfolio Website

textureportfolio8b Design a Cool Textured Portfolio Website

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)

textureportfolio9 Design a Cool Textured Portfolio Website

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

textureportfolio10 Design a Cool Textured Portfolio Website

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’.

textureportfolio11 Design a Cool Textured Portfolio Website

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

textureportfolio12 Design a Cool Textured Portfolio Website

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

textureportfolio13a Design a Cool Textured Portfolio Website

textureportfolio13b Design a Cool Textured Portfolio Website

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.

textureportfolio14 Design a Cool Textured Portfolio Website

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

textureportfolio15a Design a Cool Textured Portfolio Website

textureportfolio15b Design a Cool Textured Portfolio Website

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

textureportfolio16 Design a Cool Textured Portfolio Website

Step 17

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

textureportfolio17 Design a Cool Textured Portfolio Website

Step 18

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

textureportfolio18 Design a Cool Textured Portfolio Website

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

textureportfolio19a Design a Cool Textured Portfolio Website

textureportfolio19b Design a Cool Textured Portfolio Website

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

textureportfolio20 Design a Cool Textured Portfolio Website

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.

textureportfolio21 Design a Cool Textured Portfolio Website

Step 22

Now to finish add a copyright notice to your footer:

Footer Text Settings:

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

textureportfolio22a Design a Cool Textured Portfolio Website

textureportfolio22b Design a Cool Textured Portfolio Website

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.

textureportfolio22b Design a Cool Textured Portfolio Website

Download Source File for this Tutorial

fanextradownloadbutton2 Design a Cool Textured Portfolio Website

psdfanmembersbut Design a Cool Textured Portfolio Website

 Design a Cool Textured Portfolio Website

Copyright 2009. E-mail Me
Auto Spare Parts