Comment dessiner des vecteurs isométriques?

Je recherche de préférence des solutions logicielles "intégrées" pour Illustrator CS2-5.

J'essaie de créer ces illustrations isométriques pour une application Web. En ce moment, j'ai configuré manuellement une grille dans Adobe Illustrator et fait les dessins basés sur cette grille - mais je n'ai pas de guides, pas d'accrochage et des trucs comme ça ...

Le résultat final devrait être proche de cela: http://www.twigital.co.uk/

Je me demande si vous connaissez un bon logiciel pour dessiner des trucs isométriques à partir duquel je peux ensuite le produire sous forme de vecteur (.eps ou .ai) pour que je puisse importer dans Illustrator et leur donner des couleurs et d'autres trucs?

Si vous ne connaissez pas de logiciel spécialement pour cela, avez-vous déjà fait des illustrations isométriques dans Illustrator? Des méthodes? Des conseils?

ÉDITER:

Veuillez ne pas confondre le dessin isométrique avec le dessin en perspective à 1,2 ou 3 points.

DESSIN ISOMÉTRIQUE:

[le système isométrique n'est qu'une convention / invention, utile pour beaucoup de choses, pas pour reproduire ce que les yeux voient en réalité mais vraiment juste une convention utile pour les mesures et autres choses]

iso (égal) métrique (mesure)

Dans un dessin isométrique , toutes les arêtes d'un cube seraient parallèles par ensembles de quatre. (2 lignes parallèles signifie que les lignes ne se rencontreront jamais, peu importe combien de temps vous les dessinez)

DESSIN PERSPECTIF:

