[The Digifami Web] Curso de Arte em Pixel (1º Ano)

[Victor Sena]

Curso de Arte em Pixel
(1º ANO)

Classes​

---

Sala de Aula do 1º Ano - Sala de Aula do 2º Ano - Sala de Aula do 3º Ano​

---

Quando se descobre que pode criar os próprios recursos para jogos, muitas pessoas provavelmente pensam em desenhar em pixel. No entanto, ao tentar fazê-lo, podem enfrentar várias barreiras, como não conseguir desenhar bem, não saber como fazê-lo, demorar muito tempo, entre outras coisas. Embora seja importante experimentar e aprender sozinho, desistir no meio do caminho pode não valer a pena. Aqui, apresentamos técnicas e conhecimentos básicos, bem como algumas dicas, para que você possa usá-los como referência para aprimorar suas habilidades.

※ Para as pessoas que dizem ~ "ver online é difícil", criamos uma opção para baixar os materiais de cada aula em um único arquivo compactado. Cada arquivo está em formato de auto extração. Se você está preocupado com os custos de navegação, não hesite em usar esta opção.​

Download (ダウンロード): ​

SALA DE AULA DO 1º ANO

Esta é uma sala de aula brilhante de alunos do primeiro ano que estão prestes a desenhar sua primeira arte em pixel.​

● AULA 01 - O que é uma pixel arte?
● AULA 02 - Software para desenhar pixel arte
● AULA 03 - Técnica Básica: Padrão de azulejos
● AULA 04 - Técnica Básica: Anti-aliasing

Hikari Koshimoto（越本　ヒカリ）​	Professora do 1º Ano​
Hikari Koshimoto, também conhecida pelo apelido de "Pikarin", é uma nova professora que é popular entre os alunos (talvez um pouco subestimada). Ela é uma mulher bonita e alegre, mas um pouco distraída. Suas aulas são fiéis aos livros didáticos, o que exige que os alunos se preparem e revisem muito. Ela também costuma dar muitas tarefas de casa.​

●AULA 01 - O QUE É UMA PIXEL ARTE?●
O que é o pixel arte? Vamos começar entendendo o que é o pixel arte

"Se você está lendo esta página,
isso significa que você não sabe nem a letra "D" de "dot painting" (pintura de ponto) ainda!
Então vamos começar estudando o que é dot painting."

QUE TIPO DE IMAGEM É CHAMADA DE DOT PAINTING?

​

Todo mundo diz "dot painting" como se fosse algo natural, mas há pessoas que ouvem essa palavra pela primeira vez. Se explicarmos de maneira simples, é uma imagem "desenhada com pontos". Se ainda não entendeu bem, talvez você não saiba o significado da palavra "dot".

A palavra "dot" em inglês significa "ponto". Ela também é usada como termo de informática, mas ainda tem o mesmo significado de "ponto". Portanto, o significado direto de dot painting é "uma imagem desenhada com pontos".

Até mesmo os caracteres que você está lendo agora são compostos de pequenos pontos, como você pode ver quando ampliados. A menor unidade que compõe esses caracteres é chamada de 1 pixel. Veja a figura 1 abaixo para referência.​

Figura 1

Todas as informações que são exibidas na tela do computador são construídas por esses pixels. A pixel arte é uma imagem que é desenhada ponto por ponto, usando essa unidade de um pixel.

Recentemente, os jogos em 3DCG estão se tornando mais populares. Embora a unidade mínima exibida na tela em 3DCG também seja um pixel, não é desenhado ponto a ponto pelos seres humanos. Além disso, como não é uma imagem desenhada à mão, não pode ser considerada como pixel arte.

Desenhar uma imagem usando esses pequenos pontos não é exatamente uma tarefa fácil, requer um certo nível de habilidade e sensibilidade. No entanto, com um pouco de esforço e conhecimento, você pode começar a achar essa atividade muito divertida.

Mesmo que você não seja bom em desenhar à mão, tenha uma nota baixa em arte ou um computador lento, você ainda pode começar a criar pixel arte com apenas um mouse e um computador. Com ferramentas de criação de jogos simples, como o RPG Maker, é possível jogar usando imagens feitas por você mesmo. A alegria de ver uma imagem que você criou se movendo como um jogo é incomparável!​

RELAÇÃO ENTRE RESOLUÇÃO E PIXEL ARTE

​

Ao iniciar a criação de gráficos, você frequentemente ouvirá a palavra "resolução". Você sabe do que se trata essa resolução? Em termos de informática, a resolução refere-se à precisão da exibição na tela. Quanto mais pixels horizontais e verticais houver, mais "alta" será a resolução e a imagem ou texto exibidos parecerão mais delicados e nítidos. Por exemplo, clique com o botão direito do mouse na área de trabalho agora e abra as "Propriedades da tela". Na seção "Área de trabalho", você pode definir a resolução da tela. Quanto maior o número, maior a resolução.

No entanto, como o número de pixels que podem ser colocados na tela aumenta, o tamanho dos elementos exibidos (como janelas e pastas) não muda. Apenas cada pixel individual se torna menor, tornando a tela mais ampla e os elementos mais delicados.

A resolução da tela é determinada pelos recursos do monitor e tem limitações máximas e mínimas. No entanto, em jogos, muitas vezes é possível alternar entre configurações diferentes. Isso ocorre porque os jogos precisam processar muitas imagens, músicas e efeitos sonoros rapidamente. Se você aumentar a resolução, a velocidade de processamento do jogo pode diminuir. Em outras palavras, é como pensar em correr 50 metros em vez de 100 metros, se achar que correr 100 metros é muito difícil. Você pode correr 50 metros mais rápido do que 100 metros.

A arte em pixel é amplamente afetada por essa resolução. Como é criada a partir de unidades mínimas (pixels), se a resolução for alta, tudo parecerá menor. Portanto, personagens de jogos devem ser desenhados em tamanhos maiores. Em contrapartida, quando a resolução é baixa, os personagens podem ficar grandes demais se forem desenhados muito pequenos.​

