Como desenhar vetores isométricos?

16

Estou procurando soluções de software "incorporadas" para o Illustrator CS2-5, de preferência.

Estou tentando criar essas ilustrações isométricas para um aplicativo da web. No momento, configurei manualmente uma grade no Adobe Illustrator e fiz os desenhos com base nessa grade - mas não tenho guias, snap e coisas assim…

O resultado final deve estar próximo disso: http://www.twigital.co.uk/

Gostaria de saber se você conhece um bom software para desenhar coisas isométricas, do qual eu possa produzi-lo como um vetor (.eps ou .ai), para que eu possa importar para o Illustrator e exibir as cores e outras coisas?

Se você não conhece um software especialmente para isso, você já fez ilustrações isométricas no Illustrator? Algum método? Alguma dica?

Exemplo de desenho vetorial isométrico

EDITAR:

Não confunda desenho isométrico com desenho em perspectiva de 1,2 ou 3 pontos.

DESENHO ISOMÉTRICO:

[o sistema isométrico é apenas uma convenção / invenção, útil para muitas coisas, não para reproduzir o que os olhos veem na realidade, mas realmente apenas uma convenção útil para medições e outras coisas]

métrica iso (igual) (medição)

Em um desenho isométrico , todas as arestas de um cubo seriam paralelas em conjuntos de quatro. (2 linhas paralelas significa que as linhas nunca se encontrarão, não importa quanto tempo você as desenha)

DESENHO PERSPECTIVO:

[As convenções de desenho em perspectiva (1, 2, 3 e algumas outras) ainda são convenções, mas elas tentam imitar e ficar o mais próximo possível do que o olho vê na realidade (3D), mas como é em 2D (papel / tela) nunca é como a realidade é.]

[Outra coisa que alguns podem argumentar é que o fato de termos dois olhos (apenas alguns dispositivos ópticos) * e a imagem realmente unir (é criada) através de alguma mágica que acontece no cérebro, faz outro ponto por que nenhuma dessas convenções realmente se assemelham com precisão à realidade também ... mas isso é para a filosofia SE: P] *

No desenho em perspectiva , as arestas afunilariam em direção a um ou mais pontos de fuga.

Com a Grade de perspectiva no Illustrator CS 5, existem 3 opções:

Perspectiva de 1 ponto, perspectiva de 2 pontos e perspectiva de 3 pontos.

