While I was working on the requirements and high level design.\u00a0 However, I cannot seem to stay away from forward “development.”\u00a0 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\u00a0 visual forward progress without truly working on the coding.<\/p>\n
Last time\u00a0we talked about the technical development on “How to build and app..” I created a simple logo.\u00a0 It was not much, but I like the simplicity of three primary shapes in the three primary colors (Red, Green, and Blue).\u00a0 This post describes how to create the various icons needed by the Mobile device.<\/p>\n
Note:\u00a0 If you did not create your Logo \/ Launcher with the following requirements, do not continue.\u00a0 Keep in mind, you can create a larger image and scale down.\u00a0 You can also use a vector image; it does now matter.\u00a0 However, you need to do this now, or be warned, you will do this again later.<\/em><\/p>\n For the complete list, (it is why too much information for what we need now.\u00a0 Click here<\/a>).<\/em><\/p>\n Android<\/strong><\/p>\n 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?”\u00a0 It then turned into, what other icons are needed, and what are their formats?\u00a0 After a wide range or research, I found there are three Icons that the\u00a0Android OS cares about.\u00a0 I expect there are more, but I have only found three so far.\u00a0 I am copying information from the Android Style Guide, and providing the link<\/a>, for those that wish to read more.<\/p>\n I also found there is a tool for Android, called Asset Studio, that does much of the resizing and publishing of the icons\u00a0 This reduced the administrative work required, but at\u00a0a 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.<\/p>\n Launcher Icon<\/strong> – This icon is what is shown on the desktop and in the install menu.<\/p>\n Action Bar and Menu Icon<\/strong> – This is the icon that often gets displayed to the Left of the Name in various locations throughout the OS.<\/p>\n Notification Icon<\/strong> – This is a simple, negative image, of the Icon above that is used when notifications are pushed to the Device.<\/p>\n What are the sizes required?\u00a0 Please, read this link<\/a>\u00a0(it is the same as before).\u00a0 However, it is very important, so, if you did not read it before, read it now.\u00a0 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.<\/p>\n <Asset Studio><\/p>\n Launcher Icon<\/strong><\/p>\n 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.\u00a0 This helped tremendously, and was a fairly simple resize.\u00a0 Below are the original image, and the translation into a launcher icon from Asset Studio.<\/p>\n <Logo><\/p>\n <Launcher Icon><\/p>\n Action Bar and Menu Bar Icon<\/strong><\/p>\n Taking the same Logo above, and translating it into an Action Bar Icon created an aweful image.\u00a0 I had to go back and adjust it to be cleaner.\u00a0 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.<\/p>\n <Oringial><\/p>\n <Next><\/p>\n 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.\u00a0 The big difference in these by changing where the negative space was outlined each of the images, circle\/square\/triangle differently.<\/p>\n <More><\/p>\n I eventually realized that Since the Triangle was the image in the front, it needed to be outlined with Negative Space.\u00a0 The Circle and the Square would loose area, but keep definition.\u00a0 I tried outlining them in various ways, but determined that the Circle would then be more dominate.\u00a0 Eventually it became a simple 2d layered drawing: Triangle in the front, Circle in the middle, and Square in the back.\u00a0 This visually worked so I stuck with it.<\/p>\n <Final><\/p>\n Notification Icon<\/strong><\/p>\n By this point, I think I actually created a Notification Icon in step 2, and I am OK with that.\u00a0 After inputting the same Icon from the Action Bar into the Notification Icon, I got the same result.\u00a0 At least I know how to draw the icons, and some of the mental pain that went into them.\u00a0 I may adjust the Action Bar Icon later, but for now, I am OK with leaving the icons this way.<\/p>\n Aftermath<\/strong><\/p>\n I have three Icons, and the Asset Studio has created all the sizes for each of the different densities.\u00a0 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.\u00a0 It can have a price, “lite,” or other simple additions to it.\u00a0 Unfortunately, this is a higher scale (512×512) than my Launcher is now.\u00a0\u00a0This means I need a higher resolution image.\u00a0 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.\u00a0 It is called inkscape<\/a>.<\/p>\n The other item I noticed is some of the images that Asset Studio shrunk, became a little blurred.\u00a0 They are definitely OK for most applications, but I could see wanting to go back in and cleaning up those images.\u00a0 Honestly, it would not be that much effort, and it would make the smaller icons a lot nicer.<\/p>\n Maybe that is something I can try with vector images.\u00a0\u00a0However, I am not really interesting in jumping into a new piece of software at this point, so I’m calling this complete for now.\u00a0 I have an Icon that\u00a0installs, and overall, the project is starting to look more polished, even if I have to do this again later.<\/p>\n I wonder when I\u00a0will be able to code again…<\/p>\n \n","protected":false},"excerpt":{"rendered":" While I was working on the requirements and high level design.\u00a0 However, I cannot seem to stay away from forward “development.”\u00a0 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\u00a0 visual forward progress without […]<\/p>\n","protected":false},"author":1,"featured_media":421,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[20,22,12],"tags":[52,51],"_links":{"self":[{"href":"http:\/\/www.stonemillkids.com\/index.php\/wp-json\/wp\/v2\/posts\/233"}],"collection":[{"href":"http:\/\/www.stonemillkids.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.stonemillkids.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.stonemillkids.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.stonemillkids.com\/index.php\/wp-json\/wp\/v2\/comments?post=233"}],"version-history":[{"count":1,"href":"http:\/\/www.stonemillkids.com\/index.php\/wp-json\/wp\/v2\/posts\/233\/revisions"}],"predecessor-version":[{"id":440,"href":"http:\/\/www.stonemillkids.com\/index.php\/wp-json\/wp\/v2\/posts\/233\/revisions\/440"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.stonemillkids.com\/index.php\/wp-json\/wp\/v2\/media\/421"}],"wp:attachment":[{"href":"http:\/\/www.stonemillkids.com\/index.php\/wp-json\/wp\/v2\/media?parent=233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.stonemillkids.com\/index.php\/wp-json\/wp\/v2\/categories?post=233"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.stonemillkids.com\/index.php\/wp-json\/wp\/v2\/tags?post=233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n