Les icônes font partie intégrante de notre conception. Ce sont des indices visuels pour indiquer diverses actions et peuvent donner à un produit une identité unique. Mais souvent, nous choisissons de célébrer son importance en téléchargeant les mêmes jeux d'icônes et en faisant de chaque icône de chaque site Web la même chose que la précédente. Quelle façon de traiter quelque chose d'une telle importance!

Pour résoudre ce problème, j'ai créé un guide pour aider les concepteurs à ajouter de la profondeur visuelle à leurs icônes et à les rendre uniques au produit qu'ils représentent. Ce tutoriel est largement inspiré du guide Google Material Design.

Les principes de la conception matérielle de Google

Comment dites-vous Google , 'Le matériel est une métaphore.' Il emprunte des repères visuels au monde physique et crée un nouveau langage visuel pour standardiser toutes ses interfaces. Les principes de la conception matérielle sont accessible et qui peut être rapidement appliqué pour améliorer l'attrait visuel et l'expérience utilisateur de diverses interfaces.

1. Utilisez des formes géométriques simples et des couleurs frappantes

La tendance du design «plat» de Material Design, qui est également basée sur des formes plates, a soigneusement sélectionné la forme qui représentait le mieux l'élément que l'icône représente. Sélectionnez avec soin la forme qui représente le mieux l'élément que l'icône représente.

2. Ajoutez de la profondeur avec des ombres subtiles

Une ombre portée est un bon moyen de tromper l'œil et de donner à votre conception une impression de profondeur, car elle simule l'effet de la lumière sur un objet.

Notez que la lumière naturelle est souvent simulée comme provenant du coin supérieur gauche.

3. Utilisez des nuances de couleur pour remplacer les ombres portées

Chaque couleur est utilisée dans plusieurs teintes pour simuler la profondeur visuelle. Par exemple, dans l'icône Gmail, vous pouvez voir différentes nuances de rouge qui sont utilisées pour la forme M, et une nuance plus foncée pour le gris est utilisée en dessous pour le rabat de l'enveloppe.

Comment vous pouvez le faire: Démonstrations étape par étape

Nous appliquerons une version plus simple du style Material Design, et pour chaque icône, nous n'utiliserons que trois nuances de la même couleur et garderons les ombres plates et courtes, au lieu de l'effet commun «longue ombre».

Ressources

• Téléchargez les dix icônes avec lesquelles nous travaillerons ensuite ici .
• Découvrez l'ensemble des icônes gratuites de Google ici .

Commençons.

1. Icône de la foudre

Divisez l'icône en deux et faites apparaître le haut surélevé. Vous pouvez y parvenir en créant un effet d'ombre à l'intersection des deux formes. Utilisez trois nuances de jaune - la plus claire en haut, une plus foncée en bas, et gardez celle qui est encore plus foncée pour l'ombre.

2. Icône de chat

Dans l'icône d'origine, nous avons un peu de l'effet d'ombre dans l'espace entre les deux bulles, et c'est là que vous allez créer une ombre.

Dans la forme ci-dessous, sélectionnez le point à l'angle droit dans l'espace et déplacez-le vers la gauche jusqu'à ce que vous formiez un angle droit dans le coin supérieur gauche.

Dupliquez la bulle ci-dessus et déplacez la copie vers le bas et vers la droite. Sélectionnez la copie et la forme de bulle en dessous, utilisez Pathfinder pour créer une tranche et ne conserver qu'une seule intersection avec la copie précédente.

Vous pouvez maintenant appliquer les trois nuances de bleu et mettre la plus claire sur le dessus, une plus foncée au milieu et la deuxième plus sombre en dessous.

3. Icône de coche

Nous allons créer un effet papier plié. Dupliquez l'icône et retirez les deux pointes supplémentaires en haut à droite, puis le côté gauche de l'autre côté pour retirer deux autres pièces.

Dupliquez le pli à gauche et déplacez-le vers la droite.

Intersectez les deux formes pour créer un effet d'ombre. Ensuite, appliquez les trois nuances de couleur en laissant la plus foncée pour l'ombre, la deuxième la plus foncée pour la pièce la plus longue et la plus claire pour le dessus. ### 4. Icône de drapeau

Commencez par arrondir les bords, puis retirez la base du drapeau.

