Introduza o termo a pesquisar e clique Enter.

Pixel Art Isométrica

Out 05 18

Escrito por Dextro @ 18/10/05 23:10 | 14 Comentários »

Ok pediram e eu acedi e portanto fica aqui o meu simples tutorial sobre Pixel Art. Espero que não fiquem desapontados visto os meus conhecimentos ainda serem muito básicos e a própria arte de trabalhar com pixeis é algo que tem mais de treino do que de aprendizagem tradicional mas vamos lá aos básicos…

Ponto 1: O que é?

Antes de mais para saber fazer Pixel Art é obviamente necessário saber o que é este tipo de arte. De forma muito simplista podemos definir Pixel Art como “o tipo de arte que envolve editar imagens digitais Pixel a Pixel” mas obviamente para tal precisamos de saber o que é um Pixel. Nada mais simples. Um Pixel é a unidade mais pequena que um monitor (não necessariamente mas regra geral) de computador consegue exibir.

E está assim definida a Pixel Art no entanto os mais atentos já notaram o facto do titulo do tutorial ser Pixel Art Isométrica e não meramente Pixel Art. Porquê? Porque este é o tipo de Pixel Art que sei e que pessoalmente sempre achei mais agradável visto proporcionar um ângulo bem fixo sobre o qual visualizamos a cena o que permite imensas aplicações praticas desde RTSs a RPGs. Sim pois foi na industria primordial dos videojogos que este tipo de arte cresceu e floresceu.

Devido á falta de meios técnicos nos computadores da altura (386 anyone?) os produtores de jogos viam-se forçados a recorrer a gráficos de baixa resolução e de entre estes o Pixel Art isométrico é conhecido por abranger uma panóplia de estilos desde o pseudo foto realista ao pseudo cartoon mas mais á frente explico como atingir estes aspectos quando referenciar a forma de colorir em Pixel Art mas agora passemos ao trabalho!

Ponto 2: Os básicos

Antes de mais nada vamos aos básicos: O que é perspectiva Isométrica? Perspectiva isométrica é aquela em que ambos os lados da imagem fazem um ângulo de 30º com o observador que está colocado no centro do papel (neste caso ecrã) … No entanto no computador não é possível fazer um ângulo de 30º usando pixeis logo temos de usar um ângulo aproximado de aproximadamente 26º/27º. Não vou entrar em grandes pormenores matemático-trigonométricos agora, para isso deixarei alguns links no final, portanto vamos avançar e passar ás ferramentas que vamos precisar…

Antes de mais nada não pensem que vão ter de gastar rios de dinheiro (ou de consumos) para obter as ferramentas necessárias visto que estas são as mais básicas possíveis e portanto abram o vosso menu iniciar e arranquem o Paint! Sim leram bem, apenas precisam do Paint (ou equivalente Linux/Mac) para fazer belos trabalhos de Pixel Art, simples não? Claro que eu pessoalmente recomendo que usem uma ferramenta que suporte Layers como é o caso do Photoshop ou do seu equivalente gratuito GIMP pois assim terão um controlo muito mais individualizado das várias partes do vosso trabalho. Outra falha do Paint é a conversão para outros formatos portanto se o querem usar assegurem-se que obtêm uma ferramenta de qualidade para fazer a conversão de BMP para PNG/GIF/JPG/etc.…

Eu pessoalmente uso o Photoshop e crio cada parte das minhas imagens individualmente. Tomando como exemplo o PixProject primeiro crio a rua, depois faço um quadrado que será o quarteirão onde vai encaixar o edifício e por fim crio o edifício num ficheiro á parte que mais tarde coloco de novo no ficheiro principal substituindo o quadrado que ocupava o local do quarteirão… Assim posso facilmente usar um esquema estilo “Lego” para construir a minha imagem sem ficar desorientado nem me preocupar com a existência de um curto numero de undos quando me engano (lembrem-se que cada pixel vai corresponder a um undo logo gravem sempre que terminam uma secção por mais insignificante que esta pareça).

E agora que terminamos estes básicos e já sabem o que vão fazer e com que aplicação vamos fazer os nossos primeiros rabiscos…

