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 :)
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.
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).
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.