Silver Menu Header Box Photoshop Tutorial
- Categories: Photoshop Tutorials,Web Graphics
- Author: John Ward
- Comments: 13 responses
- Tags:
-
This tutorial will show you how to create a clean looking menu header box using Adobe Photoshop CS2.
Start off with a new document 225×60 pixels with a white background
Create a new layer. Using the rectangle marquee tool, draw a rectangle similar to the one below. Fill it with a gray #EFEFEF
Right Click on the layer in the layers palette and select blending options.
Now apply the following bending options.
Stroke 1px #a8a8a8:
Gradient Overlay:
Here are the gradient settings (double click on the gradient to open this window).
Drop Shadow:
Apply the changes and your image should look like this.
Now create a new layer. Using the line tool with #b6b6b6 as your foreground color, draw a line like the one below.
Now select the Eraser tool. Use a 9px brush with hardness of 54 and flow of 50%.
Use the tool to fade the top and bottom of the line (you may want to zoom in to do this).
Your image should look like this at actual size.
Create a new layer. Use the custom shape tool and select arrow 6 (a preinstalled shape in Adobe Photoshop CS2). If you are using another version of Photoshop, you may have to choose another arrow.
Draw an arrow on the new layer using the same color as the line (#b6b6b6)
Now to finish off the heard, we will ad some text. Use the Text tool with Arial Bold 14pt Crisp. Add your text. This is what the header should look like when you are done.
If you enjoyed this tutorial then check out our other Photoshop Tutorials.
raj on June 23, 2007 at 4:29 am
good tutorial!
[Reply]
mohamed zarie on June 24, 2007 at 4:01 am
its avery good tutorial
i loved it
[Reply]
nkhat on July 24, 2007 at 7:55 pm
thank youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
[Reply]
Johni Simpang on August 19, 2007 at 6:09 pm
Great tutorial, thank you
[Reply]
peter on January 25, 2008 at 7:48 pm
Thank you.
[Reply]
Free tutorials on February 18, 2008 at 2:47 pm
Sweet! This will be helpful for many
[Reply]
Professional Web Design | Flash Web design | Web Design Romania on March 11, 2008 at 6:57 pm
Very well explained and good looking button, tho I don’t like the shadow:d
[Reply]
santosh on May 7, 2008 at 1:34 am
It’s so nice.
Thanks.
[Reply]
Rajita - Logo Design on May 16, 2008 at 2:49 am
The silver menu is very well done.
[Reply]
maria on August 17, 2009 at 7:41 pm
Just awesome… Thank youuuuu! you rock!
[Reply]
Don on October 15, 2009 at 8:00 am
Thanks,Great tutorial!!
[Reply]
fibercement on December 7, 2009 at 10:23 am
Its great.Thanks a lot.
[Reply]
Fernando Sweeney wrote a new blog post: Silver Menu Header Box Photoshop Tutorial | Free Blog Hosting on March 20, 2010 at 4:47 am
[...] Fernando Sweeney wrote a new blog post: Silver Menu Header Box Photoshop Tutorial Posted: 20th March 2010 by Free Blog – Site Wide Activity in Free Blog 0 Fernando Sweeney wrote a new blog post: Silver Menu Header Box Photoshop Tutorial This tutorial will show you how to create a clean looking menu header box using Adobe Photoshop CS2. Silver Menu Header Box Photoshop Tutorial [...]