Design Oahu

Web design blog from the middle of the pacific.

Dog Ear Tutorial

Dog EarI’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.

  1. Create a new file. For my example I created a 400px by 400px with a transparent background.
  2. 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.
  3. Apply a foreground to background linear gradient to color the upper right corner.
    Apply Gradient
  4. Select Edit>Transform>Warp and drag the upper right corner to your desired amount of curl, and then hit Enter/Return.
    Apply Warp
  5. Add a drop shadow at an angle of -135º and Voilà!, you have a dog ear.
    Apply Drop Shadow

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.

6 Comments

  1. Comment by Taurus on January 18, 2009

    О, это что-то, недавно где-то уже о таком слышала. Ваше мнение имеет основание быть. Вы понимаете то, о чем пишите. Немного почитав, хотелось бы узнать больше.

  2. Comment by XanDer on January 20, 2009

    Прикольно, такое не часто прочитаешь. Не всякий дурак до такого додумается. Да если бы это было кому-нибудь интересно, наверное было бы больше комментариев.

  3. Comment by Коля on April 10, 2009

    Thans, great bloog!!!

  4. Comment by Коля on April 10, 2009

    Good informations!

  5. Comment by Коля on April 18, 2009

    Интересная информация, спасибо за объяснение как работать с системой, thans!

  6. Comment by Barbra on May 25, 2009

    What about in Photoshop 7? There is no wrap function.

Leave a Comment

6 Comments and Trackbacks »