Submit Your Article
I am going to run you through some simple methods, using shadows and gradients to create a 3D shelf style menu.
Here is my final result:
Here is an example of how it could look on a website
First start off with an 800X300px canvas.
Create a new layer and fill with a mid color gray.
I am using this one:
Next get your gradient tool. Set it to linear and have it going from white to transparent as the color. Also set the opacity of it to 30%.
Start a new layer and move than halfway down your canvas hold down shift and drag downward like this:
You should get a result similar to this:
Now drag your gradient again a little bit above the previous line but drag more so that the glow is larger.
Try to get a result similar to this:
Start another new layer and get your gradient tool again, except change your gradient color to black Keep all the other gradient settings the same.
Now a little down from the top of your canvas do the same thing with this gradient as you did with the other white one.
Try to get a result like this:
Next we are going to use the burn tool. So get it from your tools palette and set the brush to 65px soft, range to shadows, and 23% exposure.
Now choose the first layer you made with the mid gray color and while holding down shift on a windows keyboard drag your mouse horizontally from left to right underneath your white line. Go pretty far below it, almost to the bottom of the canvas.
Try to get a result like this:
To get the result drag your mouse 2 times across the whole canvas.
Now go back to your top layer where you used your darker gradient and drag in some more spots to darken up the upper portion a bit.
Now that you have your basic shelf made, now is the time to add some icons or lettering for your menu. I want to add a few 3d icons along with some text.
Usually the first thing on a site menu is “home” so I am going to run you through a quick little house icon.
So start a new layer and get your shape tool. Grab the shape that looks like a pentagon:
Pages: 1 2
