Have every post delivered to your inbox and get access to hundreds of useful design freebies.
Here is a preview of the image that we are going to be creating:
Create a new document (1000X1000px). Fill your canvas with ebe4ce.
Then create a new layer called ‘top highlight’.
Fill the top 100px of your canvas with a linear gradient ranging from white to transparent. To make the effect more subtle reduce this layer’s opacity to 80%.
Now it’s time to create a cool header!
Create a new layer called ‘highlight behind logo’. Drag out a radial gradient (white to transparent) in the top-left corner of your canvas.
Then reduce this layer’s opacity to 40% and change it’s blend mode to ‘overlay’.
Now paste in your logo.
Take the icon part of your logo, and copy/paste it behind your actual logo. Go to image>adjustments>desaturate. Then enlarge it, and change this layer’s blend mode to ‘overlay’.
Now paste in the social networking icons from your resources section into the top-right of your canvas.
Now type out some text next to each icon which will act as links to your social networking profiles.
Font Settings:
Font Face: DejaWeb
Font Size: 14pt
Font Styling: Bold
Kerning: -50
Color: 323332
Create a new layer called ‘pattern area’.
Use your marquee selection tool and paintbucket tool to create a colored area beneath your header area. Fill this area with whatever color you want.
Then go to layer>layer mask>reveal all. Use a large, soft black paintbrush at a low opacity to mask off the edges of this area.
Now apply a pattern overlay blending option to your ‘pattern area’ layer.
Pattern Overlay Settings:
Blend Mode: Normal
Opacity: 100%
Pattern: (pick any suitable pattern from SquidFingers.com)
Then reduce this layer’s opacity to 15%.
Download the fractals brush set from the resources section for this tutorial.
Apply some of the brushes from the set (using a white paintbrush) over your pattern area.
Then go to layer>layer mask>reveal all and mask off the hard edges left by your brushes:
Paste in your photo of a woman sat at a computer (or another relevant photo of your choosing).
Mask off the edges of this photo so that you can blend it seamlessly with your patterned backdrop.
Now apply some text to the right of your woman photo.
Font Settings for Header:
Font Face: DejaWeb
Font Styling: Bold
Font Size: 42pt
Kerning: -50
Color: 383838
Font Settings for Under Header Text:
Font Face: DejaWeb
Font Styling: Regular
Font Size: 14pt
Kerning: -50
Color: 585858
Font Settings for ‘See Our Work’ Links:
Font Face: DejaWeb
Font Styling: Bold
Font Size: 18pt
Kerning: -50
Color: ffffff
Now create a rounded rectangle behind your ‘See Our Work’ link and another behind your ‘Learn More…’ link. Make sure each rounded rectangle has a 10px radius.
Then apply a gradient overlay blending option to each rounded rectangle.
Gradient Overlay Settings for First Rounded Rectangle:
Gradient ranging from: e95a74 to d63451
Gradient Overlay Settings for Second Rounded Rectangle:
Gradient ranging from: 3dafde to 1b91c1
Using your guides create a 10px radius rounded rectangle above your middle welcome area.
Apply a drop shadow, inner shadow and gradient overlay.
Drop Shadow Settings:
Blend Mode: Normal
Color: ffffff
Opacity: 100%
Angle: 90 degrees
Distance: 1px
Spread: 0%
Size: 0px
Inner Shadow Settings:
Blend Mode: Multiply
Color: 000000
Opacity: 10%
Angle: 90 degrees
Distance: 3px
Choke: 0%
Size: 0px
Gradient Overlay Settings:
Blend Mode: Normal
Opacity: 100%
Gradient: Ranging from 01658e to 014764
Angle: 90 degrees
Now duplicate your menu layer. Cut off the left side of the menu, just leaving the part of the menu from 650px in remaining. Keep all blending options the same, but make your gradient overlay darker. This will provide a search area for your menu bar.
Now in your dark search area create two smaller rounded rectangles.
Fill the left with a color overlay (d0e9f3) and the right with a gradient overlay ranging from 1c90c0 to 06729f.
Now apply some text over your menu bar. Use DejaWeb once again as your font.
Now create dividers between your menu items. Each divider should be comprised of a 1px line ranging from white to transparent, and then a 1px line just to the right of this ranging from black to transparent. To make the effect more subtle reduce your divider line layers to 20%.
Now use your guides to create an area underneath your middle area.
Create a white rounded rectangle (10px radius). Then apply a stroke blending option to give this area more definition:
Stroke Blending Option Settings:
Size: 1px
Opacity: 100%
Color: cec6ae
Now apply some content over this area.
For your font settings replicate fonts used elsewhere in the design. For the learn more button simply duplicate the ‘See Our Work’ button created earlier. The icons used are available in the resources for this tutorial:
Now create some footer content, duplicating your top menu links and applying a copyright notice:
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.
neat and clean web design tutorial.
Thanks Tutorial Lounge!
This is exactly what I was looking for. Thanks for witring!
I like the area where the picture and headline are in the middle. Really well done!
Thanks e11world. I wanted to try something a little different with that area, so it was fun to implement the textures/patterns and add more depth.
Great tutorial on web design. This is a very clean and modern look, and the tutorial is easy to follow. Great post.
Thanks Roberto, I’m really glad you enjoyed this one. I tried to keep things very clear, yet detailed to help explain each step properly.
I’m having trouble with Step 16. How did you create that line with transparency? I used the Line Shape tool and tried a Gradient Overlay, but with a transparent overlay, it will show the color used underneath. Can you clarify this?
Hi Dustin. I used the marquee tool to create a 1px wide selection, and then filled this with a linear gradient using the gradient tool. Thanks for pointing this out, I’ll be more specific in future tutorials.
Awesome tutorial with nice web layout with Grate color combination & superb usage of pattern.
overall excellent
really u make Photoshop more interesting & Enjoyable
keep up the good work
God bless you
Very similar to the techniques that we use. Good post!
Very nice tuto.Thank u for sharing.
Nice tutorial…
you can go forward with the interface coding part
can u pls tell me wat is the tool dat u have used here..? i am a beginner and have literaly no idea where to start. I went thru ur tutorial and found it very interesting.. please help me.
Excellent Tutorial and very simple..
why I can not Download Source File for this Tutorial ??
Hi Beozhang. The source file is available via our http://fanextra.com members area. If you access it you can get source files for all of our tutorials.