Depois de processar todas as informações acima (as informações da Internet podem estar erradas, fique à vontade para deliberar), assumo que não é possível obter uma visão isométrica de vários objetos em uma tela (como no exemplo acima, twigital.co.uk (obrigado a George por explicar como foi feito em sua resposta) com uma grade de perspectiva, ou seja, com uma perspectiva de 1 ponto: as linhas se encontrarão em um ponto no horizonte, 2 pontos: linhas vai se encontrar em 2 pontos no horizonte, 3 pontos ... você entendeu ...

E com uma vista isométrica, as linhas nunca se encontram , pois são paralelas. (Acho que você também pode chamar de perspectiva isométrica, é por isso que estou um pouco confuso)

!!! Mas se você criar a grade manualmente, isso é possível , você poderá aprender como fazer isso ou baixar uma já feita aqui . Depois de fazer tudo neste tutorial, selecione todas as linhas que você criou e vá para Exibir> Guias> Criar guias . Esta é uma espécie de resposta para esta pergunta, mas eu estava apenas procurando por uma solução "incorporada" e ...

Tentei fazer isso com a grade de perspectiva no Illustrator CS5 ... não funcionou para mim, se alguém tiver feito isso com a Grade de perspectiva no Illustrator, explique as etapas exatas para isso.

Alguns podem dizer que eu enfatizo muito as coisas acima, mas se você criar um aplicativo complexo com centenas ou apenas 50 objetos posicionados aleatoriamente (de maneira isométrica) e os objetos não forem perfeitamente isométricos, você terá resultados feios aqui e ali (nem todas as linhas serão paralelas e parecem ruins) ou se for um aplicativo para medições e projeções reduzidas com precisão, você acabará com números "ruins" ... e provavelmente não deseja isso. .

Flavius ​​Frantz
fonte
1
Até agora, a melhor opção que encontrei é o que você comentou na resposta de @Johannes: converta as linhas em grade. Está longe das visualizações isométricas oferecidas por qualquer software CAD 3D (ou geralmente 3D), mas talvez seja uma solução alternativa suficiente para um software de ilustração 2D (que, sim, possui algumas ferramentas para ajudar a desenhar em perspectiva).
Jari Keinänen

Respostas:

11

Para o twigital, o designer ( Chris ) usou o Illustrator, uma grade e a ferramenta Rotação 3D. Observe que ele tem predefinições para rotações isométricas.

Se você precisar mais do que o Illustrator fornece por padrão, tente o plug-in CADtools para Illustrator , que fornece ferramentas para desenho e dimensionamento isométricos.

Eu tenho mais alguns recursos para compartilhar. Com base neste tutorial , registrei as etapas acima como ações, para que você possa acionar as que usam atalhos de teclado:

  • Esquerda = CMD + Shift + F1
  • Superior = CMD + Shift + F2
  • Direita = CMD + Shift + F3

Para obtê-los, basta baixar este arquivo: Isometric.aia e no ilustrador, vá para Actions (Window> Actions) e no menu de contexto (o pequeno ícone no canto superior direito com a seta apontando para baixo e 2 linhas horizontais (=)) escolha Ações de carga e navegue até Isometric.aia

Também é bastante simples criar as ações do zero.

Também fiz algumas gravações na tela:

O arquivo completo dos arcos pode ser baixado aqui: iso_arches.ai

arcos isométricos

Existem três coisas principais que podem não ser evidentes no vídeo que serão úteis:

  • usando ponto de encaixe / uma grade de referência para colocar objetos mais facilmente
  • usando uma unidade para módulos para que diferentes peças se encaixem
  • ao montar objetos com peças repetidas, usando símbolos em vez de grupos

para facilitar os ajustes

George Profenza
fonte
+1 para o CADtools para o Adobe Illustrator CS3, CS4, CS5 e CS5.5 link para o plug-in. E a configuração isométrica da ferramenta Rotação 3D também é boa. Esses são métodos do tipo "embutidos no software" para fazer um desenho isométrico correto e preciso ... mas esse plug-in do CADtools é meio caro.
Flavius ​​Frantz
1
Pode-se notar que o tutorial SSR tem um erro de digitação 86,062% deve ser 86,602% , porque é o valor de cos (30) e sin (60), onde o ângulo corresponde às suas rotações. Se você não corrigir isso, acabará por ter problemas, pois as coisas não se alinham exatamente entre as transformações.
Joojaa
1

O Illustrator CS5 possui uma ótima ferramenta nova chamada "Perspectiva". Essa ferramenta permite configurar uma grade de perspectiva 2D ou 3D que ajuda a desenhar itens para dar dimensão. Ele "adere" as formas e o texto a um determinado plano e ajusta seu tamanho e ângulo, dependendo de onde foi colocado.

Aqui estão alguns vídeos da Adobe explicando exatamente o que é a ferramenta e como usá-la em profundidade:

Definindo grades de perspectiva

Desenho de arte em perspectiva

Além disso, aqui está um vídeo tutorial de Terry White, meio que analisando coisas semelhantes.

E aqui estão alguns tutoriais 3D diversos , não necessariamente utilizando a ferramenta Perspectiva no Illustrator.

Acho que essa ferramenta é a melhor maneira de obter essa sensação isométrica usando o Illustrator. Se você não possui o CS5, precisará usar alguns métodos mais difíceis de criar suas próprias grades e quais não.

Como alternativa, você sempre pode tentar encontrar um software separado para atender às suas necessidades. De qualquer maneira, espero que isso ajude!

EDITAR

Para esclarecer, a ferramenta Perspectiva não é de forma alguma "True 3D", é apenas um objeto 2D com a ilusão de 3D (assim como isométrica).

Veja esta imagem, por exemplo. Esta é uma imagem isométrica e pode ser feita com a ferramenta de perspectiva no ilustrador. É verdade que existe um software melhor para isso, mas acho que essa é uma das suas melhores apostas para fazê-lo dentro do illustrator. A ferramenta de perspectiva leva algum tempo para se acostumar, os tutoriais definitivamente ajudarão nisso.

Eu acho que a diferença que você está vendo entre os exemplos que eu postei anteriormente e sua "sensação isométrica" ​​é apenas o ângulo da imagem. Isométrico é geralmente mais descendente (apenas em ângulo), enquanto os outros exemplos estão olhando mais diretamente para o objeto. Mas foi assim que eles decidiram criar sua imagem.

Hanna
fonte
Uhum, eu tenho o CS5, noto a grade de perspectiva, mas você pode configurá-la para entrar no modo "isométrico"? Porque isométrico não é 3D, é 2D, mas meio que parece 3D, isso é tudo ... e em gráficos isométricos não há perspectiva ... [ en.wikipedia.org/wiki/Isometric_projection ]
Flavius ​​Frantz
3
até agora, fiz manualmente minha grade com linhas simples no illustrator, depois selecionei todas elas e fui para Exibir> Guias> Criar guias, para que todas as minhas linhas agora sejam uma grade isométrica feita de guias (não apenas linhas no ilustrador) e com as guias inteligentes eneabled eu meio que conseguir o que quero ... não totalmente, mas perto ...
Flavius Frantz
@ Flavius: Essa é a maneira de fazer isso. Você deve fazer disso uma resposta.
Alan Gilbertson
Editado para esclarecimentos. Espero que isso faça mais sentido agora.
217 Hanna
@ Johannes [Eu editei minha pergunta para esclarecer algumas coisas, principalmente para mim e pessoas como eu, que não facilitam essas coisas]. Explique como fazer isso com a grade de perspectiva no Illustrator CS5 e obtenha algo como o exemplo em a pergunta, ou o seu exemplo, mas eu preferiria o meu, que consiste em vários objetos desenhados e depois dispostos em uma tela em uma questão isométrica.
Flavius ​​Frantz,
1

Eu poderia estar pensando muito complicado, mas de qualquer maneira pensei que deveria compartilhar.

Bem, meu primeiro pensamento foi o Rhinoceros , que é um software 3D (para Windows)

Com ele, você pode facilmente criar texto 3D e objetos 3D básicos, como cubos, cilindros e outras coisas.

Além disso, o que eu tinha em mente era o recurso Make2D . Ele permite que você faça desenhos 2D de objetos 3D.

Você pode salvar essas linhas no formato .ai.


Aqui está um exemplo de iphone (não 100% preciso) que eu criei (há muito tempo) que agora converti em linhas e a partir do que trouxe para o Illustrator. A imagem

Se o que você deseja é preenchê-lo com cores, isso pode ser um pouco tedioso, pois você precisa unir os caminhos antes de preenchê-lo. Selecione 2 ou mais linhas e Ctrl + J.

Joonas
fonte
opção interessante .. eu vou olhar para ele
Flavius Frantz
+1 para recomendação de software 3D que tem a opção de exportar e depois importar para o illustrator. será útil não apenas neste caso ...
Flavius ​​Frantz 08/12
1

Acho que o tutorial perfeito para seus objetivos acabou de aparecer no site de Artes Digitais . Não é apenas um "Como Fazer", é um estudo de caso completo.

Alan Gilbertson
fonte
Ele ele ... é claro que apareceu, eu pedi, não foi? : P: P [jooooke]. Ótimo tutorial, vou ver mais tarde esta noite, obrigado pelo aviso. :)
Flavius ​​Frantz
Mas é claro! Há uma grade isométrica pronta incluída no tutorial, o que pode economizar algum tempo. :)
Alan Gilbertson