True Pixel

Como desenhar natureza morta

2010-03-22T00:50:00.001-03:00

Uma otima aula que eu achei por ai ao acaso
http://www.scribd.com/doc/2429324/-Como-desenhar-naturezas-mortas
Esta aula ensina varias tecnicas de desenhos sombreado formas e outros.
Em breve estarei postando novas aulas de desenhos não diretameente ligados ao pixel art mas que pode ajudar bastante com o mesmo, apartir de agora pare de pensar que pixel art é uma tecnica e começe a pensar que é uma ferrramenta que você pode usar suas proprias tecnicas desde mangá até o realismo ou o abstrato.

Espero que gostem.

Utopia Maker

2010-03-18T13:43:00.003-03:00

Olá pesssoal é com muito prazer que faço uma nova parceria com um novo site maker, o utopia maker apesar de novo promete bastante em relação a novidades e engines não muito conhecidas porém uteis como o figther maker 2D que permite criar jogos de luta faccilmente ou o shoter maker, ambos são makers antigos porem pouco conhecidos entre os indie makers (criadores independentes de jogos).
Apartir de agora o true pixel estara com o seguinte banner ao lado.

Link para o site:
Utopia Maker

Até a proxima!

Cores e mais cores

2010-03-09T19:02:00.003-03:00

http://www.templatesbymarina.com/forum_tbm/index.php?showtopic=65505
http://www.giuliano.eti.br/index.php/tag/teoria-das-cores/
Algumas aulas sobre cores que podem ajudar a escolher paletas ambos os sites estão em português.
Estes sites podem ajudar não só em pixel art como web designer e outros tipos de arte.
Enjoy.

Pixel Games

2010-02-24T17:50:00.000-03:00

Os jogos são otimas aplicações praticas de pixel art por isso preparei uma lista com alguns jogos em pixel art para PC.

Kill the Pikakiris

Um jogo feito por El Sato, um beta na verdade mas já possui uma ótima jogabilidade e sistemas interessantes. Seus gráficos lembram um pouco Super Mario Yosh's Land, por serem "fofos" contrastam um pouco com a violencia.
Comandos: A para atirar, S para saltar, Q para jogar granadas e W para chamar o ataque aereo.

Download: Aqui

Noitu Love & The Army Of Grinning Darns

Este jogo, um pouco retrô por sua paleta de cores, lembra um pouco megaman porém com uma jogabilidade diferente, seus movimentos de personagens são muito bem estruturados. Comandos: SHIFIT, CTRL.

Download: Aqui

The Legend of Princess

Este é de longe o meu favorito, seus graficos e sua jogabilidade são ótimas, sua semelhança aos jogos da serie zelda acabam assim que você começa a jogar.

Se você ainda pensa que se trata de mais um jogo de plataforma qualquer, é porque ainda não jogou uma partida. Faça um apanhado de tudo que os melhores jogos de plataforma têm como itens, armas diferentes, golpes especiais e pequenos enigmas. Adicione muito bom humor e misture com uma movimentação fantástica.

Retirado do Baixaki

Download: Aqui

Bernard & Hank 2

Este jogo tosco feito em pixel art me lembra um pouco do alex kidd (de forma groceira).

Download: Aqui

Espero que gostem dessa listinha e que analisem um pouco das tecnicas de cada artista, todos os jogos foram testados e todos os links estão funcionando.

Desenhando uma árvore

2010-02-02T21:57:00.001-02:00

Fases da Aula
[1]- Estudo da árvore.
[2]- Fazendo o esboço.
[3]- Fazendo uma texturização das folhas.

1- Estudo da árvore
Bem algumas pessoas costumam desenhar árvores sem nem antes fazer um pequeno estudo não muito aprofundado da dita cuja, antes de desenhar a árvore você deve ter os seguintes conhecimentos: formato da folha; a que altura ela pode chegar; como é o padrão de galhos e qual será o ponto de visão. Em alguns casos que não é possivel ser feita toda essa analize, como o uso de fotos de referencia já da para se ter ao menos uma noção. Bem como eu sou brasileiro e nordestino estou com preguiça de estudar a árvore a fundo vou usar uma referencia mesmo.
Aqui está:

