Have you seen these? I first spotted the “Rounded” drop shadow on Panic’s website. Later my designer co-worker Jeremy noticed them on another site.
This subtle little design element gives elements the illusion of a 3D curl at its center or edges. We thought they were awesome and wanted to figure out how to create them so we could incorporate them into pretty much every single project we work on.
Note: I am not a designer. I have never claimed to be and will never claim to be. I am at most a technician who sometimes facilitates good design.
After fiddling around for a while with Photoshop, I came up with this process for creating these elements. I fully expect there to be another better way so bring it on, but here’s what I came up with.
In the screen grabs I’m using GIMP (Kevin would be proud) but this can also be done in Photoshop or whatever else you use.
1. Select the element area for which you will create the shadow, save the selection, and make it into a new, duplicate layer.
2. Draw your drop shadow – use 90 degree (or only y axis) light and preferably make it a maximum of 10 or 12 pixels tall. You can play around with the color and/or opacity to get the desired result.
3. Re-select your original area (should not include your drop shadow) and cut or delete everything except the shadow.
4. Clean up. You generally won’t want the side shadows, so either brush out extra or select and cut it out.
5. Add a mask to your drop shadow layer and draw a radial gradient (black to transparent) from the center of your shadow to the edge (or a little past the edge) .
That’s it. You’re done. You can easily invert the mask to change whether it looks like the center or edges of your selection are “peeling off”. You can play with the opacity and position of your drop shadow and season it to taste.
Like I said, there’s probably an easier and/or better way to do this. I expect a full rebuke from the 8-bit design community, so let’s hear it.
[…] This post was mentioned on Twitter by Brian Notess, Fresh Roast Blog. Fresh Roast Blog said: Design Tutorials: “Rounded” Drop Shadow Thingy | ChurchCreate http://t.co/vQnhcp6 via @churchcreate […]