Mostrando postagens com marcador Truetorial. Mostrar todas as postagens
Mostrando postagens com marcador Truetorial. Mostrar todas as postagens
terça-feira, 9 de março de 2010
Cores e mais cores
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.
terça-feira, 2 de fevereiro de 2010
Desenhando uma árvore
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.
[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.
quarta-feira, 30 de dezembro de 2009
Tradução- Teoria das cores
Para saber que cores são naturalmente claras e quais são naturalmente escuras traduzi este novo tutorial.
+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:
terça-feira, 13 de outubro de 2009
Paleta de cores
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.
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:
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.
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).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)
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
segunda-feira, 21 de setembro de 2009
Nader - Contribuições
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
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
domingo, 20 de setembro de 2009
AA Tutorial
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)
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)
terça-feira, 15 de setembro de 2009
Heihachi tutorial (tradução por Nader)
Tutorial Pixel Art
(escrito por Chaindog, traduzido para espanhol por Ahruon, traduzido para português por Nader)
http://cardgallery.tales-tra.com/tut.htm
(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.
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.
Assinar:
Postagens (Atom)
