Create a Folded Paper Sidebar in Photoshop

Tweet

The paper fold is a nice effect which is used frequently on websites with layered or textured surfaces. It can take the flatness off a site and the method we’ll use to make it can be applied to other objects such as the peeling sticker effect which is also popular in web design.

1. Create a new document with dimensions of 450 pixels wide by 400 pixels high (Note these are just suggested sizes, obviously the size of each of your sidebars will vary depending on what you want to put into it). Fill the background with whatever your web site background color is, for mine I’m using #333333 (dark grey).

2. Select the Rounded Rectangle Tool and make sure the Options for the tool are set to Shape Layers (first icon), Radius 10 pixels and choose the color that you want your sidebar to be. I’m using #99000 (dark red)

2-ToolOptionsBar

3. Draw out a rectangle 350 pixels wide and 300 pixels high. (Tip: Open up the Info palette by choosing Window > Info so that you can see the dimensions you’re drawing).

1-RoundedRectangle

4. Select the Pen tool and set the options to Shape Layers and color set to #cccccc (light grey). Draw out a rectangle something like what’s shown below. The new triangle layer should be above the rounded rectangle layer.

3-TriangleWithPenTool

5. Under the Pen tool in the tool box, select the Add Anchor Point tool.

3-AddAnchorPoint

Click on the triangle path you’ve just drawn and add two extra points as you can see below.

5-AddAnchorpoints

6. With the Direct Selection Tool (white arrow) click on the point on the bottom right and gently bend a curve as shown. Then do the same thing with the second point on the bottom left.

6-CurvePoints

7. Ok, that’s most of the fold in place but now we need to fold our rectangle down to meet the triangle. Once again select the Add Anchor Point tool and add two new points as shown.

7-AddingExtraPoints

8. Now we need to do some folding. On the rectangle layer which you added the new point to, using the Direction Selection tool, drag one of the corner points down behind the triangle.

8-TuckingAndFolding

Hold down the Alt key and drag the handle of the new point you added just above the top of the triangle. Holding down Alt prevents the line on the other side of the anchor point from moving.

8-Morefolding

Repeat this process with the remaining round rectangle corner point and newly added anchor point so you get something like this:

9-Allcornersfolded

To finish tidying up, use the Direct Selection tool to drag to top corner point of the triangle to meet the edge of the rectangle. You may need to readjust the curves on the triangle at this point too. This part of the process is a bit of trial and error and comes down to what pleases the eye so play around with the anchor points.

10-trianglemeetsrectangle

My final rectangle and triangle look like this:

11-FinalCurves

9. Select the Triangle shape layer and add a Drop Shadow effect by clicking on the Layer Effects button at the bottom of the Layers Palette (Fx).

I set the color of the drop shadow to be a deeper, dark red #330000 rather than black, opacity set to 50%, Angle of light 90%, Distance 4 pixels, Spread 10% and Size 10 pixels. Click OK to add the Drop Shadow.

12-DropShadown

10. We’ll add the same effect to the rounded rectangle layer. Click on the layer effects on the triangle layer, hold down Alt/Option and drag the drop down shadow onto the rounded rectangle layer. This duplicates exactly what you had on the triangle layer. Make sure that you haven’t just dragged the style from one layer to another.

13-DuplicateLayerEffect

14-WithLayerStylesApplied

Now to make it look a little more textured we’ll add a Pattern Overlay to the rectangle layer. Select it in the Layers Palette then click on the Add Layer Style button and choose Pattern Overlay. When the layer styles dialog box open up, click on the small triangle and from the menu choose Artist Surfaces. This gives you a pile of new textures which you can apply. I chose Canvas and reduced the Opacity to 70% and the Blend Mode to Multiply.

15-PatternOverlay

This takes the very clean look off the “paper.”

15-PatternOverlayAppied

12. The final task is to add your navigation to the sidebar, et voila!

Finished

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.

  • http://cydewaze.org cydewaze

    Nice, but my OCD keeps making me try to push the corner back up :P

    • drudge

      Have you heard about the new type of OCD that was just discovered?

      It’s called CDO. It’s exactly the same as OCD, except the letters are in alphabetical order.. like they SHOULD be.

    • http://www.laughingliondesign.net Jennifer Farley

      Ha, ha. Ok, you just ignore steps 4-10 and you’ll be grand.

  • Dubb

    Can the folded corner be rounded like the other three. It would be more accurate looking, and maybe cooler.

  • c_spha

    Photo-shop has really mastered the art of photo editing.

  • narfotic

    I don’t think it should look like that. The curves at the end of the triangle should be tangent to the straight part of the ‘paper’. Unless you really fold it, then it’s just straight.

  • wow

    That’s terrible…