Have every post delivered to your inbox and get access to hundreds of useful design freebies.
As always, this is the final image that we’ll be creating:
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.
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.
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%
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%.
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:
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%.
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%.
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
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)
Now type out some menu text in the top right of your header.
Font Settings:
Font Face: DejaWeb
Size: 12pt
Kerning: -50
Color: ffffff
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’.
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
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
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.
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
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
Now use your guides to past in 3 examples of your best work. Each image should be 200px wide and 150px high.
Now add some text below each work (again using DejaWeb as your font choice):
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
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
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.
Now to finish add a copyright notice to your footer:
Footer Text Settings:
Font Face: DejaWeb
Size: 14pt
Color: ff9dd1
Kerning: -50
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.
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.
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.
Very very cool ! As usual. you rocks :]]
Thank you very much !
Great layout, I love it!
How Sweet, Tom!
You always made cool website
Thank you for sharing
You Rock!
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.
This looks a beautiful website. Thanks for sharing the Procedure for Designing such cool website
This Website looks amazing and eye catchy. Thank You for sharing this Beautiful website Tutorial
Very nice. Keep up the good work
Oh we are looking for a nice tutorial to recommend our intermediate web design students, this will be a good one. THanks