Ilustração digital: criando a partir da perspectiva isométrica

Base - Apresentação

Meu nome é Rainer Petter, sou ilustrador e quadrinista. Nesse curso, eu vou passar para vocês os primeiros passos da ilustração isométrica. Ilustração isométrica é um estilo de ilustração com um tipo de perspectiva especifico muito utilizada em várias áreas do mercado.

Temos muito uso no mercado editorial, com infográficos, como vocês estão vendo, no mercado publicitário é também bastante utilizado e com jogos, tem uma variedade imensa de estilos diferentes de imagens isométricas utilizadas em jogos.

O que vamos fazer aqui no curso vai ser a introdução, vamos começar a aprender a como trabalhar com este tipo de perspectiva. Vou mostrar para vocês como criamos esse grid isométrico para trabalharmos com as imagens sobre ele.

Vamos começar na parte técnica fazendo linhas retas, linhas inclinadas e curvas, como calcular isso, porque as imagens simétricas, os elementos simétricos temos que calcular como funciona essas curvas para um lado, como funciona essas curvas para o outro, tem todo um cálculo, uma forma para fazer isso para funcionar certo nessa perspectiva.

Vamos fazer exercícios com elementos menores, com objetos e também com elementos maiores, como casas, construções. Isso na primeira parte do curso.

Na segunda parte do curso vamos focar nos tipos diferentes de finalização da imagem. Eu tenho esses seis exemplos que vamos fazer, desde o mais simples até o mais complexo.

Começando com esse mais simples onde temos imagens com a cor chapada e linhas de contorno, e vamos adicionando elementos e possibilidades diferentes de finalização da imagem até chegar nesse mais complexo, onde temos essas imagens mais realistas, com uma eliminação mais realista, com texturas e tudo mais.

É interessante para entender todos esses conceitos que você já tenha um conhecimento básico de desenho. Caso você sinta dificuldade em fazer esse curso, procura, que aqui na Alura temos vários outros cursos de desenho mais básico que pode te ajudar bastante.

Esse curso, eu gravei utilizando o Photoshop, desenhei no Photoshop, mas tudo que vamos ver aqui funciona também em outros programas de desenho. Você pode fazer tranquilamente o curso utilizando o Photoshop, utilizando o Krita e o ProCreate, por exemplo, que também são outros programas que temos mais conteúdos sobre eles aqui na Alura.

É isso, esse é o conteúdo do curso. Espero que você goste e vamos lá.

Base - Overview

Agora vamos ver mais a fundo o conteúdo deste curso. Como eu falei, vamos começar bem do básico criando esse grid que utilizamos para trabalhar com a ilustrações isométrica.

Vou mostrar para vocês qual é a angulação dessas linhas e como criamos e duplicamos essas linhas para criar o grid.

Em seguida, vamos trabalhar com as linhas retas, que são esses exemplos aqui. Parece simples inicialmente, mas não é tão simples porque temos que fazer os cálculos certos para a imagem funcionar bem, evitar lugares onde as linhas fiquem sobrepostas, isso pode causar uma ilusão de ótica que não é legal para leitura final da imagem.

Entendendo como que funciona aqui vamos fazer as linhas inclinadas. Aqui vai ficando um pouco mais complexo porque temos que calcular o quão inclinado estão essas linhas, porque muitas vezes temos que duplicar e criar várias linhas inclinadas da mesma forma para um lado e para o outro lado.

Temos que entender como funciona esse cálculo.

Em seguida, o último estágio de complexidade das linhas, que são as linhas curvas, tanto as curvas quanto os círculos. Temos que calcular essa inclinação de uma forma correta de cada uma das curvas para projetarmos isso de uma forma tridimensional.

Passar essa sensação de tridimensionalidade de modo que funcione bem e não termos um lado torto de um jeito e o outro lado está curvo diferente. Precisamos manter essas curvas iguais.

Vou mostrar também como fazemos para calcular o círculo projetado na perspectiva isométrica. Tem todo um cálculo, essa imagem que vocês estão vendo aqui parece meio confusa, eu vou mostrar para vocês como que fazemos esse tipo de cálculo.

Terminando essa questão técnica de como trabalhar com as linhas, vamos começar os exercícios mais práticos onde vamos pegar várias fotografias de objetos, elementos e fazê-los na perspectiva isométrica.

Vamos colocar em prática aquelas linhas retas, linhas inclinadas e linhas curvas que teremos visto nas aulas anteriores.

