How to make an Android menu icon using Inkscape

-
The Android 2.3 Gingerbread menu icons have a standard look and feel to them, according to the Android Menu Icons Design Guide at http://developer.android.com/guide/practices/ui_guidelines/icon_design_menu.html. It is possible to use Inkscape to create menu icons for Android as illustrated in the steps below.

Create and setup the document

  1. Run Inkscape. Select File | Document Properties.

    The Document Properties dialog box appears.
  2. In the Width and Height fields, type in the largest menu icon hdpi size e.g. 72 pixels. Close the dialog box.

  3. Use the Create Rectangles and Squares (F4) command and place a square on the page to serve as the recommended bounding box 48x48 pixels for the icon.
  4. Select the rectangle. Change the Width and Height to 48 pixels.
  5. Select Object | Align and Distribute.

    The Align and Distribute pane appears.
  6. Set the Align Relative to Page. Click on the Center to Vertical Axis and Center to Horizontal Axis buttons.

  7.  Select Layer | Layers.

    The Layers pane appear.
  8. Rename the layer to Guide 48x48.

Construct the icon
  1. In the Layers pane, add a new layer above the Guide layer and name it as Star.

  2. Click the Create Stars and Polygon (*) command. Place a star on the page.

  3. Select the star. If necessary, change the fill to black and remove the stroke.
  4. In the Align and Distribute pane, click the Center to Vertical Axis and Center to Horizontal Axis buttons to align the star to the center of the page.

  5. Select Object | Fill and Stroke.

    The Fill and Stroke pane appears.
  6. Click the Fill tab. Change the type to Linear Gradient. Click the Edit button.

    The Gradient editor dialog box appears.
  7. For the first stop, type in 8c8c8cff in the RGBA field.
  8. Select the second stop in the combo box. Type in b2b2b2ff in the RGBA field. Close the Gradient editor.

  9. Now click the Edit Paths by Nodes (F2) command. Click on the star.
  10. Move the gradient handles so that the dark stop is at the bottom and the lighter stop is at the top.

  11. In the Layers pane, make a duplicate of the star layer below the Star layer. Lock the duplicate layer. Turn off the Guide layer. 
Create the shadow and highlight effects
  1. In the Layers pane, click the Star layer to make it active.

  2. Click the Create Rectangles and Squares (F2) command. Place a rectangle which covers an area larger than the page.

  3. Select the star and the rectangle together.
  4. Select Path | Exclusion.

    An inverse of the icon is created.
  5. Select the inverse icon and change the fill to black and the stroke to white.

  6. In the Fill and Stroke pane, click the Fill tab. Change the Blur to 4.0. Change the Opacity to 50.

  7. Use the arrows in the X and Y fields to nudge the shadow a few times to the right and bottom.

  8. Now select the copy of the star icon. Press CTRL+C to copy it to the clipboard.
  9. In the Layers pane, select the Star layer which contains the shadow and highlight effects to make it active.

  10. Select the star and the shadow and highlight effects.
  11. Select Object | Group.

    The icon and the effects are grouped together.
  12. Select Edit | Paste in Place.

    A copy of the star icon is placed on top of the group.
  13. Select the star and the group.

  14. Select Object | Clip | Set.

    The menu icon is created.
Export as PNG
  1. Select File | Export Bitmap.

    The Export Bitmap dialog box appears.
  2. Select Page.
  3. In the Width and Height fields, type in the appropriate pixel dimensions for the Android hdpi, mdpi, ldpi resolutions.
  4. Select the output folder and filename. Click Export.

    The Android menu icon is created

Comments

Post a Comment

Popular posts from this blog

Image background removal using Krita

-
Image
Like other image editing software such as Gimp or Photoshop , Krita has similar tools to remove the background of an image non-destructively using transparency masks. The following steps show how: Open up an image in Krita . In the Layers pane on the right, mouse right click on the paint layer. A pop up menu appears . Choose Add | Transparency Mask . A transparency mask sub layer is created underneath the paint layer . Draw a selection polygon roughly around the foreground object in the image using the Polygonal Selection Tool , as shown below. Then in the File menu, click Select | Invert Selection . Choose Black as the foreground color. Choose a Brush e.g. Basic-1 Ink . Make sure the transparency mask layer is selected or active. Then paint over the background. Choose Select | Deselect to remove the selection polygon. The marching ants selection polygon is removed . Make the brush size smaller and zoom closer  to the background - foreground boundary. Brush over t...
Read more

Create an embossed text effect using Inkscape

-
Image
I learnt how to use Inkscape to create a 3-D embossed effect on text objects simply by using the text object's fill blur property. An example of the effect is shown in the image below. The following steps show how the effect was created on an existing text vector drawing. In Inkscape , open up the Fill and Stroke pane by selecting Object | Fill and Stroke  in the menu bar. Press F1 . Click on the text object. The text object is selected with handles around it . Press CTRL+C . The selected text object is copied to the clipboard . Press CTRL+V twice. The text object is duplicated twice . Press F8 . Click on one of the text object. In the Fill and Stroke pane, click the Fill tab. Change the selected text object's  fill color to black . In the Fill and Stroke pane, adjust the Blur property to define the emboss effect e.g. 10 . The selected text object is blurred . Press F8 . Click on another text object. In the Fill and Stroke pane, click the Fill tab. Adj...
Read more

How to copy and paste the color from one object to another using Inkscape

-
Image
In Inkscape , it is possible to copy the color from one object to another object using the Pick Color   tool. This saves a bit of time since you don't have to note down the source color and type in the new RGB color values in some dialog box.  To illustrate how to do this, see the following steps. In Inkscape , click the Pick Color tool    icon in the left tool bar or press F7 on the keyboard. The cursor changes to an eye dropper . Hover the cursor over the object with the source color e.g. green S , as shown below. Then press CTRL+C . The color underneath the cursor is copied over to the clipboard . Then click the Select and transform objects tool or press F1 . Now click on the object to be changed, e.g. blue G , as shown below. Press CTRL+V . The selected object's color is changed from blue to green. 
Read more