Posted on September 8, 2008 - by Matthew Heidenreich
Light Tabbed Content Box
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?
Visit My Website
September 9, 2008
Permalink
Clear and concise! Good stuff. You should digg some of this stuff!
Visit My Website
September 9, 2008
Permalink
I would, but I am not a digg whore with a million digg friends..ha.. so it wouldn’t get that much attention
Visit My Website
September 10, 2008
Permalink
Nice tutorial. Clean and simple, I really liked it.
Visit My Website
September 10, 2008
Permalink
LOL Matt.
Visit My Website
September 11, 2008
Permalink
Very Very nice.. I will use thise tips for my own webdesign thats for sure
Visit My Website
September 13, 2008
Permalink
[...] başındanda .psd dosyasını indirip özgürce tamamen kullanabilirsiniz.Eğitsel yapımında, buradan [...]
Visit My Website
September 14, 2008
Permalink
[...] Light Tabbed Content Box [...]
Visit My Website
September 15, 2008
Permalink
[...] Light Tabbed Content Box . . . [...]
Visit My Website
September 16, 2008
Permalink
[...] Light Tabbed Content Box [...]
Visit My Website
September 17, 2008
Permalink
[...] Light Tabbed Content Box [...]
Visit My Website
September 17, 2008
Permalink
[...] to create a environmentally friendly web layout with a tabbed navigation at the top. This takes our tabbed content box tutorial one step further.This is a quick and short tutorial, but If you have any questions, please remember [...]
Visit My Website
September 18, 2008
Permalink
How about finishing of the tutorial and actually making it in html? Photoshop is the easy part.
Visit My Website
September 19, 2008
Permalink
I agree… What the heck do we do with it now? How do we make it workable html?
Visit My Website
September 19, 2008
Permalink
i actually agree… i’ll go ahead and work up a slicing tutorial for this when i finish the one i’m working on…
Visit My Website
September 24, 2008
Permalink
Thank you for this great tutorial…
Visit My Website
September 25, 2008
Permalink
[...] Light Tabbed Content Box [...]
Visit My Website
November 12, 2008
Permalink
j7vq1gvzg6b7k7u2