{"id":59,"date":"2009-01-25T14:14:55","date_gmt":"2009-01-25T21:14:55","guid":{"rendered":"http:\/\/www.connorgarvey.com\/blog\/?p=59"},"modified":"2009-09-11T04:26:36","modified_gmt":"2009-09-11T11:26:36","slug":"tutorial-for-creating-an-icon-for-an-android-button-part-2-of-2","status":"publish","type":"post","link":"https:\/\/connorgarvey.com\/blog\/?p=59","title":{"rendered":"Tutorial for creating an icon for an Android button: Part 2 of 2"},"content":{"rendered":"

This is part 2 of this tutorial.\u00a0 Click here to see part 1<\/a>.<\/p>\n

    \n
  1. You should have two shapes in Inkscape.
    \n\"offsetshadowarrow\"\"arrowmask\"<\/li>\n
  2. Now, you have to get these into the GIMP.\u00a0 The easiest way is to take a screen shot.\u00a0 To do that, in GIMP, go to File -> Acquire -> Screen Shot<\/em>.\u00a0 Take two shots.\u00a0 Crop one to the shadowed image and the other to the black and white.<\/li>\n
  3. Pick the shadowed image and add an opaque layer mask.\u00a0 View the Layers<\/em> dialog.\u00a0 Right click the “Background” layer and click Add Layer Mask…<\/em><\/li>\n
  4. Pick the black and white image.\u00a0 Select the entire image and copy it.<\/li>\n
  5. Pick the shadowed image and in the layers dialog, click on the mask, to the right of the image.<\/li>\n
  6. Pick the shadowed image and paste.\u00a0 You should see something like the image below.\u00a0 Pick the move tool and drag the mask around until it exactly matches the shadowed arrow.
    \n\"alphaarrow\"<\/li>\n
  7. Now, crop the image to the arrow shape.<\/li>\n
  8. Right click on the floating layer and anchor it.<\/li>\n
  9. Right click on the mask layer and apply it.<\/li>\n
  10. Now, just save it!\u00a0 Remember to save it as a PNG so that the empty parts are transparent.
    \n\"finalarrow1\"<\/li>\n<\/ol>\n

    I hope this helps anyone else who needs more than the standard Android icons.<\/p>\n

    More updates:<\/p>\n

    Will S. created a wireless icon.<\/p>\n

    Great tutorial, and very easy to follow, thanks.
    \nI made a wifi icon, which can be found here:
    \n    http:\/\/digitalsquid.co.uk\/files\/2009\/08\/wifiicon.png<\/a>
    \n(you can use it if you want)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

    This is part 2 of this tutorial.\u00a0 Click here to see part 1. You should have two shapes in Inkscape. Now, you have to get these into the GIMP.\u00a0 The easiest way is to take a screen shot.\u00a0 To do that, in GIMP, go to File -> Acquire -> Screen Shot.\u00a0 Take two shots.\u00a0 Crop […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[57],"tags":[3,10,14,11,9,13,12,15,17,16],"class_list":["post-59","post","type-post","status-publish","format-standard","hentry","category-android","tag-android","tag-button","tag-gimp","tag-icon","tag-image","tag-inkscape","tag-menu","tag-open","tag-psd","tag-source"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1ql2n-X","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/connorgarvey.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/59","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/connorgarvey.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/connorgarvey.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/connorgarvey.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/connorgarvey.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=59"}],"version-history":[{"count":6,"href":"https:\/\/connorgarvey.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/59\/revisions"}],"predecessor-version":[{"id":157,"href":"https:\/\/connorgarvey.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/59\/revisions\/157"}],"wp:attachment":[{"href":"https:\/\/connorgarvey.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=59"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/connorgarvey.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=59"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/connorgarvey.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=59"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}