Creditos a maticgolob
(pessoa que desconheço só achei na pesquisa do deviantart)
2- Fazendo o esboço.
A parte no qual eu vou começar a desenhar (eu tava fugindo disso).
Há certas precupações ao fazer o esboço, no esboço serão definidos: pontos de luz; formato; rapida colorização.
2.1- O esboço.
Já que eu estou fazendo uma árvore para a versão XP ou superior minha árvore irá usar o tamanho 96x96

bem como podem ver em 2 cores fiz um pequeno esboço já definindo o formato da árvore e onde vai haver folhas.
2.2- Pintura rapida
Após definir o formato e localização das folhas vamos fazer uma rápida pinturajá definindo o ponto de luz. 1° defina sua paleta de cores (não vou explicar como ei de fazer pois já escrevi sobre isso no meu blog link: http://truepixel.blogspot.com/2009/12/traducao-teoria-das-cores.html )

Foi definido o ponto de luz (vindo da esquerda para a direita) e a paleta(disponivel para uso).
3- Fazendo uma texturização das folhas.
Essa com certeza é a parte principal já está tudo definido na nossa árvore, mas ainda não se pode perceber as folhas que é o principal, então, vamos ao trabalho.
3.1- Suavisando o rascunho.
Bem, a imagem está "linda" mas ainda está muito rabiscada, faça uma suavisada no tronco para poder vermos melhor o seu formato, para os apressados que equerem suaviar tudo peço que aguardem o proximo passo.

3.2- Texturização.
Texturização: é fazer com que algo tenha textura ou seja forma igual ou semelhante com a da referencia. Para da um aspecto de que realmente são folhas o topo desses galhos vou fazer um pouco para mostrar do que se trata.

Como podem ter percebido agora sim já podemos dizer que há folhas na imagem.
Para simular o efeito de folhas eu costumo colocar uma cor de um nivel a menos (tom mais escuro) para fazer o formato da folha.
Se não entenderem é por que é dificil de descrever com palavras. Após todas essas partes aqui vai o resultado final.

O resultado ta meio esquisito mas é só pra passsar a mensagem e o tutorial.
Duvidas?
Por favor poste todas as perrguntas e criticas.
Em relação a erros de portugês e letras triplas vem devido ao meuu teclado e meu péssimo português.

Tradução- Teoria das cores

2009-12-30T20:53:00.000-02:00

Para saber que cores são naturalmente claras e quais são naturalmente escuras traduzi este novo tutorial.

[Tons médios] (as tonalidades base)
+Vermelho:5-25matíz (hue) ou 340-355matíz
+laranja/marrom:25-40matiz (quanto menos saturação ouver na cor, mais semelhante a marron a cor será)
+amarelo: 40-50matíz
+verde: 65-80hue (darkers greens 'hue:120ish' generally look VERY bad unless they are confined to a small area on a pic)*
+azul: 200-215hue
+roxo: 220-245hue

[Tons escuros] (onde a luz não bate…)
+vermelho: 0-10matíz or 330-340matíz
+laranja/marron: 10-25matíz
+amarelo: 20-30matíz (as sombras do amarelo devem ser marron ou laranja)
+verde: 80-95 ou 120~145 (again...there usually isn't alot of dark green in an image, even a forest scene, so this hue:120+ is ok)*
+Azul: 220-245matíz (a sombra do azul tende a ser roxo... normalmente quando esta em um padrão...)*
+roxo: 225-245matíz (o roxo normalmente é escuro por si só)

[Tons claros] (onde a luz bate no objeto... usado para fazer objetos brilharem)
-Esta seleção é mais complicada. It involves hue shifting to figure out
-highlights are generally done by shifting your midtone hue to the next brightest color*
****show hue-slider****

-vermelho/laranja/marrom: maximum hue: 35-50 (aka yellow~yellowish-orange)
-amarelo: maximum hue: 55-60 (any higher and you get green)
-verde: maximum hue: 55-65 (yellow is brighter...thus it highlights green)
-azul: maximum hue: 160-195 (notice the huge-ass range... blue is just weird that way...most greens/teals/light blues can highlight it beautifully)
-roxo: maximum hue 200-210 (aka blue) OR 300~345 (again huge range, magenta/violet can highlight purples as well)*

* - sugira uma tradução melhor no comentario.

hue/matíz - é a segunda caixa apresentada na foto.

Retirado de:

http://www.wayofthepixel.net/pixelation/index.php?topic=922.0

Paleta de cores

2009-10-13T15:39:00.001-03:00

Paleta de cores.

A paleta de cores nada mais é do que as cores no qual serão
usadas na produção de seu desenho. Já tive muitos problemas em relação à busca
de uma paleta apropriada para meus desenhos, para facilitar um pouco vou
explicar as noções da criação de uma paleta de cores.

Rampas de cores:

A rampa de cores é a mudança de uma cor a outra elas podem
variar de varias formas como estas:

Mudanças de luminosidade:

Mudança de uma cor a outra:

Em geral as paletas de cores geralmente são muito pessoais.

Algumas paletas de algumas plataformas e sistemas como
exemplos.

:: A Grande Lista de Paletas ::

Introdução:
Não é exatamente um tutorial, mas uma lista de várias paletas, de diferentes plataformas e de diferentes jogos

Paletas de Plataformas e Sistemas

Commodore 64

MS Paint

MS Paint Vista

Game Boy (apenas uma das linhas, 4 cores)

Nintendo 8bits

EGA

EGA 16

CGA
(em breve)

Amstrad CPC

Paletas de Jogos

Namco vs Capcom

Disgaea 2 - Sprites

Super Street Fighter - Personagens

Seiken Densetsu 3 - Sprites

Castlevania: Dawn of Sorrow

Outras Paletas

RPGMaker 2k3 - Personagens

RPGMaker VX - Personagens

Fontes:
Wikipedia
Antifaea
Pixel Joint
Pixelation
Ails.

(fonte: Pixel Paradise)

Dicas para a criação de uma paleta pelo Graphics Gale (estas dicas são opcionais como eu disse anteriormente o modo de criação de paletas varia de cada arrtista).
Na paleta de cores do Graphics Gale mude a caixa que esta em destaque na imagem para HSL.

Agora vou dizer o que costumo fazer para procurar as cores e tonalidades.

A segunda caixa corrediça indica a cor primaria, a terceira caixa indica a saturação das cores e a quarta e ultima indica o brilho da cor indicada.
Quando quero fazer rampas de luminosidade escolho a cor mediana, e depois em caso de cores mais claras aumento a luminosidade e aumento juntamente a saturação delas, para tons mais escuros o inverso.

Algumas pessoas preferem fazer "combos" de cores ele mistura as rampas dde iiluminação e as rampas de mudanças de cores conomizando assim o numero de corres utilizadas. (Paleta by Syosa).

Espero que eesta aula compense o tempo em que fiquei sem postar nada

Me Apresentando [+Novo Banner]

2009-09-22T18:14:00.003-03:00

Olá pessoal, vim aqui, rapidamente, me apresentar:

Eu sou o Nader. Quem sabe você já não me viu por algúm forum por aí?
Eu frequento mais foruns de RPG maker. Assim que conheci a Pixelart, fazendo char's para meus jogos.

Então, pra estreiar, trago o novo banner do blog:
[link para a imagem]

Espero que gostem.
Até a próxima.

Nader - Contribuições

2009-09-21T18:08:00.001-03:00

Mais algumas contribuições do Nader.
Ele vem traduzindo os tutoriais de espanhol para contribuir com o blog.
Quem estiver interessado em contribuir também mande uma mensagem para meu e-mail ou mande uma PM para qualquer forum em que eu esteja participando.
Link para download das aulas:
http://www.4shared.com/file/134184939/90304878/Pixel_Art_-_Tutoriais_02.html
Meu e-mail:
mauricio-fidalgo@hotmail.com

Videos interessantes

2009-09-20T22:02:00.002-03:00

Alguns vídeos que são interessantes de se observar como é feito um grande trabalho, em geral não é tão difícil, e sim demorado e cansativo fazer grandes obras.

AA Tutorial

2009-09-20T08:20:00.000-03:00

Trago-lhes mais esta aula sobre pixel art.
Estou voltando a traduzir as aulas pois a semana de provas de onde eu estudo passou.
Em breve mais traduções.

(Página original: http://www.pixeljoint.com/forum/forum_posts.asp?TID=5692)

Heihachi tutorial (tradução por Nader)

2009-09-15T12:32:00.003-03:00

Tutorial Pixel Art

(escrito por Chaindog, traduzido para espanhol por Ahruon, traduzido para português por Nader)

http://cardgallery.tales-tra.com/tut.htm

1º passo

Começaremos criando a paleta. Olhando imagens, você pode mais ou menos ver
quais cores precisa. E como eu sou tão preguisoço, usarei o típico limite de 16
cores. Tenha em conta que nunca usaremos preto puro (#000000). Há programas e
engines que podem vê-lo como transparente.

Se mais adiante achar que as cores não te convencem, sempre pude mudá-las
enquanto se faz o sprite.

2º passo

Começaremos com o contorno da cabeça. Do lado esquerdo temos a típica cabeça
masculina y à direita temos a feminina. Praticamente a única diferença são os
olhos, mas dependendo do tipo de personagem, pode precisar mais mudanças.

Em quase todos os persongens humanos, estas são as cabeças que uso.

3º passo

Quando tiver escolhido qual usar, o qual deveria levar alguns minutos no pior
dos casos (...) começaremos a detalhá-la. Na maioria dos casos não há muito o
que fazer, já que a cabeça normal vai bem. Por azar, o caso do Heihachi não é
tão simples.

Depois de pintar o interior da cabeça, edite o queixo para que pareça mais
pontiagudo. Depois, amplie um pouco as sobrancelhas, e adicione 2 pixel’s de
cor mais escura junto aos olhos, para que pareça que tenha cara de mau, como o
personagem, em minha opinião.

4º passo

No passo anterior ainda não se parecia muito, não é? Dado que os sprites deste
tamanho raramente se enfocam as expressões na face, quase toda a atenção se
foca no cabelo (nesse caso, no bigode também).

Dado que este personagem é um pouco velho, acentue um pouco a face, fazendo as
sobrancelhas maiores.

5º passo

Agora temos o rosto definido, podemos começar com o corpo. Fiz um rápido esboço
da pose de combate de Heihachi. O mais importante desse passo é ter bem clara a
pose.

Agora muitos se perguntam o que acontece com essas cores berrantes, não é? As
uso para reconhecer mais facilmente as diferentes partes do corpo na hora de
animar. Si usar só um tom, podem surgir alguns problemas.

Mas como não vamos animá-lo nem nada, podemos seguir adiante.

6º passo

Esta parte é um pouco complicada, não sou muito bom com as proporções. Por
sorte não ficou tão ruim. Olhe como adicionei toda a roupa: bracelete, sapatos,
etc.

Também, atenção à roupa que está entre as pernas. À elas coloquei uma cor mais
escura para que se tenha uma sensação de profundidade.

7º passo

Voltando à cabeça, pus a cor mais escura nas bordas do cabelo, e separei o
cabelo das sobrancelhas.

8º passo

Hora de sombrear. Tomei a cor intermediaria entre a pele e o contorno, e comece
a lhe dar profundidade ao rosto e ao cabelo. Também aumentei mais um pixel no
queixo, para que ressaltasse mais.

9º passo

Sem muito o que explicar aqui. Simplesmente adicionei mais brilho para lhe dar
ainda mais profundidade à face e ao cabelo.

10º passo

Vejamos o que temos agora. Está bom eu acho, mas ainda falta muito o que fazer.

Há duas coisas em que me centro nesse tipo de sprite, a cabeça e as mão. Já que
a cabeça já está pronta, comecemos com as mãos.

11º passo

Esta é uma das partes mais complicadas. As mão são muito detalhadas para algo
tão pequeno, me custou três tentativas para parecerem decentes.

A quantidade de dedos não importa, é possível pôr os cinco, mas normalmente se
desenham três e o polegar, o qual é o mais importante já que ao estar separado
dos outros, define muito a mão;

12º passo

Sombrear as mãos pode ser complicado se não sabe o que fazer. Para que pareçam
mais naturais, é necessário saber onde focar a luz, e assim acentuá-la.

Depois, como o rosto, adicione a cor mais brilhante, e já estarão acabadas.

13º passo

Agora passaremos a detalhar o corpo, O peito e os braços são muito simples,
depois que usa a cor de contorno para lhes dar forma.

Para saber fazer adequadamente, não há mais remédio do que saber algo de
anatomia humana. Pessoalmente eu aprendi analisando centenas de sprites da
Capcom. A web de Fighters Generation tem uma quantidade importante de sprites
para estudar.

14º passo

Como fizemos com a cabeça e as mão, vamos sombrear o corpo. Como já disse
antes, é importante conhecer anatomia para saber sombrear os músculos.Uma boa
referencia para um sprite como esse, poderia ser Sagat de Street Fighter.

Continuando, sombrearemos a roupa.

15º passo

Está vendo como estão iluminadas as calças apenas em cima? O foco de luz, como
vem de cima, não ilumina a parte inferior das calças, então se verão com cor
mais escura.

As rugas da roupa também precisam um pouco de aprendizagem, é algo que é
necessário praticar e praticar, mas basicamente as rugas se produzem desde um
ponto de tensão, e daí em diante se criam as rugas.

16º passo

O de sempre, luzes para iluminar a roupa, lembre de respeitar o foco de luz
para que fique coerente. Também atente a como iluminei tudo o que restava: pés,
braceletes...

Quase acabamos, agora os últimos detalhes.

17º passo

Como se vê no desenho de Heihachi, suas calças têm umas estampas na parte de
baixo, também umas pequenas cadeias.

Escolher que detalhes por e quais não por depende de você. A razão pela qual
escolhi desenhar os detalhes da calça e não desenhar a cicatriz no peito é
simples. As calças pareciam realmente simples como estavam, enquanto que o
peito está muito detalhado, e seria sobrecarregá-lo.

18º passo

Pronto! Já temos nosso próprio sprite do velho louco do Heihachi. A razão pela
qual eu botei fundo preto é para se ressaltar a paleta, ao qual fica muito bem.

Obrigado por contribuir Nader ^^

Construindo uma construção

2009-09-01T20:46:00.001-03:00

Para os que se interessarão na área do desenho isométrico traduzi uma boa aula do mesmo.

(Tutorial retirado da Pixel Joint)

Introdução ao Isometric Pixel Art

2009-08-30T01:11:00.000-03:00

Olá estou aqui para lhes fazer uma pequena introdução ao isometric pixel art.
Conceito:
O isometric pixel art nada mais é que uma visão "tridimensional" (largura, aultura e profundidade) de uma figura 2D. Para entender melhor isso vou fazer uma comparação de um cubo normal pra um cubo isometrico.
Para melhor compreender este tipo de imagem farei uma pequena comparação dos 2 tipos.

Aqui nós temos 2 exemplos o da esquerda é um cubo em 2D comum, e o da direita é o mesmo cubo em 2D isometrico (ponto de visão de 26,565º).

Desenhando:
Vou expicar de uma forma simples como desenhar isometricamente (cubos).
Para explica melhor como fazelo vou mostrar o cubo anterior com Zoom.

Ao ver essa imagem com zoom podemos observar que para fazer uma linha na horizontal, são feitos um conjunto de 2 pixels, são feitos 2 pixels e uma quebra, para cima ou para baixo.

Pintando:
Determine as cores a serem usadas e um ponto de luz como no exemplo abaixo:

Veja que a cor mais clara foi utilizada para traçar as linhas centrais do cubo e a mais escura para
as bordas do cubo.
Apartir do ponto luminoso são determinadas a localização das cores remanecentes(lembre-se que se o ponto luminoso for o sol a cor mais clara será a da parte de cima do cubo.

Amontoando cubos:
Para empilhar cubos de maineira correta (como caixas) deve ser feita uma pequena distanciação de 1px para dar a empressão que ainda são cubos. EX:

Forma correta.

Forma errada (perceba que os cubos não existem mais e da a impressão de ser um grande "cubão").

Esse é o fim do primeiro truetorial sobre pixel art.

Quem quiser se aprofundar enqunto eu não traduzo mais tutorias aqui vai um site que pode ajudar: http://gas13.ru/v3/tutorials/isometric_pixelart_tutorial_setup_photoshop_for_pixelart.php

True Mascotes

2009-08-28T20:08:00.002-03:00

Olá pessoal estou voltando com o segundo post do True Pixel. Como inauguração nos meus trabalhos vou lhes apresentar o mascote deste blog. O nosso querido robô de metal o RobôTrue em suas três formas.

Robô true e suas variações:
Versão blindada (RobôTrue preto).
Versão cromada (RobôTrue prateado).
Versão dourada (RobôTrue laranja).
Espero que gostem dos nossos queridos mascotes.
Chegamos ao fim de mais um post, em breve estarei enviando novos tutoriais e trabalhos meus e de amigos. Até a próxima.
Em caso de cópia por favor exibir créditos.
(Robô True by Mauricio-Fidalgo)

True Pixel

2009-08-24T21:02:00.001-03:00

Para os curiosos que desejam entender o por que do nome: True Pixel, irei explicar detalhadamente.

Pixel ou Píxel (sendo o plural píxeis) (aglutinação de Picture e Element, ou seja, elemento de imagem, sendo Pix a abreviatura em inglês para Picture) é o menor elemento num dispositivo de exibição (como por exemplo um monitor), ao qual é possivel atribuir-se uma cor. De uma forma mais simples, um pixel é o menor ponto que forma uma imagem digital, sendo que o conjunto de milhares de pixels formam a imagem inteira.

(fonte: wikipédia)

Este blog irá expor imagens (pixel art), aulas (pixel art) produzidas por mim.

O que é Pixel Art?
Pixel art é a arte de desenhar pixel por pixel até que uma imagem seja formada. Muito utilizada para a criação de gráficos de jogos que não pode utilizar muitas cores em sua paleta (ex: jogos de nintendo), mas hoje em dia com a possibilidade de utilizar "infinitas" cores em sua paleta transformou o trabalho em algo facinante.(fonte da imagem Pixel Joint)

O nome true vem do inglês que quer dizer verdadeiro, eu estou utilizando essa palavra para titular meu blog para que sejamos originais e true na hora de fazermos os nossos trabalhos. Algumas pessoas daqui me conhecem como maker, para estes doulhes um concelho, crie seus próprios recursos, seja o mais horiginal e true possivel.

Enfim, sou apenas um pixel que quer ajudar em uma grande foto, espero que você compreenda a mensagem e aproveite os tutoriais que estão por vir.