Deprecated: Assigning the return value of new by reference is deprecated in /home/pscloud/domains/pscloud.com/public_html/wp-includes/cache.php on line 36

Deprecated: Assigning the return value of new by reference is deprecated in /home/pscloud/domains/pscloud.com/public_html/wp-includes/query.php on line 21

Deprecated: Assigning the return value of new by reference is deprecated in /home/pscloud/domains/pscloud.com/public_html/wp-includes/theme.php on line 507

Warning: Cannot modify header information - headers already sent by (output started at /home/pscloud/domains/pscloud.com/public_html/wp-includes/cache.php:36) in /home/pscloud/domains/pscloud.com/public_html/wp-content/plugins/postratings/postratings.php on line 651
Simple & Easy Web 2.0 Header | Pscloud

Simple & Easy Web 2.0 Header

11 Comments
Web Graphics, Web Design

Create a Simple and Easy Web 2.0 Header with a great looking result

1. Start by opening a new 700*150px file
2. Select the Rectangular Marquee Tool and set a fixed size of 700*20px
Adobe Photoshop Free Tutorials

3. Create a new layer, apply the selection at the top of the canvas and fill it with #333333
Adobe Photoshop Free Tutorials

4. Create a new layer, selec the Single Row Marquee Tool and make a selection 1px over the bottom of the grey rectangle you just made
Adobe Photoshop Free Tutorials

5. Fill it with #ffffff and change the layer’s blend mode to Overlay
Adobe Photoshop Free Tutorials

6. Create a new layer, select the Rectangular Marquee Tool and set a fixed size of 700px*130px, make a selection on the bottom of the canvas and fill it with #86c32a
Adobe Photoshop Free Tutorials

7. Now apply this layer style to it
- Gradient: #86c32a to #bae972
Adobe Photoshop Free Tutorials

8. Create a new layer, selec the Custom Shape Tool and select the Registration Target 2 from the Shape Drop-Down menu
Adobe Photoshop Free Tutorials

9. Press Shift while making the shape in your new layer
Adobe Photoshop Free Tutorials

10. Ctrl+Click over the layer thumb to select it, delete it and create a new layer(but keep the selection)
Adobe Photoshop Free Tutorials

11. Select the Gradient Tool and set a White to Transparent gradient in a Radial mode, make the gradient form the center to almost the end of the selecion like in the image below
Adobe Photoshop Free Tutorials

12. Change this layer’s blend mode to Soft Light and opacity to 55%
Adobe Photoshop Free Tutorials

13. Ctrl+Click over the green layer’s thumb, go to Select -> Inverse and go to Edit -> Clear
Adobe Photoshop Free Tutorials

14. Now apply your logo, this will be different for everyone, depending on your site, so I will not explain it
Adobe Photoshop Free Tutorials

15. Create a new layer, select the Rectangular Marquee Tool and set a fixed size of 90px * 30px, make a selection in the bottom of the grey rectangle, go to Select -> Modify -> Smooth and set a 3px radius
Adobe Photoshop Free Tutorials

16. Zoom in your canvas, select the Rectangular Marquee Tool in Normal style, press Shift and make a selection that covers both top rounded corners
Adobe Photoshop Free Tutorials

17. Fill your selection with #333333 and apply this layer style
- Gradient: #242424 to #333333
Adobe Photoshop Free Tutorials

18. Ctrl+Click over the layer’s thumb, create a new layer, go to Edit -> Stroke and apply a 1px #666666 border
Adobe Photoshop Free Tutorials

19. Zoom in and delete the top part of the border you just made
Adobe Photoshop Free Tutorials

20. Duplicate this layers as many times as needed to make your links
Adobe Photoshop Free Tutorials

21. Write your links in the buttons and you’re done
Adobe Photoshop Free Tutorials

Rate Tutorial:

1 Star2 Stars3 Stars4 Stars5 Stars

11 comments on this tutorial

Everytime I stumble across a tutorial like that, I ask the same question: where do I get these shapes from?
I have PS CS3 and haven’t got all these shapes.
Someone help me? Please?

What font are you using in the “tabs” ?

Hey David the shape using in this tut. is a standart shape. i thougt it early also not. but as you search by your shapes you can see him in the end of all the shapes(custom shape tool (u) -> select shape) there you must searching.

@David:
Its not rly my job to explain you this, But please do check out this screenshot and it will help you (I hope) I will probally never return too this page, So I do hope it helped you out ;)
http://img81.imageshack.us/img81/8135/shapesoz2.jpg

(If URL protection is on:)
h t t p : / / img81.imageshack.us/img81/8135/shapesoz2.jpg

Best Regards ;)

best

@Download: Thanks for your help.

@Dale Hay: It’s Segoe UI.

And thanks for your comments guys :)

Ah, now I see :-)
Thank you very much!

VERY GOOD and crystalclear tuts!
love u :)

а почему вы счетчик на сайт не повесите?

Really cool article. thanks for the advice on designing a good header.

Leave a Reply