Generate application icons for publishing on Google Play and Apple Store

Here at in4ray we use Adobe Illustrator CS5 as a main tool for creating and delivering different kinds of graphic. During developing we have collected some tips&tricks which save for us time and we hope will work for you too.

In this post we want to explain how we use Adobe Illustrator CS5 for preparing application icons on publishing phase. So, at first please download Generate_Icons_Template.ai (.ai, 1.3Mb) and open it with Adobe Illustrator CS5.



You will see several dark-boarded rectangles with blue images of power ball from our last game "PowerBall" and notes beside it. These dark rectangles in terms of Adobe Illustrator called "artboards". In any .ai file you can create as many artboards as you wish. So, we have created two groups of artboards: five of them on the top, lets name it "Android" and ten - at the bottom, lets name it "Apple". The dimensions of artboards are identical to dimensions of application icons required for publishing by both Google Play and Apple Store. You can find more details about it here: "Google Play Launcher Icons" and "Custom Icon and Image Creation Guidelines".

Fig. 1 "Generate Icons Template. Artboard Tool."

Then you can click "Artboard Tool" (or Shift + O) and see all the artboards with their names placed in grey rectangle in top-left corner.

Fig 2. Artboard Tool selected. 1/ Artboard Tool, 2/ Artboard's name, 3/ Place to change artboard name

Then you can rename each artboard respectively to names of images which you want to receive on output. When you finish positioning of all the graphic on every artboard, select File -> Export from menu.

Fig 3. File export dialog. "Use Artboards" checkbox selected.

We recommend to export your icons as .png files as most suitable in case of vector illustrations. Then check "Use Artboards" checkbox, select folder where you want to export your set of icons and click "Save" button. If you choose .png files before, you will see "PNG Option" dialog.

Fig. 4. PNG Option dialog

Select options as on the image Fig 4. above and click OK button. Then go to the export place and... you have all your icons.

Of course in minor cases you still need to improve each icon manually in Adobe Photoshop but for simple icons with a few primitives our workflow with template works pretty well.

So, feel free to use this template for your own purposes and feedback us with remarks and questions.