Créer une icône d'objectif d'appareil photo de style Aperture

Dans ce didacticiel, nous allons créer un objectif d'appareil photo détaillé, similaire à celui utilisé comme logo pour le logiciel de retouche photo Aperture d'Apple. Un objectif d'appareil photo est idéal pour une icône de logiciel, un logo ou tout simplement comme un graphique à utiliser dans n'importe quelle conception. Bien que l’image paraisse détaillée, le processus de création n’implique rien de plus que de superposer des objets avec des remplissages et des gradients différents pour donner une illusion en trois dimensions..

Tutoriel republié

Toutes les quelques semaines, nous revoyons certains des articles préférés de nos lecteurs tout au long de l'histoire du site. Ce tutoriel a été publié pour la première fois en août 2008.


Étape 1

Créez un nouveau document de la taille et du format de votre choix. Contrairement à Photoshop, dans Illustrator, il est très facile de modifier la taille du document à tout moment au cours de notre travail. Nous pouvons simplement redimensionner les graphiques vectoriels pour les adapter aux nouvelles dimensions. J'ai initialement choisi un document carré de 550 pixels sur 550 pixels.

Comme le processus de création de notre image consiste principalement à superposer des formes avec différents dégradés et remplissages les uns sur les autres, la plupart des étapes suivantes indiquent simplement la taille du cercle, le type de dégradé, la direction des dégradés, les couleurs utilisés dans le dégradé, leurs emplacements d’arrêt de couleur dans le dégradé et l’emplacement du ou des curseurs centraux dans le dégradé.

Faire le premier cercle est 429px large, avec un gradient linéaire de -45 degrés, qui a 100% de gris (à 100% d'arrêt) à 40% de gris (à 0% d'arrêt), et le curseur du centre défini à 50%.


Étape 2

Assurez-vous que le second cercle mesure 423 pixels de large avec un dégradé linéaire de -45 degrés, composé de 100% de gris (à 100% d'arrêt) à 60% de gris (à 0% d'arrêt), et le curseur central à 50%..


Étape 3

Faire le troisième cercle est 368px large, avec une pente linéaire de 135 degrés, qui a un 100% de gris (à 100% d'arrêt) à 50% de gris (à 0% d'arrêt), et le curseur du centre à 33%.


Étape 4

Faire le quatrième cercle est 364px large, avec un remplissage noir uni. De plus, nous allons donner à ce cercle une plume de 3px en allant dans Effet> Styliser> Plume.


Étape 5

Faire le cinquième cercle est 359px de large avec un remplissage gris solide de 70%.


Étape 6

Créez un sixième cercle de 339 pixels de large avec un dégradé linéaire de 90 degrés, composé de 100% de gris (à 100% d'arrêt) à 60% de gris (à 0% d'arrêt) et du curseur central à 50%..


Étape 7

Faites le septième cercle de 335 pixels de large avec un remplissage gris solide à 70%.


Étape 8

Faites en sorte que le huitième cercle ait une largeur de 329 pixels avec un dégradé linéaire de 90 degrés composé de 100% de gris (à 100% d'arrêt) à 60% de gris (à 0% d'arrêt), et le curseur central à 50%..


Étape 9

Faire le neuvième cercle 325px large avec un remplissage gris solide de 70%.


Étape 10

Faites en sorte que le dixième cercle ait 319 pixels de large avec un dégradé linéaire de 90 degrés composé de 100% de gris (à 100% d'arrêt) à 60% de gris (à 0% d'arrêt) et que le curseur central soit à 50%.


Étape 11

Créez un onzième cercle large de 315 pixels avec une pente linéaire de 130 degrés, un gris de 100% (à 100% d'arrêt) à 90% de gris (à 0% d'arrêt) et le curseur central à 50%..


Étape 12

Faites en sorte que le douzième cercle ait 277 pixels de large avec un dégradé radial comportant 100% de gris (à 100% d'arrêt) et 80% de gris (à 0% d'arrêt) et le curseur central à 50%. Le dégradé radial doit provenir du centre et devenir plus foncé vers le bord.

Pour modifier le point d'origine, sélectionnez l'outil Dégradé, puis cliquez et faites glisser depuis le coin supérieur gauche du cercle jusqu'au coin inférieur droit.. Allusion: si le dégradé ne change pas lorsque vous faites glisser le curseur, assurez-vous que le cercle est sélectionné.


Étape 13

Pour le cercle suivant, nous avons besoin d'un dégradé légèrement plus complexe, et pour cela, nous utiliserons un filet de dégradé. Les maillages en dégradé sont extrêmement puissants et peuvent être utilisés pour créer des illustrations incroyablement complexes et réalistes en mélangeant les couleurs selon un nombre presque infini de façons. Cependant, nous n’avons besoin ici que d’un simple maillage. Créez donc un cercle de 268 pixels de large et remplissez-le de noir uni..

Les maillages de dégradé peuvent être créés manuellement en ajoutant des points de maillage à l'aide de l'outil de maillage de dégradé. Toutefois, comme nous en avons besoin d'un simple, Illustrator le créera pour nous. Sélectionnez le cercle, puis sélectionnez Objet> Créer un filet de dégradé. Laissez toutes les valeurs par défaut définies, mais modifiez les lignes et les colonnes à 3 chacune. Lorsque vous cliquez sur OK, Illustrator créera le maillage..

Avec le cercle sélectionné, passez à l'outil Sélection directe et cliquez sur un point (intersection) du maillage pour le sélectionner. Ensuite, cliquez dans la partie la plus à gauche du maillage et changez sa couleur en 80% de gris. Ensuite, cliquez dans la zone la plus en bas à droite et changez sa couleur en 70% de gris.


