{"id":744,"date":"2012-01-27T13:48:48","date_gmt":"2012-01-27T18:48:48","guid":{"rendered":"http:\/\/mirthwerx.com\/?p=744"},"modified":"2013-02-25T22:14:41","modified_gmt":"2013-02-26T03:14:41","slug":"art-side-of-things-app-store-icon-design","status":"publish","type":"post","link":"http:\/\/www.mirthwerx.com\/index.php\/blog\/2012\/01\/27\/art-side-of-things-app-store-icon-design\/","title":{"rendered":"Art Side of Things: How we Designed App Store Icon"},"content":{"rendered":"<p>As we are still waiting on Apple&#8217;s review (come on Apple speed it up :(), I thought I would share the design process of &#8220;Catch the Monkey&#8221; app icon.<\/p>\n<p><a href=\"http:\/\/mirthwerx.com\/wp-content\/uploads\/2012\/01\/1111.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-746 alignleft\" title=\"111\" src=\"http:\/\/mirthwerx.com\/wp-content\/uploads\/2012\/01\/1111.png?w=150\" alt=\"\" width=\"135\" height=\"91\" \/><\/a>We knew what the icon would be right from the\u00a0beginning: &#8220;laughing monkey head&#8221;. \u00a0So I went off and start searching through all \u00a0the monkey drawings. \u00a0We nailed it down to 2 and eventually agree on the one from our title screen.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>Once we have\u00a0decided\u00a0on the monkey, the rest is the effects that go with it; below is the my first attempt:<a href=\"http:\/\/mirthwerx.com\/wp-content\/uploads\/2012\/01\/old.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-760\" title=\"old\" src=\"http:\/\/mirthwerx.com\/wp-content\/uploads\/2012\/01\/old.png\" alt=\"\" width=\"539\" height=\"138\" srcset=\"http:\/\/www.mirthwerx.com\/wp-content\/uploads\/2012\/01\/old.png 539w, http:\/\/www.mirthwerx.com\/wp-content\/uploads\/2012\/01\/old-300x76.png 300w\" sizes=\"auto, (max-width: 539px) 100vw, 539px\" \/><\/a><\/p>\n<p>We like the look; nice, clean, colorful, but it&#8217;s lacking &#8220;excitement&#8221;&#8230;<!--more--><\/p>\n<h3>2nd attempt:<\/h3>\n<p>This time around I dressed it up some more in the background. \u00a0This \u00a0achieved the feel that we want the icon to convey.<\/p>\n<p><a href=\"http:\/\/mirthwerx.com\/wp-content\/uploads\/2012\/01\/2nd.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-761\" title=\"2nd\" src=\"http:\/\/mirthwerx.com\/wp-content\/uploads\/2012\/01\/2nd.png\" alt=\"\" width=\"540\" height=\"150\" srcset=\"http:\/\/www.mirthwerx.com\/wp-content\/uploads\/2012\/01\/2nd.png 540w, http:\/\/www.mirthwerx.com\/wp-content\/uploads\/2012\/01\/2nd-300x83.png 300w\" sizes=\"auto, (max-width: 540px) 100vw, 540px\" \/><\/a><\/p>\n<p>We love the background effect, it sure feels exciting. \u00a0I was inspired by the Simpson&#8217;s episode &#8220;Mr. Sparkle&#8221; \ud83d\ude00<\/p>\n<p>Although we are happy with it, it is in my nature to give it another try, you never know it might just be even better than this one.<\/p>\n<h3>3rd attempt:<\/h3>\n<p>I played around with different back drops, none of them is better than the sun ray effect so I direct my\u00a0attention\u00a0to other elements&#8230;<\/p>\n<p><a href=\"http:\/\/mirthwerx.com\/wp-content\/uploads\/2012\/01\/3rd.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-762\" title=\"3rd\" src=\"http:\/\/mirthwerx.com\/wp-content\/uploads\/2012\/01\/3rd.png\" alt=\"\" width=\"540\" height=\"150\" srcset=\"http:\/\/www.mirthwerx.com\/wp-content\/uploads\/2012\/01\/3rd.png 540w, http:\/\/www.mirthwerx.com\/wp-content\/uploads\/2012\/01\/3rd-300x83.png 300w\" sizes=\"auto, (max-width: 540px) 100vw, 540px\" \/><\/a><\/p>\n<p>I dont know why but without the white frame the icon seems to be more &#8220;free&#8221;, more &#8220;out of box&#8221;, feels the excitement is amplified \ud83d\ude00<\/p>\n<p>Out of these 3 color the\u00a0initial pick is easy, red is out almost instantly because of how the monkey&#8217;s color is blending into the red.<\/p>\n<p>Blue and Green are the ones that we had debated for a while. \u00a0In the end green wins because is more &#8220;friendly, bright&#8221; and stands out compared with other app icons we&#8217;ve seen.<\/p>\n<h2>Final<\/h2>\n<p>so there you have it folks, look for this happy monkey icon in the app store soon \ud83d\ude42<\/p>\n<p><a href=\"http:\/\/mirthwerx.com\/wp-content\/uploads\/2012\/01\/real.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-741\" title=\"real\" src=\"http:\/\/mirthwerx.com\/wp-content\/uploads\/2012\/01\/real.png\" alt=\"\" width=\"150\" height=\"150\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>As we are still waiting on Apple&#8217;s review (come on Apple speed it up :(), I thought I would share the design process of &#8220;Catch the Monkey&#8221; app icon. We knew what the icon would be right from the\u00a0beginning: &#8220;laughing &hellip; <a href=\"http:\/\/www.mirthwerx.com\/index.php\/blog\/2012\/01\/27\/art-side-of-things-app-store-icon-design\/\">Read More <span class=\"meta-nav\">&raquo;<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"","footnotes":""},"categories":[206],"tags":[17,20,23,28,31,32,36,41,50,76,79,81,82,83,97,132,39,52],"class_list":["post-744","post","type-post","status-publish","format-standard","hentry","category-catch-the-monkey-2","tag-app-store","tag-art","tag-background","tag-bright","tag-catch-the-monkey","tag-character","tag-color","tag-design","tag-effect","tag-icon","tag-ipad","tag-iphone","tag-iphone-game","tag-ipod","tag-monkey","tag-132","tag-39","tag-52"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Art Side of Things: How we Designed App Store Icon - MirthWerx<\/title>\n<meta name=\"description\" content=\"As we are still waiting on Apple&#039;s review (come on Apple speed it up :(), I thought I would share the design process of &quot;Catch the Monkey&quot; app icon. We\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.mirthwerx.com\/index.php\/blog\/2012\/01\/27\/art-side-of-things-app-store-icon-design\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"LordYabo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.mirthwerx.com\/index.php\/blog\/2012\/01\/27\/art-side-of-things-app-store-icon-design\/\",\"url\":\"https:\/\/www.mirthwerx.com\/index.php\/blog\/2012\/01\/27\/art-side-of-things-app-store-icon-design\/\",\"name\":\"Art Side of Things: How we Designed App Store Icon - MirthWerx\",\"isPartOf\":{\"@id\":\"https:\/\/www.mirthwerx.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.mirthwerx.com\/index.php\/blog\/2012\/01\/27\/art-side-of-things-app-store-icon-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.mirthwerx.com\/index.php\/blog\/2012\/01\/27\/art-side-of-things-app-store-icon-design\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/mirthwerx.com\/wp-content\/uploads\/2012\/01\/1111.png?w=150\",\"datePublished\":\"2012-01-27T18:48:48+00:00\",\"dateModified\":\"2013-02-26T03:14:41+00:00\",\"author\":{\"@id\":\"https:\/\/www.mirthwerx.com\/#\/schema\/person\/9a9f053f7d8cc77819cc69ecb49c853b\"},\"description\":\"As we are still waiting on Apple's review (come on Apple speed it up :(), I thought I would share the design process of \\\"Catch the Monkey\\\" app icon. We\",\"breadcrumb\":{\"@id\":\"https:\/\/www.mirthwerx.com\/index.php\/blog\/2012\/01\/27\/art-side-of-things-app-store-icon-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.mirthwerx.com\/index.php\/blog\/2012\/01\/27\/art-side-of-things-app-store-icon-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.mirthwerx.com\/index.php\/blog\/2012\/01\/27\/art-side-of-things-app-store-icon-design\/#primaryimage\",\"url\":\"http:\/\/mirthwerx.com\/wp-content\/uploads\/2012\/01\/1111.png?w=150\",\"contentUrl\":\"http:\/\/mirthwerx.com\/wp-content\/uploads\/2012\/01\/1111.png?w=150\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.mirthwerx.com\/index.php\/blog\/2012\/01\/27\/art-side-of-things-app-store-icon-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.mirthwerx.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Art Side of Things: How we Designed App Store Icon\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.mirthwerx.com\/#website\",\"url\":\"https:\/\/www.mirthwerx.com\/\",\"name\":\"MirthWerx\",\"description\":\"Engaging Educational Games\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.mirthwerx.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.mirthwerx.com\/#\/schema\/person\/9a9f053f7d8cc77819cc69ecb49c853b\",\"name\":\"LordYabo\",\"url\":\"http:\/\/www.mirthwerx.com\/index.php\/blog\/author\/mirthwerx\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Art Side of Things: How we Designed App Store Icon - MirthWerx","description":"As we are still waiting on Apple's review (come on Apple speed it up :(), I thought I would share the design process of \"Catch the Monkey\" app icon. We","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.mirthwerx.com\/index.php\/blog\/2012\/01\/27\/art-side-of-things-app-store-icon-design\/","twitter_misc":{"Written by":"LordYabo","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.mirthwerx.com\/index.php\/blog\/2012\/01\/27\/art-side-of-things-app-store-icon-design\/","url":"https:\/\/www.mirthwerx.com\/index.php\/blog\/2012\/01\/27\/art-side-of-things-app-store-icon-design\/","name":"Art Side of Things: How we Designed App Store Icon - MirthWerx","isPartOf":{"@id":"https:\/\/www.mirthwerx.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.mirthwerx.com\/index.php\/blog\/2012\/01\/27\/art-side-of-things-app-store-icon-design\/#primaryimage"},"image":{"@id":"https:\/\/www.mirthwerx.com\/index.php\/blog\/2012\/01\/27\/art-side-of-things-app-store-icon-design\/#primaryimage"},"thumbnailUrl":"http:\/\/mirthwerx.com\/wp-content\/uploads\/2012\/01\/1111.png?w=150","datePublished":"2012-01-27T18:48:48+00:00","dateModified":"2013-02-26T03:14:41+00:00","author":{"@id":"https:\/\/www.mirthwerx.com\/#\/schema\/person\/9a9f053f7d8cc77819cc69ecb49c853b"},"description":"As we are still waiting on Apple's review (come on Apple speed it up :(), I thought I would share the design process of \"Catch the Monkey\" app icon. We","breadcrumb":{"@id":"https:\/\/www.mirthwerx.com\/index.php\/blog\/2012\/01\/27\/art-side-of-things-app-store-icon-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mirthwerx.com\/index.php\/blog\/2012\/01\/27\/art-side-of-things-app-store-icon-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mirthwerx.com\/index.php\/blog\/2012\/01\/27\/art-side-of-things-app-store-icon-design\/#primaryimage","url":"http:\/\/mirthwerx.com\/wp-content\/uploads\/2012\/01\/1111.png?w=150","contentUrl":"http:\/\/mirthwerx.com\/wp-content\/uploads\/2012\/01\/1111.png?w=150"},{"@type":"BreadcrumbList","@id":"https:\/\/www.mirthwerx.com\/index.php\/blog\/2012\/01\/27\/art-side-of-things-app-store-icon-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.mirthwerx.com\/"},{"@type":"ListItem","position":2,"name":"Art Side of Things: How we Designed App Store Icon"}]},{"@type":"WebSite","@id":"https:\/\/www.mirthwerx.com\/#website","url":"https:\/\/www.mirthwerx.com\/","name":"MirthWerx","description":"Engaging Educational Games","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mirthwerx.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.mirthwerx.com\/#\/schema\/person\/9a9f053f7d8cc77819cc69ecb49c853b","name":"LordYabo","url":"http:\/\/www.mirthwerx.com\/index.php\/blog\/author\/mirthwerx\/"}]}},"_links":{"self":[{"href":"http:\/\/www.mirthwerx.com\/index.php\/wp-json\/wp\/v2\/posts\/744","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.mirthwerx.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.mirthwerx.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.mirthwerx.com\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"http:\/\/www.mirthwerx.com\/index.php\/wp-json\/wp\/v2\/comments?post=744"}],"version-history":[{"count":0,"href":"http:\/\/www.mirthwerx.com\/index.php\/wp-json\/wp\/v2\/posts\/744\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.mirthwerx.com\/index.php\/wp-json\/wp\/v2\/media?parent=744"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mirthwerx.com\/index.php\/wp-json\/wp\/v2\/categories?post=744"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mirthwerx.com\/index.php\/wp-json\/wp\/v2\/tags?post=744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}