Comment concevoir un ensemble d'icônes de contact multicolores

Dans ce didacticiel Illustrator, je vais vous montrer comment créer un ensemble d'icônes de contacts multicolores. Ce didacticiel utilise des formes de base, des dégradés, Feather et la puissante fonctionnalité Live Color d’Illustrator. Ces techniques se traduisent facilement dans d’autres conceptions et illustrations.

Image finale

Vous trouverez ci-dessous les derniers modèles d’icônes sur lesquels nous allons travailler..

Étape 1

Créez un nouveau document et tracez un rectangle de 138 px de large par 170 px de hauteur à l'aide de l'outil Rectangle (L)..

Étape 2

Une fois le rectangle sélectionné, sélectionnez Filtre> Styliser> Coins arrondis pour afficher le dialogue Coins arrondis. Modifiez le rayon à 70 px et appuyez sur OK.

Étape 3

Sélectionnez l’ancre centrale du rectangle à l’aide de l’Outil de sélection directe (A), puis faites-la glisser jusqu’à environ un sixième de la taille originale du rectangle. Maintenant nous avons une forme de tête.

Étape 4

Créez une ellipse avec l'outil Ellipse (L) d'une largeur de 15 px sur une hauteur de 42 px. Placez l'ellipse sur la forme de la tête à peu près à mi-hauteur du sommet de la tête, à gauche..

Étape 5

À l'aide de l'outil de sélection (V), appuyez sur Maj + Alt et faites glisser une copie de l'ellipse vers le côté droit du visage, vous donnant ainsi deux formes d'oreille..

Étape 6

Sélectionnez les formes de tête et d'oreille, appuyez sur le bouton Ajouter des zones de forme dans le panneau Pathfinder, puis appuyez sur le bouton Développer..

Étape 7

Remplissez la tête avec un dégradé radial du panneau de dégradé. Remplacez le premier nuancier du dégradé par une couleur cyan et changez le deuxième nuance en un cyan plus foncé. Donnez ensuite à la tête un trait d'un trait avec un bleu foncé.

Étape 8

Utilisez l’outil Dégradé (G) pour ajuster le dégradé radial de manière à ce que la partie la plus claire du dégradé se trouve au bas de la tête. Pour ce faire, cliquez au bas de la tête avec l’outil Dégradé et faites-le glisser à mi-hauteur de la tête..

Étape 9

Créez une ellipse de 92 px de large sur 54 px de hauteur et placez-la vers le haut de la tête au centre..

Étape 10

Remplissez la nouvelle ellipse avec un dégradé linéaire et changez le premier nuancier en cyan clair et le second nuance en cyan foncé dans le dégradé radial de la tête. Utilisez l'outil Dégradé (G) pour ajuster le dégradé de sorte que la partie la plus claire se trouve en haut de l'ellipse..

Étape 11

Sélectionnez la forme de la tête et accédez à Objet> Chemin> Décalage pour ouvrir la boîte de dialogue Chemin décalé. Changez le décalage en -4 px et appuyez sur OK.

Étape 12

Dessinez une ellipse de 250 px sur 250 px et placez-la sur la forme de la tête afin que la partie supérieure gauche de la tête ne soit pas recouverte par la grande ellipse. Sélectionnez la nouvelle ellipse et le décalage de la tête, puis appuyez sur le bouton Soustraire des zones de forme dans le panneau Pathfinder..

Étape 13

Sélectionnez la forme soustraite et remplissez-la de blanc. La forme étant toujours sélectionnée, accédez à Effet> Styliser> Plume et réglez le rayon de la plume sur 9 px et appuyez sur OK..

Étape 14

Sélectionnez la forme de la tête et décalez-la à nouveau comme précédemment à -4 px. Ensuite, dessinez un rectangle à partir du bas des oreilles, englobant toute la forme de la tête. Sélectionnez le rectangle et le décalage de la forme de la tête et des zones de soustraction.

Étape 15

Sélectionnez la nouvelle zone de soustraction, puis Copier (Commande + C) et Coller devant (Commande + F). Sélectionnez l’ancre inférieure de la forme copiée à l’aide de l’outil de sélection (V) et écrasez la forme vers le haut environ un quart de la hauteur de la taille originale. Sélectionnez l'original et la copie, puis soustrayez les zones de forme.

