{"id":484,"date":"2012-05-14T10:00:22","date_gmt":"2012-05-14T15:00:22","guid":{"rendered":"https:\/\/keithcchan.com\/?p=484"},"modified":"2012-05-14T11:05:46","modified_gmt":"2012-05-14T16:05:46","slug":"the-making-of-an-icon","status":"publish","type":"post","link":"https:\/\/www.keithcchan.com\/wordpress\/2012\/05\/the-making-of-an-icon.html","title":{"rendered":"The Making of an Icon, Part 1"},"content":{"rendered":"

When I made the original Mac-only Anthropomotron, I had to make its icon as well. Back then I thought it would be neat to make an ‘A’ shape using a femur and calipers. The result was this:<\/p>\n

\"\"<\/p>\n

As I’ve said before<\/a>, a lot has changed since 2004. Icons nowadays are even fancier and the old Anthropomotron icon was barely acceptable even for that time. I decided that I would take another stab at making the Anthropomotron icon.<\/p>\n

Apple has written icon design guidelines<\/a> for iOS apps (and one for Mac icons<\/a>).\"\"They’re a fascinating read for those interested in graphic design. They emphasize a sort of shiny realism: realistic elements but simplified. I’ve also liked the generic Mac app icon, which also has an ‘A,’ with a ruler as the crossbar. One of the things i didn’t like about the old Anthropomotron icon was that it didn’t look definitively like an ‘A.’ It kind of looks like an ‘R.’ For the new icon I decided to add a clearer crossbar, adding a ruler to the picture. I drew the concept and scanned it into Illustrator:<\/p>\n

\"\" I was happy that my drawing skills have improved since 2003. But, there are a few problems. While the proportions are realistic, the legs of the ‘A’ are very thin. If the entire ‘A’ is visible, the shapes become ambiguously small.<\/p>\n

\"\"<\/p>\n

Also, I’m used to the comic art style, which has black outlines defining the shapes. That’s not realistic. I tried to solve these two issues by removing the outlines in Photoshop and zooming in the image so the ruler is along the bottom edge of the image:<\/p>\n

\"\"<\/p>\n

I thought this was better, but it’s still missing something. It seemed to lose a lot of its ‘A’-ness in this alignment. A little frustrated, I grudgingly went to bed. After a few minutes of laying there, I bolted out of bed, fired up Photoshop again, and did this:<\/p>\n

\"\"<\/p>\n

Tilting everything worked! I saved that, and slept like a baby. The next day I worked towards making the final draft of the icon. I made the blue and yellow match the actual colors in the app. Then I added some textures to the three elements (wood, metal, and actual femur texture), and some gradients and shading for depth. This is the final Anthropomotron icon for iOS:<\/p>\n

\"\"<\/p>\n

Next: a step backwards for the Android icon!<\/p>\n","protected":false},"excerpt":{"rendered":"

When I made the original Mac-only Anthropomotron, I had to make its icon as well. Back then I thought it would be neat to make an ‘A’ shape using a femur and calipers. The result was this: As I’ve said before, a lot has changed since 2004. Icons nowadays are… Read more“The Making of an Icon, Part 1”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[20],"tags":[141,49],"class_list":["post-484","post","type-post","status-publish","format-standard","hentry","category-anthropology","tag-anthropomotron","tag-webdesign"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.keithcchan.com\/wordpress\/wp-json\/wp\/v2\/posts\/484","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.keithcchan.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.keithcchan.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.keithcchan.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.keithcchan.com\/wordpress\/wp-json\/wp\/v2\/comments?post=484"}],"version-history":[{"count":0,"href":"https:\/\/www.keithcchan.com\/wordpress\/wp-json\/wp\/v2\/posts\/484\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.keithcchan.com\/wordpress\/wp-json\/wp\/v2\/media?parent=484"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.keithcchan.com\/wordpress\/wp-json\/wp\/v2\/categories?post=484"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.keithcchan.com\/wordpress\/wp-json\/wp\/v2\/tags?post=484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}