14 Comentários

  1. Visitante X

    19 de Outubro de 2005 ás 00:19 [Responder]

    Muito bom o teu tutorial. Espero que aperfeiçoes a técnica para te tornares um verdadeiro pixel-artist Português!
    Para mim a dica mais porreira foi a de retirar as arestas ao cubo, para o tornar mais “real”.
    As pirâmides parecem efectivamente, o mais complicado… :roll:
    Permite-me também acrescentar que, nas ferramentas mais “profissionais”, e falo do Photoshop neste caso pois o meu contacto com o GIMP é praticamente nulo e não sei se tem essa funcionalidade, podes sempre manejar o “voltar atrás” através do history, e fazê-lo de uma forma pontual, e até mudar a ordem as acções, e dessa forma não perder todas as alterações que fizeste.

  3. rmvalente

    22 de Agosto de 2007 ás 22:49 [Responder]

    Estou a ver se inicio os meus “desenhos” em pixel art… Para mim ainda é muito desconhecido e o que sei, resume-se a relativamente muito pouco…

    rmvalente@gmail.com Enviem um e-mail se tiverem dicas interessantes que me possam ajudar…

    Uma pergunta…
    Eu tenho Macromedia Fireworks MX, é melhor, pior? Devo usar??? 8O
    :lol: Comprimentos e parabens pelo Tutorial :)
    rmvalente

  4. Dextro

    24 de Agosto de 2007 ás 10:45 [Responder]

    Fireworks não é lá muito boa escolha para isto já que, se não me engano, é mais focado em desenho vectorial enquanto pixel art é baseado em pixeis. É possível utiliza-lo mas no entanto algo como o Paint.Net ou o Photoshop seriam possivelmente melhores escolhas.

  6. andrezero

    22 de Maio de 2008 ás 19:44 [s] [Responder]

    A usar Mozilla Firefox 2.0.0.14 em Windows Vista

    Execelente tutorial…

    Quando preciso de fazer algo do género, tipo icons, uso simplesmente o PAINT e tenho uma prática do caraças naquilo, o que é essencial porque só tem 4 níveis de undo!

    Claro que por vezes limito-me a pegar numa imagem maior e reduzi-la para 32×32 e depois dar uns toques ao nível do pixel para dar melhor definição aos contornos essenciais.

    Eu sou um grande fã do lado artesanal… quando se começou a falar de pixel art achei que era um back-to-the basics e um autêntico tributo aos velhos tempos do z80 e afins, em que os “sprites” eram “programados” pixel a pixel…

  7. António Pedro

    25 de Julho de 2008 ás 11:45 [s] [Responder]

    A usar Mozilla Firefox 3.0.1 em Linux

    Há programas mesmo específicos para Pixelart… um que eu me sinto confortável a usar (e que é multiplataforma) é o mtPaint :) Try it

  10. Maria Eduarda

    31 de Dezembro de 2009 ás 22:51 [s] [Responder]

    A usar Internet Explorer 8.0 em Windows 7

    Eu amei esse site, mais eu queria saber como faz o Pixel Art e qual o site dele, pq eu preciso editar o meu habbo! O meu habbo é: Anna.Carvalho!!!
    :arrow

  11. no_name

    19 de Fevereiro de 2010 ás 16:30 [s] [Responder]

    A usar Internet Explorer 7.0 em Windows XP

    [Revivendo tópico] LOL

    @Thylindo!

    Fireworks não é focado em desenho vectorial. Você deve ter cometido algum engano; o Illustrator é.

    Para mim o Fireworks é a melhor opção para pixelart. Mas isso vale para mim… me sinto confortável nele.

Comente!






Ajuda

Nome:

Preencha o seu nome para assinar o comentário. O preenchimento deste campo é obrigatório.

Os comentários são as suas ideias ou opiniões em relação ao artigo que acabou de ler. Assine o seu comentário para dar a conhecer o seu ponto de vista.

E-Mail:

O seu endereço de e-mail não será publicado. O preenchimento deste campo é obrigatório.

Este site suporta a utilização de gravatars. Caso o seu endereço de e-mail esteja registado em gravatar.com, irá aparecer a sua imagem ao lado do comentário.

Site:

Se tiver um website, este é um bom local para o publicitar.

Sempre que alguém ler o seu comentário, irá ver um link para o seu site. Se o seu comentário for relevante para os outros utilizadores, com certeza eles quererão saber mais sobre si e visitarão o seu site.

Protecção Anti-Spam

Efectue uma pequena soma para confirmar que o seu comentário não se trata de spam.

O preenchimento deste campo é obrigatório.

Comentário

Este formulário permite o uso de algumas tags em HTML5. As tags permitidas são as seguintes:

<a href="" title="">
<abbr title="">
<blockquote cite="">
<code> <em> <del> <ins>
<strong>