À partir de plusieurs formes simples, créez des icônes pour votre design web ou applicatif avec Adobe XD CC.
mobile-menu-icon_1000x560

Nous allons créer une icône représentant un bloc-notes et un crayon. Pour suivre le tutoriel, nous vous invitons à télécharger le fichier d'exemple. Vous pouvez également créer votre propre icône en reprenant ces concepts. La forme de base du bloc-notes est un carré avec une ligne à l'intérieur. Pour le crayon, nous partons d’un rectangle.

mobile-menu-icon_step1

Entraînez-vous à répliquer des éléments, tels que les lignes du bloc-notes. L'avantage de la fonction Grille de répétition est qu'elle permet d'espacer les éléments répliqués de manière uniforme.

mobile-menu-icon_step2

Affinez l'une des formes en utilisant les angles arrondis — par exemple, pour la gomme du crayon. Double-cliquez sur une forme pour la convertir en tracé. Ajoutez ensuite des points que vous pourrez facilement étendre pour former un autre dessin — comme nous l'avons fait pour la pointe du crayon. Nous avons également ajouté des lignes pour souligner la forme du crayon. Pensez à regrouper les éléments pour pouvoir déplacer les objets plus facilement dans votre design.

mobile-menu-icon_step3

Une fois les deux dessins réalisés, nous avons apporté la touche finale. Nous avons fait pivoter le crayon et l'avons déplacé sur le bloc-notes. Nous avons ensuite vérifié l'ordre d'empilement des deux dessins pour que le crayon apparaisse devant le bloc-notes. Enfin, nous avons appliqué des couleurs : un contour blanc avec un fond vert.

mobile-menu-icon_step4

Voici le rendu de notre nouvelle icône dans un design d'application.

mobile-menu-icon_step_5

À vous, maintenant, d’utiliser ces différentes techniques et de créer des icônes pour vos designs web et applicatifs.

11/07/2018

Contributeur : Serge Vasil

Contributeur Adobe Stock : Leonid

Cette page vous a-t-elle été utile ?