At this point, I'm thinking of just using CSS 3, esp. since I'm a programmer, but I'd like to do this with Photoshop because I think it's nicer since I'm working with images anyway, among other reasons...
Before I move on, my first question is:
Is there a place like SuperUser for designers (or for Photoshop-like or questions)?
What I Want:
I want the icons on http://www.mattdipasquale.com/ to look like those on http://about.me/mattdipasquale. About.me has an outdated Twitter icon and does not have icons for GitHub, StackOverflow, etc. So, although I like the look of their icons, I want to be able to create these icons myself instead of using their versions.
What I Have:
I have different iphone icons, like the Facebook iPhone icon, Twitter iPhone icon, etc., that I got from iTunes, using Firebug to find the URL of the background image. I opened them up in Photoshop and pressed option + command + i to reduce the image size to 32px x 32px with Bicubic Sharper (best for reduction). I now have a square icon layer.
Closing the Gap:
In addition to the icon layer, I want to have a clipping-mask layer that will apply the 5px rounded-corners, 1px stroke, and 1px bevel. (Note: I just want to apply effects to the edges of the icon because the gloss and other effects are already encoded in the iTunes image. Also, I'm just guessing about the pixel values, but I want it to look good, like the icons on about.me.)
What settings should I use for the blend options to make the icons look good, like iphone icons or those used by about.me?
Why a Clipping Mask?
The reason I want to use a clipping mask is that I want ease of reproducibility. I want to be able to apply the same styling to other square icon layers by simply replacing the square icon layer and then saving for web. If there is a better way to achieve such ease of reproducibility, please suggest it. I've seen Photoshop iPhone icon templates, but I couldn't figure out how to use them with my own images.
Thanks!
Matt
