[Paint]Isometric Pixel Art

Assunto: [Paint]Isometric Pixel Art Dom Abr 05, 2009 12:00 pm

-Isometric Pixel Art-

- Programa utilizado: Paint
- Dica: use o zoom nas imagens do tutorial para entendê-las melhor!

Introdução;

Primeiramente, você deve saber o que é pixel, que por definição é cada pontinho da sua tela. Quando você diz que seu monitor é de 800x600px, quer dizer que há oitocentos pontinhos destes por linha e seiscentos pontinhos destes por coluna. pixel art é transformar estes pontinhos (que a partir de agora serão referidos apenas por "pixels") em arte, formando desenhos com eles. e, finalmente, pixel art isométrico é quando o pixel art é feito em perspectiva isométrica (3D).

Introdução às ferramentas do paint: Se você não entende muito de paint, aí vão explicações de algumas das ferramentas que serão usadas neste tutorial:

Spoiler:

Cores -> aí você seleciona as cores, usando o conta-gotas. A cor de cima (no caso, branco) é a cor que estará "ativa", ou seja, ao selecionar a opção de lápis, pincel e afins, será ela a utilizada. A segunda cor (cinza) é o background da imagem, a cor de fundo. Se você usar a borracha ou deletar uma parte selecionada, a parte apagada ficará desta cor.

Spoiler:

Selecionar -> é usada para selecionar partes retangulares da imagem. tá vendo aqueles quadrados ali embaixo? servem para você dizer se quer que o fundo da imagem seja transparente (desde que ela seja da mesma cor de background selecionada) ou não. (segunda opção = fundo transparente).

Spoiler:

Zoom -> como o nome sugere, serve para dar zoom na imagem. Você escolhe se quer zoom de 1x (escala natural), 2x, 6x ou 8x. para trabalhar com pixel art não-isométrico, eu costumo usar o zoom 8x, e para pixel art isométrico, o zoom 6x, mas isso varia de gosto.

Spoiler:

Mostrar Miniatura -> quando você estiver com o zoom selecionado, vá em Exibir >> Zoom >> Mostrar miniatura. Isso irá ajudar na hora de ver como seu pixel está ficando exatamente.

Spoiler:

Introdução à perspectiva isométrica;

A perspectiva isométrica baseia-se em ângulos de 30º. Se você não entende muito bem, pegue uma folha de papel e desenhe uma linha reta, determine o centro e pegue um transferidor. Posicione-o no centro e marque os ângulos de 30º e 150º (meio círculo = 180º. 180º - 30º = 150º :]), passando uma linha do centro até cada uma destas marcações. esta será a base para a realização de qualquer peça em perspectiva isométrica.

Spoiler:

Porém, se você olhar bem, notará uma linha bem irregular, com seqüências de um ou dois pixels sem definição. Para resolver este problema, usaremos a medida de 26º, que formará seqüências uniformes de dois pixels.

Spoiler:

Agora você irá conhecer as três propriedades de uma peça em perspectiva isométrica: largura, profundidade e altura (X, Y e Z, respectivamente).

Spoiler:

Como pode-se presumir a partir do conhecimento destas propriedades, o lado direito da peça (ou seja, a sua esquerda) será sempre a parte frontal.

Construindo uma peça simples em perspectiva isométrica.

Primeiro de tudo, aprenderemos a fazer um cubo de medidas 50x50. Esta é a parte mais difícil de se explicar, porém você entenderá facilmente olhando as imagens.

• Abra o paint, dê o zoom que preferir e selecione o lápis. Com ele, vá desenhando seqüências de dois em dois pixels até chegar aos 50px (ou seja, 25 seqüências). Se preferir, faça direto com a ferramenta linha, mas certifique-se de que está fazendo com 26º. Duplique e inverta esta linha, colando ao lado da original, com 1px de espaço. Neste espaço você desenhará um pixel ligando as duas linhas. Isso serve para não deixar cantos arredondados em seu cubo. zoom na imagem para entender melhor:

Spoiler:

• Copie a imagem e cole. Selecione a cópia, clique com o botão direito e vá em Inverter/Girar >> Girar >> 90º. Faça isso duas vezes e posicione a cópia sobre a original, fazendo o mesmo quanto aos cantos. você já tem a base de seu cubo. Duplique-a, este será o topo.

Spoiler:

• Agora, faça quatro linhas retas de 50px cada e cole-as nos cantos da sua imagem, naqueles pixels únicos que você desenhou.

Spoiler:

• Pegue o topo e posicione-o em cima da peça, com cuidado para fazer os cantos tocarem exatamente as pontas das linhas que definem a altura da peça.

Spoiler:

• Você já tem o esqueleto de seu cubo! agora é hora de pintá-lo. Para tal, você precisa de uma paleta.Paleta é um conjunto de tons de uma mesma cor, que servem para dar efeitos de sombra, luz e volume. Se procurar bem, você pode achar paletas prontas na internet, mas tente criar a sua.
As cores que vêm prontas naquela barrinha de cores do paint são muito limitadas (e feias!), então clique duas vezes em qualquer uma delas. Irá abrir a caixa Editar cores. vá em Definir cores personalizadas e brinque a vontade! Smile

use sempre um tom escuro para os contornos externos, três tons parecidos para a peça em si e branco para os cantos. Aqui está a minha paleta azul:

Spoiler:

Usei o azul mais escuro para pintar o contorno da peça.

Spoiler:

...e o branco para os contornos de dentro:

Spoiler:

As linhas que sobraram não aparecerão na peça, logo, podem ser apagadas.

Spoiler:

Agora vamos pintar as faces do cubo. Defina o ponto de luz, que geralmente bate na face frontal (por isso, iremos pintá-la com o tom de azul mais fraco)

Spoiler:

A lateral será pintada com um tom mediano...

Spoiler:

... e o topo com o tom mais escuro.

Spoiler:

seu cubo está pronto! Very Happy

Com esse tutorial você pode até tentar fazer Tilesets.. basta apenas mudar algumas coisas, e usar a criatividade... Um abraço.

Até a prox.!

OBS: Caso não esteja conseguindo visualizar as imagens, mande uma MP para min, que manderei os "Links" lol!

Caso queira aulas de Sombreamento, o link está logo abaixo:

Tutorial sobre Sombreamento

Caso chegue a visualizar esse topico, não deixe de comentar.. seu comentario é muito importante para um bom desenvolvimento

Mestre Postagens : 959 Data de inscrição : 02/04/2009

Mais um tutorial pelo Paint Very Happy

Boa contribuição, assim poderemos ter uma seção talvez de Tutoriais de Paint.