Vamos começar com objetos menores e depois vamos fazer casas, construções maiores onde vai exigir ainda mais do conhecimento que já vamos ter visto anteriormente das linhas retas, inclinadas e curvas.

A segunda parte do curso é focada nos estilos de finalização. Igual eu mostro para vocês aqui, podemos fazer essa ilustração isométrica com vários tipos de finalização. Seja ela mais simples, sem linhas de contorno, algo mais pintado, mais realista e tudo que está entre isso.

Temos aqui, por exemplo, jogos com várias possibilidades diferentes. PixelArt com linhas de contorno. Aqui é um estilo mais realista, mas mantém linhas de contorno. Aqui é um estilo supersimples, só que sem as linhas de contorno.

Vamos ver seis exemplos diferentes onde vamos começar do básico e vai acrescentando elementos até chegar nesse último aqui, da última aula onde temos uma iluminação mais realista, tem uma textura, luz e sombra, e cores mais complexas.

Esse é o conteúdo que vamos ver aqui no curso. Vamos começar no básico até chegar nessa ilustração aqui mais complexa seguindo essa perspectiva isométrica. É isso, espero que você goste do curso.

Base - A aplicação da isometria

Para começar vou mostrar para vocês alguns exemplos de aplicações desse tipo de ilustração isométrica.

São muitas e muitas possibilidades, vocês irão ver ver que é um recurso muito amplo trabalharmos com essa perspectiva, com um certo tipo de inclinação onde vemos todos os elementos da imagem.

Não temos aquela distorção natural quando trabalhamos com pontos de fuga onde os objetos e elementos mais longe vão ficando menores, então trabalhamos com tudo do mesmo tamanho e isso traz muita vantagem em várias áreas, em vários tipos de mercados diferentes onde podemos trabalhar com ilustração.

Vou começar mostrando exemplo do mercado editorial, no caso aqui com livros, revistas impressas, com jornais digitais também. Temos muito uso de infográficos, que são essas imagens onde eles estão mostrando gráficos e textos juntos.

A perspectiva isométrica ajuda muito porque fica muito mais fácil, muito mais didático para você ensinar e explicar o que está acontecendo na imagem.

Você bate o olho, tem ali todos os elementos, não tem aquela distorção, o que está mais longe vai ficando menor do ponto de fuga tradicional. Não. Está tudo claro aqui e você vai colocando o texto e linkando elementos que estão na imagem.

Essas duas imagens de cima são imagens de exemplos que eu peguei na internet assim mesmo de infográficos em perspectiva isométrica e essa terceira é uma ilustração que eu fiz para revista Superinteressante.

E na época eles estavam mostrando como funcionava o processo de transposição do Rio São Francisco. Isso aqui foi em 2017, se eu não me engano, eles tinham concluído uma etapa e com essa perspectiva isométrica ficaria mais fácil para o leitor bater o olho entender.

No caso aqui, essa imagem que vocês estão vendo, é uma imagem de página dupla. Imagina a revista aberta, as informações do lado esquerdo estão em uma página e as informações do lado direito estariam em outra.

A única coisa que eu tinha que me preocupar era deixar um espaço vazio no meio sem muita informação, que era dobra da página.

Tem aqui seguindo essa perspectiva isométrica, até fiz umas quinas porque eles pediram para deixar uma coisa meio geométrica mostrando o recorte de terra e todos os elementos estão seguindo essa perspectiva. A água, a inclinação, as construções que tem no meio do caminho.

Tem esses closes que eles mandaram fotografias que eram elementos que tinha que ter um ângulo diferente e esse zoom que tem nesses círculos não estaria seguindo a perspectiva isométrica e todos os outros elementos estariam, até a parte de pedra, a vegetação, as casas, plantações tudo seguindo essa perspectiva isométrica que é uma forma mais fácil para o leitor entender o que está acontecendo.

Ainda mais quando tem um texto junto linkando e mostrando todas as coisas. Mercado editorial é um exemplo, principalmente com os infográficos.

Outro exemplo muito utilizado é no mercado publicitário. Peguei essas imagens na internet, vocês já devem ter visto algo do tipo em propaganda nas redes sociais, algum vídeo, porque é bem mais fácil de você também mostrar para pessoa que está consumindo aquela propaganda utilizando essa perspectiva.

Dependendo do tipo de produto que você quer apresentar fica muito mais fácil visualizar, mostrar o que está acontecendo justamente pelo fato de não termos essa distorção da perspectiva tradicional, original que vemos no mundo real com pontos de fuga.

Podemos separar os elementos de uma forma bem clara mesmo para pessoa ver e consumir de uma forma rápida.

