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

Clean Gray Header Design


1. First thing we want to do is create a brand new document with a size of 1000x280.

Clean Gray Header Design image 1

2. I went ahead and made the background color #1c1c1c.

3. Next we want to go to our tools pallet and choose our rounded rectangle tool. Set the radius to 10px and create a rectangle similar to the following (doesn't matter what color as we will be changing it later)

Clean Gray Header Design image 2

4. Now we want to go ahead and add some blending options to this layer. To do so, right click the rounded rectangles layer and choose blending options and insert the following:

Clean Gray Header Design image 3

Clean Gray Header Design image 4

Clean Gray Header Design image 5

5. Next, we want to add our logo. So use any font of your choice and place your text on the left of the rounded rectangle. For this tutorial, i've used the PSDVIBE logo.

Clean Gray Header Design image 6

6. Now we want to create the input boxes for our login area. To do so pull out your rectangle marquee tool and make a selection similar to the following and fill it with #FFFFFF

Clean Gray Header Design image 7

7. Next lets go ahead and right click that layer and choose blending options and input the following onto its layer

Clean Gray Header Design image 8

8. You can then place some text on top of the box and it will look something like this

Clean Gray Header Design image 9

9. Go ahead and repeat steps 6-8 for a password box and you'll have something that looks like this

Clean Gray Header Design image 10

10. A login box isn't much use if you don't have a login button, so lets use our rectangle marquee tool to make another selection similar to the following and fill it with #FFFFFF

Clean Gray Header Design image 11

11. We want to go ahead and add some blending options, so lets input the following

Clean Gray Header Design image 12

Clean Gray Header Design image 13

Clean Gray Header Design image 14

12. Next we want to add a little shine to our button. Make a selection similar to the following and then fill it with white on its own layer

Clean Gray Header Design image 15

13. Lower the opacity to 20% and add some text. You'll have something that looks like this

Clean Gray Header Design image 16

14. Using the same steps for the login form, you can then make a search form. This is what I came up with:

Clean Gray Header Design image 17

15. The last thing we need to do is create a navigation menu for our newly created header. I placed the following layers under my rounded rectangle layer so i could have some run off. Go ahead and use your rectangle marquee tool to make a selection similar to the following and fill it with #FFFFFF

Clean Gray Header Design image 18

16. Next, right click that layer and input the following blending options:

Clean Gray Header Design image 19

Clean Gray Header Design image 20

Clean Gray Header Design image 21

17. Now just add some text using a simple typeface (helvetica for example), and use a slight drop shadow for its blending options

Clean Gray Header Design image 22

18. Your document should look something like this when you are finished

Clean Gray Header Design Tutorial: Final Result



Author's URL: PSDVIBE
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 "Clean Gray Header Design"

Only registered users can write comment

Reader's comments