Étape 14

Faites le quatorzième cercle 225px large avec un remplissage blanc uni. De plus, donnez à ce cercle une plume de 6px en allant dans Effet> Styliser> Plume…


Étape 15

Faites le quinzième cercle 220px de large avec un remplissage noir uni. Ajoutez ensuite une plume de 3px à ce cercle.

Nous allons également compenser ce cercle. Tout d’abord, alignez le centre avec tous les autres cercles. Puis, en utilisant les touches fléchées, déplacez-le deux fois vers le haut et deux fois vers la gauche.


Étape 16

Faire le seizième cercle 216px de large avec un remplissage noir uni.

Pointe: vous souhaiterez peut-être verrouiller le cercle noir de décalage créé à l'étape 15. Vous pourrez ensuite toujours sélectionner toutes les formes et les centrer par rapport au tableau de synthèse sans perturber le décalage..


Étape 17

Faites le dix-septième cercle de 208 pixels de large avec une pente radiale, qui présente un gris de 100% (à 100% d'arrêt) à 90% de gris (à 0% d'arrêt), et le curseur central à 50%..


Étape 18

Faites le dix-huitième cercle 208px large sans remplissage et un trait blanc de 7 pt. Puis appliquez une plume de 4px à ce cercle.


Étape 19

Nous allons maintenant ajouter des reflets et des reflets à notre objectif intérieur pour lui donner un aspect de verre. Dessinez une sorte de demi-lune avec l'outil Crayon, remplissez-le de blanc et donnez-lui une plume de 8 pixels. En outre, baisser son opacité à 75%.


Étape 20

Pour ajouter un peu d’éblouissement au coin inférieur de la lentille, dessinez une forme ovale avec l’outil Crayon. Ce n'est pas grave si ce n'est pas parfait, car certaines imperfections vont ajouter à l'effet. Encore une fois, remplissez la forme avec du blanc, donnez-lui une plume 3px et réduisez son opacité à 50%.


Étape 21

Nous ajouterons ensuite quelques réflexions supplémentaires à l’objectif. Dessinez deux autres formes, comme indiqué ci-dessous. Puis remplissez-les de blanc, donnez-leur une plume 3px et réduisez leur opacité à 20%.


Étape 22

Dessinez quelques ovales avec l'outil Ellipse et agrandissez-les au fur et à mesure. Faites-les pivoter à un angle d'environ 45 degrés et placez-les dans une ligne diagonale avec le plus petit ovale vers le centre. Une fois que vous en avez terminé trois dans une rangée, sélectionnez-les tous, copiez-les, puis faites-les pivoter et alignez-les sur les trois premiers, de nouveau avec le plus petit ovale vers le centre..


Étape 23

Il ne reste plus qu'à ajouter la lentille extérieure. Pour ce faire, tracez un cercle blanc qui couvre l’ensemble de l’objectif de la caméra, à l’exception du cadre extérieur. Ensuite, à l'aide de l'outil Ciseaux, cliquez sur le coin supérieur droit et légèrement en dessous du côté gauche du tracé du cercle pour couper le tracé à ces points..

Supprimez la moitié inférieure du cercle, puis, à l'aide de l'outil Plume, cliquez sur l'une des extrémités du tracé pour continuer. Cliquez ensuite sur l'autre extrémité et faites glisser pour créer une ligne courbe joignant les extrémités du demi-cercle. Une fois que vous avez tracé le demi-cercle, diminuez son opacité à 50%.


Étape 24

Nous allons maintenant créer un masque de transparence pour ajouter une légère touche d’éblouissement à la réflexion de l’objectif. Un masque de transparence est composé d’une forme superposée à une autre. La forme du haut utilisée comme masque peut être noire, blanche, ou toute nuance de gris, ou un dégradé de niveaux de gris.

Lorsque le masque est créé, les zones sous les formes sont rendues transparentes en fonction de la nuance de gris qui les recouvre. Ainsi, plus la zone de la forme supérieure est sombre, plus la transparence de la forme inférieure de la transparence sera basse sous cette zone. Plus la nuance de gris est claire, plus la zone sera opaque.

Pour créer notre masque, copiez le demi-cercle que nous avons créé à la dernière étape et collez-le directement sur l'original (Commande + F pour Coller devant). Ramenez l'opacité de la copie à 100% et remplissez-la avec un dégradé de blanc à noir apparaissant dans le coin supérieur gauche. Pour modifier le point d'origine, utilisez à nouveau l'outil Dégradé, comme nous l'avons fait précédemment..


Étape 25

La dernière étape consiste à créer le masque de transparence. Pour ce faire, cliquez avec le bouton droit de la souris sur le demi-cercle supérieur et sélectionnez Sélection> Objet suivant sous. Cela sélectionnera la forme inférieure. Pour sélectionner également le premier, maintenez la touche Maj enfoncée et cliquez dessus. Dans la palette Transparence, cliquez sur le bouton du menu contextuel dans le coin supérieur droit et sélectionnez Créer un masque d'opacité..


Conclusion

Le texte autour du cadre est réalisé à l'aide de l'outil Type sur un chemin, situé sous l'outil Type. Dessinez simplement un cercle dont le bord longe le milieu du cadre, sélectionnez l'outil Texte et cliquez sur le cercle pour commencer à taper le long du tracé..

C'est tout! Nous avons fini notre objectif de la caméra. Il est prêt à être utilisé comme une icône, un logo ou tout autre type de graphique pour tous les besoins. Et la meilleure partie est totalement évolutive! N'oubliez pas que des graphiques complexes peuvent être créés simplement en combinant des formes simples et des couleurs, et que des effets 3D peuvent également être simulés avec des formes 2D simples..