Author: Ognjen Knaus

Owner, art director & web designer at Web Design Beach

In this tutorial we’re going to look at the "warp option" in Adobe Photoshop and see how you can add a realistic page curl (also called "dog ear") to an image for website designing.

Step 1

The first thing that you have to do is duplicate your background image by dragging the layer down to the "create new layer" icon.

Step 2

Then you select the original background (the one with the lock in front of it) and fill it with white. That will make the background white when we turn the page.

Step 3

The next thing we need to do is add a gradient fill to the down right corner where the page turn will be. Now go to the other layer (Background copy) and go ahead and select the marquee tool and select the corner where you want the curl to be.

Step 4

Now go and select the gradient tool and make sure that you have selected the “black to white” color.
Next, take the gradient tool and drag it across the bottom corner inside the marquee. It will color the box with a gradient black and white fill.

Step 5

Now, press "ctrl+D" to deselect the marquee and the next tool that we’ll use is the warp tool. So go to “Edit”, then “Transform” and select "warp".

Step 6

Now you'll be able to see handles around the picture that allows you to pull any of them into a warp. Now drag the page corner to create the curl. When you're done click "Enter"

Step 7

The next thing that we need to do is add a "Drop Shadow" to this layer. Go to "Layer", then "Layer Style" and select Drop Shadow.

Step 8

Increase the size a bit until you see the shadow effect appear in the picture.

Result

There you go. You have a created a very realistic nice dog ear effect to your image using the warp tool in Photoshop.

Here's a second way to create a page curl:

Step 1

Open the picture you want to add the curl effect to and choose the Pen Tool and click on "Subtract from shape layer" in the options. In this example, I'll add a page curl effect to the top right corner of the image. I'll click above the picture on the right, and another click beside the picture on the right. Then I'll click around that corner to close it. That way, that part is removed from the image.

Step 2

Click Ctrl + Shift + H to remove the line.

Choose the Pen Tool again, but this time choose "Create new shape layer" which is the first option. Click on the top right corner and then click on the lower right part and drag to right until you get the page peel shape you want. After that, press on alt and click on the last point you've created and again on the first point.

Step 3

Now as you can see, the curl is rounded. We need it to be more pointed. Go to "Add Anchor point" from the Pen Tool menu and add an anchor point at the tip of the curve and one in the middle. If you need more to adjust the curl, add more anchors. Then choose the "Direct selection" tool and start moving the anchors until you reach the desired result.

Step 4

Next, well add some gradient color and shadow to the curl. Click on the layer of the page curl. Go to Layer, Layer Style and click on "Blending Options".

Step 5

Gradient Overlay

Step 6

Drop Shadow

Result

And there you go. Your curl is ready.

There's one more type of curl effect that I want to show you

Step 1

We're going to use a combination of the previous two kinds. It's a rounded page curl effect. First of all, make a copy of that background and set the original background to gray. Then select the copied layer and use the pen tool the same way we did before to select the part where we want to add the dog ear effect. This time, I'll select a small part.

Step 2

Then go to the "Layer", then "Layer Style" and select "Blending Options". I'll add a gradient color and some shadow to the curl.

Step 3

Gradient Overlay

This time, I'll choose a white and a very light gray overlay. This way, the curl will appear as if it's folded.

Step 4

Drop Shadow

Step 5

Now, select the "Selection Tool" and go to "Edit", then "Transform Path" and choose Warp".

Step 6

Adjust the page curl as shown below with the "Warp" tool.

Result

And there you go!

Fren

Dog ears are always popular I'm so glad someone finally decided to write good tutorial on how to make that effect. Thank you, Ognjen.

Jo

And do you know any trip to wrap the page backwards? ie, folding down the corner behind the main picture?

Ricardo Nascimento

Show de bola!

joe

awesome tutorial dude!

Zhiwei

Thanks for showing me this! I always wanted this effect for most of my projects and now you're showing it to me! Great job! Such a complete tutorial! Now I can finally make a clipboard style project!

Btw, check out my blog tips blog at www.arts-inmylife.blogspot.com

Processing, please wait ...

Your name:

Your email:

Your URL:

Comment: