Centro RPG Maker

Outras edições

• Become a Pìxel Artist #1 - Introdução
• Become a Pìxel Artist #2 - Cores

[close]

---

[box2 class=orange title=Iniciação]
     Nos "tutoriais" da série Become a Pìxel Artist, iremos utilizar para exemplo o programa Photoshop que pode ser encontrado com facilidade na internet. Entretanto, pixelar é algo que pode ser feito na grande maioria dos editores de imagem (para não dizer todos), o Photoshop irá oferecer ferramentas extras que podem ser úteis na confecção do trabalho, mas em teoria, tudo desenvolvido aqui pode ser aplicado em qualquer programa.
     E para começarmos, precisamos saber quais ferramentas temos em mãos pra saber o que usar em determinadas situações, então vamos lá!
[/box2]

[box2 class=yellow title=Ferramentas]
1.1 - Menu File

Imagem

[close]

     Pelo menu File, que é o primeiro na barra de menus, ao lado da logo, é que iremos criar um novo documento/arquivo, abrir um existente, salvar o atual, entre outras que podem ser identificadas. Uma função bem útil que muitos outros programas possuem, é a opção Save As... (ou Salvar Como...), que permite que salvemos o arquivo atual com outro nome ou em outro local, sem que isso altere o arquivo anterior. Por exemplo, você pixelou um personagem e quer ver como ele fica com um elmo, mas não sabe se vai ficar bom, daí você salva primeiramente o arquivo original, e depois vai na opção salvar como, a partir daí você estará editando o novo arquivo e o salvo antes permanece inalterado.

---

1.2 - Janela de Camadas

Imagem

[close]

     Essa é uma função importante, principalmente ao trabalhar com templates (ou modelos). A Janela de camadas lhe dá a possibilidade de utilizar "níveis" diferentes. Por exemplo, ter o modelo do corpo de um personagem e desenhar a roupa literalmente em cima do modelo, numa outra camada, sendo assim, a camada de baixo permanece inalterada. Edições em uma camada não afetam outra a menos que estejam ligadas por algum efeito. Além disso, você pode colocar uma ou mais camadas em uma pasta, e deixá-las sinalizadas com as cores que preferir a fim de organização. Além do controle de opacidade, visualização, também é possível trancar a camada para não mexer nela sem querer, entre outra funções. Geralmente ela vem exibida, por padrão, mas se por algum motivo não estiver a vendo, é só ir no menu Window > Layers, ou simplesmente apertar F7.

---

     Para criar uma nova camada é só apertar Ctrl+Shift+N e em seguida, OK.

1.3 - Menu de Ferramentas

Imagem

[close]

     O "importante" para pixel art está aqui, que são as ferramentas. Nesta janela estão as ferramentas: mover; seleção; varinha mágica; lápis; borracha; balde de tinta; zoom e; a seleção de cores, são estas que iremos usar para pixelar. As outras são bem úteis também, entretanto, por desfocarem ou propiciarem suavização das bordas, poderemos usá-las somente esporadicamente. Os nomes das ferramentas são bem sugestivos quanto a seu uso já, e acredito que a maioria já esteja familiarizada. Somente a varinha mágica é nova, e a função dela é poder selecionar regiões da imagem baseada na proximidade das cores. Por exemplo, no seu char, tem umas partes em vermelho que você gostaria de trocar para azul, então usa-se a varinha mágica, seleciona o azul, e usa o balde de tinta para recolorir todas as áreas selecionadas num só clique.
     À medida em que fomos utilizando essas ferramentas veremos mais especificações e possibilidades de uso.

---

1.4 - Réguas, Guias e Grade

Imagem

[hs width=400]http://i.imgur.com/7YwziwW.png[/hs]

[close]

     As réguas, guias e grade têm a função de auxiliar quanto à tamanho, distância e alinhamento da arte que está fazendo. As réguas, irão exibir uma escala na lateral da área de trabalho do programa, com as medidas. É importante verificar se as unidades estão em pixels, pois como estamos desenhando pixel-por-pixel, é mais interessante utilizar essa medida. Para isso, é só apertar Ctrl+K (atalho para a janela de preferências) e você verá uma janela semelhante à abaixo. Quem quiser pode deixá-la com as mesmas configurações, é a que utilizo, independente de trabalhar com pixel arte ou não.

Imagem

[hs width=400]http://i.imgur.com/Z90mD05.png[/hs]

[close]

     As guias nada mais são do que linhas, mais utilizadas para fins de alinhamento. Para criar uma, posicione o cursor sobre uma das réguas (caso as réguas estejam ocultas, aperte Ctrl+R para exibi-las) e arraste para dentro da área de trabalho do programa. Se precisar mover ela futuramente, selecione a ferramente mover e poderá reposicionar ela facilmente.
     A grade é a mais imprescindível dentre essas três. Para exibi-la, aperte Ctrl+". Ela é útil, por exemplo, para quando estiver pixelando um iconset, você ter o controle do tamanho em que cada ícone irá ocupar, ou para ajeitar chars em um charset. A grade tem tamanho, cor e subdivisões configuráveis, além do estilo da linha também, e essas opções podem ser acessadas também apertando Ctrl+K e indo para a opção indicada na primeira imagem destas ferramentas. Em Gridline Every você coloca quantos pixels deseja entre uma linha da grade e outra. Eu utilizo 16, por ser metade de um tile do RPG Maker, o que para mim permite maior controle. Lembrem-se de colocar a medida em pixels também.
[/box2]

[box2 class=orange title=Começando]
     Acima estão as funções que são importantes no uso do Photoshop para nosso objetivo. Ler é chato, eu também gosto bastante de skippar, mas é bom ler o manual de instruções antes de começar a usar o aparelho, entendemos com essa analogia. Muitas outras coisas que o programa nos oferece será útil, mas alguns trabalhos são melhores de entender praticando, então será um progresso contínuo, todo dia uma coisa nova, pensemos assim.
     Enfim, vamos começar. Você é um cara que não sabe nem como fazer um dado branco com o valor um visto de cima, ou, se não for, ótimo pois já conhece algumas coisas, ou muitas. Mas vamos criar nosso documento para tentar algo. Para isso, é só apertar Ctrl+N, e veremos a seguinte tela.

Imagem

[hs width=400]http://i.imgur.com/81Cp2RJ.png[/hs]

[close]

     Temos como configurações, a largura, altura, resolução, tipo de cores e o fundo, respectivamente. A largura e altura são de sua preferência, resolução é bom colocar 72, que é o padrão para imagens digitais. Acima disso só faz diferença em documentos que serão para impressão física, em que aliás, o recomendado é 300. Você pode colocar mais de 300, mas não vai fazer diferença na qualidade e vai ficar proporcionalmente mais pesada a imagem. O tipo de cor será RGB, que são as cores primárias da luz. CMYK é o outro modo de cor colorido, porém, as cores primárias são de tinta, como nossos monitores utilizam luz e não tinta, usaremos RGB. O fundo eu recomendo Transparente mesmo. Ainda existe a opção de utilizar a segunda cor selecionada na ferramenta de cores, ou branco, porém, não sei o porquê, a camada vem travada.

     Após criar o documento, dificilmente você irá conseguir pixelar na visualização normal (100%), então selecione a ferramenta Zoom e ajuste como desejar, utilizando Alt+Scroll ou os botões esquerdo e direito do mouse. Particularmente, eu utilizo 1200%, mas creio que quanto maior a resolução do seu computador, mais zoom será necessário.

     Zoom ajustado, selecione a ferramenta Lápis. Caso não esteja a vendo na janela de ferramentas, provavelmente é porque o pincel está "no lugar do lápis". Para mudar para ele, clique e mantenha pressionado o botão esquerdo do mouse sobre a pequena setinha próximo ao ícone. Irá abrir uma mini janela onde será possível ver a ferramenta lápis (ou pencil tool).

     Mudar as cores também é fácil. Você tem duas pre-determinadas, a de cima é a que irá fazer efeito ao usar o lápis, balde de tinta, etc. A de baixo é utilizada mais nos filtros, que não nos interessa em pixel art, mas ela pode ser uma cor que você usará bastante, e não quer ter o trabalho de escolhe-la novamente a toda vez que dela precisar. A setinha de suas pontas próximo às cores servem para alternar entre elas. E para escolher uma nova, basta clicar sobre uma delas que abrirá a janela em que se pode escolher uma nova cor. Vale ressaltar que, enquanto esta janela (Color Picker) estiver aberta, um conta-gotas funcionará em toda área de trabalho do programa, permitindo pegar uma cor dentro dela.
[/box2]

[box2 class=yellow title=Dever de Casa]

---

     Ícones são pequenos, simples de criar e com formas muito variadas. A partir deles, podemos dar uma introduzida na parte de paletas, iluminação e sombreamento, que pode ser o tema da próxima edição dependendo do resultado desta. Então, o dever de casa é criar o ícone de: um dado (da forma e posição que preferirem), um cone de trânsito e uma bola de praia. Isso vai servir para introdução à formas, já que cada forma recebe uma iluminação diferente. Não se preocupem quanto às cores, usem as que preferir.
     Postem os trabalhos nos comentários abaixo e comentem o trabalho anterior, se puderem. Dúvidas ou dificuldades quanto ao desenvolvimento desta atividade também podem ser solucionadas aqui.

[/box2]
[box class=errorbox]Become a Pixel Artist é uma série de tutoriais não periódicos que fiz com o objetivo de tentar ajudar a quem quer aprender a pixelar. Não se tem um única forma certa de aprender, cada um aprenda da forma que mais lhe agrada, portanto vou tentar passar o conhecimento da forma como sei e uso, e claro, nem tudo é certo. Aos que já sabem mas que quiserem acompanhar e participar, são bem-vindos também, afinal também tenho a aprender e toda ajuda é bem-vinda![/box]

Ótimo tutorial Gerar, bem basicão, muito bem explicado e organizadinho.

Vai ajudar muita gente, inclusive eu, que estou iniciando na área.

Bom, fiz aqui o dever de casa, espero receber um feedback de como ficou. :o:

(http://i.imgur.com/5vvcvYC.png)

Valeu aí pelo tutorial o/

  (http://i.imgur.com/raygW0t.png)

É um ótimo tutorial e eu espero não ter falhado miseravelmente na tarefa, me indique os pontos que eu errei e quais devo melhorar.  :XD:

É um ótimo tutorial mesmo. Uma raridade hoje em dia. Eu adoraria fazer a tarefa, mas fazer P.A em um notebook no paint e sem mouse é complicado :=p:

Espero que faça vários tutos!

Bom tutorial, ideal para quem está começando não só em PA, mas em qualquer tipo de manipulação de imagens. Eu mesmo não uso Photoshop (tenho o Gimp, mas não gosto de usá-lo para pixel art), mas fiz a lição de casa usando o Graphics Gale Free Edition, que é um aplicativo focado em pixel art. A bola de praia foi baseada na bola do Andy, dos filmes Toy Story.

[Anexo excluído pelo administrador]

Lincoln

Citação de: Lincoln online 05/04/2015 às 21:08
Ótimo tutorial Gerar, bem basicão, muito bem explicado e organizadinho.

Vai ajudar muita gente, inclusive eu, que estou iniciando na área.

Bom, fiz aqui o dever de casa, espero receber um feedback de como ficou. :o:

(http://i.imgur.com/5vvcvYC.png)

Valeu aí pelo tutorial o/

[close]

Então, man, tá bom, conforme esperava que fosse o trabalho dessa aula mesmo. Já dá para partir para a próxima
daí, mas caso queira tentar melhorar, lá vai: a bola tá redondinha, porém as estrias coloridas dela tão um pouco
retas, formando um "v" deitado, seria uma boa tentar arredondar mais isso; o cone tá legal, mas se animar pode
deixar a base dele menor (o círculo) pois como ficou largo lembra facilmente aqueles chapéus de bruxa; e o dado
também tá legal, mas pode tentar fazer como o pessoal fez, dando para ver mais superfícies.

---

Speed

Citação de: Speed online 05/04/2015 às 21:27
  (http://i.imgur.com/raygW0t.png)

É um ótimo tutorial e eu espero não ter falhado miseravelmente na tarefa, me indique os pontos que eu errei e quais devo melhorar.  :XD:

[close]

Falhou não, Speed, haha. Bom, primeiramente acho que fez os ícones um tanto pequenos, se os fizesse um pouco
maiores acho que seria mais fácil até pra tu mesmo. O cone ficou legal, as estrias mostram que é um cone, mas a
base dele reta tira um pouco disso, seria bom arredondar ela também. O dado acho que seria questão de aumentar
ele mesmo, pois o único probleminha foi o pontinho do meio que ficou maior do que os demais, acho que fez isso
pra ele ficar centralizado, certo? E bom, a bola não ficou muito redonda não. Acho que ela tá legal, mas ela ficou
como um octógono, com lados, e não redondinha, saka!?

---

Makers

Citação de: Makers online 05/04/2015 às 21:53
É um ótimo tutorial mesmo. Uma raridade hoje em dia. Eu adoraria fazer a tarefa, mas fazer P.A em um notebook no paint e sem mouse é complicado :=p:

Espero que faça vários tutos!

[close]

Valeu, Makers. Mas bom, o Photoshop é porque tenho mais intimidade com ele mesmo, pra tentar fazer pode ser
em qualquer programa que permita.

---

Lucas Leite

Citação de: Lucas Leite online 05/04/2015 às 22:06
Bom tutorial, ideal para quem está começando não só em PA, mas em qualquer tipo de manipulação de imagens. Eu mesmo não uso Photoshop (tenho o Gimp, mas não gosto de usá-lo para pixel art), mas fiz a lição de casa usando o Graphics Gale Free Edition, que é um aplicativo focado em pixel art. A bola de praia foi baseada na bola do Andy, dos filmes Toy Story.

[close]

O seu ficou muito bom para começo, rapaz. As formas estão muito boas, mas se me permite só uma observação,
a faixa azul da bola tá um pouco reta na parte mais clara, se quiser tentar arredondar mais. Mas já ficou bem legal
assim. Uma dica não muito a ver com a pixel art em si é salvar os trabalho em .png ou .gif, pois em .jpg (formato
em que salvou) as cores se interlaçam e isso atrapalha muito na qualidade. Então, os próximos, salva em um desses
dois outros formatos.

Belo guia, apesar de eu que pensei que você iria começar logo com os básicos do pixel art (linhas serrilhadas, dither e etc). Mas é bom mesmo assim fazer um tutorial para "preparar" um editor (PS) mais avançado para P.A.

Mas que se dane, tô dentro também.
Aqui os meus trabalhinhos, ficaram ó, uma bosta~;

(http://i.imgur.com/dE621dJ.png) (http://i.imgur.com/IEcWDsc.png) (http://i.imgur.com/H42xrBc.png)

Spoiler

(http://i.imgur.com/wXS1704.png) (http://i.imgur.com/ksnMCwJ.png) (http://i.imgur.com/wESTxmx.png)

[close]

Foi divertido, até. q
No aguardo do próximo.

O seu tá ótimo, man, haha. Mas bom, para te dar serviço pode tentar deixar a bola mais redonda, pois
ela apresenta algumas deformações que não a deixam bem redondinha.
Quanto ao tuto, acho a parte que envolve esses termos mais complicada, até para mim escrever sobre
também, daí pensei em ir mais devagar. A questão do PS como disse é mais porque mexo mais com ele,
além de dispor muitas ferramentas que podem vir a ajudar também.

Tamanho original

(http://i.cubeupload.com/pfkEY0.png)  (http://i.cubeupload.com/n7MTm2.png)  (http://i.cubeupload.com/yIkVmR.png)

[close]

 Muito bom o tutorial, espero que dê continuidade a ele. Apesar de que não mexo em PS. Mas com certeza é de grande ajuda para muitos.

Não pude deixar de fazer minha lição também. :3

Anos 40

(http://i.imgur.com/v0wrInQ.png) (http://i.imgur.com/oDqYzp6.png) (http://i.imgur.com/VDiz2bu.png)

[close]

Prand

Citação de: Prand online 10/04/2015 às 17:36

Gostei muito do tutorial, e resolvi fazer a "lição de casa"  :XD: para praticar um pouco :3

(http://i.cubeupload.com/XRMNDh.png)  (http://i.cubeupload.com/2yRKCq.png)  (http://i.cubeupload.com/0b4ATb.png)

Tamanho original

(http://i.cubeupload.com/pfkEY0.png)  (http://i.cubeupload.com/n7MTm2.png)  (http://i.cubeupload.com/yIkVmR.png)

[close]

:linha3:

Não ficou muito bem feito mas gostaria de saber o que achou  :ok:. E sobre o cone, eu fiz do escuro pois todo mundo fez do laranja  :XD:

[close]

Tá muito bom, assim como outros que também fizeram, bem melhor do que o objetivo que esperava
dessa aula. Quanto a melhoras, dá para arredondar mais a bola, e a aresta da base do cone ficou
com lados, o que faz imaginar um hexágono ao invés de um círculo, acho que só. Ficou bem legal.

---

Vash

Citação de: Vash online 10/04/2015 às 19:46
Muito bom o tutorial, espero que dê continuidade a ele. Apesar de que não mexo em PS. Mas com certeza é de grande ajuda para muitos.

Não pude deixar de fazer minha lição também. :3

Anos 40

(http://i.imgur.com/v0wrInQ.png) (http://i.imgur.com/oDqYzp6.png) (http://i.imgur.com/VDiz2bu.png)

[close]

[close]

Muito bom, Vash. Vai ganhar um A+
Bom, para ter o que falar, os pontos da face de cima do dado aparentam estar um pouco
maiores, haha. Bom trabalho, e eu nem imaginava outra bola de praia senão a típica listrada.
Vou tentar dar continuidade sim, continue fazendo as lições xD

Competir nota com o vash nem é justo, o kra já e mo bad ass ai das p.a.  :T.T: kkk Fiz meu homework, considere-se privilegiado Teacher Gerar, pois é o primeiro dever de casa que faço em casa(sem brinks). To só esperando a próxima aula
(http://i.imgur.com/bMMkXoa.png) (http://i.imgur.com/mkWoJgo.png) (http://i.imgur.com/CITuPZe.png)

Ficaram bons os seus trabalhos também, só o dado que tu fez bem pequeno.
Tu parece ter feito eles tentando por em escala, haha.  :clap:

---

Aula 2 postada! (http://centrorpg.com/index.php?topic=11961)  :wow:

MANUUUUUUU! Continua essas aulas pelo amor dos P.A  :T.T:

Ta ajudando muitooo  :ok:


Edit:
Fiz a tarefa de casa hsuhsushus
Ficou muito bom naum, meu cone deveria estar mais alto   :hmm:


[Anexo excluído pelo administrador]

Nussa, desenhar dado não é comigo mesmo.   :rick9: kkkkkk
Desafio completo, só falta avaliar.  :=p:

(http://i.imgur.com/xVx5jSX.gif)

Mexi umas 50x nesse dado e bola e não consegui o que eu queria  :aiaiai:
Mas o que vale é a tentativa  :=p:.

Spoiler

(http://i35.servimg.com/u/f35/15/86/28/62/art10.png)

[close]

Bom,eu acho que para uma primeira vez ta razoável!  :sera:

(https://i.imgur.com/hzsOFOL.png)

Ps:Foi mal pelo fundo branco,fiz no paint.