In this tutorial we’ll take a look at how to create an easy 3D effect which can be used for a web navigation sidebar.
1. Create a new document in Photoshop 500 high x 300 wide pixels. Fill the background with #333333 (dark grey).
2. Select the Rectangle Shape Tool from the Tool bar. On the tool options bar at the top, select Shape Layers then click on the Style drop down arrow to see the styles available. We’re going to use a gradient style. To add that to the style box, click on the small triangle in the top right corner of the style drop down box and from the menu that appear choose Web Styles.
You will be asked if you want to replace or append your current styles. Choose append. Scroll down through the new styles which have been added and choose “Black To Transparent 2.” Now draw out a rectangle that fills about half or two thirds of your document. It’s okay to draw the rectangle so it goes outside the boundaries of the document. Finally, on the new rectangle layer that appears in your layer panel, add a Stroke layer style in white, 2 pixels thick. You should end up with something like this:
Okay, so that’s the background set up. The area on the left is our sidebar where we’ll add our simple 3D menu.
3. Select the Rounded Rectangle Shape tool in the toolbox. It will be hidden under the Rectangle Shape tool. In the tool options bar at the top of the screen, make sure Shape Layers is selected and set the color to #990000 (deep red). Drag out a rectangle something like this:
Rename the shape layer to “Button Background.”
5. Now we’ll use the pen tool to draw a shape that will make it look like the button is being folded under the sidebar. Select the Pen tool and set the options to Shape Layers and set the color to white. Zoom right in so you can see clearly what you’re drawing. Draw a shape something like this:
Now rename the new shape layer “Paper Fold.”
6. Drag the Paper Fold layer under the Button Background Layer.
7. The next step is to change the Button Background (which is a vector shape) so that the bottom right corner looks like it is folding downwards, matching the top right corner. Choose the Direct Selection tool (white arrow) from the tool box and then click on the edge of the red button so that you can see the anchor points.
Click and drag the rightmost anchor point down so you start to get a downwards curve. Use the Bezier handles to adjust the direction and shape of the curve. You will also need to move the anchor point to the left and adjust the curve with the handles for that point too. Try to get a shape something like this:
8. So our button has now changed shape a little bit and it’s overlapping our Paper Fold layer. Select the Paper Fold layer and with the Move tool, drag it down so it looks like the corners meet and fold correctly.
9. Select the Button Background Layer and add a Layer Style of Stroke size 3, in white, position outside.
10. We need to delete the right end of the stroke. To do we can put the stroke effect onto a separate layer and mask out the right end. With the Button Background shape layer selected go to Layer > Layer Style > Create Layer. You will notice an extra layer underneath your button shape layer. Select it and add a Quick Mask. Use a black paintbrush to paint out the white stroke on the right side of the button. Also gently mask out part of the top curve.
11. With the white stroke layer still selected, add a Drop Shadow layer style. This gives a really nice effect and really lifts the button off the page. Play around with the sliders to see what kind of effect you like best. These are the values I used.
Click OK to add the drop shadow.
12. Select the Background Button layer and add an Inner Shadow with the following values:
Click OK to apply the Inner Shadow.
13. Nearly there! The last step is to add some text to your button. And voila!
You will probably require more than one button in your navigation bar so rather than repeat the whole process we can just duplicate what we’ve made.
14. On the layers panel, click on the “Create a Group” button. Rename the group to “Button.” Now select all the layers that you’ve created to make up your button and drag them into the group. Make sure you don’t drag in the first background you made.
15. To duplicate the group, drag it down through the layers panel and drop it on the “Create New Layer” icon.
15. Once you’ve created a duplicate, select the Move tool in the toolbox (but don’t click anywhere on the screen), simply use the up and down arrow keys to move the entire group up and down. Repeat this process till you have all the buttons you need, then change the text in each one. Here’s my completed navigation bar.