Designing the icons

Tool and format of the icon

I like to create basic icon’s for the app. At least, one of each kind of icon the app will be using. It’s quite a requirement because without icons, you won’t see the result of the UI, you won’t have the right dimensions or you will have to change your item template.

To design my icons, I always use Inkscape. Because I love SVG which is very similar to XAML. The SVG is vectorial : you will be able to export the icon in all the resolution you want without lost. That’s how you get rid off the crappy blurry icon you can sometimes see in a app that doesn’t provide all the resolution for a image resource. Plus, you can use the SVG made in HTML and at last but not least, you can do some crazy animations of the shape ! It will still remains vectorial and feels every screen :)

You can see a result of a SVG animation in my website: just go on any page except the home page. You will see my company name being animated with few lines of Javascript. I really think my animation isn’t that bad and it works on most of every browsers (even on mobile).

How to design your first icon

You may know there are different kind of icons. The application icon, the notifications icons, the other icons.
I’ll focus on the other icons which.
I start by setting up the kind of document I will use. I use the 64×64 size. I add some landmarks (I don’t know the english word). I add them so I can see the real size of my icon without the margin.

Available area in Inkscape.

Available area in Inkscape.

The landmarks to put the margin.

The landmarks to put the margin.

Then I start enjoying designing my icon. I always take a look before I start designing anything. Even the landmarks :)

Exporting the icon

To export the icon, I create a folder composed of the android dpi folder and an iOS folder. Then, I export the icon in the format 32×32. I choose the drawable folder. I export. I change the folder to high dpi and set the size to 48×48. Export. Repeat with xhdpi and 64×64. Again with xxhdpi and 96×96 and finally, 128×128 in the xxxhdpi folder. Once I have exported all those different resolution icon, I copy/paste the content of the folder xxhdpi inside the iOS folder, I rename every file with @3x.png. Then, I copy/paste the xhdpi content folder too. Rename those files with @2x. Finally, I copy/past the content of the drawable project (this time, no need to rename the files).

Normal size icon export

The folder of all icons exported.

The folder of all icons exported.

Normal size icon export.

I always export the xxxhdpi icon even if I don’t add them inside the application project (Xamarin). Thus, I don’t have to export everything again If I just want my icon to be 50% bigger. I just have to replace every file of my application project with a bigger icon. AS a result, my 48×48 hpdi becomes the dpi, the 64×64 xhdpi becomes the hdpi etc.