Figura 2

Este é um problema de diferença de resolução. Consulte a figura 2. Se a imagem for exibida em uma tela com resolução que possa exibir 23 pixels na horizontal e 17 pixels na vertical, a imagem será exibida inteira. Mas se a mesma imagem for levada para um local que só possa exibir 12 pixels na horizontal e 10 pixels na vertical, não será possível exibir a imagem inteira. Seria problemático em um jogo se apenas a cabeça do personagem fosse visível, não é mesmo? Para exibir a imagem completa, é necessário redesenhá-la para se adequar a essa resolução. Assim, os gráficos de pixel arte e a resolução estão inextricavelmente relacionados.

Por exemplo, produtos como "RPG Maker 95" e "Love Simulation Maker" fornecem imagens preparadas para uma resolução de 640 x 480 pixels. O recente "RPG Maker 2000" usa 320 x 240 pixels. Quando a resolução é menor, cada pixel fica maior, tornando as bordas de cada pixel mais visíveis. Uma vez que a unidade mínima de pixel não pode ser alterada, a sensação "pixelizada" não pode ser evitada.

A resolução de 320 x 240 pixels é usada em consoles de jogos domésticos. A razão pela qual os jogos não parecem pixelizados é porque a precisão da exibição é diferente entre as TVs domésticas e os monitores de computador. Como a precisão da TV é menor, as bordas dos pixels são borradas. Se você vê o jogo em um monitor de computador, onde a exibição é nítida, ele deve parecer pixelizado. Lembre-se de que, desde que a unidade mínima de pixel seja um ponto quadrado, isso é inevitável.​

POR QUE PRECISAMOS DESENHAR EM PIXELS?

​

Em resumo, não é necessário preparar os gráficos de um jogo obrigatoriamente em pixel arte. No passado, era necessário desenhar pixel por pixel, mas isso não é mais uma exigência. Quando os jogos começaram a se popularizar, a quantidade de cores que podiam ser usadas para gráficos era limitada a 2 a 8 cores e não podia ser alterada.
​

Figura 2

Atualmente, é possível criar imagens com cores completas (cerca de 16 milhões de cores) e reduzi-las para o número de cores necessárias (por meio de técnicas de redução de cores), além de ser possível melhorar a aparência do jogo com o uso de software de modelagem 3D.

No entanto, isso pode causar problemas quando se trata de baixa resolução, ou seja, quando o tamanho necessário é muito pequeno. Nesses casos, a imagem pode ficar embaçada ou desfocada, exigindo correções pixel por pixel. Se você precisar criar uma animação com movimento de pixel a pixel, isso pode ser extremamente trabalhoso. Portanto, desenhar em pixels desde o início pode ser mais fácil e produzir resultados mais limpos e claros. Pixel arte é um método de criação de gráficos desenvolvido para jogos com baixa resolução.

No futuro, à medida que a potência das máquinas aumentar, a resolução poderá aumentar e eventualmente, pode não ser mais necessário desenhar em pixels. Não é mais necessário criar todos os gráficos de um jogo em pixel arte. Portanto, não é preciso se preocupar em criar todos os elementos em pixel arte, mas é uma boa ideia usar essa técnica para partes que não podem ser expressas de outra forma.​

APRENDER A FAZER PIXEL ARTE

​

Na verdade, a maioria das pessoas aprendeu a técnica do Pixel Arte de forma autodidata. Não há cursos disponíveis e é claro, não há livros especializados. Até mesmo os profissionais que atuam atualmente aprenderam Pixel Arte estudando jogos comerciais ou recebendo treinamento de veteranos em suas empresas. O conhecimento em Pixel Arte era necessário apenas para um pequeno grupo de pessoas que precisavam fazer por causa do trabalho ou que gostavam e com a facilidade cada vez maior de criar jogos por conta própria, mais e mais pessoas começaram a se interessar.

Se você pode fazer, às vezes é movido pelo desejo de criar algo tão bom quanto os jogos comerciais. O número de pessoas que querem criar seus próprios gráficos aumentou e consequentemente, o número de pessoas que podem desenhar ou desenham Pixel Arte também aumentou. No entanto, muitas pessoas desistem porque não têm ninguém para ensiná-las quando começam ou porque não conseguem fazer algo tão bom quanto o de jogos comerciais, que têm uma qualidade muito alta. Enquanto isso, a única maneira de descobrir qual é a sua maneira de desenhar e qual tipo de arte se adequa a você é experimentar e desenhar muitos Pixel Artes.

Infelizmente, mesmo com cursos como este, não podemos ensinar como desenhar bem. A razão para isso é que apenas a pessoa que está desenhando sabe como fazer um bom desenho. Qual é a melhor maneira de desenhar? Qual tipo de arte é o mais adequado para você? A única maneira de descobrir isso é experimentar e desenhar muitas Pixel Artes.

Atualmente, existem muitos jogos comerciais que servem como referência para quem quer começar a fazer Pixel Arte. Quando você decide fazer Pixel Arte, seus olhos já estão acostumados e você sabe qual arte é boa ou ruim. Você já viu os resultados das lutas dos outros antes de você começar. A escada já foi subida várias vezes. Depende de cada um se quer continuar subindo ou se quer dominar completamente o nível atual, mas é essencial ter uma atitude de aprendizado por conta própria.

Pixel Arte é uma forma de arte adequada para aqueles que gostam de desenhar, já que se trata de uma forma de "desenho". Mesmo as pessoas que não são boas em desenhar podem aprender a desenhar naturalmente, por isso é importante não desistir e persista.​

NÚMERO DE CORES UTILIZADOS EM PIXEL ARTE

​

