Création d’une icône pour le web

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.

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.

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

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.

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é.

À 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.

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.

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.

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.

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.

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.