Étape 16

Remplissez la nouvelle forme soustraite de blanc et appliquez-la à 9 px comme auparavant.

Étape 17

Maintenant que la tête est terminée, nous pouvons créer la zone du buste. Créez un rectangle de 286 px de large sur 156 px de hauteur. Créez ensuite un autre rectangle de 140 px de large et 75 px de haut. Placez le rectangle le plus étroit sur le rectangle horizontal afin qu'il soit centré. Sélectionnez les deux rectangles et appuyez sur le bouton Ajouter aux zones de forme du panneau Pathfinder..

Étape 18

Une fois les rectangles combinés sélectionnés, accédez à Filtre> Styliser> Coins arrondis et réglez le rayon sur 40 pixels..

Étape 19

Créez une ellipse de 700 px de large par 355 px de hauteur et centrée sur la forme du buste de manière à ce qu'un sixième de la forme du buste dépasse du bas du cercle. Sélectionnez les deux formes et appuyez sur le bouton Intersection entre les zones de forme du panneau Pathfinder..

Étape 20

Remplissez la nouvelle forme du buste avec le même dégradé radial et le même contour que la forme de la tête, puis ajustez le dégradé de sorte que la partie la plus claire vienne de l'épaule gauche..

Étape 21

Décalez la forme du buste à -4 px comme la tête. Ensuite, dessinez une ellipse de 266 px sur 266 px sur le côté gauche du buste. Sélectionnez le décalage et l'ellipse, puis intersectez les zones de forme..

Étape 22

Remplissez la nouvelle forme avec un cyan clair et donnez-lui une plume de 17 px.

Étape 23

Décalez à nouveau la forme du buste à -4 px. Ensuite, dessinez une ellipse de 147 px de large par 96 px de hauteur et placez-la sur l'épaule droite. Sélectionnez l'ellipse et le décalage, puis intersecter les zones de forme.

Étape 24

Remplissez la nouvelle forme avec un cyan clair et donnez-lui une plume de 17 px.

Étape 25

Placez le buste derrière la tête.

Étape 26

L'icône est terminée, mais cela aurait l'air bien avec une ombre. Dessinez une ellipse de 360 ​​px sur 360 px. Remplissez l'ellipse avec un dégradé radial avec le premier échantillon noir et le deuxième échantillon blanc.

Étape 27

Avec l'outil de sélection (V), écrasez l'ellipse de sorte qu'elle soit égale à un cinquième de sa taille originale, puis placez-la derrière l'icône de contact..

Étape 28

Maintenant que l'icône est terminée, je vais vous montrer un moyen rapide de recolorier les copies de l'icône. Sélectionnez toutes les illustrations et copiez (Commande + C) et Coller (Commande + V). Une fois la copie sélectionnée, sélectionnez Edition> Modifier les couleurs> Recolorier l’illustration pour afficher la boîte de dialogue Couleurs vivantes..

Étape 29

Cliquez sur le bouton Modifier en haut de la boîte de dialogue. Vous pouvez maintenant modifier certaines nuances dans l'illustration ou les verrouiller et les modifier ensemble. Pour ce faire, appuyez sur l'icône de cadenas dans la boîte de dialogue..

Étape 30

Vous pouvez saisir les différents cercles sur la roue chromatique et les déplacer pour ajuster les couleurs ou vous pouvez spécifier le mode couleur pour ajuster les couleurs. J'aime utiliser cette option. Pour sélectionner un mode de couleur particulier, appuyez sur le bouton qui ressemble à un bouton de lecture en bas de la boîte de dialogue et choisissez votre mode de couleur. J'aime utiliser le mode couleur HSB.

Étape 31

Maintenant que votre mode couleur est sélectionné et que les couleurs sont verrouillées, déplacez les curseurs pour modifier les couleurs. Si vous souhaitez revenir aux couleurs d'origine, cliquez sur le bouton Obtenir les couleurs de l'art sélectionné en haut de la boîte de dialogue..

Étape 32

Maintenant, commencez à créer autant d’icônes de contact colorées que vous le souhaitez!

Image finale

Tout est fait, jetez un autre coup d'œil à l'image finale ci-dessous!

Abonnez-vous au flux RSS VECTORTUTS pour rester informé des derniers tutoriels et articles sur les vecteurs.