Utilisez les outils dédiés d’Adobe Illustrator pour associer habilement des formes vectorielles et créer des icônes inoubliables pour votre prochain projet numérique.
Des formes vectorielles sont combinées pour créer un collage d’icônes sur le thème du camping. Au centre du collage, un homme est poursuivi par un ours.

Dans ce projet d’exemple, nous allons créer une icône d’appareil photo qui pourra être utilisée comme image de profil sur les médias sociaux et comme bouton de lien vers un portfolio dans un CV numérique.

Page Twitter montrant une icône représentant un appareil photo monochrome liée à un CV digital.

Configuration du projet

Lancez Illustrator, puis cliquez sur Créer ou appuyez sur Ctrl + N (Windows) ou Cmd + N (Mac OS). Sélectionnez l’onglet Web et définissez les dimensions sur la droite. Nous avons choisi une largeur et une hauteur de 400 pixels. Conseil : il est préférable de travailler sur un format carré pour créer des icônes.

Cliquez sur Créer.

Créez un nouveau document dans Adobe Illustrator, sélectionnez Web et spécifiez une taille à droite. Pour créer des icônes, il est préférable d’indiquer un format carré.

Création de formes simples

Pour commencer, vous allez dessiner le boîtier de l’appareil photo.

Dans le panneau Outils, sélectionnez l’outil Rectangle, puis tracez un rectangle sur le plan de travail.

Tracez un second rectangle plus petit, chevauchant la partie supérieure du premier comme illustré ci-après. 

Vous allez utiliser les repères commentés pour aligner le centre des rectangles. Faites glisser le widget de point central (cercle au centre de la forme) du rectangle le plus petit vers le plus grand, jusqu’à voir apparaître le repère magenta vertical.

En savoir plus sur l’utilisation des repères commentés dans Illustrator

Deux rectangles sont dessinés et alignés sur les repères magenta pour créer le boîtier d’un appareil photo.

Vous allez maintenant créer le flash.

Cliquez longuement sur l’icône de l’outil Rectangle pour accéder à d’autres formes, puis sélectionnez l’outil Ellipse. Tracez une ellipse jusqu’à ce qu’un réticule s’affiche dans la forme, indiquant que vous avez dessiné un cercle parfait. Relâchez le bouton de la souris dès que le cercle atteint la taille souhaitée.

Conseil : pour redimensionner le cercle en conservant les proportions, maintenez la touche Maj. enfoncée, puis faites glisser un widget d’angle.

Si nécessaire, faites glisser le widget de point central pour ramener le cercle à l’intérieur du plus grand rectangle.

L’outil Ellipse est utilisé pour ajouter un cercle pour le flash de l’appareil photo. Les repères magenta désignent un cercle parfait.

Vous allez maintenant créer l’objectif.

Sélectionnez l’outil Ellipse, puis survolez le grand rectangle jusqu’à ce que le mot centre apparaisse. Maintenez la touche Alt (Windows) ou Option (Mac OS) enfoncée, puis tracez un cercle en partant du centre. Servez-vous du réticule et relâchez le bouton de la souris lorsque le cercle atteint la bonne taille.

Dessinez un plus petit cercle sur le côté. Cliquez sur son centre, puis faites-le glisser vers le grand cercle jusqu’à ce que le mot intersection ou centre apparaisse. Déposez le petit cercle à l’emplacement souhaité.

L’outil Ellipse est utilisé pour ajouter des cercles représentant l’objectif. Tout en maintenant la touche Alt ou Option enfoncée, tracez des cercles en partant du centre.

Association de formes

À cette étape, vous allez fusionner les deux rectangles.

Appuyez sur la touche V pour activer l’outil Sélection. Cliquez sur le grand rectangle puis, en maintenant la touche Maj. enfoncée, cliquez sur le petit pour sélectionner les deux formes. Sélectionnez l’outil Concepteur de forme, puis tracez un trait reliant les deux rectangles, comme illustré ci-après.

Deux rectangles sont sélectionnés. L’outil Concepteur de forme est surligné, et un trait reliant les deux rectangles est tracé pour fusionner les formes.

Ajout de couleur  

Vous allez maintenant appliquer des attributs de fond et de contour aux formes.

Appuyez sur la touche V pour activer l’outil Sélection. Sélectionnez le boîtier de l’appareil photo, puis cliquez sur l’icône Fond, sous Aspect dans le panneau Propriétés. Sélectionnez l’option Nuancier sur la droite et cliquez sur une couleur dans le panneau Nuancier. Cliquez ensuite sur l’icône Contour, puis sélectionnez Sans pour supprimer le contour.

Répétez l’opération pour le cercle du flash : choisissez un fond blanc et n’appliquez aucun contour.

Pour colorer l’objectif, sélectionnez d’abord le cercle extérieur, puis enfoncez la touche Maj. et cliquez sur le second cercle pour le sélectionner également. N’appliquez aucun fond et choisissez un contour blanc. Augmentez l’épaisseur du contour en définissant la valeur sur 5 pt.

Des couleurs de fond et de contour sont ajoutées à l’icône d’appareil photo.

Ajout d’une touche finale

Vous pouvez arrondir les angles de la forme pour obtenir un autre aspect.

Sélectionnez le boîtier de l’appareil photo. Appuyez sur la touche A pour activer l’outil Sélection directe, puis faites glisser un widget d’angle arrondi pour arrondir tous les angles simultanément.

Les bords de l’appareil photo sont arrondis en déplaçant le widget d’angle arrondi (petit cercle bleu avec un point bleu au centre).

Enregistrement pour le web

Si vous devez redimensionner l’icône par rapport au plan de travail, choisissez Sélectionner > Tout pour la sélectionner dans sa totalité. Appuyez sur la touche V pour activer l’outil Sélection. Appuyez sur Alt + Maj. (Windows) ou Option + Maj. (Mac OS) et faites glisser une poignée d’angle pour redimensionner l’icône proportionnellement au centre. Enfin, repositionnez-la en faisant glisser son centre.

L’appareil photo est redimensionné et ses proportions conservées en appuyant sur Alt + Maj. ou Option + Maj. et en déplaçant les poignées d’angle.

Choisissez Fichier > Enregistrer. Attribuez un nom unique à votre projet et enregistrez-le au format Adobe Illustrator (AI). Ainsi, vous pourrez modifier le fichier à tout moment dans Illustrator.

Pour enregistrer la version finale à publier en ligne, choisissez Fichier > Exporter > Exporter pour les écrans. Choisissez un emplacement, puis le format PNG 8.

Conseil : vous pouvez redimensionner le plan de travail avant l’exportation en modifiant sa largeur ou sa hauteur dans le menu déroulant Échelle.

Cliquez sur l’icône d’engrenage et sélectionnez Illustration optimisée (suréchantillonnage) dans le menu déroulant Lissage. Cliquez sur Enregistrer les paramètres, puis sur Exporter le plan de travail.

Enregistrement de l’icône d’appareil photo au format Adobe Illustrator (AI), puis pour le web en choisissant Fichier > Exporter > Exporter pour les écrans.

C’était amusant, non ? Consultez Exportation de ressources pour la création de sites web et d’applications pour en savoir plus sur l’enregistrement d’illustrations pour le web.

08/26/2021
Jing Wei
Cette page vous a-t-elle été utile ?