Créez un effet de pli, tracez deux lignes qui se croisent en diagonale. Utilisez le 'Pathfinder', divisez la forme du drapeau avec les lignes et appliquez trois nuances de vert au drapeau tout en laissant la base grise.

5. Icône du cœur

Dupliquez l'icône du cœur.

android envoie un rapport de crash au développeur

Isolez la moitié gauche de la forme.

Tracez une ligne diagonale vers le bas à partir du point supérieur droit.

Superposez la forme résultante avec le cœur, puis déplacez-la vers la droite pour soustraire la forme de l'ombre. Appliquez vos trois nuances de rose.

6. Icône de montagnes

L'espace vide à l'intérieur de l'icône d'origine indique où nous pouvons placer une ombre.

Créez deux formes triangulaires à partir de chaque pic.

Déplacez une copie du plus petit vers la droite et extrayez l'intersection résultante en tant que forme d'ombre.

Appliquez trois nuances de brun en ayant le plus clair à gauche, le deuxième le plus clair pour le plus grand triangle et le plus foncé pour l'ombre au milieu. Appliquez un petit rayon sur le coin pour lisser le résultat.

7. Icône de personnes

Sélectionnez et dupliquez la partie inférieure de la personne à gauche. Alignez cette copie avec la personne à droite. Maintenant, sélectionnez les trois formes qui se chevauchent et appliquez l'outil 'Diviser' du panneau 'Pathfinder'. Maintenant, appliquez les couleurs pour terminer.

8. Icône flottante carrée

Sélectionnez la forme du bas, puis déplacez la pointe du milieu supérieur vers le haut jusqu'à ce qu'elle ressemble à un diamant.

Dupliquez la forme supérieure du diamant et déplacez la copie vers le bas de 10 ou 20 px.

Sélectionnez les deux formes inférieures et appliquez l'outil 'Diviser' du panneau 'Pathfinder'.

Parmi les formes qui se croisent, gardez simplement les deux pièces du bas et effacez tous les points supplémentaires.

Terminez en appliquant trois nuances de rouge tout en attribuant la plus foncée au milieu.

9. Icône de lettre

Avec l'outil «Sélection directe (A)», choisissez le deuxième point le plus élevé de la forme de la lettre.

Ajoutez un point sur le segment à sa droite à l'aide de l'outil 'Stylo'.

Maintenant que vous avez un point supplémentaire, vous pouvez remodeler cet espace négatif pour le faire ressembler à du papier en soulevant les deux points supérieurs et en les déplaçant vers la droite et la gauche comme indiqué.

Sélectionnez tout et appliquez une forme de séparation à partir du panneau 'Pathfinder'. Séparez la forme de papier supérieure de l'enveloppe, puis dupliquez le haut de l'enveloppe sur le dessus du papier pour découper la forme d'ombre avant d'appliquer trois nuances de bleu.

10. Icône de gâteau

Isolez une version dupliquée du fond du gâteau.

Il réduit sa largeur en déplaçant les bords gauche et droit vers l'intérieur.

Déplacez la forme résultante au-dessus de l'icône d'origine et étendez les points les plus hauts pour chevaucher la forme de glaçage.

Créez une division de toutes les formes qui se chevauchent avec le 'Pathfinder', et supprimez les points supplémentaires à côté de la base étroite du gâteau que vous avez créé précédemment.

Complétez votre gâteau en appliquant un orange clair sur le glaçage et la bougie, une teinte plus foncée à la base et même un orange plus foncé pour la forme de la flamme et l'ombre des bords.

Améliorez l'apparence de votre jeu d'icônes

La création d'icônes avec le style Material peut être réalisée avec simplicité. Vous avez juste besoin d'une bonne combinaison de formes géométriques bien pensées, de tons de couleurs riches et d'effets d'ombre portée.

La bonne nouvelle est que vous n'avez pas besoin de créer toutes les icônes à partir de zéro, comme nous l'avons fait dans ce didacticiel. Vous pouvez partir d'icônes plates existantes et gratuites et appliquer les techniques simples que vous venez d'apprendre.

que font les bots dans discord

J'aimerais vraiment voir ce que vous créez. N'hésitez pas à partager vos commentaires et icônes personnalisées.