Às vezes é um vídeo ou uma propaganda que aparece em um tempo rápido, às vezes é uma imagem que está passando no feed da rede social consegue comunicar de uma forma bem prática.

O mercado publicitário utiliza bastante também esse tipo de perspectiva nas ilustrações. Você pode ver que esses exemplos que eu peguei aqui tem até um visual, uma estética parecida.

Eu acho que foi meio coincidência, é tudo meio azulado, personagem simples, sem linhas de contorno, só cor chapada. É uma coisa rápida de você bater o olho e entender.

Outro mercado muito amplo que utiliza muito a perspectiva isométrica é o de jogos. Eu peguei bastante exemplo para vocês verem que todos estão utilizando esse mesmo tipo de perspectiva, mas cada um com um tipo de finalização diferente.

Vocês viram no vídeo de apresentação do curso que vamos fazer vários tipos de finalizações diferentes, questão de iluminação, traço final.

Olha só, essa primeira imagem é um jogo bem simples, olha só que interessante, que temos a imagem em pixelart, conseguimos visualizar os pixels, os pontos seguindo, tem até os quadrados.

Tem muitos jogos de RPG que às vezes o personagem pode andar tantos quadrados por turno, por rodada. O fato de ser isométrico facilita até na jogabilidade do jogo, você ter esse tipo de controle do quanto que o personagem está andando não é só por questões estéticas para facilitar a visualização do jogo.

Tem esse aqui em pixelart. Tem esse aqui que já é bem mais realista, que é uma estética que a galera está utilizando muito com jogos para aplicativos de celular, de Smartphone.

Às vezes construções de cidades, tem essa iluminação, a textura, algo mais realista, mas ainda mantendo essa perspectiva isométrica porque você pode pegar uma casa que está aqui na frente e coloca-lá lá atrás sem precisar distorcer, diminuir o tamanho, é só copiar e colar. Essa praticidade ajuda muito nesses trabalhos quando temos uma perspectiva isométrica.

Aqui é um mapa de um jogo, olha só como a estética é bem diferente daqueles outros também. É um mapa, temos essa parte para o cemitério, tem um porto, ali em cima tem uma área de gelo.

Também seguindo essa perspectiva isométrica com uma iluminação, uma textura um pouco mais realista, mas ainda mantendo algo colorido, temos algo meio Low Poly, que é como se fosse uma modelagem 3D com poucos polígonos. Vemos essas linhas, vemos os pontos.

Inclusive, tem quem trabalhe com modelagem 3D e depois renderiza isso numa perspectiva isométrica, é uma possibilidade também. No caso aqui vamos focar na ilustração 2D mesmo que as possibilidades são muitas.

Olha aqui outro estilo, também pixelart, só que já com linhas de contorno e bastante detalhe, olha que interessante. Esse aqui tem algo realista na iluminação, só que ainda tem as cores chapadas e não tem texturas. É uma coisa bem limpa mesmo, fica aqui visualizar.

Aqui já é uma outra abordagem, ainda está seguindo essa perspectiva isométrica, tem vários itens, elementos de cenário, estrados para trilho de trem de ferro ou para vagões, carrinho de mão. São vários elementos soltos para o cenário de jogos. Já em um estilo diferente de todos os outros que eu mostrei.

Aqui também é algo que lembra uma modelagem em 3D com uma iluminação bem simples, mas com bastante elementos.

Como estamos vendo isso em uma perspectiva isométrica conseguimos visualizar muito dos elementos, tem até aqueles jogos que tinham bastante antigamente, hoje eu acho que um pouco menos, jogos em que temos uma imagem cheia de elementos onde você tem: "Procure e encontre um machado", você tem que caçar os elementos na imagem.

Com a perspectiva isométrica dá para trabalharmos bastante com esse tipo de estética de jogo também.

Aqui um outro que também está seguindo essa perspectiva isométrica. Uma facilidade que eu falei é isso, de copiarmos e colarmos os elementos. Temos aqui todas essas gramas, olha só, está seguindo o mesmo bloco inicial.

O que fizemos, no caso o que a pessoa fez, foi copiar esses blocos, deixa um mais alto, outro mais baixo, deixa uns com tons diferentes de verde, um verde mais amarelado outro menos amarelado, e você já cria uma variedade e pode reutilizar isso de uma forma mais prática que em um jogo isso facilita muito o desenvolvimento do jogo.

Pensando em jogos, por exemplo, eu separei várias categorias que vamos ver isso mais para frente, provavelmente em cursos mais específicos para cada uma dessas áreas.

