Photoshop: Create Your Own Glossy Icons

I was feeling particularly crafty the other night and decided to make my own dock icon for my contacts. OSX Icon Masters be warned, I in no way followed your strict lighting and gloss standards put forth by Apple or the clowns in their Gloss 'n Shine Department. By clowns I mean geniuses, of course.

Step 1: Make a Sexy Shape

The rules in this tutorial can apply to any shape really, but here is the one I made. Basically, its a square with an oval on the top and bottom.

Step 2: Dupe That Sexy Shape

Make it a little darker. Stick it in the back (behave) - and bump it up a bit (behave twice, please).

Step 3: Tweak It, Sucka!

Select only the top portion of the back shape, and distort the tops in. This will create a small amount of perspective. Nothing crazy, friends. OH - I also brushed in a small amount of shading at the bottom of the front piece.

Step 4: Add A Hint of Light

Next, add a small spotlight of ominous glow at the bottom portion of the back piece. Then we'll add a small strip of light across the top. 1px will do.

Step 5: Metal Screen Framing, Part One!

This part's easy. Dupe the front layer, make it a nice gray, select and move the bottom part up, then transform the whole thing in about 15%.

Step 6: Metal Screen Framing, Part DEUX! (Final Part)

We'll get that metal look by creating a new angle gradient with the settings seen below. Also, for effect you'll notice I added a little inner shadow and a small stroke. Not necessary, though. VOILA!!!

Step 7: Keyboard Frame

Along the same lines, dupe and transform another copy of the front piece. Make it black, align it with the bottom of your front piece, and erase the top for a nice fade into the screen area.

Step 8: The Screen. Not the Screen Frame, The Screen.

In case confusion has set in, in this step we'll create the screen. Dupe the screen frame, transform it in a little - remove the efects layers, and darken it up. Add a small black inner shadow around the edges.

Step 9: Let's Reflect. Things on the Screen.

Step 10: The Ominous Glow Down Below.

Remember step 4? Do that again, for the bottom. OMINOUS GLOW!!!

Step 11: Rince and Repeat. For Le Top Piece.

yes.

Step 12: Keyboard, Part 1 of 4.

Lets make a simple Key. It can be anything you want, but just make one!

Step 13: Keyboard, Part 2 of 4: ROWS

Dupe that key a few times until you have something not in any way standard on cellphones - like the one below. Dupe the row 3, 4 or 5 times (again, lets keep this unrealistic people). On the bottom layer make sure you stretch out some room for a space bar.

Step 14: Keyboard, Part 3 of 4: L-L-L-LIQUIIFYYY!!

Now lets include a little warp-action by utilizing the most well-named Photoshop Filter ever. Ok - now keep it simple. start at the top row and push down a tiny bit. Use the pic below for reference. If you didnt use this shape, match it up to your specific curvature.

Step 15: Keyboard, Part 4 of 4: Place it!

Shrink it down and it'll clean up nicely in place with your keyboard frame you created previously. Add a little D-Shadow. Haha - Oh man, that's Step 15 for ya!

Step 16: Stank

Add some! Add some nice keyboard lighting, a NON-RECEDING headphone jack, and some buttons that do things.

Step 17: Finish Him!

All done!

In our next tutorial I'll show you how to add service to your Cell-Phone Icon.

Until Next Time!