Introduction…

In this tutorial you will learn how to create a unique, dark, and professional header with a search field included. Yes, your correct, I am a fan of web design tutorials, hope you enjoy!



Download the PSD…

Don’t have time to do the tutorial, but would like to see the results? The PSD is available to anybody who would like to use it. You can download it here.

Lets get started…

1. First things first. We need to create a new document with the size 900×200.



2. Next, we want to go ahead and change the color of our background. Make sure your layer is unlocked, and then right click and choose blending options and input the following:




3. Next, grab your elliptical marquee tool. We want to make a selection similar to the following and fill it with white on its own layer:



4. Now, lower the opacity to 17%, and the layer style to Soft Light, and it should look very similar to the following:



5. We want to go ahead and start from the bottom up. So lets go ahead and work on our search area. Create a new layer, and use your marquee to make a selection like the following, and fill it with a solid color:



6. Now, on that layer go ahead and put in the following blending options:





7. Your document will look like the following:



8. Next, we want to create the search field. To do so use your rectangle marquee tool to create a selection like the following, and fill it with any color:



9. Now go ahead and put these blending options on that layer:






10. Next, its time to create a search button. Go to your tools pallet and choose the rounded rectangle tool. Set the radius to 3px, and make a rectangle like the following (again, doesn’t matter what color it is):



11. Now enter these blending options on your buttons layer:




12. We want to add a little shine to it. The easiest way to do this is to CTRL+CLICK the buttons layer. This will select the layer. On a new layer above it, fill your selection with white. Then select the bottom half of the layer and delete it. It will look like this at this point:



13. Now, just lower the opacity to 42%, and change the layer style to Soft Light. You can add some text to the search field and the button, and it will look similar to this:



14. Lets go ahead and create a little text logo for our header. Go ahead and choose a simple font to use. I went ahead and used a design favorite, Hevetica - set to bold, and its anti-alias to Strong. Go ahead and come up with a name and place it in this general area.



15. Next, go ahead and put in the following blending options on your text layer:





16. You can add an optional slogan text layer under it, and you’ll have something that looks like this:



17. Next, create a new group and name it Links. Everything from this point on will go in this group. Using your rectangle marquee tool, create a new selection similar to the following and fill it with #000000.



18. Lower the opacity to 27%, and place some white text on top of it and it will look like this:



19. Now, just repeat steps 17 and 18 as many times as you need and your results will look like this:



20. The reason we grouped them together is so it would be easier to add a reflection. Duplicate your Links group and then right click the group, and choose, Merge Group. This will put everything on 1 layer. Next, go to EDIT>TRANSFORM>FLIP VERTICAL and move it under your links. It will look like this:



21. Next, we want to use our rectangle marquee tool to remove a good portion of this so it blends into the background. Make sure your feather is set to around 10% and create a selection similar to the following:



22. Now choose Edit> Clear, and repeat as many times as you feel needed. Lower the opacity on the layer to 26%, and the layer style to Soft Light and your results should look like this:



23. Now you can add an optical news feed and your final results will look like this



**If you have any problems, or have any questions about this tutorial, please leave your comments and I will get back to you. Also, remember the PSD to this tutorial is available for download.

If you enjoyed this tutorial, why not check out our other Adobe Photoshop Tutorials?