Aprenda pixel art
Aulas curtas e práticas com os meus próprios exemplos. A maioria tem um treino interativo: você desenha direto no navegador, passo a passo. Grátis. Elas vêm do meu curso de pixel art, onde cada tema vai mais fundo.
Comece aqui
Tutorial de pixel art para iniciantesSeu primeiro sprite em cinco passos: contorno, cores, sombreamento, luz e detalhes. Com os erros que eu mais vejo.
Como aprender pixel art: um roteiroA ordem em que eu ensino pixel art, do simples ao complexo, com uma aula grátis para cada passo.
As 3 regras da pixel artO que faz pixel art ser pixel art? Três regras simples e um checklist rápido.
SPECC: como planejar pixel art antes de desenharTamanho, perspectiva, cor e luz, composição: as quatro decisões antes do primeiro pixel, com um checklist.
Quanto tempo leva para aprender pixel art?Horas e meses para pixel art pequena e grande, e quais habilidades você precisa para cada uma.
Termos de pixel art e erros comunsDoubles, jaggies, banding, pillow shading, sel-out e mais, em palavras simples, com a correção para cada um.
Básico
Linhas e curvas em pixel art (interativo)Minha folha de exercícios de linhas no seu navegador: linhas retas em proporções limpas, depois curvas sem pixels duplos nem serrilhado.
Círculos, quadrados e triângulos em pixel art (interativo)Minha folha de exercícios de formas no seu navegador, de 4 a 32 pixels, e as regras para um círculo redondo em qualquer tamanho.
Como fazer uma paleta de cores para pixel artMonte uma paleta a partir de uma cor: tom principal, sombra, luz e tons intermediários só onde precisa.
Sombreamento e iluminação em pixel art (interativo)Sombreie uma esfera no seu navegador, depois veja as mesmas regras de luz num cubo, cilindro, pirâmide e cone.
Desenhe uma maçã em pixel art (interativo)Desenhe a minha maçã direto no navegador, passo a passo. Veja eu desenhar cada passo e depois tente você mesmo.
Natureza
- Desenhe fogo em pixel art (interativo)Desenhe uma fogueira no navegador em quatro passos e aprenda por que o fogo é claro embaixo e escuro nas bordas.
Desenhe uma bola de fogo em pixel art (interativo)Desenhe a bola de fogo de um lança-foguetes no seu navegador e entenda por que a frente dela é a parte mais quente.
Desenhe água em pixel art (interativo)Pinte um tile de água para RPG e jogos com visão de cima: ondas, três camadas de sombreamento, brilhos.
Desenhe nuvens em pixel art (interativo)Desenhe uma nuvem em quatro passos e veja por que toda nuvem é só um grupo de esferas.
Desenhe chão de jogo de plataforma (interativo)Desenhe um bloco de chão para um jogo de visão lateral em quatro passos, depois coloque grama.
Desenhe pedras em pixel art (interativo)Desenhe um grupo de pedras com musgo e aprenda onde ficam a luz e a sombra numa pedra.
Desenhe um arbusto em pixel art (interativo)Pinte um arbusto detalhado sobre contornos prontos: cor, sombreamento, luz em cada folha, galhos.
Desenhe uma árvore em pixel art (interativo)Coloque um tronco embaixo do arbusto: contorno, sombra suave, textura de casca em espiral e grama nas raízes.
Materiais
Desenhe uma placa de metal em pixel art (interativo)Desenhe uma placa de aço brilhante com chanfros, reflexos, parafusos e baixo-relevo. Um sprite, quatro placas.
Desenhe uma parede de tijolos em pixel art (interativo)Monte uma parede de tijolos de concreto, coloque chanfros com luz e sombra, depois mude a cor para areia.
Desenhe um piso de madeira em pixel art (interativo)Desenhe um piso de madeira: tábuas, emendas, luz, sombra e veios.
Desenhe canos em pixel art (interativo)Um cilindro de 5 pixels iluminado do canto superior esquerdo, depois uma curva, uma junção e uma luva: quatro peças para qualquer layout.
Desenhe vidro em pixel art (interativo)Vidro colorido em tons de uma cor só, vidro transparente mostrado com um reflexo. Uma porta de vidro e uma vitrine.
Tileset de pixel art: tiles, tilesets e tilemaps (interativo)Desenhe meu tileset de calçada de 9 partes passo a passo, depois veja dois tilemaps feitos com os mesmos tiles.
Personagens
Perspectiva e isométrico
Perspectiva em pixel art: qual usarIsométrica 2:1, oblíqua 1:1 e quando cabe perspectiva de um ou dois pontos, com como escolher.
Pixel art isométrica para iniciantes (interativo)Aprenda a linha isométrica 2:1, depois desenhe um ar-condicionado isométrico passo a passo.
Desenhe uma máquina de refrigerante isométrica (interativo)Uma caixa isométrica com frente de vidro, bordas brilhantes e fileiras de latas de refrigerante.
Desafio isométrico: varanda, janela de telhado, toldo (interativo)Desenhe uma varanda em volta do meu bloco de prédio isométrico, depois uma janela de telhado e um toldo no mesmo bloco.
Animação isométrica: um letreiro rolando (interativo)Mova um letreiro pelo caminho isométrico quadro a quadro, com Select e Move como no Aseprite.
Cenas de jogo
Composição em pixel art: história, clima, foco e equilíbrioQuatro perguntas para qualquer cena de jogo, respondidas nos meus mockups de primeira pessoa, RPG, plataforma e isométrico.
Interface de jogo em pixel art: um menu com históriaUma loja, uma mensagem e uma tela de controles num quadro só, ícones de itens e regras para uma interface em pixel legível.
Animação
Anime fumaça em pixel art (interativo)Sua primeira animação: uma nuvem de fumaça em 10 quadros, com onion skin e reprodução.
Ciclo de caminhada em pixel art (interativo)Faça o sábio andar em quatro quadros: passos, balanço da cabeça e braços balançando, com onion skin e reprodução.
Ciclo de caminhada de lado em pixel art (interativo)Quatro quadros de lado: as pernas, depois as costas, a cabeça e uma túnica que balança um pouco.
Antecipação, smear e easing (interativo)Anime o sábio lançando um feitiço: um agachamento, ondas de ar, quadros mais rápidos e mangas balançando.
Animação sub-pixel (interativo)Deixe o movimento mais suave com rastros de cores vizinhas: o sábio respirando, quadro a quadro.
Parallax em pixel art, explicadoPor que coisas distantes parecem mais lentas e como camadas que andam de 1 a 4 pixels por quadro criam o parallax scrolling.