High Resolution App Icon for Google Play Publishing

When it comes to publishing your newly created Android App you will need to provide some graphics for use on the information page for the App in the Google Play (formerly Android Market) store. Information on the types of graphics required can be found on the Google Play Graphics Assets for your Application web page, or in our summary article. One of the required graphics is the High Resolution Application Icon, this is a 512×512 32-bit Portable Network Graphics (PNG) file. The alpha channel is allowed therefore the actual visible image can be smaller, e.g. occupying 470×470 of the 512×512, if a drop shadow or border space was required. The article Android Launcher Icons Using Inkscape showed how the High Resolution Application Icon can be generated from the same Inkscape image file as the App’s launcher icon. This tutorial is going to take the same image and add a rounded rectangle background to give the image a border and button appearance.

A Cup of CoffeeTo follow this example Inkscape needs to be installed and the Scalar Vector Graphics (SVG) file of the Cup of Coffee image available. If Inkscape is not installed get it from http://inkscape.org. The tutorial for the Cup of Coffee image is at http://vector.tutsplus.com/tutorials/illustration/creating-a-coffee-cup-with-inkscape/, alternatively download it from OpenClipArt.org. Open the image in Inkscape. To manipulate the entire image as a single entity group any component parts together. This involves selecting all the component parts (if not already grouped) with the Select All option of the Edit menu (or Ctrl-A) and selecting the Group command from the Object menu (or Ctrl-G).

Inkscape Create Rectangle ToolSelect the Create rectangles and squares tool. Click and drag from the top left of the image down to the bottom right, while holding down the Ctrl key to draw a square over the image. This is the basis for the background and it will be moved below the image when the border and colors have been set.

Drag Circles to Make Rounded CornersDrag one of the circles at the top right to create rounded corners on the square. Hold down the Ctrl key while dragging to make the corner radii equal on the vertical and horizontal. With the basic rounded corner square box drawn the next steps are to determine whether it requires a border (and if so how wide), choose any required colors and set other effects like filters or gradients.

Open Edit Objects ColorsA border can be applied by enlarging the stroke used to draw the square and giving it a different color from the squares fill color. With the square selected open the Fill and Stroke dialog by clicking the Edit Objects… icon on the Controls bar (or Shift-Ctrl-F).

Inkscape Fill and Stroke DialogOn the Fill and Stroke dialog there are three tabs to access settings. The settings for color, gradient, blur and opacity for both fill and stroke can be changed. The stroke style can be changed, which includes the width. For this graphic the rounded square will have a border color different from the fill.

Choose two colors for the fill and stroke, for example set the fill to Teal (0x008080 RGB) and the stroke to Navy (0x000080 RGB). On the Stroke style tab set the Width to 20 px (pixels). The rounded square can be made more attractive by using a gradient or adding a filter, there are lots of predefined filters that can be used.

(Select Color from PaletteNote that colors can also be set via the palette bar towards the bottom of Inkscape. If it cannot be seen use the Show/Hide option on the View menu and select Palette.)

Object Width in InkscapeAt this stage a colored square with a border has been drawn over the coffee cup image. Before applying a filter to the square to make it more attractive the underlying document size will be set to make exporting the PNG easier. The final document needs to be square to support the correct exporting. With the rounded square selected make sure the width and height are equal using the W (width) and H (height) boxes on the toolbar (the width and height may be slightly out, if so edit the values to make them equal). The values do not need to be the same as the final icon size. The correct size is generated when the PNG file is exported. The width and height are the current object size and can be much larger or smaller than the final image. This is because Inkscape manipulates images as vector files which scale without loss of detail. After checking the squares dimensions open the Document Properties dialog via the File menu. With the square selected click the Resize page to drawing or selection button and ensure that the Show page border checkbox is set (so you can see that the document matches the square.

Inkscape Lower SelectionWith the square selected use the Filters menu to apply an effect. Here the Button filter is applied from the Bevels filter option. (You could choose a different filter and also modify filter properties. Experiment with filters on another image to see what effects are possible. Note that some filters use a lot of processing power so may update the image slowly on older PCs). With the work on the rounded square completed make sure it is selected and click the Lower selection to bottom toolbar button (or use the End key or access the option via the Object menu).

Coffee Cup Button in InkscapeWith the coffee cup visible again select it, position it centrally (use the drag arrows to make any size adjustments). The final image is then ready for export.

Open the Export Bitmap dialog from the File menu. In the Width and Height boxes under the Bitmap size option enter 512 (ignore the dpi boxes, they will change automatically). Browse to a location and enter a Filename. Press the Export button. The image is now available for uploading to the Product Details page when the App is ready for publishing.

The principles covered in this article also apply to the generation of the other graphic files required for App publishing. Inkscape can be used to design those file before exporting them to PNG files at the correct size. See also the article Grabbing an Android Device Screenshot on how to get hold of the screenshot images needed to publish an App.

Leave a Reply

Your email address will not be published. Required fields are marked *

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.