Créer des icônes de produits n’est pas aussi difficile qu’il y paraît à première vue. Apprenez-en davantage sur la conception de votre première icône d’application Android à partir de zéro !
Quel que soit le marché ou le service sur lequel une application est distribuée, son icône d'application est la première chose qu'un utilisateur potentiel remarquera. Les premières impressions sont d'une importance capitale lorsque l'on essaie d'attirer de nouveaux utilisateurs, ce qui signifie que les icônes sont des éléments clés de toute application. Et, quelle que soit l’intention de l’application, la création d’une belle icône d’application devrait être une partie importante de la phase de développement de chaque application. Bien que de nombreux développeurs d'applications techniques laissent le graphisme à des concepteurs spécialisés, comprendre le les principes fondamentaux du design et leur application est quelque chose que tout le monde peut faire, à condition d'avoir un talent pour l'expérimentation et analyse. Les icônes d’application ne font pas exception !
Ce guide décrit la création d'une icône adaptative pour un exemple d'application Android à l'aide d'un logiciel open source. Même si le résultat final n’est peut-être pas dans le format dont vous pourriez avoir besoin, de nombreux conseils de conception évoqués ici s’appliqueront sur plusieurs plates-formes.
Après la sortie des « icônes adaptatives » avec Android Oreo, une icône d'application peut être constituée de trois couches fondamentales: une couche de fond opaque, un calque de premier plan avec prise en charge de la transparence, et un masque qui définit la forme de l'icône. Tous ces calques ont une taille de 108 x 108 dp, bien que seuls les 72 x 72 dp internes puissent être visibles par l'utilisateur; l'autre région, coupée par le masque du dessus, est utilisée pour des effets spéciaux dans l'interface utilisateur afin de rendre l'icône dynamique. Pour les non-initiés, dp ou pixel indépendant de l'affichage constitue une unité de mesure pour toute l’interface d’Android et est définie comme étant égale à la taille de un pixel sur un écran de 160 points par pouce.)
Nick Butcher de Google parle d'un cercle de 66 dp au centre de l’icône qu’aucun masque ne peut découper, appelée « zone de sécurité ». C’est là que se situeront les principaux éléments de la conception de nos icônes plus tard, lorsque nous arriverons à la conception proprement dite. Tout ce qui dépasse ce rayon de 33 dp peut ne pas être visible dans l'icône lorsqu'elle comporte un masque de forme.
Étant donné qu’il est préférable que les icônes soient des images vectorielles en raison de la mise à l’échelle de l’interface utilisateur, nous aurons besoin d’un éditeur de graphiques vectoriels pour créer notre icône. Paysage d'encre est open source et constitue une excellente alternative aux logiciels plus coûteux, ce sera donc notre choix pour les besoins de ce didacticiel. J'ai également conçu un fichier de projet disponible ici qui a la zone de sécurité et la propre ligne de conception de Google, ainsi qu'un astucieux masque de calque qui nous permet de prévisualiser la forme de l'icône.
Avec le fichier de projet ouvert dans Inkscape et le Remplissage et contour (Maj+Ctrl+F), Exporter une image PNG (Maj+Ctrl+E), et Couches Les panneaux (Maj+Ctrl+L) s’ouvrent, nous sommes prêts à commencer. Le panneau Calques est l'endroit où réside l'essentiel du projet, avec les Premier plan et Arrière-plan couches destinées à abriter leurs composants titulaires, et Des lignes directrices et Masque destiné à être activé et désactivé (en cliquant sur la petite icône en forme d'œil à côté d'eux) pour référence.
Une icône est une expression de l'identité d'une application. En tant que tel, il doit intégrer à la fois le caractère de la personnalité de l’application et les directives de conception spécifiques à la plate-forme, comme celles d’Android. Le langage de conception matérielle a à offrir. À des fins de démonstration, supposons que nous travaillons sur une application météo qui utilise des éléments matériels. Nous pourrions utiliser le motif classique du soleil et des nuages pour informer un utilisateur du but de l'application, et mettre un peu tournez sur cette conception de base en utilisant des ombres portées et de la géométrie pour qu'elle se fonde bien dans son environnement Android.
Arrière-plan
Commençons par mettre en place l’arrière-plan, qui sera composé d’un ciel bleu et d’un soleil jaune au centre. Tournant Masque invisible, je sélectionne et rend visible le Couche d'arrière-plan, remplissez toute la toile avec le Créer des rectangles et des carrés (F4) et définissez la couleur de remplissage du rectangle dans Remplissage et contour à 64B5F6FF (un bleu clair) conformément au Palette de couleurs des matériaux. Je sélectionne ensuite le Créer des cercles, des points de suspension et des arcs (F5), et en maintenant Shift et Ctrl, tracez un cercle du centre de la ligne de touche jusqu'au deuxième plus grand cercle et définissez sa couleur sur FFEE58FF, ce qui nous donne un petit soleil chaud. Il est toujours bon de s’en tenir à la géométrie de base dans tout type de conception, et le langage de conception d’Android en particulier encourage la simplicité. Pour respecter les directives relatives aux matériaux, je donne également au soleil une ombre portée subtile. Filtres → Ombres et lueurs → Ombre portée.
Premier plan
Venir Premier plan, Je dessine un groupe de nuages autour du soleil en dessinant des cercles à partir des circonférences d'autres cercles et je leur donne à tous une couleur de remplissage EEEEEEFF. Je regroupe ensuite les cercles de manière appropriée en cliquant avec le bouton droit sur plusieurs objets et en sélectionnant Groupe, et exécutez le générateur d'ombre portée sur les deux formes finales que j'obtiens au final. Tournant Des lignes directrices invisible et basculant Premier plan et Arrière-plan alternativement, les couches constitutives de l’icône de notre application météo peuvent être vues. Si jamais l’icône de l’application est déplacée sur un écran d’accueil, les nuages tomberont en cascade sur un soleil stationnaire !
Résultat
Masque peut maintenant être rendu visible et modifié avec Modifier les chemins par nœuds (F2) pour essayer de simuler différents masques de forme. De plus, les deux calques peuvent être exportés séparément à l'aide du Exporter une image PNG panneau d'utilisation dans Android Studio, et ensemble pour un Icône Google Play.
Lors de la création d’une icône de produit, il est toujours bon d’essayer de prendre l’objectif d’une application, de la distiller dans sa forme visuelle la plus abstraite et de la représenter à l’aide d’une géométrie simple. Plus un composant de conception est simple, plus il fonctionne généralement de manière efficace et fiable, et cela est également vrai dans la conception graphique. Dans la plupart des cas, une forme d'objet au premier plan et une couleur unie ou un motif en arrière-plan (ou vice versa) fonctionne très bien, mais comme dans notre exemple, une autre couche d'objets peut être utilisée si elle est ressentie nécessaire; trop d’empilement ou d’utilisation d’ombres portées ne fera que compliquer la conception de l’icône.
Vous pouvez en savoir plus sur la conception d'icônes dans les interfaces matérielles sur le site officiel Site Web matérielet récupérez des icônes système gratuites à utiliser dans la conception d'icônes à partir de le même site.