This will be your final result

1. First thing we want to do is create a new document with the dimensions of 1024×180.

2. Chances are your background will be #FFFFFF by default, so lets go ahead and use our paint bucket tool to fill it with #000000 (black).

3. Next, make a selection with your rectangle marquee simlar to the following and fill it with #FFFFFF. You can also use your rectangle tool if desired.

4. Now on that layer insert the following blending options

5. You should have something that looks like this

6. Next thing we want to do is create the back of our horizontal navigation bar. Using your rectangle tool make a rectangle similar to the following filled with #FFFFFF

*Note, you want to overlap the stroke on the rectangle you previously created.

7. Now on your newly created rectangle, insert the following blending options onto its layer

8. Your document should now look something like this

9. Next use your rectangle marquee tool to make a selection similar to the following and fill it with #000000

10. Lower the opacity of that layer to around 21%, and you’ll have yourself a nice little shadow

11. Now lets go ahead and add some text to our navigation bar. Our active link will be #2e2d2d and our non-active links will be #FFFFFF

12. We are going to have a sort of ‘tab’ behind our active link. So using your rectangle marquee tool, create a selection similar to the following and fill it with #FFFFF on a layer below your font.

13. Lets go ahead and add a little gradient to that layer, so input the following

14. Now lets go ahead and make a search box. First thing we want to do is make our input field. So using your rectangle tool with a foreground of #FFFFFF make a rectangle similar to the following

15. We want to add a little stroke, so right click its layer and input the following

16. Next lets make our search button. Using your rectangle tool again, make another rectangle similar to the following

17. Now insert the following blending options onto that layer

18. Now i just added a little gloss to the button and added a simple magnifying glass icon I pulled from the default photoshop shapes pallet and this is what I came up with

19. The last thing I did was to add a little logo (used Helvetica Neu) and added a couple simple square buttons to the top right and this is what I came up with

 
Get a commercial/public use licence for this PSD (More info)

Remember if you have any questions or comments about this tutorial to leave your responses in the comments below and we will get back to you very quickly.

If you enjoyed this tutorial please take a moment to visit one of our sponsors