Saturday, May 21, 2011

Create a paper with bent corners in Photoshop


Create a paper with bent corners in Photoshop
This tutorial shows you how to create a paper with bent corners in Photoshop. It may look simple but isn't for an inexperienced user. You should know the basics of drawing and using hte pen tool in Photoshop.
I was creating a design for a client a few days ago and needed to create a paper with a bent corner. And the I tought that this would be a great tutorial for Photoshop. A bent corner is a nice detail and looks great if you know how to use it. We’ll be creating only one bent corner in this tutorial because there’s no point repeating it. I don’t recommend adding more than two bent corners to a paper if you want to keep a design clean.

1. Create a new file in Photoshop

Create a new file in Photoshop, size about 500 x 500 px. I recommend a light background color, I chose light green.

2. Draw a white rectangle

Create a new layer and use the rectangle tool to draw a white rectangle like in the picture below.
01 paper bent corners Create a paper with bent corners in Photoshop Zavihani robovi Photoshop Bent corners

3. Add and remove anchor points

The top right corner of the paper will be bent so we need to add 4 anchor points, 2 to the each side of the corner and remove the one in the corner. When you’re done with adding and deleting the anchor points, try to create a shape like the one in the picture below. If you have any problems with it, you should copy this picture and paste it in Photoshop and draw on top of it (use it as a guide).
02 paper bent corners Create a paper with bent corners in Photoshop Zavihani robovi Photoshop Bent corners

4. Add gradient

We’ll be adding two gradients in this step, trying to make it more realistic. Select the vector mask of the paper layer. Do this by holding down the ctrl and clicking on the small square next to the white on in this layer.

Create a new layer. Add a gradient from black to transparent on this layer with gradient tool. I chose radial but it could as well be linear. Draw the gradient from the top right corner to the bottom left. Set the opacity to35% and blend mode to normal.

Now let’s add the second gradient. Create a new layer and add a small  linear gradient just on the right top corner (see picture). Set its’ blend mode to multiply and the opacity to 80%.
04 paper bent corners2 Create a paper with bent corners in Photoshop Zavihani robovi Photoshop Bent corners
When you added both gradients go to select > deselect.

5. Draw the bent corner

Here comes the fun part. Use the pen tool to draw the bent corner so it touches the top right corner of the paper (see picture). Although it’s not difficult to draw this with the pen tool, it’s sure much easier if you have some experience with drawing in Photoshop.

Here’s the update, explaining the step 5 in detail.
  • Start drawing the paper curl by adding the first anchor point with the pen tool (picture 1).
  • Add a new anchor point, hold the left mouse button down and drag it until you shape the curl like in the picture 2. Then hold down alt key and click on the anchor point you just made.
  • Step 3, picture 3: Add a new anchor point and hold down the left mouse button, drag it until your shape looks similar to the one in the picture. Hold down the alt key and click on the anchor point you just made.
  • The final step is really easy: just click on the first anchor point, so the shape is complete.
05 3 paper curl Create a paper with bent corners in Photoshop Zavihani robovi Photoshop Bent corners

When you succeed, change the layer opacity to 70 % and add some drop shadow with these properties:
  • blend mode: multiply
  • opacity: 55%
  • Angle: 52 degrees
  • distance: 4 px
  • size 40 px

To make it even more realistic add the inner shadow with these properties:
  • blend mode: multiply
  • opacity: 19%
  • Angle: 52 degrees
  • distance: 16 px
  • size 27 px
05 2 paper bent corners Create a paper with bent corners in Photoshop Zavihani robovi Photoshop Bent corners

6. Done

I hope that instructions in this tutorial were written clearly enough. If you succeeded you should now have a paper with a bent corner, something like the picture below. If you have any questions or comments, leave a reply.

No comments:

Post a Comment