iMasters | Por uma internet mais criativa e dinâmica

Quarta-feira, 07/07/2004 - 01:59 - Por Fabio Lody
Seções relacionadas:

• Photoshop

• Imprimir
• Indicar
• Digg it
• Del.icio.us
• Twitter
• 3 comentários

E ai meus amigos! Como vão vocês? Bom, vamos para a segunda parte desse tão maravilhoso mundo pixel.

Descrição: Explicação passa a passo sobre pixelart 3D
Software utilizado: Photoshop CS em Inglês
Grau de Dificuldade: 8,0
Ao som de: Steel Dragon - We all die young

Pixel Art 3D

Algumas regras: Geralmente os elementos em pixelart 3D são criados em perspectiva isométrica. Essa perspectiva é conhecida como perspectiva perfeita, pois as formas não apresentam distorções. É através dessa falsa simulação de volume que são construídos a maioria dos desenhos em pixelart 3D.

A perspectiva isométrica é baseada no ângulo de 30º, assim:

Entretanto se dermos um zoom na linha do ângulo, perceba oque acontecerá:

Em 30º a linha de pixels fica deformada, contendo ora um, ora dois, ora três pixels numa seqüência indefinida que esteticamente fica terrível. Para uma melhor apresentação, corrige-se a linha para a seqüência de dois em dois pixels, trazendo a angulação para algo próximo do 26º.

Então, mantendo nossa nova medida de 26º, criamos a malha para confecção de nossa perspectiva isométrica.

Bom, só lembrando do nosso caminhão da matéria passada. Para desenvolvê-lo, basta seguir essas dicas:

A medida X1 corresponde à base do caminhão. Se a medida fosse transferida diretamente para a malha isométrica o resultado seria um caminhão maior do que a medida correta. O caminhão teria sua forma final esticada em relação às proporções originais. A medida errada pode ser observada na cor cinza escura.

Para que a medida seja transferida com segurança, criou-se um círculo azul com o centro em um dos vértices inferior direito da casa. Do centro do círculo azul foi traçado um raio com 26º de inclinação em relação à base da casa. No exato ponto onde o raio cruza a circunferência, indicado no desenho com a cor laranja, é marcada a linha de rebatimento. Definida no desenho com a cor cinza claro. Após essa marcação a medida X1 pode ser transferida com segurança para a malha isométrica. Agora começaremos do zero um quarteirão em Pixelart 3D.

1º Passo: Trace o contorno base do seu quarteirão.

