Dec 11
Creating a page curl in Photoshop
2006 at 11.06 am posted by Veerle Pieters
Today’s tutorial was a request by Kirk from Smallest Photo. As you all know, the way I do or show it isn’t the ‘only’ way, it’s just my way and I’m open for any other tips or suggestions. As always I had fun doing this and I’m always happy to share stuff like this. So here it goes…
Step 1 - Selecting the corner and warp transform it to a curl
Select the Rectangle Selection tool from the Toolbox and drag a squared selection starting from the bottom right corner of the image (holding down shift) going diagonally left, till you have a big part selected of the bottom right corner of your image. Go to the Edit menu and select Transform > Warp. Drag the bottom right point of the mesh up left till you get some curly effect. Drag the bezier handles to get the right curl effect and hit the return key if you're pleased with the result.
Step 2 - Create the curl
Since this curl doesn't show the back of our photo, it doesn't really look realistic. The only way I'm aware of to achieve this effect is that we draw it ourself. Select the Pen tool from the Toolbox and draw a path on top of the picture. Follow the borders of the curl you just transformed as guidance. Fill the Shape layer with a white color (double click the layer icon).
Step 3 - Add shading effect to the curl
Double click on the right of the Shape layer to active the Layer Styles. Check the Gradient Overlay option. Set the Angle of the gradient to 152° and click in the gradient to adjust the colors. Drag the stop swatches to the position shown in the image above and choose a grey for the left stop swatch (click once on the stop swatch and then once in the Color field). You can play around with the effect till you get the result you want. These numbers and info are just as a guidance and what I've used to achieve my result.
Step 4 - Add shading effect to the image
To achieve an even more realistic effect, we add a depth/shading effect on the picture itself as well. Double click on the right of the layer that holds your picture to get to the Layer Styles options. Again, check the Gradient Overlay option. Set the Angle of the gradient to 152°, choose Multiply as Blend Mode (to filter out all the white) and click in the gradient to adjust the colors. Drag the stop swatches again as before to the position shown in the image above. As an extra you can check the Drop Shadow effect in the Layers Styles options as sort of realistic finishing touch.
Want to learn more?
A good and not expensive source to learn more about Illustrator, Photoshop, or web design is by joining the Tuts+ sites. You get access to the source files for just $9 a month. So your ONE membership gives you access to members-only content for ALL the Plus sites. I've written a tutorial for the Vector Tuts section.
57served
1
Nice technique! Too bad you have to redraw the corner after wrapping the image.
I remember doing this by using some ‘template’ layers that I made in Illustrator and a mask to hide the bottom corner of the image (I don’t think you really need any pixels from the image underneath). But still, your method is much faster!
Curled corners bring back some memories. Does anyone remember Corel PhotoPaint. It had the effect built in since 1995 or so :)
2
Absolutely beautiful. Perfect tutorial. Thanks for sharing the procedure!
3
Very nice! I know I’ll be using this down the road.
4
Thanks for this tutorial. But I have to note, that sometimes it´s a little bit difficult to do a tutorial example for non-english speaking people. But the result adequate awards…
5
Nice!
especialy with the Gradient overlay on the phtoto. Thanks.
I always hate the part where you have to draw the curl back with pen tool
6
All the images on your site are corrupt :/ (even css-background, including the navigation etc). I’ve tried emptying my cache aswell. I’m getting it across several browsers (IE/Firefox2.0/Opera).
Something wrong? Just tell me if you want screens or anything. :(
I hope the tutorial is good because I cant follow it. Judging from step 2 (which is the only pic im getting) you do it just like I do though.
7
Excellent tutorial. I wish photoshop’s warp function had method to set the back side color of a layer though. Then you wouldn’t have to mess with drawing it in manually. Maybe in CS3 =)
8
Think it your computer buddy, everythings fine in here :)
Done by many other sites in the past, but it’s always practicle in some cases !
Good article veerle
9
Thanks for the great tutorial. It’ll be usefull, sooner or later.
10
As always, another fantastic tutorial.
Thanks!
11
Fredrik Wärnsberg said:
I think it must a problem on your computer. Personally I didn’t see anything wrong and 4 more friends said they see everyting OK also. More readers would mail if all my images were corrupt I think. Hope you sort it out.
12
Thanks for the great tutorial! Keep servin’ ‘em up!
13
Thanks for the tutorial and the link!
14
Thanks i was looking for a tutorial like this, easy and perfect, thank you very much.
15
Veerle,
Great tutorial, top notch as usual! I was wondering though, what are the fonts use for the ‘Summer 2006 Paris’ paper-clipped stamp like thing?
On the introduction image?
And yep, I can confirm that everything on your site looks just fine to follow up the post by Fredrik Wärnsberg.
Thanks,
Richard
16
Veerle:
I’m seeing the same as Fredrik. Here’s a screenshot: http://bildr.no/view/25008
FF 2.0 Intel on a Macbook running OS X
17
Simple, but effective :-)
Thank you Veerle ;-)
18
I was just looking for a tutorial on this the other day. My methods of trying to “wing it” didn’t come out as clean as this. Thanks!
19
Great tutorial (as usual). I just sat down earlier to write a tutorial and it’s difficult to make things sound so easy. Keep up the good work!
20
Thanks alot! I’ve always look forward to a tutorial by you:)
For a quite a while I use a less realistic flat dog-ear effect, now I can try out this new method
21
Great article. I live in photoshop and this is great for website themes and what not. I look forward to using it with my photographs.
22
you got dugg and the server still running. proficiat!
23
As always a really nice tutorial. Don’t know if pagecurls is something I’ll use alot, but great to improve my Photoshop skills :)
24
Hi Veerle,
Thanks for this excellent tutorial. Even though I don’t use page curls that much I’ll give it a try. It’s a nice add-on to my skills.
Cheers.
25
This brings back memories of the Kai’s Power Tools page curl filter that was seen used too frequently in the nineties.. oh sweet memories
Although the technique described above looks better than the KPT-filter
/E
26
Great tutorial.
Thank You
27
cool, interested to see how you made this effect.. not the only way, but quick.. more like this please :)
28
Very nice tutorial, and very nice effect too.
29
Elaborate! I keep a vector corner ready and lay it on top of the image then place it on top of the image and merge. Then trim at 45 degrees.
30
Very useful!
Thanks for share, Veerle!
31
Learn something again, I didn’t know about the wrap tool so I always skipped the first step :)
32
Wow, that’s very nice! Thanks for the tutorial!
33
Although I’m typically not a big fan of page curls it does make for a cute effect…as long as it is used sparingly.
I love your work! I’ve been a long time lurker to your site.
34
Here you go, I added a way to make the selection of the curl easier:
Pagecurl photo example
I used a picture I took of the lovely Eva Mendes as an example too!
35
Indeed, an inspiring website and you deserve the plaudits—this tute is succinct elegance. I love the way your own comments get special styling, like your mate’s @mezzoblue—how does one do this?
Respect. [p.s. started commenting purely based on the lurkin’ post]
36
I too am not that much of a fan of page curls, as they seem to have been over used.
But now seeing the page curl on the *right* image, I love it.
Well done
- Darryl
37
Very nice tutorial. It’s funny. If this were a real photograph we’d probably be trying to remove the curl, not add one ;-)
38
Thank you for your appreciation, I’m glad you like it :)
Roel said:
This was exactly my thinking too. It would be much easier if you have an option you could just check.
Richard said:
It’s Rosewood Standard Regular and Rosewood Standard Fill. I think it’s an Adobe font and it shipped with Illustrator or Photoshop CS or CS2.
Johan De Silva said:
Not sure what you mean with “elaborate”. Seems like you’ve found your own technique :) I guess this could work as well. Although I think the warp transform will make it a bit more real in the corner of the picture because it really transforms the pixels of the image, even though you overlap it with the corner.
39
Thanks for the great tutorial. I’m going to use that at work tomorrow!
T
40
Very useful! Thanks a lot!
My friend just asked, how do you draw the ‘Summer 2006 Paris’ paper, with the worn-and-cut effect on it :)
41
Great and simple technique! The example given by gavin is also a nice way of achieving this effect.
42
Cheers Veerle, I always wondered what it was, I’ve seen it quite a lot! I use Fireworks and Freehand (which suck in comparison to the Creative Suite… I really need to sort my life out and get that purchased!) :-D
43
Very nice technique - used to be something that people would overuse a lot though :(
44
‘Wrap’? You mean ‘Warp’ right? At least that’s what it’s called in my XP version.
45
Chip: you are right and I’ve fixed it, thanks ;) It’s weird no one, including myself, didn’t see this… maybe no one bothers, that’s OK of course. I often switch letters when typing and I can be so distracted sometimes that I just don’t see typos like this.
46
I’ve always been using just the pen tool to do the first step, I’ll try the rectangle/warp next time, it looks a lot easier!
47
Ah, the dreaded page curl. I remember when it got so popular someone up and made a photoshop plugin for it.
Here is a picture.
48
wow thanks for your time in explaining this… i guess i have never tried it before… but you’ve just enabled me!
49
what version of Photoshop this is ?
I have CS, version 8, there is no such thing as warp :(
50
Cool. I just wish I had CS2. Great work!!
51
Great tutorial, CS2 is hands-down the best PS so far.
For those who hate the pen tool, or don’t know how to use it, they can always just select the Magnetic Lasso tool, set its frequency to “1” and trace the curl. Then create a new layer and fill it with color.
Veerle, how about a simple tutorial on how to use the pen tool? ;-)
52
Whish I took the creative site, in instead I went the opposite way: business. And now I fing myself trying to make things in my spare time because I love doing it. I am just very bad at it. So when you come accross a bad and moody day remember that your not always alone.
LOVE R WORK !
GhaM
53
Nice, Thanks for this!!
54
i still dont know how to do it..help
55
Nice tutorial.
I have written a similar one in the past here that basically uses the same technique with some small differences. There is also a Photosho action for the lazy ones :)
56
BRILLIENT TUTORIAL! step by step, i’m still learning the basics so tutorials like this help a lot. cheers
57
the tutorial looked really easy to understand. A big plus for novices like myself.
Unfortunately with Photoshop 10, there is not “transform>wrap. can you offer another way to do a page curl?