Textured Portfolio Website

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, 950pxHorizontal 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 weavePattern 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 onyour ‘header area’ layer within your layer’s palette. This will selectyour header area, meaning that your radial gradient won’t go outside ofthe 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: ffffffStep 11

Now use your rounded rectangle shape tool to create a roundedrectangle behind your ‘home’ menu link. I used a 6px radius for myshape, and created it ‘white’. Then I reduced this layer’s opacity to20% 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: ffffffHeading Text (Pink) Strong:Font Face: DejaWeb
Size: 36pt
Kerning: -50
Color: ffb5ddLearn More Text Settings:Font Face: DejaWeb
Size: 14pt
Kerning: -50
Color: 272727Step 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: 5pxInner Shadow Settings:Blend Mode: Multiply
Color: 000000
Opacity: 15%
Distance: 3px
Choke: 0%
SIze: 0pxGradient Overlay Settings:Blend Mode: Normal
Opacity: 100%
Gradient: c9c9c9 to f6f6f6
Angle: 90 degreesStep 14

Now use your guides to create a selection between your 350px and750px horizontal guides. Create a new layer called ‘middle area’ andfill 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: 0pxGradient Overlay Settings:Blend Mode: Normal
Opacity: 10%
Gradient: Transparent-Black (only introduce the black right at theedge, so set another transparent marker at around 75% along yourgradient 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: -50Smaller 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 anew layer called ‘bottom area’. Fill this area with white, and thenapply an inner shadow blending option:Inner Shadow Settings:Blend Mode: Multiply
Color: cdcdcd
Opacity: 100%
Angle: 90 degrees
Distance: 1px
Choke: 0%
Size: 0pxStep 20

Now add some text to your bottom area.Pink Heading Text Settings:Font Face: DejaWeb
Size: 24pt
Kerning: -50
Color: aa0c5eRegular Text Settings:Font Face: DejaWeb
Size: 14pt
Kerning: -50
Color: 737373Step 21

Now duplicate your header area layer. Move it down to the bottom ofyour canvas and rename this layer ‘footer’. Then transform this area tofit 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: -50And We’re Done!

You can view the final outcome below. I hope that you enjoyed thistutorial and would love to hear your feedback on the techniques andoutcome.Download Source File for this Tutorial