Pour ce nouvel article, je vous propose mon premier vrai tuto sur la création d'une icône Android avec le logiciel de dessin vectoriel libre et gratuit Inkscape.
Icône Material Design Android
 |
| Logos Kevin Aguilar |
Sachez avant toute chose que ce tutoriel est né car il n'est pas aisé de créer une icône de lancement d'application Android qui respecte les conventions du Material Design de Google.
Ces différentes conventions sont définies sur la page officielle que je vous conseille de lire pour plus de détails.
Les résolutions
La création d'un logo Android est meilleure avec un logiciel de dessin vectoriel car le logo aura besoin d'être exporté sous 6 résolutions différentes pour être géré par les différentes tailles d'écrans. Et le dessin vectoriel, comparé au dessin matriciel permet de créer des images avec la résolution voulue sans perte de qualité. Il est donc plus simple de créer le logo sous un logiciel de dessin vectoriel dans un premier temps (ici j'ai choisi Inkscape car libre) quitte à utiliser un logiciel de retouche matriciel dans un second temps.Voici le récapitulatif des résolutions (qui correspond à une arrête du carré) à adopter pour chaque format du logo android :
ldpi : mdpi * 0.75 = 36dp
mdpi : 48dp
hdpi : mdpi * 1.5 = 72dp
xhdpi : mdpi * 2 = 96dp
xxhdpi : mdpi * 3 = 144dp
xxxhdpi : mdpi * 4 = 192dp
A noter qu'ici je parle de dp pour Density-independent Pixels qui est une unité basée sur la densité physique des pixels sur un écran. Pour plus d'informations sur les unités utilisées pour parler des pixels avec Android, je vous laisse le soin de regarder sur ce billet StackOverflow.
Inkscape
Pour faciliter la création du logo, j'ai créé un pattern qui reprend les différentes guidelines de Google que vous pouvez télécharger ICI.La résolution indiquée dans Inkscape est de 192px qui est un multiple de 48, ce qui est parfait car nous donne une grille précise. Les 192px ne sont pas vraiment importants car lors de la création, seules les proportions importes mais cette résolution maximale s'adapte à une grille magnétique très utile pour y placer des points et des nœuds.
 |
| Grille Android Icône Pattern Inkscape |
Style
Le style du logo est extrêmement important. En effet, afin de garder une cohérence entre tous les produits Material Design, il est judicieux de suivre quelques règles simples :- Le logo est vu comme une feuille de papier sur lequel d'autres feuilles sont apposées (J'avais tenté de faire de la perspective dans un de mes logos lors d'un live, je peux vous assurer que le résultat n'est pas terrible)
- Le logo est généralement imbriqué dans un carré de 152dp de côté, un rectangle de 128dp/176dp de côté avec des coins arrondis de 12dp ou un cercle de 176dp de diamètre (Il existe des alternatives mais celles-ci sont les plus connues)
- Les côtés sont d'1px d'épaisseur, quelque soit la résolution (voir le post de Jahir)
- Les formes simples suffisent, les ombres donneront la profondeur au dessin, il ne faut pas trop surcharger le logo
Ombres
Les ombres sont normalisées sur des logos Android, il faut avoir en tête que la source de lumière est en haut à gauche de notre logo et que les éléments placés au dessus du fond auront une ombre portée de 45°.Cependant des ombres portées sont également définis à partir d'une lumière diffuse afin de mettre en visibilité les différentes feuilles.
Il existe des teintes à appliquer sur les côtés de nos éléments.
Voici le récapitulatif des ombres à appliquer :
Ombre diffuse
Opacité: 20%
X Décalage: 0dp
Y Décalage: 4dp
Flou: 4dp
Couleur : Référer au tableau des couleurs
Teintes de côtés
Teinte haute
Hauteur : 1px
Opacité : 20%
Couleur : Blanc (#ffffff)
Teinte basse
Hauteur : 1px
Opacité : 20%
Couleur : Référer au tableau des couleurs
Couche de finition
Il existe une couche de finition qui permet de faire un léger effet sur notre logo. Les caractéristiques de ce calques sont les suivantes :
Type: Radial
Angle: 45º
Couleur: Blanc (#FFFFFF)
Midpoint Location: 33%
Slider 1
Opacité: 10%
Localité: 0%
Slider 2
Opacité: 0%
Localité: 100%
Tableau des couleurs
Le tableau des couleurs Google est bien réalisé, mais pour moi il manque le code hexa de ces couleurs...Pour palier à ce problème il suffit d'installer un sélecteur de couleur pour votre navigateur, par exemple : http://www.colorzilla.com/
 |
| Color Picker |
Export
Une fois votre logo créé, il suffit de l'exporter dans les différentes résolutions au format .png,Pour se faire:
- Aller dans File > Export PNG image...
- Dans la section Export Area, sélectionner Page
- Et dans Image Size modifier la hauteur et la largeur avec Width et Height pour avoir 48
- Cliquer ensuite sur Export As... pour sélectionner le fichier de destination qui doit être dans le chemin .../mipmap-mdpi/ic_launcher.png
- Cliquer sur le bouton Export pour exporter le fichier.
Réitérer les étapes 3 à 5 en changeant la résolution en s'inspirant des données précédentes et en modifiant le chemin associé.
L'arborescence finale doit être :
/mipmap-ldpi/ic_launcher.png
/mipmap-mdpi/ic_launcher.png
/mipmap-hdpi/ic_launcher.png/mipmap-xhdpi/ic_launcher.png
/mipmap-xxhdpi/ic_launcher.png
/mipmap-xxxhdpi/ic_launcher.png
Si vous trouvez les étapes 3 à 5 fastidieuses, vous pouvez utiliser des scripts qui vont tout exporter pour vous! :)
Retouches (optionnel)
Une fois les différentes images créées, on peut les modifier avec un logiciel de retouche d'images matricielles pour effacer les soucis liés aux algorithmes d'export et notamment les effets de flous. Pour ça je vous conseille surtout de bien regarder les images ldpi et hdpi qui ne sont pas des multiples unitaires de notre résolution de base. Évidemment en tant que bon linuxien, je ne peux que vous conseiller l'utilisation de Gimp! ;)C'est tout pour ce tuto, si vous avez des questions n'hésitez pas à les poser en commentaires.
Et si vous ne vous sentez pas l'âme d'un artiste, je peux aussi réaliser des logos sur demande!
