Introduction…

In this tutorial you will learn how to create a simple, tabbed, content box and search bar. If you have any questions, please leave a comment below.



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 thing we want to do is create a new document to work with. Open up Photoshop and create a new file with the dimensions of 600×400



2. Next, get your paint bucket tool and change the background to #e5e5e5

3. Now, go to your tools pallet and choose the Rounded Rectangle Tool and change the radius to 10px. Make a rectangle similar to the following:



4. Now, we want to use our marquee tool to make a selection of the top of the content box. We will hit CTRL+C and then CTRL+V to paste the selection on a new layer, and then name this layer Navigation Back.



5.This will serve as the back of our navigation menu. You can then delete the original area of the rounded box towards the top that you just copied by reselecting, and then choosing EDIT>CLEAR. Then rearrange the two layers to line up correctly:



6. Next, while on your navigation back layer, input the following blending options. (To access blending options Right Click the layer, and then choose blending options.)





7. Your image should now look like the following



8. Next, while making sure your foreground is set to #FFFFFF, make a rectangle in the following location. This will serve as the shine on the navigation.



9. Rasterize the layer (right click>rasterize), and then lower the opacity to about 50%, while changing the layers blending mode to Soft Light. It should look something like this:



10. Now we want to show what our active ‘tabbed’ link will look like. To do so pull out your Rounded Rectangle Tool again and make a selection similar to the image below. Then use your marquee tool to select the bottom and then choose edit>clear to make the edges straight.



11. Now, on your tab layer, add these blending options




Your results should look something like the following



12. The last thing we need to do to our navigation is add some text. For the ‘active’ button (ex. Home), I used #c2c2c2. For the other links I used #5b5b5b, and the dividers are set at #bababa. Refer to example below…



13. Next thing we want to do is add a search bar. Using your marquee tool, create a selection similar to the following and fill it with white



14. Now right click that layer and input the following blending options




15. The next thing we want to do is add a search button. So, using your marquee tool again, create a similar to the following and fill it with any color:



16. Now on that layer, input the following blending options for your ‘Search’ Button.




Your document will now look like this:



17. The last thing we need to do now is add a little shine to our button. So using our marquee tool again, selection the top half of the box, and fill it with white on its own layer.



18. Now lower the opacity to around 80%, and change the layer style to Soft Light. Now all you have to do is add some text and you’ll have something that looks like this:



I went ahead and added some filler text to give it a full look, and you end up with 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?