Mapas, olha só, como que dá para trabalharmos com mapas, cidades inteiras. Utilizando essa perspectiva conseguimos visualizar, como eu falei, se for no jogo conseguimos mudar uma casa de lugar, um cômodo de comércio de um lugar para o outro.

Esse aqui é um trabalho que eu fiz, nesse caso aqui, é uma ilustração que eu fiz para o mercado publicitário.

Era uma rede de supermercado que estava abrindo nos Estados Unidos e o diferencial deles era que tudo eram produtos orgânicos, artesanais e eles queriam mostrar de onde que vinham todos os produtos que eles tinham lá no supermercado.

Eu fiz essa ilustração que é bem grande. Aqui a imagem não está tão grande, mas olha só, essa ponta aqui ela é essa imagem aqui e aqui, por exemplo, nesse pedaço aqui eles queriam mostrar os produtos que vieram, que no caso iam da América do Sul, tinha cacau, tinha café, tinha leite, tinha cachaça do Brasil.

Tinham muitas plantas e produtos que vinham do Brasil e esse pedaço aqui era da América do Sul.

Aqui, no caso, eram produtos do mundo inteiro. A América do Sul era só aquela ponta lá de cima, tinha da Ásia, da Europa, Oriente Médio. É uma imagem gigantesca, mas é didática porque você consegue visualizar e entender, ela interessante, você fica caçando os detalhes.

Olha só essa imagem aqui se eu der o zoom a outra não está com tanta qualidade, mas tem só tem a vaca ali, tem a produção, pessoas andando ali. Aqui a imagem gigantesca, ela foi impressa bem grande lá nesses mercados.

Outros exemplos de mapas de uma forma bem simplificada que eu encontrei na internet, também seguindo a perspectiva isométrica. Pensando no cenário em si, eu já mostrei alguns exemplos ali, mas te6m mais exemplos aqui.

Esse aqui também é um trabalho que eu fiz que tem uma estética parecida provavelmente com o que vamos durante o curso, é um exemplo de ilustração isométrica que eu fiz só para ter no meu portfólio mesmo.

E a partir dela eu peguei vários outros trabalhos que segue essa estética isométrica para jogo. Nesse caso fiz um tema de Egito.

Aqui também seguindo a estética isométrica. Esse não é meu, encontrei na internet. Com um visual pixelado, achei muito interessante. As possibilidades são muitas, olha só que interessante. Esse aqui eu também fiz seguindo a estética de elementos brasileiros só que com a perspectiva isométrica.

Fiz estradas, árvores, casas, comércios, bar, igreja, uma quadra poliesportiva, uma borracharia que tem um sobrado em cima. Tudo seguindo essa perspectiva isométrica.

É uma finalização, tem uma textura, uma iluminação um pouco mais realista, não é tão realista assim, mas é mais realista que o pixelart, por exemplo. As possibilidades são muitas. Aqui também é outro. Esse aqui também fui eu que fiz para jogo.

Além dos elementos do cenário, tem os elementos menores, que chamamos de “propis”, que são os elementos que podemos copiar e colar, podemos duplicar.

Elementos que pensando no jogo, o personagem vai encontrar no cenário.

Olha só que interessante, esses aqui todos eu peguei na internet para mostrar para vocês. Um encaixe, uma parede que encaixa na outra e você pode fazer construções maiores, elementos menores, como um cama, um aquário, carro. Tudo seguindo essa perspectiva isométrica.

Para finalizar, personagens. Também podemos fazer os personagens seguindo essa perspectiva isométrica. Seja algo simples igual a esses aqui, podemos fazer os sprites com vários ângulos que dá para o personagem andar no jogo.

Aqui estamos vendo ele de vários ângulos, aqui tem o exemplo de movimento. Olha só, fazemos vários braços, várias pernas para ele se movimentar seguindo ainda essa estética isométrica, olha só que interessante.

Eu gostaria mesmo de mostrar para vocês nesses primeiro vídeo quão amplas são essas possibilidades, o tanto que podemos aplicar em áreas diferentes esse conteúdo que vamos ver aqui no curso. No próximo vídeo, vamos começar a desenhar.

Sobre o curso Ilustração digital: criando a partir da perspectiva isométrica

O curso Ilustração digital: criando a partir da perspectiva isométrica possui 168 minutos de vídeos, em um total de 43 atividades. Gostou? Conheça nossos outros cursos de Ilustração Digital em UX & Design, ou leia nossos artigos de UX & Design.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Base
• Geometria isométrica
• Linhas
• Finalização simplificada
• Finalização realista