Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Web 2.0 Header

Web 2.0 Header


Step 1.

Create a new document 750x250 with white background

Now create a new layer and using the rectangular marquee tool make a rectangle approximately 4 pixel at the top of the document and fill it with #383838 .

Step 2.

Create a new layer , now grab the rectangular marquee once again and make a rectangle starting just below the previous layer to the end leaving 50-60 pixels. Now hit the gradient tool and with #686868 as the foreground and #433f3f as the background stretch it as the following picture

image 1

Now you should have this

Click to enlarge
Click to enlarge

Step 3.

Create a new layer and name it buttons. Hit the Rectangular marquee tool and select the remaining white portion leaving just 1 pixel white ,now fill it with #3e7ece .Now grab the rounded rectangle tool and make a small rectangle a size of a button. Now duplicate it three to four times depending on how many buttons you require with #3e7ece as the color.

Click to enlarge
Click to enlarge

Click to enlarge
Click to enlarge

Step 4.

Add whatever text you want to

This should be the final result

Web 2.0 Header Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: Xtra Tutorials
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Web 2.0 Header"

Only registered users can write comment

No comments yet...