sexta-feira, 5 de novembro de 2010

Isométrico

Nesse tutorial ensinarei o básico da arte do pixel art isométrico.

O que é Pixel Art isométrico?

Pixel Art isométrico nada mais é do que pixel art em uma base "diferente", numa visão " meio de frente meio de cima", como a Big Iso City do Gunstar Red ou o Rewound do Gas 13.

Pixel Art isométrico, é feito numa base de 27º ~ 30º, ficando assim:

1 pixel nas juntas:


2 pixels na junta:


3 pixels na junta:


As três maneiras estão certas, escolha a que você acha melhor.

Veja, mais precisamente com zoom:

1 pixel na junta:


2 pixels na junta:


3 pixels na junta:


Observe que são:

dois pixel
...............dois pixel

Formando essa base da vista "meio de frente meio de cima".

Botando em pratica:

Bem simples para os iniciantes.
Esse é um quadrado normal:



Tentaremos tranformá-lo em um cubo:

Primeiro começaremos fazendo a base do cubo:

1 pixel na junta:


2 pixels na junta:


3 pixels na junta:



Obs.: Não precisa fazer a base inteira, se você só for usar a "parte de baixo", só fiz nesse caso, como parte do tutorial

Depois, a base, ou um "cubo":

1 pixel na junta:


2 pixels na junta:


3 pixel na junta:




Como? Fácil, faça linhas retas para fazer de "quinas" do cubo, depois faça outra base para ficar
encima.

Agora a coloração:

Usaremos 3 cores para faze-la:

No final ele ficará assim:

1 pixel na junta:


2 pixels na junta:


3 pixels na junta:


Mas eu vou explicar, na parte de cima do cubo, é aonde está vindo a iluminação dele, por isso, é a parte mais clara.
Na parte da esquerda, é aonde esta mais escuro, então é o lugar sombreado.
A parte da direita, não há nem a iluminação, nem sombreamento, vou cham-la de "parte normal".

É optativo, mas no final, você pode preencher as linhas dentro do cubo, o que o deixará assim:

1 pixel na junta:


2 pixels na junta:


3 pixels na junta:



Fim do tutorial.
-
Creditos ao Alien

terça-feira, 2 de novembro de 2010

Lição De Casa

Fazer uma cidade destroída, Prazo: 2 de novembro 19:00

Tutorial básico sobre Paint e Pixel Art


A Pixel Art é um fenômeno que se originou dos jogos eletrônicos. Os primeiros jogos, em sua maioria, eram realizados por uma só pessoa, geralmente um programador que, lidando com limitações estreitas de hardware, criava gráficos através de mosaicos de pixels (lembre-se: havia outras maneiras, mas estamos falando de pixel art) procurando uma solução mais simbólica e menos estética para representar aquilo que estava acontecendo no jogo, embora esse trabalho resultasse numa estética muito particular. A maior preocupação era transmitir as informações da forma mais clara possível, dentro dos limites da máquina.

Mas como saber o que é pixel art e o que não é? O que a caracteriza? Pense numa imagem ou um conjunto de imagens construídas através de pequenas áreas de cor chapada, ou seja, um mosaico de pixels. Isso é pixel art. Ela não pode ser ampliada ou reduzida sem que haja perda de qualidade, uma vez que não é vetorial. De forma bastante vaga, pode-se definir pixel art como imagens que podem ser feitas no Paint, isso porque as possibilidades (ou limitações) do Paint não permitem o uso de vetores (ao menos até a versão do Windows 7, que nunca experimentei). Obviamente a sua sobrinha de cinco anos escrevendo o nome no Paint não é uma manifestação da pixel art, assim como as garatujas dela em folhas de papel não são expressionismo.

É bom deixar claro que há divergência de opiniões quanto ao conceito de pixel art, mas esses questionamentos surgem apenas em trabalhos mais experimentais. A definição de pixel art que apresentei aqui é uma definição básica, tudo o que é pixel art cumpre essas especificações.


Tutorial básico sobre Paint e Pixel Art - por PfP

Existem infinitas maneiras de se trabalhar com pixel art no Paint. Eu mesmo uitilizo técnicas diferentes, dependendo do trabalho. Nesta pequena matéria, vou falar sobre as ferramentas do Paint enquanto faço uma tela. É importante ressaltar que não há um "processo certo", meu processo está aqui somente para ilustrar as possibilidades do Paint.

No link abaixo, a interface do Paint com alguns comentários.
http://uploaddeimagens.com.br/imagem/ver/3tela_1.gif



Começando

Pixel Art

