Make A Page Curl In Photoshop

You can use a page curl in your web or print designs to add a hint of a 3D effect. We’ll use a Color Fill Adjustment layer, a Gradient Layer Mask and a Warp to produce the effect.  You can apply this effect to an existing image or you could apply it to a block of color that you might use on a sidebar on a web site for example.

1. Open your image in Photoshop. I’m using this gorgeous picture of a dog by echiax which can be downloaded free here.

Dog

2. It’s important that the dog picture is the bottom most layer in the stack. If you copy and paste the dog into Photoshop it will put the image on Layer 1 above the default locked Background layer. If there is Background layer there, just delete it so you only have one layer.

BottomLayer

3. Click on the New Adjustment Fill icon at the bottom of the Layers Palette and choose Solid Color from the pop-up menu.

2-solidColorAdjust

4. For the Color Fill, choose Black and click OK. This step creates a new layer called Color Fill1 above the dog image.

4-ColorFillLayer

5. We need to apply a Gradient to the layer mask on the Color Fill 1 layer, so make sure it is selected in the Layers Palette. Press D on the keyboard to set the Foreground Color Swatch to Black, then select the Gradient Tool (G) from the Toolbar.

6. In the Options Bar at the top of the screen choose the Foreground — Transparent Gradient, Linear Style, Normal Mode, 100% Opacity, Dither & Transparency active.

5-Gradient
7.Then from the lower left corner click and drag to draw the Gradient stopping about a quarter way up the image as below.

6-GradientDrag

The result should be something like this:

7-GradientApplied

8. Now we need to warp our layer mask so with the Color Fill 1 layer selected press Ctrl + T (windows) or Cmd + T (mac) to start a Free Transform.  Only the layer mask will be selected.

8-FreeTransform

9. With the the Free Transform still active, go to the Options Bar and select the Warp icon command.

9-Warp

You should now see a small grid of anchor points on the bottom left corner of the image. Click and drag the lower left anchor point and pull it towards mid center, as below. I also dragged the anchor points on the x an y axis to change the shape of the curve. (See the arrows for which way to drag).

10-DragWarp

11. Either press Enter/Return on the keyboard to commit the Warp changes.

11-CompleteWarp

12. On the Color Fill 1 layer, bring the Fill down to 0%, to remove all the Black, and bring back the visibility of the underlying image Layer.

12-Fill0

13. Right-Click (windows) / Ctrl-Click (mac) on the Color Fill 1 Layer and from the context list choose Blending Options. Set Opacity to about 90%, Color Black, Distance 5px and Size 5px. Don’t click OK yet.

13-InnerShadow

You should now see the your page curl start to appear.

13-PageCurl

14. We need to fix the foreground exposure of the curl. Click on the word Stroke and then set the Size to 10px and Color to White, Position to Outside. Click OK.

14-Stroke

15-pageCurl

15. We can finish up by adding a new layer in between the Color Fill 1 layer and the Dog layer. On the new layer, paint carefully with a soft white round brush to fill in the left corner of the image.

16-Layers

Your final image should look something like this:

17-FinalImage

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.

  • Anonymous

    Cool, thanks. Tutorials like this are a nice way to learn ones way about photoshop.

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

    You’re most welcome.

  • DepthsUnknown

    Very nice effect, Jennifer. Will use…

  • Anonymous

    Very cool. Thanks.

  • Puchki

    It’s really a cool way! Loved it!

  • Anonymous

    Great tut. I hv leant stuff. Thx