This will be the final result

1. The first thing we need to do is create a brand new document. For this tutorial we will be using a canvas of 400×400
2. We want to go ahead and change our background color to #000000 to start things off.
3. Next, using your rounded rectangle tool to make a selection similar to the following with the radius set to 10px

4. We want to go ahead and liven this up a bit, so lets go ahead and add some blending options by right clicking your rounded rectangle layer and choosing blending options and inputing the following
5. You should have something that looks very similar to the following at this point:

6. The next thing we want to do is use our rectangle marquee tool to make a selection similar to the following and fill it with white

7. Obviously… we aren’t going to keep it white, so lets go ahead and right click our layer in input the following blending options
8. And you should have something that looks like the following

9. the next part we will be doing is the folds of our ‘banner’. It will give us the perspective we need. Use your polygonal lasso tool and create a selection similar to the following and fill it with #FFFFFF

10. We then want to go ahead and input the following blending options onto its layer:
11. Now just repeat those same steps for the other side and you should have something that looks like this

12. The next thing we want to do is add a little heading for our content box. So lets go ahead and pull out your text tool and input some text for your heading:

13. White is a little… well… bland. So what we want to do is right click your layer and input the following blending options
14. You will have something that looks like the following, which is starting to look much better

15. There is one more thing we can do to this though. Go ahead and duplicate your text layer and make sure all your blending options are turned off on this new layer and that the font color is set to #FFFFFF. Put this layer below your original text layer and then using your arrow keys move it down 1px.

16. That is very strong, so we want to go ahead and tone it down a bit. Lets go ahead and lower the opacity to about 28% and you’ll have something that looks like this:

17. Thats pretty much it! You can add a little icon for your content box, and then add some links and it will look something like this


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.

















54 Responses
psaddict
Added to http://www.psaddict.com
ghawyy
great work its really nice i will use it in my home page sure i will make it
thank you so much
drew
just wondering why use selection tools instead of vector tools, and why duplicate text rather than just drop a white shadow at normal blending mode…
drew
great tutorial tho
Matthew Heidenreich
@Drew
I actually do use the rectangle tools…etc… but its really the same thing when making these sort of things
Andy
nice simple design.
adapted version of menu system
http://www.geekyourgeekon.co.uk/cssmenu
feel free to use (there is an annoying bit of wiggle when you hover over the links)
regards
andy
dsgn.in
Andy
Sorry incorrect link
http://www.getyourgeekon.co.uk/cssmenu
should have double checked, my bad
andy
dsgn.in
Matthew Heidenreich
nice outcome Andy
iCheese
I really, really like the outcome of this. I’m going to have to try use this.
uokesita
Hi. this tutorial is great… I love it..
—
WOLF-BESPREDEL
Cool!!! Thanks!!!
Cosmin
@Andy : lower your font size on the :hover state; this should keep your menu from not expanding vertically when hovering.
As for the IE flicker, you should use CSS sprites, so the whole image loads and no other HTTP requests are sent; jQuery Image Preloader might work as well, haven’t tested
Nice tut!
Kristel van den Akker
Really nice
sybe
How to code this menu navigation?
Business Card Printing
This is nice! Orange is sometimes a hard color to work with, but your use of it here is simple and clean and wonderful. Great tutorial! Looking forward to more of your posts. Thanks!
CgBaran Tuts
I will be a good navigation item for a wordpress theme. nice work
photo retouching
Great looking result! Very contemporary.
Raymond Selda
Very nice design Matthew. Hope you don’t mind because I wrote a tutorial on how to code your content box on my blog. Thank you.
Sam
Hey Matthew how would you be able to code the orange rectangle in css?
Rob
Great tutorial.
aisinvon
it’s so beautiful
vikewe
COOL.I like this kind of tutorial which does not exist in China.
Aramis
Even after 1 year this article still useful