[Les conventions de dessin en perspective (1 point, 2 points, 3 points ... et quelques autres) sont toujours des conventions mais elles essaient d'imiter et d'être aussi proches que possible de ce que l'œil voit dans la réalité (3D), mais telles qu'elles sont en 2D (papier / écran), ce n'est jamais comme la réalité.]

[Une autre chose que certains pourraient argumenter est que cela fait que nous avons deux yeux (juste quelques appareils optiques) * et que l'image unit en fait (est créée) à travers une certaine magie qui se produit dans le cerveau, explique pourquoi aucun de ceux-ci les conventions ressemblent vraiment à la réalité ... mais c'est pour la philosophie SE: P] *

Dans le dessin en perspective , les bords s'effileraient vers un ou plusieurs points de fuite.

Avec la grille de perspective dans Illustrator CS 5, il y a 3 options:

Perspective 1 point, perspective 2 points et perspective 3 points.

Après avoir traité toutes les informations ci-dessus (les informations sur Internet ... peuvent être erronées, n'hésitez pas à délibérer) Je fais l'hypothèse simple qu'il n'est pas possible d'obtenir une vue isométrique de plusieurs objets sur une toile (comme dans le exemple ci-dessus, twigital.co.uk (merci à George pour son explication de la façon dont cela a été fait dans sa réponse) avec une grille de perspective, c'est-à-dire avec une perspective à 1 point: les lignes se rencontreront en un point à l'horizon, 2 points: les lignes se réunira à 2 points à l'horizon, 3 points ... vous avez l'idée ...

Et avec une vue isométrique, les lignes ne se rencontrent jamais , car elles sont parallèles. (Je pense que vous pouvez également l'appeler perspective isométrique, c'est pourquoi je suis un peu confus)

!!! Mais si vous construisez la grille manuellement, c'est possible , vous pouvez apprendre à le faire ou vous pouvez en télécharger un déjà fait ici . Après avoir tout fait dans ce didacticiel, sélectionnez toutes les lignes que vous avez créées et accédez à Affichage> Guides> Créer des guides . C'est en quelque sorte la réponse à cette question, mais je cherchais juste une solution "intégrée" et ...

J'ai essayé de le faire avec la grille de perspective dans Illustrator CS5 ... n'a pas fonctionné pour moi, si quelqu'un l'a fait avec la grille de perspective dans Illustrator, veuillez expliquer les étapes exactes pour le faire.

Certains diront peut-être que j'insiste beaucoup sur certaines choses ci-dessus, mais si vous créez une application complexe avec des centaines, ou seulement 50 objets positionnés au hasard (de manière isométrique) et que les objets ne sont pas parfaitement isométriques, vous vous retrouverez avec des résultats moches ici et là (toutes les lignes ne seront pas parallèles et ça a l'air mauvais) ou si c'est une application pour les mesures et les projections à échelle réduite, vous vous retrouverez avec de "mauvais" nombres ... et vous ne le voudrez probablement pas. .

Pour twigital, le concepteur ( Chris ) a utilisé Illustrator, une grille et l'outil Rotation 3D. Notez qu'il a des préréglages pour les rotations isométriques.

Si vous avez besoin de plus que ce qu'Illustrator fournit par défaut, essayez le plug-in CADtools pour Illustrator , qui fournit des outils de dessin et de cotation isométriques.

J'ai encore quelques ressources à partager. Sur la base de ce tutoriel, j'ai enregistré les étapes ci-dessus sous forme d'actions afin que vous puissiez déclencher celles-ci à l'aide de raccourcis clavier:

• Gauche = CMD + Maj + F1
• Haut = CMD + Maj + F2
• Droite = CMD + Maj + F3

Pour les obtenir, il vous suffit de télécharger ce fichier: Isometric.aia et dans l'illustrateur allez dans Actions (Fenêtre> Actions) et dans le menu contextuel (la petite icône en haut à droite avec la flèche pointant vers le bas et 2 lignes horizontales (=)) choisissez Charger les actions et accédez à Isometric.aia

Il est également assez simple de créer des actions à partir de zéro.

J'ai également fait quelques enregistrements d'écran:

• Comment utiliser les actions de transformation isométrique pour créer une boîte - IllustratorIsometricWithTransforms.mov
• Comment utiliser l'effet d'extrusion 3D pour créer une boîte - IllustratorIsometricWith3DExtrude.mov
• Comment utiliser la révolution 3D pour créer des objets de type cylindre / cône isométrique - IllustratorIsometricWith3DRevolve.mov
• Comment utiliser les extensions 3D pour créer des arcs (mélange de formes droites et rondes) - IllustratorIsometricExtrudeArches.mov

Le fichier complet des arches peut être téléchargé ici: iso_arches.ai

Il y a 3 choses principales qui pourraient ne pas être évidentes dans la vidéo qui vous seront utiles:

• utiliser l'accrochage aux points / une grille de référence pour placer les objets plus facilement
• en utilisant une unité pour les modules afin que différentes pièces s'emboîtent
• lors de l'assemblage d'objets avec des parties répétitives, en utilisant des symboles au lieu de groupes

pour faciliter les réglages

Illustrator CS5 a un nouvel outil formidable appelé "Perspective". Cet outil vous permet de configurer une grille de perspective 2D ou 3D qui vous aide à dessiner des objets pour leur donner une dimension. Il "colle" les formes et le texte à un certain plan et ajuste sa taille et son angle en fonction de l'endroit où il est placé.

Voici quelques vidéos d'Adobe expliquant exactement ce qu'est l'outil et comment l'utiliser en profondeur:

Définition des grilles de perspective

Dessin en perspective

En outre, voici un didacticiel vidéo de Terry White , qui revient sur des choses similaires.

Et voici quelques didacticiels 3D divers , qui n'utilisent pas nécessairement l'outil Perspective dans Illustrator.

Je pense que cet outil est le meilleur moyen d'obtenir cette sensation isométrique en utilisant Illustrator. Si vous n'avez pas CS5, vous devrez utiliser des méthodes plus approximatives pour créer vos propres grilles, etc.

Alternativement, vous pouvez toujours essayer de trouver un logiciel distinct pour répondre à vos besoins. Quoi qu'il en soit, j'espère que cela vous aidera!

ÉDITER

Pour clarifier, l'outil Perspective n'est en aucun cas "True 3D", c'est simplement un objet 2D avec l'illusion de la 3D (tout comme l'isométrique).

Prenez cette image par exemple. Il s'agit d'une image isométrique, et cette image pourrait être créée avec l'outil de perspective dans l'illustrateur. Certes, il existe de meilleurs logiciels pour cela, mais je pense que c'est l'un de vos meilleurs paris pour le faire dans Illustrator. L'outil de perspective prend un certain temps pour s'y habituer, les tutoriels aideront certainement à cela.

Je pense que la différence que vous voyez entre les exemples que j'ai publiés précédemment et votre "sensation isométrique" n'est que l'angle de l'image. L'isométrique est généralement plus descendant (juste à un angle) tandis que les autres exemples regardent plus directement l'objet. Mais c'est comme ça qu'ils ont décidé de faire leur image.

Je pourrais penser trop compliqué, mais de toute façon, je pensais que je devais partager.

Eh bien, ma première pensée a été Rhinoceros , qui est un logiciel 3D (pour Windows)

Avec lui, vous pouvez très facilement créer du texte 3D et des objets 3D de base comme des cubes, des cylindres et d'autres choses.

De plus, ce que j'avais en tête était la fonction Make2D . Il vous permet de faire des dessins 2D à partir d'objets 3D.

Vous pouvez ensuite enregistrer ces lignes au format .ai.

Voici un exemple d'iphone (pas précis à 100%) que j'ai fabriqué (il y a longtemps) que j'ai maintenant converti en lignes et que j'ai apporté à Illustrator. L'image

Si ce que vous voulez est de le remplir de couleur .. cela peut être un travail un peu fastidieux car vous devez joindre des chemins avant de pouvoir le remplir .. Sélectionnez 2 lignes ou plus et Ctrl + J.

Je pense que le tutoriel parfait pour vos besoins vient d'apparaître sur le site Web Digital Arts . Ce n'est pas seulement un «How To», c'est une étude de cas entière à part entière.