Create a Folded Paper Sidebar in Photoshop

    Jennifer Farley
    Jennifer Farley

    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)


    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).


    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.


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


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


    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.


    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.


    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.


    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.


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


    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.


    My final rectangle and triangle look like this:


    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.


    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.



    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.


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


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