Dog Ear Tutorial
I’ve been seeing a lot of the dog ear element lately. The dog ear looks as if a page is being curled up or peeled back. If used correctly it can add depth to a flat design. The best ones I have seen are usually really subtle. They are applied to boxed elements or headers to make it look as if it is slightly peeling off the page. This element has been used in flash advertisements to make it look as if the website is being peeled back. I have also seen sights that use this in a corner of the site with text such as “Designed in Photoshop” or something similar. Here is a quick and dirty way to create this effect with Photoshop in 5 easy steps.
- Create a new file. For my example I created a 400px by 400px with a transparent background.
- Set your foreground color to the color you want the front side, and your background color to the color of the back side of the page.
- Apply a foreground to background linear gradient to color the upper right corner.

- Select Edit>Transform>Warp and drag the upper right corner to your desired amount of curl, and then hit Enter/Return.

- Add a drop shadow at an angle of -135º and Voilà!, you have a dog ear.

If you liked what you read you may be interested in subscribing to our RSS feed or email alerts. You may also want to read up about what RSS feeds are all about.