Simple 3D Effect Wrap-Around Navigation Menu In Photoshop

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.

1-RectangleToolOptions

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:

3-Rectangle

4-LayersPalette

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:

5-DrawButton

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:

6-PaperFold

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-AnchorPoints

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-Papermeeting

9. Select the Button Background Layer and add a Layer Style of Stroke size 3, in white, position outside.

10-Stroke

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-MaskStroke

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.

11-DropShadow

Click OK to add the drop shadow.

12. Select the Background Button layer and add an Inner Shadow with the following values:

12-InnerShadow

Click OK to apply the Inner Shadow.

13. Nearly there! The last step is to add some text to your button. And voila!

13-TextAdded

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.

14-DragGroup

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.

15-FinalButtons

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • reekoong

    thank you

  • Jeff

    Can you take the tutorial a step further and convert the Photoshop file into html and css?

    • ikromm

      Indeed a simple tutorial on cropping and slicing would be nice on that theme.

  • kira8080

    Nice. IMHO that’s the kind of Photoshop tutorial we need here at Sitepoint. How to create useful graphics for web pages.

  • Alex

    Great tutorial, thanks. It’s useful and I’ll use it for something else, not a navigation. Unfortunately I see those wrap-around kind of navigations almost everywhere I surf these days. People should be more unique and come up with new things. I find it boring to see the same kind of navigation all over the interwebs.

  • http://www.apcooper.co.uk AndrewCooper

    Although I agree with Alex that I’m starting to see these wrap-around 3D kind of navigation menus / section headers almost everywhere I do love this technique and you’ve done a brilliant tutorial here with a beautiful finished example! :D

    My favourite of your tutorials so far actually. We going to be seeing more like these in the coming weeks Jen?

  • http://codefisher.org/ codefisher

    Can SitePoint start using PNG instead of JPG? so the images don’t look bad from the effects of the lossy encoding?

  • evan

    easy to learn.thanks you JF. :-)