2º Passo: Trace um segundo contorno em cinza neste tom ( #5F5F5F) e em seguida um terceiro contorno mais claro (#A4A4A4)

3º Passo: Preencha a rua com o tom cinza mais escuro que usamos. E, por dentro do quarteirão, de verde (#19740D).

4º Passo: Agora comece a construção de seu quarteirão. Eu comecei com uma árvore. Note que existem pontos que não devemos deixar pra trás, como pontos de luz e sombra. Apenas usando a ponta do pincel mais clara ou escura.

5º Passo: Agora copie e cole a sua árvore em vários pontos diferentes. Em seguida, construa uns homenzinhos (nesse ponto os detalhes não influenciam já que o homenzinho e quase imperceptível).

6º Passo: Usando mesmo princípio da árvore, eu desenhei uma casa.

Amigos, eu gostaria de deixar claro que isso é só o princípio de pixelart 3D. Abaixo seguem alguns exemplos retirados da internet de como esse mundo pode ser maravilhoso.

Espero que tenha ajudado. Na próxima matéria de pixelart 3D tentarei abordar mais sombra e posição de luz. Semana que vem voltamos com as matérias mais pedidas por e-mail.

Abraço amigos!

Todos os artigos de Fabio Lody

16/07/2008 - Manipulando o fogo com o Photoshop 06/06/2008 - Desenhando um iPhone pelo Photoshop CS3 - Conclusão 20/03/2008 - Desenhando um iPhone pelo Photoshop CS3 - Parte 02 28/01/2008 - Desenhando um iPhone pelo Photoshop CS3 - Parte 01 27/11/2007 - Illustrator + Photoshop CS3 13/09/2007 - Atualização - Truques para Tratamento de Imagens 12/09/2007 - Atualização: Truques para tratamento de imagens 02/07/2007 - Monitores LCD, configurações e impressão 03/04/2007 - Trabalhando com Actions 19/01/2007 - Workspace e Smart Objects 06/12/2006 - Novas técnicas para pincéis e Layer Comps 16/10/2006 - Conhecendo a Color Swatches 18/08/2006 - Manipulação e tratamento de foto profissional 24/07/2006 - Explorando o Adobe Bridge 14/06/2006 - Bandeira Brasileira 23/05/2006 - Lunatic Art 26/04/2006 - Quebra cabeça 28/03/2006 - Jumping Out 15/03/2006 - Tornando as pessoas invisíveis 22/02/2006 - Box 3D 24/01/2006 - Efeito CD-ROM 09/01/2006 - Reflexo 20/12/2005 - Feliz Natal! 08/12/2005 - Post it 21/11/2005 - Bordas arredondadas 03/11/2005 - Scripts para Photoshop 06/10/2005 - Dicas e dúvidas 22/09/2005 - Jogando água no Photoshop 06/09/2005 - Criando estilos - Parte 02 01/08/2005 - Back Fire 04/07/2005 - Dicas para criação web no Photoshop 15/06/2005 - Web no Photoshop - Parte Final 31/05/2005 - Web no Photoshop - Parte 03 (Com Galeria) 18/05/2005 - Web no Photoshop - Parte 02 05/05/2005 - Web no Photoshop - Parte 01 18/04/2005 - Arte abstrata - Parte 03 30/03/2005 - Criando Luz Neon - II 14/03/2005 - Criando Luz Neon 02/03/2005 - Criando Estilos 18/02/2005 - Criando shapes 04/02/2005 - Olhos vermelhos e galeria de imagens 27/01/2005 - Abstract Art - Parte 02 26/01/2005 - Texto Grunge - Atualização 14/01/2005 - Abstract Art - Parte 01 06/01/2005 - Entrando no mundo Hitech 22/12/2004 - Enfeite de natal 10/12/2004 - Trabalhando com Fotos 30/11/2004 - Buraco negro 19/11/2004 - Galeria de imagens 10/11/2004 - Cabelos rebeldes - Parte 02 27/10/2004 - Trabalhando com garrafas no Illustrator 26/10/2004 - Papel envelhecido 15/10/2004 - Fundo abstrato - Parte 02 08/10/2004 - Fundo abstrato 30/09/2004 - Half Tone em Texto 23/09/2004 - Efeito Gel 15/09/2004 - Texto Grunge 10/09/2004 - Preparando o Photoshop para web - Final 03/09/2004 - Preparando o Photoshop para web - Parte 03 27/08/2004 - Preparando o Photoshop para web - Parte 02 19/08/2004 - Preparando o Photoshop para web 13/08/2004 - Os blends do Photoshop 04/08/2004 - Gotas em lata de refrigerante 29/07/2004 - Banners - Adobe ImageReady 21/07/2004 - Banners - Parte 02 13/07/2004 - Banners 07/07/2004 - Pixel Art 3D - Atualização 01/07/2004 - Integração e movimentos com o Image Ready - Atualização 28/06/2004 - Efeitos de luz 18/06/2004 - Cabelos rebeldes 08/06/2004 - Especial - Dia dos Namorados 25/05/2004 - Criando uma bola de vidro e trabalhando com relfexo 11/05/2004 - Trabalhando com pedras 27/04/2004 - Trabalhando com madeira 13/04/2004 - Preparando o Photoshop para impressão 29/03/2004 - Integração e movimentos com o Image Ready 15/03/2004 - Perfis de monitores ICC 01/03/2004 - Tratamento de Fotos 16/02/2004 - Máscaras e canais 03/02/2004 - Criando Curvas 22/01/2004 - Pixel Art 3D 12/01/2004 - Pixel Art 31/12/2003 - Congele sua vida 12/12/2003 - Brincando com fogo 04/12/2003 - Adobe Creative Suite: o novo Photoshop CS 25/11/2003 - Recuperando Ferramenta Pincel (Healing Brush Tool) 13/11/2003 - Colorização de Fotos 31/10/2003 - Efeito metálico 21/10/2003 - Efeito Fundo Abstrato 07/10/2003 - Carimbo ou Processamento em Lote 17/09/2003 - Scan Line (Efeito TV) 02/09/2003 - Pen Tool 22/08/2003 - Pincel Brush - Parte 02 04/08/2003 - Pincel Brush 16/07/2003 - Efeitos de fundo 30/06/2003 - Efeitos para banners 17/06/2003 - Efeito máscara (Fade IN) 10/06/2003 - Rádio - 3º Parte 27/05/2003 - Splash Texture 13/05/2003 - Efeito Matrix 05/05/2003 - Textura Aço 25/04/2003 - Texturas 14/04/2003 - Blue Steel 07/04/2003 - Alien Style 29/03/2003 - Textos cromados 14/03/2003 - Botões de plástico ou gel 11/03/2003 - Agora usando a ferramenta Liquify 28/02/2003 - Fatiamento de Imagens 20/02/2003 - Teclas de atalho do Photoshop 06/02/2003 - Efeitos de texto 20/01/2003 - Rádio - 2ª parte 08/01/2003 - Rádio 18/12/2002 - Efeito de luzes

3 comentários publicados

• 1. Fotoshop

  Sábado, 10/07/2004, por ARILSON DA SILVA SANTOS

  Queria saber quando eu monto um layout no fotoshop para colocar numa pagina de html, queria saber qual é o procedimento para fatiar as imagens para depois eu salvar com arquivo que abra no Dreamweaver com as camadas???
  Abraços...

  Responder comentário

• 2. Oi

  Domingo, 11/07/2004, por Wellington Cesar

  Muito loko cara, mas será q vc poderia me conecta no msn thim_rock@hotmail.com, eu queria pedir uma coisa na tua coluna, flw

  Responder comentário

• 3. SHOW DE BOLA....

  Sexta-feira, 24/09/2004, por Stefano do Nascimento Genachi

  É ae Fábio... quero dar os parabéns... seus tutoriais são 10 são bem explicativos. Tambem trabalho na area.... mas ainda tenho muito que aprender sobre photoshop. tenho um site na web se possível da uma olhada... http://stefanogenachi.sites.uol.com.br

  Responder comentário

Poste um comentário

(clique se não for cadastrado)

Login: Senha: Titulo: digite aqui seu comentário Site/blog: Enviar Receber notificação de novos comentários

Sobre o autor

Fabio Lody é um dos colunistas mais lidos do Brasil. Desenvolveu trabalhos para a Johnson&Johnson, Chevrolet, Kawasaki Motors, grupo SBT, Ethos, HopiHari entre outros pela Tribal Interativa. Foi instrutor da WOC (Centro de Treinamento Adobe) e já trabalhou nas áreas de produção de vários webstudios. Escreve para duas revistas de circulação nacional além de desenvolver layouts de cartões para uma empresa do japão. Foi aluno de Alexandre Wollner e há 9 anos trabalha como Designer Gráfico. Blog: (http://www.fabiolody.com.br).

Indique para um amigo

Escreva aqui sua mensagem! ok

Tags relacionadas

publicidade tecnologia brasil design crescimento windows iphone 3g photoshop mercado ti microsoft php youtube celular lançamento gerência apple google web desenvolvimento yahoo seguranca linux mobile internet

TI SHOP Produtos iMasters

• Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
• Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
• DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
• DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!