Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

I've seen design elements on webpages that contain a "bent paper" effect. In other words, it looks like the paper is shaped in an arch, based on the visual perception of the shadow.

How do I achieve this?

EDIT:

I found an image:

alt text

share|improve this question
    
Do you have a link that shows an example of what you're looking for? –  squillman Jan 5 '11 at 22:07
    
@squilman - Actually, no. I did it once, but I'm not happy with the results. –  Moshe Jan 5 '11 at 22:08
    
Something like the Welcome New Users box at top right of programmers.stackexchange.com? –  e100 Jan 5 '11 at 22:43
    
@e100 - screenshot please? –  Moshe Jan 5 '11 at 22:44
    
Are you talking about a dog-ear? Have a look here: google.com/imgres?imgurl=http://archive.amol.org.au/… –  squillman Jan 5 '11 at 23:01
show 2 more comments

2 Answers

up vote 14 down vote accepted

Shadow gives the perception of how the paper is bent. alt text

In this screen shot, the two yellow rectangles are identical. To achieve the shadow effect, just duplicate the rectangle layer, fill it with black and blur 2-3px. then edit->transform->warp to bend the shadow shape. you want to move the shadow layers by a few pixels to the direction that's against the imagined light source. also play with the transparency too.

share|improve this answer
add comment

You do a shape that is the bent paper (a triangle, preferably) with a gradient to give the illusion of a bent shape and a shadow below (just duplicate the shape layer, fill it with black and lower opacity, or try using Drop shadow in Layer Effects). The more time you spend on the details the better it will of course look, but this is the basic idea. Make sure you got the direction of the light consistent with any other light in the design.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.