Une autre dimension, une nouvelle maîtrise - Un tutoriel d'illustration isométrique

L'illustration est inégalée dans sa capacité à dynamiser des sujets ordinaires et à communiquer des idées complexes avec une clarté visuelle, mais qu'en est-il des illustrations isométriques ? Ne sont-ils pas notoirement difficiles et chronophages ? En six étapes simples, ce didacticiel d'illustration isométrique rend le processus rapide et simple.

Besoin d'animer une landing page ? Visualiser des données ennuyeuses ? Ajouter du punch à un emballage fade ? L'illustration est la réponse sur tous les fronts.

Ces dernières années, les illustrations isométriques ont gagné en popularité pour la façon dont elles représentent la profondeur tridimensionnelle dans un espace bidimensionnel. De plus, la grille isométrique élimine le besoin de maintenir l'illusion de perspective, une source courante de frustration d'illustration.

Dans Adobe Illustrator, le processus d'illustration isométrique traditionnel est fastidieux. Faites une grille isométrique, dessinez un carré, inclinez-le de -30°, faites-le pivoter de -30°, ainsi de suite. Heureusement, il existe un meilleur moyen. Illustrator propose des effets 3D qui rendent les illustrations isométriques rapides et faciles : "Extruder et biseauter", "Revolve" et "Rotate".

Ce didacticiel montre comment créer des illustrations isométriques à l'aide de "Revolve", mais les informations s'appliquent également aux effets 3D restants d'Illustrator.

Prêt à impressionner les clients, à ravir les utilisateurs et à apprendre les secrets de l'illustration isométrique ?

Revolve & Refine: Un didacticiel d'illustration isométrique

Qui n'aime pas une boisson glacée ? Portons un toast aux joies du rafraîchissement liquide en concevant une bouteille isométrique avec une étiquette.

*Conseil de pro : avant de commencer, trouvez une référence d'objet pour indiquer à quoi ressemblera la bouteille.

Étape 1 : dessinez la bouteille et le liquide

1.1) Créez un nouveau document Adobe Illustrator.

1.2) Ajoutez la référence de la bouteille au document.

1.3) Dessinez un contour de la bouteille et du liquide à l'intérieur.

1.4) Divisez la bouteille et le liquide en deux (comme indiqué ci-dessous).

1.5) L'épaisseur du trait du contour de la bouteille définit l'épaisseur du verre.

*Conseil de pro : copiez et collez l'illustration en dehors du plan de travail en tant que sauvegarde.

Étape 2 : Appliquez l'effet de révolution

Comme son nom l'indique, "Revolve" tourne la forme autour de son axe. Dans Illustrator, la position de l'axe "Revolve" est fixe verticalement. C'est pourquoi la bouteille a été esquissée et divisée en deux.

*Conseil de pro : Ni le contour de la bouteille ni l'objet liquide ne doivent avoir de dégradés comme couleurs de remplissage.

2.1) Pour trouver l'effet "Revolve", allez dans : Effect > 3D > Revolve…

2.2) En haut de la fenêtre de dialogue, il y a un champ intitulé "Position". Choisissez "Isométrique gauche".

2.3) Angle - C'est le degré de rotation autour de l'axe de l'objet. S'il est réglé sur 180°, le résultat sera une bouteille divisée en deux verticalement. Réglez l'angle sur 360° pour une bouteille complètement tournée.

2.4) Décalage – Contrôlez la distance de décalage par rapport à l'axe vertical de l'objet. Entrez "0".

2.5) Surface - Définissez les propriétés de matériau et d'éclairage de l'objet. Choisissez "Pas d'ombrage".

Ta-da ! Une bouteille isométrique avec du liquide. Il est temps de se détendre, de se détendre et d'attendre ! Cette bouteille a besoin d'une étiquette.

*Conseil de pro : n'utilisez pas la fonction "Développer l'apparence" sur la bouteille tant que l'étiquette n'est pas créée.

Étape 3 : Préparez l'étiquette

