{"id":41,"date":"2009-01-24T15:03:00","date_gmt":"2009-01-24T22:03:00","guid":{"rendered":"http:\/\/www.connorgarvey.com\/blog\/?p=41"},"modified":"2011-07-24T07:43:23","modified_gmt":"2011-07-24T14:43:23","slug":"tutorial-for-creating-an-icon-for-an-android-button","status":"publish","type":"post","link":"https:\/\/connorgarvey.com\/blog\/?p=41","title":{"rendered":"Tutorial for creating an icon for an Android button: Part 1 of 2"},"content":{"rendered":"

Update<\/h2>\n

The Android developer site has some great icon guidelines<\/a> now.\u00a0 I recommend taking a look.\u00a0 If you have Photoshop or another program that supports vector shapes and drop-shadows, you can see the proper settings there.<\/p>\n

Nick says<\/p>\n

… you can do the whole thing in Inkscape without having to go into GIMP, by using a clip mask.<\/p>\n

Duplicate your arrow, then select both this and the inverse arrow and do Object > Clip > Set. The inverse arrow will be clipped to only show the content contained within the arrow shape.<\/p>\n

Introduction<\/h2>\n

For my Android application, Green Mileage, I created a number input dialog box.\u00a0 One of the buttons in the dialog is a backspace key.\u00a0 Right now, it’s just a button that says, “Back”.\u00a0 When typing, it’s function is not immediately intuitive, so I wanted to replace it with an ImageButton.\u00a0 To skip to the example, scroll down.<\/strong> Unfortunately, none of the Android icons look quite right.\u00a0 I found an image of a red X and a trash can.\u00a0 Neither would look like a backspace, so I decided to create my own.<\/p>\n

Since Android is open source, I assumed that Google would have created some kind of template for button images.\u00a0 I thought I would find a PSD, but after much searching, could not.\u00a0 Rather than pay $1,000 for Photoshop, I decided to use open source applications to create the image.\u00a0 Here’s how I did it.<\/p>\n

Step 1: Get Inkscape and GIMP<\/h2>\n

Since this drawing will be made with vector graphics, it’s best to use a vector graphics program, so head on over to Inkscape’s web site and download it<\/a> if you don’t already have it.\u00a0 The post-processing will be done in GIMP, so grab a copy of that too<\/a>.\u00a0 Both have versions for Linux and Windows.<\/p>\n

Step 2: Create the Inkscape drawing<\/h2>\n

The points on the arrow should be evenly spaced, so they shouldn’t be drawn by hand.\u00a0 The arrow is really just a triangle with a rectangle dangling from its side.<\/p>\n

    \n
  1. This tutorial is about drawing an arrow shape, but you can use most of these steps for any icon.<\/li>\n
  2. First, let’s draw the arrow.\u00a0 Pick the polygon tool: \"Polygon<\/li>\n
  3. In the toolbar at the top of the screen, set these values.\n
      \n
    1. Corners: 3<\/li>\n
    2. Spoke ratio: 0.5<\/li>\n
    3. Rounded: 0<\/li>\n
    4. Randomized: 0<\/li>\n<\/ol>\n<\/li>\n
    5. In the drawing canvas click and hold.\u00a0 While holding the left mouse button, press and hold the control key.\u00a0 That will help you draw the triangle so that the right side is vertical.
      \n\"triangle\"<\/li>\n
    6. Select the rectangle tool and draw a rectangle for the right side of the arrow.\u00a0 Make it overlap with the triangle.\u00a0 Then, select both objects.\u00a0 In the menu bar, click Object -> Align and Distribute<\/em>.\u00a0 Click the “Center on horizontal axis” button.
      \n\"trianglerectangle\"<\/li>\n
    7. Now, with both objects selected, in the menu bar, click Path -> Union<\/em>.
      \n\"arrow\"<\/li>\n
    8. Android menu buttons have rounded corners and gradient fills.\u00a0 Let’s apply those next.\u00a0 With the arrow selected, in the menu bar, click Object -> Fill and Stroke<\/em>.\u00a0 Click the Stroke Style<\/em> tab.\u00a0 Select the round join and set the width to a high enough value that the corners look rounded.<\/li>\n
    9. Select the Stroke Paint<\/em> tab and pick the linear gradient.\u00a0 The gradient will appear sideways, but we’ll fix it later.\u00a0 Click Duplicate<\/em> to create an Android button gradient.\u00a0 Click Edit…<\/em> Select the first stop at the top of the window, then at the bottom of the window, set its RGBA value to 666b66ff.\u00a0 Set the second stop to b2afb2ff.<\/li>\n
    10. Select the Fill<\/em> tab, create a linear gradient and set it to the one you just created for the stroke.<\/li>\n
    11. Close the Fill and Stroke<\/em> dialog.
      \n\"horizontalgradientarrow\"<\/li>\n
    12. To rotate the gradient, click the gradient tool, \"gradienttool\".<\/li>\n
    13. You’ll see two handles.\u00a0 Drag the lighter side to the top of the arrow and the darker side to the bottom.\u00a0 The handles will snap in to place.
      \n\"gradientarrow\"<\/li>\n
    14. Android menu buttons also have an inner shadow.\u00a0 Make a copy of the arrow away from the original arrow and draw a rectangle around it.\u00a0 Make it a good amount larger.\u00a0 Align the rectangle and the arrow the same way the triangle and rectangle were aligned before.\u00a0 Then, select both the rectangle and the arrow and in the menu bar, select Path -> Exclusion<\/em>.\u00a0 Set the fill of the new shape to black and the path to the same gradient as the arrow, ensuring that the gradient minimum and maximum are aligned to the arrow, not the box.\u00a0 Make a duplicate of the new shape and set it aside for use later.
      \n\"inversearrow1\"<\/li>\n
    15. Select both the original and the new, inverse arrow and align them horizontally and vertically.<\/li>\n
    16. Select the larger, inverse arrow and open its Fill and Stroke options,\u00a0 move the blur slider to the right until it looks like a shadow.\u00a0 Also adjust the alpha of the fill option until the arrow looks like it has an inner shadow.\u00a0 Don’t worry if the space outside of the arrow doesn’t look right.\u00a0 Then, since Android’s shadows are offset, move the inverse arrow down and to the right a bit.\u00a0 The arrow keys are good for this.
      \n\"offsetshadowarrow\"<\/li>\n
    17. Now, in the copy of the inverse arrow you made, set the stroke to white and the fill color to black.<\/li>\n<\/ol>\n

      Go to part 2<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

      O<\/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-41","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-F","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/connorgarvey.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/41","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=41"}],"version-history":[{"count":11,"href":"https:\/\/connorgarvey.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/41\/revisions"}],"predecessor-version":[{"id":53,"href":"https:\/\/connorgarvey.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/41\/revisions\/53"}],"wp:attachment":[{"href":"https:\/\/connorgarvey.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=41"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/connorgarvey.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=41"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/connorgarvey.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}