[Tutorial] Sprites Parte 1 - Conhecendo as ferramentas

Em função de que nossa comunidade é de, principalmente 'escritores' , com um toque de 'programadores de RPG Maker', resolvi fazer uma série de tutoriais, de forma que possamos expandir nossos conhecimentos!

Vou começar explicando sobre uma das ferrramentas que mais uso para spritear e desenhar em geral, o Paint.NET!

Ele é muito melhor do que o MS Paint¹, ele tem muito mais funções, e ainda é grátis!

O Paint.Net pode ser encontrado no ponto final desta frase.

Instalar o programa ajudaria bastante no entendimento =D

O Paint.NET, exatamente por ter mais funções, é bem mais difícil de ser usado.

Mas eu achei também um guia bem útil, me poupando de muito esforço

http://eulogy-dignity.deviantart.com/art/Paint-NET-Interactive-Guide-71790584

É um guia visual. Praticamente todas as opções são clicáveis. Clique para ver o que cada opção faz.

Dependendo da versão, pode estar com os ícones diferentes, mas ainda estão na mesma posição.

Mas, é claro que não vou me limitar ao guia visual. Vou explicar algumas das funções mais importantes.

Aqui temos uma foto-exemplo do Paint.NET


No fundo, você pode notar que uma parte é branca, e outra tem um padrão-xadrez.

A parte em xadrez indica a parte que é "transparente"², enquanto a parte em branco... É realmente branca.

Nas sub-janelas, temos a janela de: Ferramentas, Camadas, Cores e de Histórico.
Quando você abrir, talvez nem todas apareçam, você pode abrir elas com as seguintes teclas:
Ferramentas - f5
Camadas - f6
Cores - f7
Histórico - f8

O histórico, é como o Ctrl+Z no MS Paint, sendo que você pode escolher pra onde voltar, além de ter uma possibilidade de voltar à momentos muito mais antigos.



Em "Cores", você pode selecionar... As cores.
Você pode clicar no 'círculo colorido' para fazer com que ou a cor primária, ou a secundária seja trocada para a cor selecionada.

A cor primária é aquela do quadrado à esqueda, em cima, enquanto que a secundária é a da direita, em baixo, sendo que a 'seta dupla'(↨) troca as duas cores de lugar.

A cor primária é a cor do botão da esquerda do mouse, enquanto que a secundária é o da direita, sendo também a cor selecionada como padrão para o fundo.
Você pode obter maior precisão de cores, assim como acesso maior ao canal alpha ao clicar "Mais >>".

Assim, você pode escolher com precisão o valor RGBA⁴.


Em "Camadas", você controla as... Camadas de seu 'desenho'.

Clique na opção inferior à esquerda para inserir mais uma camada, o "X" para eliminar a camada selecionada, a próxima para clonar a camada atual, e a próxima para 'fundir' a camada atual com a 'abaixo' dela.
As setas podem ser usadas para colocar a camada atual mais 'acima' ou 'abaixo'.

As camadas mais acima se 'sobrepões' sobre as que estão abaixo.

Lembrando que qualquer operação feita ocorre apenas na camada atual. Aqui um exemplo.



Veja que temos selecionada a camada em azul. Se, por exemplo, usarmos a função "Selecionador de cor"³ e clicarmos na imagem, obteremos a cor azul! Ainda que aparentemente a cor do local clicado é verde, o verde não está na camada selecionada, e, ao invés disso, ele pega a cor do local clicado na camadaa tual, no caso, a cor azul.

Espero que isso não seja muito confuso... Mas é algo que acaba causando problemas às vezes.

Lembrando que muitas vezes, o formato da imagem não permite múltiplas camadas, e quando salvo, há o 'achatamento' da imagem, que faz com que tudo fique em apenas uma camada, de forma que as informações das camadas mais inferiores são perdidas.

Por exemplo, se salvarmos a imagem acima como .png, ela irá acabar achatando a imagem, de forma que a cor azul não será mais acessível.

Em 'Ferramentas'... Temos... Muitas coisas. Você pode ver a explicação básica delas no guia visual...

Mas mesmo assim, vou cobrir as ferramentas mais importantes.

-Selecionar em retângulo (tecla-atalho: s) Você seleciona uma parte da imagem em forma de retângulo! ○
-Selecionar em laço (tecla-atalho: s) Você seleciona uma imagem no formato que você quiser!
-Selecionar com elipse (tecla-atalho: s) Você seleciona uma imagem em formato circulares! •
-Varinha mágica(tecla-atalho: s) Você seleciona um grupo com cores semelhantes! A tolerância para 'o quanto as cores podem ser diferentes para serem selecionadas juntas' pode ser modificada, sendo 0% = seleciona cores exatamente iguais, e 100% seleciona tudo.
Note que, se você clicar em "Del", o Paint.net irá fazer com que a área selecionada se torne 'transparente'

Você pode também selecionar enquanto pressiona "Ctrl" para adicionar à seleção,
ou enquanto pressiona "Alt" para retirar da seleção!

-Reta/Curva (tecla-atalho: o) Você cria uma reta!
Sendo que, deopis de você criar a reta, surgem dois pontos entre os extremos. Você pode mudar a localização para formar vários formatos de curvas!
Você também pode modificar o formato da linha, assim como sua espessura, com as opções que ficam acima.

-Retângulo (tecla-atalho: o)
-Retângulo arredondado (tecla-atalho: o)
-Elipse (tecla-atalho: o) - Esse é especialmente útil para se fazer balões de fala.
-Formato livre (tecla-atalho: o)

Nesses, Você pode também modificar o formato da linha, mas pode também mudar a forma de preenchimento.
Ao lado esquerdo de "Largura do pincel", Você pode observar dois formatos coloridos. Ali, você pode selecionar a forma de preenchimento.

Bem... Acho que é isso!
Hm... Mas que tal um 'tarefa de casa'?

Primeiramente, se nao o viu, veja o guia visual,

Crie um arquivo qualquer, e experimente as funções!

Depois...


Salve esta imagem, insira no Paint.Net, então crie uma nova camada acima da primeira, e nela, crie um balão de fala(ou mais, se quiser) se ligando a um pinguim.

Para isso, use a função de desenhar elipse, com contorno (cor primária) preto e espessura = 2, e com preesnchimento de uma cor/padrão à sua escolha.

Crie mais uma camada, acima da segunda, e nela escreva uma fala dentro do balão de fala. Preferencialmente alguma coisa engraçada, mas não é obrigatório. (Use a função de texto(tecla-atalho: t).)

Primeiramente salve no formato próprio do Paint.net, o .pdn, usando a função padrão 'salvar'. Isso vai salvar as coisas inclusive com as camadas individuais.

Depois, salve no formato .png (que suporta o canal alpha), com:
Salvar como>PNG>SALVAR>OK>ACHATAR

Por fim, poste sua criação!

Espero que tenham gostado... Não é comum eu fazer tutoriais...



__________________________
¹Microsoft Paint, o Paint padrão da microsoft.
²Transparência 'real' não existe, o que acontece é que a região 'transparente' tem um 'canal alpha', como explicado na wikipédia: http://pt.wikipedia.org/wiki/Canal_alfa
³Com o selecionador de cores, você pode clicar em um lugar da imagem, e a cor do local clicado virará a cor primária(se for clicado com o botão esquerdo do mouse) ou a cor secundária (se clicado com o botão direito).
⁴RGBA : valores inteiros que representam as cores, que variam de 0 até 255. Representam, respectivamente: Red, Blue, Green, e o canal Alpha.