Archive for February, 2009

Howto: G1 Menu Icons • February 25th, 2009

I’ve been working on my new application on and off. It’s basically the earthquake RSS application that you make from the Wrox book. Only, I’m adding my own flare to make the application more polished, usable, and purposeful.

One thing I want all my apps to have, is a continuing theme that reflects the Android OS. This includes menu icons that keep with the theme. Many of the icons you can glean from the Android SDK, but they don’t provide everything that you need, so you have to make a few.

This is how you make an Android menu icon using Adobe Photoshop 7+.

Step 1: Make a new image.

g1icon_howto_01

Make a new image with a width and height of 48 pixels. Set the Contents to Transparent.

Step 2: Draw a shape.

g1icon_howto_02

There are many pre-made Adobe shapes that you can make with the Custom Shape Tool. Or, draw your own using the Pen.

Step 3: Add Inner Shadow Layer Effect

g1icon_howto_03

Open the Layer Effects wizard for your shape. Check the Inner Shadow box. Set Blend Mode to Multiply, Opacity to 60%, Angle to 90, Distance to 1, and Size to 2.

Step 4: Add Gradient Overlay Layer Effect

g1icon_howto_04

Check the Gradient Overlay Layer Effect. Set Blend Mode to Normal, Opacity to 100%, Left gradient color to #666666, Right gradient color to #999999, Style to Linear, Angle to 90, and Scale to 100.

You’re Done!

That’s it! All you have to do is save it as a 24 bit transparent PNG file. Save your Photoshop file to use it as a template. You can create new Layers with shapes in them, then copy the Layers Effects (alt drag-drop) from your first shape Layer.

Download this example (sample.zip)

Hope this Howto has been helpful!

Brenton