A linha reta facilita o trabalho de criar ângulos e perspectiva, e é a ferramenta preferida de muitos na hora de desenhar. Eu, particularmente, prefiro o lápis, adotando a linha somente para criar ângulos mesmo (como é o caso desse cenário, com muitos prédios e ângulos retos).

Pixel Art

Pixel Art

Isso vai fazer com que a imagem original permaneça no local, gerando uma cópia que será arrastada. Se o mesmo for feito segurando o shift, surgirá um "rastro", como na imagem abaixo:

Pixel Art

A ferramenta de recorte "forma livre", mais conhecida como "estrela", também pode ser usada, embora nesse caso não haja necessidade. Sua vantagem é recortar parcialmente a figura, contornando aquilo que se deseja. Eu não costumo usar muito.

Pixel Art

A borracha é uma mão na roda, e uma das ferramentas mais importantes. Embora ela também apague, a sua função mais útil é colorir. Frequentemente me pego usando as ferramentas de recorte ou as próprias linhas e o lápis para apagar detalhes - com muito mais eficiência que a borracha.
A vantagem da borracha na colorização é a possibilidade de recolorir parcialmente a sua figura, selecionando a cor que vai ser retirada e a cor que vai substituir. Com o botão esquerdo se seleciona a cor a ser retirada, e com o botão direito se seleciona a nova cor. Veja na sequência abaixo:

Pixel Art
Pixel Art
Pixel Art

Percebam que, no segundo quadro, a borracha está sendo utilizada com o botão esquerdo, mas é a cor correspondente ao botão direito que preenche a figura. Isso porque a borracha entende a cor secundária como o "fundo da folha", e ao pressionar o botão esquerdo você estará "apagando" a imagem, revelando a cor do fundo da folha.

Agora, voltando à tela.

Pixel Art
Pixel Art
Pixel Art
Pixel Art
Pixel Art
Pixel Art

O vermelho que eu utilizei não está na tabela de cores padrão do Paint, porque é uma cor personalizada que eu criei. Para isso, eu percorri o seguinte caminho:

Pixel Art
Pixel Art
Pixel Art

Pixel Art
Pixel Art
Pixel Art
Pixel Art

Lembrem-se do que eu disse no começo do tutorial: não há um "processo certo", meu processo está aqui somente para ilustrar as possibilidades do Paint. Se o artista quiser, pode manter os contornos, dar destaque a eles, colorir com retícula... como eu disse, as possibilidades são infinitas.

Pixel Art

Notem as combinações de cores e a quantidade de ferramentas nessa última etapa. No começo do tutorial, eu me contive em utilizar poucos recursos para ilustrar o processo com mais clareza. Já no final, preferi demonstrar o dinamismo da pixel art. A alternância de cores e ferramentas é constante e, quanto maior a prática, menos você percebe esses movimentos.

Pixel Art

Algumas utilidades, antes de finalizar

Sobre o conta-gotas

Uma ferramenta muito útil sobre a qual ainda não falei. O paint não mantém a tabela de cores personalizada que você define. Ao salvar uma imagem e fechar o programa, a paleta se perde. Quando você volta a abrir aquela tela não-finalizada, suas cores não estão mais na tabela, sumiram, mas ainda estão na imagem. É aí que entra o conta-gotas. Com ele você recupera as cores personalizadas com um clique, podendo armazenar tanto no botão direito como no botão esquerdo.

Pixel Art

Girando uma imagem

Se você quer girar uma imagem, existem duas possibilidades. A primeira delas:

Pixel Art
Pixel Art
Pixel Art

Com o "inverter/girar" só é possível girar a imagem nesses três ângulos. Isso para manter a ordem dos pixels, sem "quebras" na imagem. Mas há uma segunda possibilidade que te permite fazer giros "quebrados".

Pixel Art
Pixel Art
Pixel Art

Se você estiver montando uma folha de sprites, ou sprite sheet, e pretende utilizar esse giro quebrado para animações como a do Sonic correndo por rampas, por exemplo, é aconselhável girar a imagem antes de colorir e finalizar. Isso porque será possível consertar as falhas no desenho sem dificuldade. Consertar as falhas da imagem que usei de exemplo seria praticamente um suicídio. Se você não estiver montando uma sprite sheet, então é melhor nem pensar em giros quebrados.

A terceira cor

Pixel Art

Na verdade a cor "ctrl" é pouco funcional, sendo que pra utilizá-la é preciso estar pressionando a tecla Ctrl e o botão esquerdo do mouse. Além de ser um desperdício de dedos, dificilmente será necessário utilizar três cores ao mesmo tempo. Eu arriscaria dizer que nunca será necessário.





Créditos: PfP - Pixel Paradise Pixel Art