Bem, agora vamos começar a falar sobre o aspecto técnico. Antes, mencionamos que os gráficos dos antigos jogos eram compostos por no máximo 2 a 8 cores. No entanto, recentemente, graças ao avanço tecnológico, é possível exibir uma enorme quantidade de cores na tela de uma só vez. Em casos como jogos de luta em que é necessário mudar a cor dos personagens, é comum limitar a paleta de cores usada em pixel arte a um máximo de 256 cores.

Além disso, o número e os tipos de cores utilizados são fixos dependendo do sistema em que o jogo está sendo executado. Pode ser em preto e branco com 8 cores ou em cores com 16 cores, por exemplo.

Nos jogos de computador, a paleta de cores mais comum é de 256 cores por arquivo. Antigamente, no RPG Maker, era obrigatório usar a mesma paleta de 256 cores para todos os arquivos. Dependendo do software ou mídia, é necessário adaptar a forma de desenhar de acordo com o projeto.​

Fim da Aula

---

▲ Volte ao Índice ● Próxima Aula ▼

​

Ano: 2000 / Site: Digital Famitsu Homepage (http://www.ascii.co.jp/digifami/index.html)
Arquivado por: Internet Archive / Traduzido por: ChatGPT / Escrito pela pseudo autora: Hikari Koshimoto（越本　ヒカリ）
Publicado por:

 

[Victor Sena]

●AULA 02 - SOFTWARE PARA DESENHAR PIXEL ARTE●
Qual software é fácil de usar para desenhar pixel arte?

"Eu quero desenhar pixel arte,
mas qualquer software serve?
Vamos escolher um software para desenhar pixel arte!"

RECURSOS ESSENCIAIS NECESSÁRIOS PARA CRIAR PIXEL ARTE

​

Criar pixel arte requer um método especial de desenho dentro do campo da arte. Atualmente, não existe um software perfeito que atenda a todas as funções desejadas por muitas pessoas. Portanto, os recursos mínimos essenciais que se deseja ao criar pixel arte são resumidos abaixo. Para aqueles que estão procurando por software de pixel arte, consulte esta lista como referência. Recursos básicos de ferramentas gráficas, como canetas e preenchimento de cor, não estão incluídos nesta lista.

● Recurso de paleta
O recurso de paleta é como uma paleta de pintura usada para colocar tinta ao pintar com óleo. É um recurso essencial para pixel arte, onde você pode manter as cores que deseja usar ou que já usou sempre visíveis. A maioria dos softwares dedicados a pixel arte de 256 cores possui esse recurso. Por outro lado, é comum que softwares que não são dedicados a 256 cores não possuam esse recurso. Softwares dedicados a 256 cores são aqueles em que a imagem criada é limitada a 256 cores.

● Recurso de lupa
É como uma lupa. Como o pixel arte é pequeno, é necessário ampliá-lo para desenhar. Seria bom se a ampliação pudesse chegar a pelo menos 8 vezes. Especialmente para aqueles que desenham pixel arte em telas com alta resolução, pode ser necessário uma ampliação ainda maior. É ainda melhor se houver um recurso que possa exibir a imagem em tamanho real simultaneamente. É mais confortável trabalhar na tela da lupa enquanto visualiza a imagem em tamanho real.

● Recurso de conta-gotas
Ao desenhar pixel arte, é um recurso que permite pegar a cor usada na imagem que está sendo desenhada. Isso acelera o processo de trabalho, pois você não precisa ir até a paleta de cores para pegar a cor. É melhor se puder pegar a cor apenas com o mouse, sem precisar usar o teclado. Ter o recurso de conta-gotas é bom, mas ter que trocar constantemente para essa ferramenta não é muito eficiente.

● Exibição de grade
Embora a terminologia possa variar dependendo do software, uma grade é geralmente referida como uma rede quadrada de linhas de referência. Idealmente, seria melhor se o tamanho da grade pudesse ser especificado em vez de fixo, permitindo que o usuário exibisse a grade em um tamanho específico. Além disso, um recurso chamado "alinhamento à grade" alinha automaticamente os pontos às linhas da grade, e seria ótimo se o interruptor ON/OFF para esse recurso fosse flexível.

● Especificação de cor transparente
A função de especificação de cor transparente é muito útil, não só para usar em jogos, mas também para tratar a cor de áreas desnecessárias como transparente. Mesmo se a posição da paleta de cores usadas como transparentes for fixa, é importante escolher uma opção que permita selecionar ON / OFF da cor transparente. Com essa função, é possível desenhar separadamente uma mesa e um prato e em seguida, combiná-los no final, o que é muito conveniente.​

ALGUMAS FUNCIONALIDADES ÚTEIS

​

● Animação
Uma função que verifica a animação em uma determinada parte, na ordem especificada. É muito útil.

● Criação de gradiente
Seria conveniente poder criar gradientes livremente na paleta.

● Troca de cores
Seria conveniente ter a capacidade de trocar as cores na paleta e assim, facilitar a mudança de cores posteriormente.

● Alteração do tamanho da imagem
Seria conveniente poder alterar livremente o tamanho da imagem em edição. Começar com um tamanho maior do que o especificado inicialmente e usar as áreas em branco como espaço de trabalho. Seria muito útil poder reduzir para o tamanho final necessário.

● Deslocamento de pixels
Uma função que move uma seleção selecionada um pixel de cada vez. É muito útil quando você precisa mover uma seleção um pixel para a direita, por exemplo.

● Salvar padrões de mosaico
Seria conveniente ter a capacidade de salvar padrões de mosaico ou designs criados.​

SER ADEQUADO PARA VOCÊ

​

Não importa o quão bom seja o software, se ele não funcionar no seu computador, será um problema. Primeiro, é importante que o software funcione confortavelmente no seu computador. Se possível, um software confortável que não seja lento e responda imediatamente ao clicar seria ótimo.

Em seguida, o preço. Há um limite para o quanto uma pessoa pode gastar em um software. Se possível, é desejável que seja barato e se possível, gratuito. Há muitas informações na internet, incluindo informações sobre software gratuito. Experimente primeiro e escolha aquele que você achar fácil de usar.​

Fim da Aula

---

▲ Volte ao Índice ● Próxima Aula ▼

​

Ano: 2000 / Site: Digital Famitsu Homepage (http://www.ascii.co.jp/digifami/index.html)
Arquivado por: Internet Archive / Traduzido por: ChatGPT / Escrito pela pseudo autora: Hikari Koshimoto（越本　ヒカリ）
Publicado por:

 

[Victor Sena]

● AULA 03 - TÉCNICA BÁSICA: PADRÃO DE AZULEJOS ●
Lembrar das técnicas básicas!

"Quando se desenha gráficos em pixel arte,
é uma técnica fundamental para cobrir uma quantidade limitada de cores.
Embora não seja tão usada atualmente, já que o número de cores disponíveis aumentou,
ela agora é utilizada para diferentes fins, como a representação de texturas.
Dominar essa técnica certamente será útil para você!"

O QUE É UM PADRÃO DE AZULEJO?

​

A origem do nome do padrão de azulejo vem dos azulejos que são usados para forrar banheiros e entradas. É fácil imaginar a disposição dos azulejos, que são colocados em fileiras de placas quadradas. O termo "padrão de azulejo" é usado para se referir a um padrão disposto dessa maneira. Às vezes, o ato de criar um padrão de azulejo é chamado de "tiling".​

O BÁSICO PARA GRADIENTE

​

O objetivo original do padrão de azulejo é compensar a falta de cores em gráficos que usam apenas duas cores, como preto e branco. A técnica surgiu da prática de desenhar pixels brancos e pretos alternados para criar um pseudo cinza em gráficos com apenas duas cores. Primeiro, tente dominar o gradiente de preto para branco usando o padrão de azulejo.​

Figura１

Quando se quer criar um tom intermediário entre o preto e o branco, o padrão de azulejo xadrez é a base fundamental. É composto por um pixel branco e um pixel preto colocados alternadamente.​

Figura２

Além de simplesmente alternar as cores, o padrão de azulejos pode aumentar a percepção de cores ao mudar a maneira como as cores são organizadas. A Figura 2 é um exemplo simples disso. É baseado no padrão de xadrez da Figura 1. Nas áreas mais próximas do preto, um pixel branco é pintado a cada dois pixels pretos. Nas áreas mais próximas do branco, um pixel preto é pintado a cada dois pixels brancos.​

Figura 3

Adicionalmente, para tornar as cores mais próximas do preto e branco, você pode adicionar mais cores. Esta é a regra básica do padrão de azulejo. Fazendo o desenho com base na parte quadriculada o máximo possível, torna-se menos provável que ocorram erros e a edição é mais fácil. Você pode colocar os pixels para que a transição do preto para o branco ocorra de um lado para o outro, mas pode ficar confuso no meio do processo. É melhor desenhar no padrão de base quadriculado o máximo possível. Isso se aplica mesmo em desenhos inclinados ou curvos.​

PRÓS E CONTRAS

​

A maior desvantagem do padrão de azulejo é que ele não pode ser usado em objetos muito pequenos. Por exemplo, se um personagem tiver um tamanho de 16x24 pixels, o padrão de azulejo que alterna as cores não pode ser usado, pois a área colorida é muito pequena. A principal desvantagem do padrão de azulejo é que ele não pode ser usado em áreas muito pequenas para pintar. No entanto, se a área de coloração for pequena, é provável que você não precise de um gradiente, não sendo necessário usar o padrão de azulejo. O uso básico do padrão de azulejo ainda seria para gradiente em "áreas amplas" com "poucas cores". Não é uma técnica que pode ser usada aleatoriamente em qualquer lugar.

Outra desvantagem do padrão de azulejo é que ele pode parecer "áspero". Os pixels são basicamente quadrados e ao combinar cores diferentes, o resultado final é inevitavelmente áspero. Se você quiser uma aparência mais suave, terá que usar um gradiente de padrão de azulejo com cores semelhantes.

Recentemente, com o aumento do número de cores disponíveis para uso em gráficos, os padrões de azulejo começaram a ser usados intencionalmente para representar uma textura granulada, devido a essa característica que parece áspera. Se você planeja usar padrões de azulejo no futuro, em vez de ter um preconceito de que ele é usado apenas para gradiente ou para representação de textura, tente lembrar como ele será exibido quando usado. Dessa forma, você poderá usá-lo de forma adequada. No caso de baixa resolução, acho que também é bom usá-lo como um padrão decorativo.​

Figura 4

USO

​

Em termos de uso, o principal é observar como fica em tamanho real. Mesmo que pareça grosseiro quando ampliado, se ficar bonito no tamanho real, está tudo bem. Além disso, os tipos e larguras de padrões de azulejos não são uniformes e não são iguais em média. A quantidade e o padrão a serem usados variam de acordo com as cores e o uso adjacentes. Infelizmente, isso só pode ser controlado desenhando com precisão no tamanho real para garantir que não fique estranho.
​

Figura 5

Por enquanto, vamos praticar colocando duas cores nas extremidades e preenchendo o espaço intermediário com um padrão de azulejo. No começo, é mais fácil de ver quando as cores são completamente diferentes, como branco e preto.​

EXEMPLO DE USO

→Ampliado→

Também é possível obter um efeito semelhante a sobreposição de algo semitransparente.

Fim da Aula

---

▲ Volte ao Índice ● Próxima Aula ▼

​

Ano: 2000 / Site: Digital Famitsu Homepage (http://www.ascii.co.jp/digifami/index.html)
Arquivado por: Internet Archive / Traduzido por: ChatGPT / Escrito pela pseudo autora: Hikari Koshimoto（越本　ヒカリ）
Publicado por:

 

[Victor Sena]

● AULA 04 - TÉCNICA BÁSICA: ANTI-ALIASING ●
Embora seja difícil, é uma disciplina essencial.

"Minhas pixel artes desenhadas ficam com bordas serrilhadas...
Para resolver esse problema,
nasceu a técnica chamada anti-aliasing.
Embora seja necessário ter uma grande variedade de cores disponíveis,
é sempre necessário, então vamos dominá-la!"

USO BÁSICO

​

Anti-aliasing é uma técnica que foi criada para minimizar as partes serrilhadas nas pixel artes, que geralmente são chamadas de "jaggies". Ela faz isso ao misturar as linhas principais da imagem com o fundo para torná-las menos visíveis, suavizando assim as bordas das pixel artes. Embora o tamanho mínimo das unidades de pixel não mude e ainda sejam quadrados, a técnica faz com que nossos olhos não percebam isso. Esse é o efeito do anti-aliasing.​

Para usar anti-aliasing, é importante conhecer os efeitos das cores. Primeiro, aqui está uma paleta de gradiente do preto ao branco. Vamos definir a linha principal como preta e o fundo como branco. O cinza mais claro na parte superior da paleta parece estar se misturando com o branco, mais do que o preto na parte inferior. O anti-aliasing usa esse efeito para suavizar as bordas da imagem.​

Mesmo se a cor de fundo for alterada, cores próximas ao fundo também se misturarão. Isso ajuda a integrar o fundo com a imagem, fazendo com que cores próximas ao fundo não mais acentuem as bordas serrilhadas.​

Aqui, desenhamos linhas de comprimento igual, mas na parte inferior, aplicamos uma graduação de cores que se misturam com o fundo. Mesmo tendo o mesmo comprimento, o uso de cores que se misturam com o fundo faz com que as linhas pareçam mais curtas. Com o uso de anti-aliasing, compreender esses efeitos de cor pode tornar o processo mais fácil.​

EFEITO DE ANTI-ALIASING: DESFOQUE

​

Como efeito do uso do anti-aliasing, vamos lembrar do efeito de desfoque.

Desenhei um círculo branco em um fundo preto. Mesmo em tamanho real, já é possível ver os cantos pixelados e angulares. Vamos suavizar o branco e misturá-lo ao preto do fundo aqui. As cores a serem usadas são as 8 cores usadas na seção anterior.​

Vamos dar um passo adiante e contornar perfeitamente ao redor com uma cor mais próxima do preto.​

Da mesma forma, criamos um contorno gradiente em direção ao preto. Depois de terminar o contorno, ficará nesse estado. No entanto, parece que há linhas finas nas direções vertical e horizontal e o círculo acabou ficando maior do que o original.​

Quando aumentamos o zoom, as linhas ficam ainda mais visíveis. É interessante usá-las como efeito, mas como podemos suavizar a borda do círculo?​

A causa são as bordas entre as diferentes áreas do gradiente. Devido ao contorno contínuo, acabamos criando degraus na mesma posição, resultando nesse estado. Para suavizar essa borda, podemos criar um gradiente cinza próximo ao lado para se misturar. Mas, se fizermos isso, não haverá fim.​

Para evitar isso, precisamos mudar a forma como desenhamos. Desta vez, usaremos a cor um número acima, pulando uma cor e faremos um contorno para dentro. Vamos fazer o contorno apenas na parte interna. A moldura vermelha é a cor selecionada.​

Quando aumentamos o zoom, é assim que fica. Neste estado, a borda entre branco e cinza e a borda entre cinza e preto são destacadas pelos diferentes tons de cor, o que torna os pixels claramente visíveis.​

Se usarmos a mesma técnica de criar um contorno dentro com a cor entre branco e cinza para suavizar a borda, acabaremos com o mesmo problema que antes ao misturar o branco e o cinza. Em vez disso, preenchemos o espaço intermediário com cinza e deixamos uma margem. Para essa cor intermediária, devemos nos concentrar apenas em misturar o cinza e o branco para suavizar a transição.

Quando aumentamos o zoom, é assim que fica. Isso é o resultado do processo de anti-aliasing. Onde colocamos essa cor cinza claro depende do senso e da sensibilidade do desenhista. Devemos repetir os ajustes até que fique suave e perfeito no tamanho original, não há outro jeito além de praticar e aprender a fazer isso.​

Agora, vamos continuar com o borrão em direção ao preto. Selecionamos a cor que foi usada anteriormente para a borda e pulamos uma cor para selecionar a próxima. Usando essa cor, vamos criar uma borda do lado de fora.

Coloque pixels da mesma maneira que antes, em uma cor que esteja no meio do cinza e do cinza, para que o encontro entre as cores se misturem.

Repetindo este procedimento, você chegará a este estado. Depois de completar tudo, faça ajustes enquanto olha para o tamanho original. Não há uma regra que diga "coloque sempre esta cor nesta posição", então é importante confiar em seu próprio senso e fazer o processo.​

Esta é a imagem original, mas como você acha que ela se compara com a imagem anterior? A diferença de tamanho é mínima e você pode notar que as bordas foram borradas, certo?​

EFEITO ANTI-ALIASING: MISTURANDO AS LINHAS

​

Use o efeito anti-aliasing para misturar as linhas.

O efeito anti-aliasing é particularmente útil para linhas como essas. As imagens têm linhas principais que têm uma diferença de cor em relação ao fundo, o que faz com que a linha serrilhada pareça áspera. Mas o que gostaria que você observasse é que, na imagem acima, nem todas as linhas parecem ásperas.​

A área cercada pelo retângulo vermelho não apresenta a aspereza dos pixels no tamanho original. Quando os pixels são verticais ou paralelos, não é necessário usar o anti-aliasing. O mesmo ocorre quando as linhas diagonais são uniformes. O que é necessário é aplicar o anti-aliasing em outras linhas.​

Primeiro, vamos focar nesta linha diagonal. Essa linha também é relativamente reta e limpa e não tem uma sensação irregular, mas parece ligeiramente mais fina do que os pixels verticais. Isso se deve ao degrau causado pelos pixels ficarem na diagonal. O degrau cria uma linha que inclui branco e a faz parecer mais fina. Esse fenômeno pode ser considerado semelhante a um padrão de azulejos. Para preencher esse degrau, é colocada uma cor intermediária. Se você pintá-la da mesma maneira que o borrão da última vez, a linha ficará borrada e muito grossa. Ao corrigir a linha, apenas o processo de misturar as cores é aplicado, como feito durante o borrão.​

Devido ao ângulo da linha, há variação nos pixels, o que torna a correção mais difícil. Além disso, se o antisserrilhamento para complementação for aplicado em excesso, a linha ficará desfocada e engrossará. Para ajustar a espessura da linha, é possível utilizar a propriedade de que cores mais claras parecem mais finas e mudar parcialmente a cor da linha principal. Por outro lado, se o preto for mantido completamente, a linha tende a engrossar. Além disso, há um ciclo vicioso em que a espessura da linha muda de acordo com o ângulo. Trabalhe com a intenção de mudar a cor da linha principal. Verifique a espessura e se há distorção da linha enquanto trabalha, sempre olhando para o tamanho original.​

Como dica, em vez de trabalhar em uma parte de forma intensiva, é melhor usar uma cor escura para uniformizar todo o trabalho e em seguida, mudar para a próxima cor, reduzindo as chances de erro. Além disso, escolha um local para colocar o pixel inicial onde as diferenças de tamanho são visíveis no tamanho original e escolha uma posição que faça a diferença parecer menos perceptível.

Já que a parte sensorial é importante, pratique o antisserrilhamento, suavizando as linhas serrilhadas que você desenhar de forma aleatória. Mesmo em curvas, existem muitas linhas retas conectadas em vários ângulos, portanto, se você dominar as linhas retas, também será capaz de dominar as curvas.​

EFEITO DO ANTISSERRILHAMENTO: SUAVIZAÇÃO DAS BORDAS

​

Assim como suavizamos as principais linhas, devemos suavizar as bordas entre as cores para que se misturam.

Além das linhas, há casos em que surgem bordas entre as cores, como padrões ou sombras, por exemplo. Quanto maior a diferença entre as cores, mais claramente essas bordas se tornam visíveis.​

Crie uma cor misturando as duas cores, a cor de fundo e a cor verde. Use essa cor para pintar as partes com uma diferença acentuada de altura. Isso deve reduzir um pouco o efeito serrilhado.​

Crie uma cor que esteja entre a cor que você criou anteriormente e a cor de fundo, desenhe para misturar as bordas. Apenas adicionando essas duas cores, você pode reduzir significativamente os serrilhados​

Aqui, a coisa importante a se notar é não usar muitas cores. Se você usar muitas cores para este anti-aliasing, em vez de misturar as bordas, você acabará borrando o verde. Para misturar as bordas entre cores, é importante estar consciente de não usar muitas cores, o que diminuirá as chances de erro.
​

O 1º ANO ACABOU!

​

O anti-aliasing é uma técnica difícil de se acostumar e no início pode ser fácil exagerar ou não conseguir remover completamente os serrilhados. Não é algo que possa ser dominado imediatamente, então, sem pressa, desenhe vários tipos de imagens e você irá naturalmente se acostumar. Se você sempre mantiver em mente o desejo de "fazer as linhas ficarem bonitas", acredito que poderá melhorar rapidamente.​

Fim do Curso

---

▲ Volte ao Índice ● Ir para 2º Ano ＞＞

​

Ano: 2000 / Site: Digital Famitsu Homepage (http://www.ascii.co.jp/digifami/index.html)
Arquivado por: Internet Archive / Traduzido por: ChatGPT / Escrito pela pseudo autora: Hikari Koshimoto（越本　ヒカリ）
Publicado por:

 

[Core32]

Boa postagem! É um ótimo curso de pixel art!
Gostaria de abordar alguns pontos relacionados ao tópico:

1. Tradução dos termos técnicos: É interessante observar que, em alguns casos, traduzir diretamente certos termos técnicos pode não ser realmente necessário. Por exemplo, a palavra "Tile" é comumente utilizada na área de pixel art para se referir a um azulejo ou bloco de construção repetitivo. Manter o termo original pode facilitar a compreensão e a comunicação.
   
   
2. Influência do RPG Maker: Eu tive muita influência no RPG Maker, foi como uma fonte de inspiração para ingressar no mundo da pixel art. Muitas vezes, a falta de recursos disponíveis me levou a soluções criativas, como criar sprites do zero. Essa experiência improvisada despertou um interesse pela pixel art e abriu portas para explorar ainda mais esse estilo visual.
   
   
3. A singularidade da pixel art: A autora estava certa ao afirmar que, à medida que a potência das máquinas aumenta, a resolução irá aumentar. No entanto, ela não poderia estar mais enganada ao afirmar que criar todos os gráficos de um jogo em pixel art não seria mais necessário no futuro. A pixel art se tornou um estilo visual distinto e cativante, com uma estética humanizada que as inteligências artificiais têm até dificuldade em reproduzir. É um estilo que transcende as limitações técnicas e tem um apelo único.
   
   
4. Os tiles e estilização da arte: É importante reconhecer que o tamanho dos tiles está diretamente relacionado à estilização da arte. Tiles menores não permitem muitos detalhes, o que incentiva o uso de estilos mais estilizados. A estilização se torna uma escolha criativa bem-vinda e uma boa forma de contornar as restrições de tamanho.
   
   
5. Diversão nas limitações de cores: Brincar com as limitações de cores, buscando simular as restrições da época, pode ser um exercício divertido para os artistas. Explorar diferentes paletas de cores e encontrar soluções criativas dentro dessas restrições pode resultar em trabalhos interessantes.
   
   
6. Experiência com software: Compartilho da experiência de começar com software simples, como o Paint, sem dar muita atenção aos recursos disponíveis, como lupa. Criar pixel art com o rosto colado no monitor pode ser desconfortável e até desencorajar os iniciantes. É bom lembrar que existem ferramentas mais avançadas disponíveis, que facilitam o processo criativo e tornam a experiência mais agradável.

Finalmente, gostaria de destacar o bom trabalho realizado por @Victor Sena em trazer esse tutorial para o fórum. Agradeço por compartilhar esse conhecimento.

 

[Victor Sena]

Opa, grande @Core32 !

Referente ao item 1, eu de fato tive um problema com isso ao traduzir e transcrever, já que qualquer tradutor não te entrega o resultado da forma que você deseja e então deve-se adaptar ou alterar. Mudei alguns trechos, onde: reescrevi algumas frases sem sentido; troquei ou adicionei termos entre "()" ou "/"; outros eu pesquisei encontrando comum o uso do termo dithering ou patterns ou ambos juntos; referente ao Tile, tem um dessas aulas - (não estou lembrando se é neste ou no curso do Loose Leaf) - onde um trecho ele diz que era comum falar em azulejos por conta dos banheiros e pisos das casas já que havia uma repetição. Mas alguns acabam passando batido, vou dar um lido depois e vou alterar quando for postar o 3º Ano.
Um exemplo de termos/traduções ou uso é algo bem curioso (pelo menos eu acho), em muitos site/websites japoneses onde eu frequentava era comum encontrar o termo "dot art" ou apenas "dot", em vez do uso "pixel" de unidade, já para artes digitais, mesmo sendo feitas por "dots", elas eram referidas como "illustration", então sim, encontrei muito "Arte de Pontos" ou "Arte em Pontos", ou "mover 2 ponto para cima" ou "para esquerda até centralizar a textura da água de forma que se tenha um loop nos 4 cantos".

2. Idem e não me arrependo.

3. Bom, ai vai da adaptação/tradução. Eu poderia ter removido, mas prefere manter como tentei buscar deixar o formato que as aulas foram publicadas, não ficou exatamente igual, já que aqui no fórum as imagens se comportam com menos prioridade em relação ao texto, não podendo manter o tamanho desejado delas em 1 célula da tabela, mas isso não é problema. Sobre ela ou ele (pseudo artista) estar por fora talvez seja devido a data em que foi publicado.

4. Sem falar que torna o trabalho mais rápido e produtivo, estive fazendo uns charsets para o RM2k3, infelizmente não da para passar muitos detalhes já que o espaço é pequeno e pode acabar virando uma salada de cores e tornando o resultado final incompreensível. Mas produzi mais rápido do que fosse fazer um charset maior para XP ou MV.

5. Isso me faz lembrar de uns eventos bacanas de PA, não sei foi aqui ou na comunidade Pixel Joint onde os trabalhos deveriam ser entregues com limites de 4 a 6 cores. Poderíamos ter um desde não? @Staff

6. Sobre esse quesito eu concordo em partes, acho o Paint bem limitado, também foi meu 1º programa (versão winXP) que utilizei para fazer minas artes; mudei para o GIMP, não gostei pela inúmeras de funcionalidades que me deixavam perdido; então utilizei por muito tempo o Paint.net, abusava do zoom e camadas, mas ineficiente no quesito GIF, sei que ele tem uns Adds-on para melhora-lo - (e eu acabava fazendo os sprites meio as cegas utilizando por meio das camadas e tinha um gerador online de gif onde eu jogava as camadas e ele me gerava o sprite animado para saber se eu precisava mexer mais um pouco ou não, meu deus faz anos isso ) - , mas nem sempre são funcionais, só depois fui usar o Graphicsgale e agora só recentemente quando voltei eu comecei a usar o Aseprite e gostei bastante. Resumindo, se tem muitas funções não vale a pena, se tem poucas eu também acho que não, eu acho que já deve começar a usar os programas mais equilibrados/atualizados com o foco em Pixel Arte mesmo, pois me acostumei tanto com o Paint.net que ainda o utilizo para manusear imagens maiores, organizar sprites, criar paletas com o circulo cromático, aumentar ou diminuir os pixels da imagens e deixo para usar o Ase nos ajustes, mas pretendo mudar isso e usar apenas um software já que a cada atualização do Paint.net ele vem se tornando um programa cheio de funções que não preciso nas Artes e lento.

Acho que alonguei de mais. xD
Fico agradecido, espero que curta as demais aulas. Se fosse nos tempos de "ouro" eu muito mais feliz colocando até meu nome nessa tradução kkkk. Mas elaborar e escrever de forma que fique bem explicado sem falar em dar bons exemplos com imagens próprias não é fácil, já fiz uns 2 tutoriais sobre pixel arte que não me orgulho muito kkk, talvez refaça. Então acho que o crédito vai mais para quem produziu todos esses cursos/aulas de pixel arte. Ah sim, preferi compartilhar mesmo datado pelo ano ou pela versão do RPG Maker, do que deixar esta aula ficar perdida no WebArchive, depois de muitas quedas de sites/blogs ou sistemas de gerenciamento de sites, ai eu senti o que é perder conteúdo. E não me importo de publicarem para seus fóruns/blogs/páginas próprias, até porque, quanto mais lugares estiver, menor a chance de ficar perdido.

 

[Core32]

Referente ao item 1, eu de fato tive um problema com isso ao traduzir e transcrever, já que qualquer tradutor não te entrega o resultado da forma que você deseja e então deve-se adaptar ou alterar. Mudei alguns trechos, onde: reescrevi algumas frases sem sentido; troquei ou adicionei termos entre "()" ou "/"; outros eu pesquisei encontrando comum o uso do termo dithering ou patterns ou ambos juntos; referente ao Tile, tem um dessas aulas - (não estou lembrando se é neste ou no curso do Loose Leaf) - onde um trecho ele diz que era comum falar em azulejos por conta dos banheiros e pisos das casas já que havia uma repetição. Mas alguns acabam passando batido, vou dar um lido depois e vou alterar quando for postar o 3º Ano.
Um exemplo de termos/traduções ou uso é algo bem curioso (pelo menos eu acho), em muitos site/websites japoneses onde eu frequentava era comum encontrar o termo "dot art" ou apenas "dot", em vez do uso "pixel" de unidade, já para artes digitais, mesmo sendo feitas por "dots", elas eram referidas como "illustration", então sim, encontrei muito "Arte de Pontos" ou "Arte em Pontos", ou "mover 2 ponto para cima" ou "para esquerda até centralizar a textura da água de forma que se tenha um loop nos 4 cantos".

Entendo perfeitamente o que você passou com a tradução. Às vezes é difícil encontrar a palavra certa em português para expressar o que o autor original quis dizer. Eu acho interessante como algumas culturas absorvem termos de outras línguas e os incorporam no seu vocabulário. Por exemplo, eu vejo muitos jovens falando “job” em vez de “trabalho”, ou “crush” em vez de “paquera”, ou “spoiler” em vez de “revelação”. Acho que não é muito diferente do que acontece nas comunidades de pixel art, onde usamos “tiles” sem traduzir para “azulejos” ou algo assim. Eu mesmo já me acostumei com esse termo e acho que fica mais fácil de entender do que se usasse outro.

Eu também já me deparei com os termos “dot art” ou “dot” para se referir à pixel art quando estava procurando assets de pixel art no Clip Studio Paint e eles usavam esses termos.

3. Bom, ai vai da adaptação/tradução. Eu poderia ter removido, mas prefere manter como tentei buscar deixar o formato que as aulas foram publicadas, não ficou exatamente igual, já que aqui no fórum as imagens se comportam com menos prioridade em relação ao texto, não podendo manter o tamanho desejado delas em 1 célula da tabela, mas isso não é problema. Sobre ela ou ele (pseudo artista) estar por fora talvez seja devido a data em que foi publicado.

Sim, eu entendi que esse trecho era um pensamento da época em que foi escrito. Até achei interessante essa visão em relação a tecnologia e a pixel art naquele momento. Eu agradeço por você ter mantido esse trecho na tradução, pois ele mostra um pouco da história e da evolução da pixel art ao longo do tempo. Acho que isso enriquece o curso e nos faz refletir sobre como a pixel art se adapta às novas tecnologias.

5. Isso me faz lembrar de uns eventos bacanas de PA, não sei foi aqui ou na comunidade Pixel Joint onde os trabalhos deveriam ser entregues com limites de 4 a 6 cores. Poderíamos ter um desde não? @Staff

Acho isso bem legal, apoio a ideia! Seria um desafio interessante e divertido! Será que a staff topa?

6. Sobre esse quesito eu concordo em partes, acho o Paint bem limitado, também foi meu 1º programa (versão winXP) que utilizei para fazer minas artes; mudei para o GIMP, não gostei pela inúmeras de funcionalidades que me deixavam perdido; então utilizei por muito tempo o Paint.net, abusava do zoom e camadas, mas ineficiente no quesito GIF, sei que ele tem uns Adds-on para melhora-lo - (e eu acabava fazendo os sprites meio as cegas utilizando por meio das camadas e tinha um gerador online de gif onde eu jogava as camadas e ele me gerava o sprite animado para saber se eu precisava mexer mais um pouco ou não, meu deus faz anos isso ) - , mas nem sempre são funcionais, só depois fui usar o Graphicsgale e agora só recentemente quando voltei eu comecei a usar o Aseprite e gostei bastante. Resumindo, se tem muitas funções não vale a pena, se tem poucas eu também acho que não, eu acho que já deve começar a usar os programas mais equilibrados/atualizados com o foco em Pixel Arte mesmo, pois me acostumei tanto com o Paint.net que ainda o utilizo para manusear imagens maiores, organizar sprites, criar paletas com o circulo cromático, aumentar ou diminuir os pixels da imagens e deixo para usar o Ase nos ajustes, mas pretendo mudar isso e usar apenas um software já que a cada atualização do Paint.net ele vem se tornando um programa cheio de funções que não preciso nas Artes e lento.

Atualmente uso principalmente o Aseprite para pixel art, pois ele é prático e intuitivo, especialmente para aplicar paletas de cores e criar animações. Mas também tenho explorado o Clip Studio Paint, que, mesmo não sendo voltado especificamente para pixel art, pode ser configurado para desenhar uma pixel art com qualidade semelhante ao Aseprite. Além disso, o Clip Studio Paint oferece uma variedade de assets interessantes para experimentar, embora seja um programa mais complexo para iniciantes.

Acho que alonguei de mais. xD
Fico agradecido, espero que curta as demais aulas. Se fosse nos tempos de "ouro" eu muito mais feliz colocando até meu nome nessa tradução kkkk. Mas elaborar e escrever de forma que fique bem explicado sem falar em dar bons exemplos com imagens próprias não é fácil, já fiz uns 2 tutoriais sobre pixel arte que não me orgulho muito kkk, talvez refaça. Então acho que o crédito vai mais para quem produziu todos esses cursos/aulas de pixel arte. Ah sim, preferi compartilhar mesmo datado pelo ano ou pela versão do RPG Maker, do que deixar esta aula ficar perdida no WebArchive, depois de muitas quedas de sites/blogs ou sistemas de gerenciamento de sites, ai eu senti o que é perder conteúdo. E não me importo de publicarem para seus fóruns/blogs/páginas próprias, até porque, quanto mais lugares estiver, menor a chance de ficar perdido.

Eu que agradeço pelo seu trabalho de trazer esse curso para o fórum. Eu sei que não é fácil traduzir e adaptar um conteúdo tão detalhado. Você está fazendo um ótimo serviço para a comunidade, principalmente para quem quer se aventurar na pixel art. Sim, eu vou continuar acompanhando as suas postagens e sempre que tiver um tempo disponível eu vou praticar algumas lições. Muito obrigado por tudo!