While I was working on the requirements and high level design.  However, I cannot seem to stay away from forward “development.”  I thought that since there is no real design in the Icons, and I need to know how to do it, I could experiment with that today and get some  visual forward progress without truly working on the coding.

Now back to how to Create an Icon

Last time we talked about the technical development on “How to build and app..” I created a simple logo.  It was not much, but I like the simplicity of three primary shapes in the three primary colors (Red, Green, and Blue).  This post describes how to create the various icons needed by the Mobile device.

Note:  If you did not create your Logo / Launcher with the following requirements, do not continue.  Keep in mind, you can create a larger image and scale down.  You can also use a vector image; it does now matter.  However, you need to do this now, or be warned, you will do this again later.

• 32-bit PNG (with alpha)
• Dimensions: 512px by 512px
• Maximum file size: 1024KB

For the complete list, (it is why too much information for what we need now.  Click here).

Android

I started the idea of the post with trying to solve the question “How do I use something other than the standard Android icon to luanch my software?”  It then turned into, what other icons are needed, and what are their formats?  After a wide range or research, I found there are three Icons that the Android OS cares about.  I expect there are more, but I have only found three so far.  I am copying information from the Android Style Guide, and providing the link, for those that wish to read more.

I also found there is a tool for Android, called Asset Studio, that does much of the resizing and publishing of the icons  This reduced the administrative work required, but at a minimum a Launcher, Notification, and Action Bar Icons are needed. Generally each icon only needs to be developed once and Asset Studio will take care of the rest.

Launcher Icon – This icon is what is shown on the desktop and in the install menu.

Action Bar and Menu Icon – This is the icon that often gets displayed to the Left of the Name in various locations throughout the OS.

Notification Icon – This is a simple, negative image, of the Icon above that is used when notifications are pushed to the Device.

What are the sizes required?  Please, read this link (it is the same as before).  However, it is very important, so, if you did not read it before, read it now.  I missed a couple of concepts my first read, and it caused me extra work at the time, and more work I still have to do in the future.

<Asset Studio>

Launcher Icon

Taking my default Icon, and feeding it through the Asset Studio, I got a poor launcher Icon, so I went back and adjusted my dimensions such that I was much closer to the edge.  This helped tremendously, and was a fairly simple resize.  Below are the original image, and the translation into a launcher icon from Asset Studio.

<Logo>

<Launcher Icon>

Action Bar and Menu Bar Icon

Taking the same Logo above, and translating it into an Action Bar Icon created an aweful image.  I had to go back and adjust it to be cleaner.  I tried that once, and still failed, so I had to create a flattened version of the icon so that Asset Studio could translate the icon correctly.

<Oringial>

<Next>

After doing that once, I realized my use of negative space did not sit right with my eyes, and went through a number of translations until I was happy with the end result.  The big difference in these by changing where the negative space was outlined each of the images, circle/square/triangle differently.

<More>

I eventually realized that Since the Triangle was the image in the front, it needed to be outlined with Negative Space.  The Circle and the Square would loose area, but keep definition.  I tried outlining them in various ways, but determined that the Circle would then be more dominate.  Eventually it became a simple 2d layered drawing: Triangle in the front, Circle in the middle, and Square in the back.  This visually worked so I stuck with it.

<Final>

Notification Icon

By this point, I think I actually created a Notification Icon in step 2, and I am OK with that.  After inputting the same Icon from the Action Bar into the Notification Icon, I got the same result.  At least I know how to draw the icons, and some of the mental pain that went into them.  I may adjust the Action Bar Icon later, but for now, I am OK with leaving the icons this way.

Aftermath

I have three Icons, and the Asset Studio has created all the sizes for each of the different densities.  While reading, but after completing the Launcher icon, I found out that Google Play requires a larger Launcher Icon that is used by the store.  It can have a price, “lite,” or other simple additions to it.  Unfortunately, this is a higher scale (512×512) than my Launcher is now.  This means I need a higher resolution image.  I did read one post that states all Icon work should be done with Vector images, and I did find piece of software that could be a good candidate for doing the artwork.  It is called inkscape.

The other item I noticed is some of the images that Asset Studio shrunk, became a little blurred.  They are definitely OK for most applications, but I could see wanting to go back in and cleaning up those images.  Honestly, it would not be that much effort, and it would make the smaller icons a lot nicer.

Maybe that is something I can try with vector images.  However, I am not really interesting in jumping into a new piece of software at this point, so I’m calling this complete for now.  I have an Icon that installs, and overall, the project is starting to look more polished, even if I have to do this again later.

I wonder when I will be able to code again…