3.1) Utilisez la bouteille pour définir les dimensions de l'étiquette.

3.2) Dans l'exemple d'image (ci-dessous), la hauteur de l'étiquette du corps est apparente, mais la hauteur de l'étiquette du cou n'est pas claire car la surface n'est pas parallèle à l'axe. Une hauteur approximative suffira.

3.3) La longueur de l'étiquette est calculée à l'aide de la formule de circonférence du cercle 2πr.

3.4) Avec une étiquette satisfaisante conçue, convertissez les deux étiquettes en symboles. La palette "Symboles" se trouve sous : Fenêtre > Symboles

3.5) Faites glisser et déposez individuellement les conceptions d'étiquettes dans la palette pour créer des symboles.

*Remarque : les symboles dans Illustrator et Sketch fonctionnent de la même manière.

Étape 4 : Mapper l'étiquette sur la bouteille

Tant que la bouteille n'a pas été vectorisée à l'aide de la fonction "Développer l'apparence", elle est entièrement modifiable.

4.1) Sélectionnez le flacon et affichez la palette « Aspect » : Fenêtre > Aspect

4.2) Ensuite, choisissez "3D Revolve" et la boîte de dialogue précédente apparaît.

4.3) Pour associer le design à la bouteille, cliquez sur l'option en bas à gauche : "Map Art".

4.4) Cela permet de choisir et d'ajuster un symbole pour la bouteille.

4.5) Assurez-vous de faire correspondre le symbole à la bonne surface (voir ci-dessous).

4.6) Cliquez sur "Scale to Fit" et l'étiquette correspond à la bouteille.

4.7) Suivez les mêmes étapes pour l'étiquette du cou.

Étape #5 : Évitez un fichier désordonné

5.1) Il est maintenant temps de transformer la bouteille en courbes de Bézier à l'aide de la fonction "Développer l'apparence" : Objet > Développer l'apparence

Illustrator n'est pas principalement destiné à la manipulation d'objets 3D. L'extension de l'apparence d'un objet crée une collection groupée d'éléments plus petits qui donnent l'illusion d'un objet 3D.

5.2) Pour garder les choses en ordre, combinez les éléments avec l'outil "Pathfinder" ou "Shape Builder" (voir ci-dessous).

*Conseil de pro : la jonction d'objets crée des points d'ancrage indésirables. Réduisez-les en allant dans Objet> Chemin> Simplifier. Pour ceux qui utilisent régulièrement Illustrator, le plugin VectorScribe et son outil de suppression de points sont fortement recommandés.

Étape #6 : Ajoutez de la vie avec des couleurs et des dégradés

Pour la dernière étape, donnez vie à la bouteille avec des couleurs et des dégradés. C'est là que l'art individuel entre en jeu. Ajoutez des reflets, des reflets et des ombres pour un look réaliste, ou utilisez des traits et une palette de couleurs simplifiée pour une ambiance plus graphique. Avec une base solide, les possibilités stylistiques sont infinies.

Vive les illustrations isométriques !

Les illustrations isométriques apportent profondeur, dimensionnalité et personnalité à un large éventail de projets de conception. Utilisez les principes décrits dans ce didacticiel pour explorer davantage de possibilités isométriques, et n'oubliez pas d'essayer les autres effets 3D d'Illustrator : "Rotation" et "Extruder et biseauter".

Dites-nous ce que vous en pensez! S'il vous plaît laissez vos pensées, commentaires et commentaires ci-dessous.

• • •

Pour en savoir plus sur le blog Toptal Design :

• Durée de conservation visuelle - Pourquoi les illustrations de conception Web deviennent obsolètes
• Un guide étape par étape pour concevoir des illustrations personnalisées sans aucune compétence en dessin
• Nouvelles réalités : VR, AR, MR et l'avenir du design
• The Designer's Edge - Un aperçu des plugins Photoshop
• Emojis en évolution : concevoir pour le nouveau visage de la messagerie