sábado, janeiro, 2019

Criando ilustrações isométricas

1 estrela2 estrelas3 estrelas4 estrelas5 estrelas
Loading...
FavoriteLoadingFavoritar este Post
Categoria:

Aprenda a criar rapidamente gráficos isométricos Eye-Popping para seus requisitos de design.

Se você é Designer ou um Ilustrador, possivelmente menos ou mais você está fazendo com as Ilustrações a cada dois dias. As ilustrações não apenas tornam o Design do Produto esteticamente agradável, mas também ajudam o usuário a entender melhor sobre a Funcionalidade e o Comportamento do Produto.

No mundo das Ilustrações, temos tantos estilos diferentes e eles ainda estão evoluindo para o infinito ∞. Ilustrações isométricas estão entre um dos mais favorecido dos ilustradores nos dias de hoje.

Nos meses anteriores, eu estava trabalhando com o help desk do uvdesk Product Design (Read Story) e criei uma série de ilustrações com estilo isométrico para os diferentes aplicativos uvdesk.

Ilustrações isométricas para o aplicativo uvdesk

Geralmente, os ilustradores usam o fluxo tradicional, que inclui o desenho de uma Grade Isométrica primeiro e depois a criação de objetos por toda parte manualmente.

image1

Grelha isométrica tradicional

Eu sou um técnico com uma abordagem artística e não um artista obcecado por tela, no entanto, eu ainda amo e me inspiro na arte.

Então escolhi a Técnica Geométrica sobre a metodologia tradicional para criar as Ilustrações Isométricas de arregalar os olhos.

Começando

O artigo é destinado a ilustradores / designers iniciantes que tenham um conhecimento básico do Adobe Photoshop .

Técnica Geométrica

Um plano é uma superfície bidimensional que se estende ao infinito. 
As ilustrações isométricas são criadas usando Geometria 3D, que possuem 3 estruturas geométricas distintas.

Plano XY  - O objeto está nos planos X e Y. O tamanho do objecto é controlada em X e Y plana enquanto profundidade, de elevação ou distância alterações no plano Z .

image2

Superfície XY em geometria 3D

Plano YZ  - O objeto está nos planos Y e Z. O tamanho do objecto é controlada em Y e Z plano enquanto profundidade, de elevação ou distância alterações no plano X .

image3

Superfície YZ em geometria 3D

Plano ZX  - O objeto está nos planos Z e X. O tamanho do objecto é controlada em Z e X plano enquanto profundidade, de elevação ou distância alterações no plano Y.

image4
Superfície ZX na geometria 3D

Etapas para criar um objeto isométrico na superfície XY

Abra o Photoshop e crie um novo documento.

Crie um quadrado que tenha cada lado com 400px de largura usando o
Rectangle Shape Tool(U)

image5

Selecione a forma quadrada usando o Move Tool( V) e defina a altura como na barra de opções . 90%

image6

Selecione a forma quadrada usando Move Tool( V) e defina a inclinação horizontal para a partir da barra de opções . -30 graus

image7

Agora defina o Ângulo de Rotação para a Barra de Opção, o que resultará em um Quadrado deitado na Superfície XY. +30 dgraus

image8

Vamos compilar todos esses passos e ver tudo junto por uma vez –

image9

Agora a profundidade do quadrado pode ser extrudada no plano Z duplicando a mesma camada quadrada com a “Alt” + “Down Arrow” chave várias vezes (≈75 +). O resultado seria algo como desenhado abaixo –

image10

Agora você pode usar Clipping Masks para adicionar cores diferentes à cena e a saída final pareceria algo desenhado abaixo –

image11

Voila! Fácil uHuh! Você aprendeu perfeitamente e agora você pode criar um objeto isométrico no plano XY.

Agora, vamos criar um objeto isométrico na superfície XZ

Crie um novo PhotoshopDocument.

Crie um quadrado que tenha cada lado com 400px de largura usando o Rectangle Shape Tool(U)

image18

Selecione a forma quadrada usando Move Tool( V) e defina o ângulo de rotação a partir da barra de opções . -45 graus

image12

Agora defina a altura para a partir da barra de opções . 56%

image13

Agora definir o ângulo de rotação a partir da Barra de opção que irá resultar em uma praça deitado sobre a superfície XZ. +60 graus

image14

Agora a profundidade do quadrado pode ser extrudada no Plano Y , duplicando a mesma camada quadrada com as teclas “Alt” + “Up Arrow”e “Alt” + “Right Arrow” alternativamente várias vezes (≈75 +). O resultado seria algo como desenhado abaixo –

image15

Vamos compilar todos esses passos e ver tudo junto por uma vez –

image16

Agora você pode usar Clipping Masks para adicionar cores diferentes à cena e a saída final pareceria algo desenhado abaixo –

image17

Louco! Você está aqui e agora você pode criar um objeto isométrico que fica no plano ZX.

Por último, mas não menos importante, vamos criar um objeto isométrico na superfície YZ

Crie um novo PhotoshopDocument.

image18

Selecione a forma quadrada usando Move Tool( V) e defina o ângulo de rotação a partir da barra de opções . 45 graus

image19

Agora defina a altura para a partir da barra de opções . 56%

image20

Agora defina o ângulo de rotação para a partir da barra de opções que resultará em um quadrado deitado na superfície YZ. -60 graus

image21

Agora a profundidade do quadrado pode ser extrudada no Plano X duplicando a mesma camada quadrada com as teclas “Alt” + “Up Arrow”e “Alt” + “Left Arrow” alternativamente várias vezes (≈75 +). O resultado seria algo como desenhado abaixo –

image22

Vamos compilar todos esses passos juntos para um rápido passeio

 

image23

 

Como anteriormente feito, você pode usar Clipping Masks para adicionar cores diferentes para a cena e a saída final seria algo como desenhado abaixo –

image24

Wooo Hoooo0! Você é agora um PRO com todos os três planos. Tire um minuto e tente criar algum olho ofuscante 3D procurando ilustrações isométricas.

 

Eu criei um conjunto de ilustrações usando a mesma técnica geométrica. Você pode ter um olho em alguns dos meus rascunhos isométricos abaixo –

image25

Uma interface do usuário do aplicativo com ilustração isométrica para o Mobikul eCommerce App Builder

image26

Uma ilustração do conceito para a seção de contato do Webkul

image27

Design de página principal com ilustração isométrica para o Cloudkul eCommerce Optimiser

Espero que você goste desta parte da escrita e ache útil para criar pelo menos algumas ilustrações ou ícones para seus padrões de design.

Esse texto é traduzido do post original escrito por Nitish Khagwal

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Leia mais >