Arte retrô em quadrinhos: usando os pontos de Ben Day no design da web

Como web designers, estamos sempre em busca de ideias novas e criativas para adicionar aos nossos sites. Felizmente, a inspiração não é difícil de encontrar. Por exemplo, a arte retrô de quadrinhos sempre retorna. Às vezes é como tipografia, outras vezes como filtros de fotos. Ultimamente, texturas e ilustrações com pontos de Ben Day estão surgindo em muitos lugares. Quer experimentá-los você mesmo?

Neste artigo, explicaremos a origem dos pontos Ben Day e como fazê-los você mesmo. Além disso, temos alguns exemplos de como usar essa técnica visual em web design.

Ben Day Dots e Half-Tone Dots

Os termos “pontos de Ben Day” e “arte de quadrinhos retrô” tendem a ser usados ​​alternadamente. Na verdade, os pontos de Ben Day vieram primeiro. Benjamin Henry Day Jr. os criou em 1879, a fim de cortar custos de impressão em cores. Eles são uma técnica que coloca pontos igualmente distantes em uma grade. Pontos vermelhos impressos sobre o branco tornam-se verdes, pontos azuis e amarelos.

Os pontos de Ben Day foram inspirados em pontos de meio-tom usados ​​para impressão litográfica e fotográfica em preto e branco. Ambos os estilos de pontos são organizados em uma grade quadrada, mas os pontos de meio-tom são de tamanhos diferentes, enquanto os pontos de Ben Day são todos iguais.

Ben Day Dots, quadrinhos e Roy Lichtenstein

Na década de 1930, os quadrinhos entraram em cena em grande estilo e os pontos de Ben Day eram a técnica de impressão ideal. Os pontos de Ben Day não eram exatamente uma bela arte até que Roy Lichtenstein se inspirou em sua singularidade genérica na década de 1960. Foi o trabalho de Roy Lichtenstein com a arte de quadrinhos que trouxe os pontos de Ben Day para o centro das atenções. O que Lichtenstein fez foi copiar pequenas seções de páginas de quadrinhos populares e transformá-las em obras-primas de grande escala.

Embora Roy Lichtenstein usasse pontos que se assemelhavam aos pontos de Ben Day, eles eram um pouco diferentes. Os historiadores da arte dirão que eles são mais adequadamente chamados de “pontos de Lichtenstein”. A principal diferença é que os pontos de Ben Day eram minúsculos e em uma grade quadrada, enquanto os pontos de Lichtenstein estavam em uma grade diagonal deslocada e consideravelmente maiores.

crédito da imagem Radu Bercan / shutterstock.com

A ascensão da arte retrô em quadrinhos

A arte de Roy Lichtenstein se tornou sinônimo de arte retrô em quadrinhos. Muitos artistas copiaram a técnica de Lichtenstein. Muitos designers usaram pontos de quadrinhos em suas criações para esquemas de branding e materiais de marketing. Agora você também pode adicionar pontos Ben Day ou pontos Lichtenstein aos seus sites.

Role para aprender a fazer suas próprias criações de pontos Ben Day. Os designs finais que você vai conseguir cobrirão, na verdade, uma variedade de técnicas; pontos de meio-tom, pontos Ben Day e pontos Lichtenstein. Ao todo, eles são todos design de estilo de quadrinhos retrô.

Vamos lá.

Como criar arte retrô em quadrinhos com o Photoshop

Os pontos de meio-tom são tão comuns que o Photoshop possui um filtro para eles e funciona com qualquer imagem. O que esse filtro faz é transformar as cores da imagem em pontos. A distribuição do ângulo dos pontos é controlada pelos canais de cores. Quando você aplica o filtro, sua imagem agora é composta de pontos ciano, magenta, amarelo e preto. Se você aplicar o filtro de meio-tom a uma cor pura como vermelho (# ff0000), verde (# 00ff00) ou azul (# 0000ff), o filtro não funcionará porque não terá cores para se separar.

Para criar pontos Ben Day e pontos Lichtenstein adequados, você precisa do Adobe Illustrator. Clique aqui para avançar.

Como fazer uma foto parecer arte de quadrinhos retrô em pontos de meio-tom com o Photoshop

1. Escolha a imagem que deseja transformar em pontos no estilo de quadrinhos.

Eu escolhi um cara engraçado do site de fotos de ações gratuitas, Gratisography. Clique aqui se quiser usar a mesma imagem para acompanhar. Abra a imagem no photoshop e centralize-a na tela.

2. Duplique a camada duas vezes e oculte a primeira.

Para duplicar, enquanto a primeira camada é selecionada, clique com o botão direito e escolha 'duplicar camada' ou clique em Command + J no Mac e Ctrl + J no PC. Renomeie-os para não perder o controle de cada um. Ajuste a opção de mesclagem da camada superior para 'luz forte' e diminua a opacidade para cerca de 40%. As cores mudarão drasticamente, o que ajudará a obter a aparência granulada dos pontos de meio-tom.

3. Agrupe as duas camadas superiores e transforme-as em um objeto inteligente.

4. Aplique o filtro de ponto de meio-tom ao objeto inteligente.

No pop-up de configurações de meio-tom de cor, escolha o tamanho máximo do pixel em 13 e os canais em vários graus. Você pode brincar com eles para ver diferentes efeitos.

5. Duplique a camada inferior e mova-a para o topo.

Aplique o filtro 'Find Edges' a ele e ajuste os níveis para que você veja os contornos melhor. Para conseguir isso, mova o triângulo preto o mais longe possível para a direita e o branco para a esquerda.

6. Use os ajustes para transformar a camada em preto e branco.

Defina a opacidade da camada de ajuste para 30%. Por fim, defina as opções de camadas da camada 'localizar bordas' para 'sobrepor'.

O design final!

Como criar um fundo de arte em quadrinhos retrô com o Photoshop

1. Encontre um fundo de cor que tenha um bom design ou gradiente.

Abra a imagem no painel do Photoshop e centralize-a na tela.

2. Desbloqueie a camada de fundo, duplique-a e oculte a inferior.

Aplique o filtro de pontos de meio-tom à camada superior. Ajuste os parâmetros no pop-up do filtro de pontos de meio-tom para efeitos diferentes

3. O design final!

Como criar um fundo de arte em quadrinhos retrô com ilustrador

Como mencionei antes, os pontos de meio-tom têm tamanhos diferentes para recriar o contraste em uma imagem. O filtro Photoshop que usamos acima é perfeito para esse efeito. Mas se quiser criar pontos de tamanhos iguais, como pontos Ben-Day ou pontos Lichtenstein, você precisará usar o Adobe Illustrator e o criador de padrões integrado. Como mencionei acima, os pontos de Ben Day estão em uma grade quadrada e os pontos de Lichtenstein estão em uma grade diagonal deslocada. Ambos podem ser obtidos com o criador de padrões no Illustrator.

Como criar um padrão de pontos Ben-Day com o Illustrator

1. Crie um novo projeto no Illustrator.

O tamanho realmente não importa. Usamos 600 x 350 px.

2. Selecione a ferramenta Retângulo arredondado.

Clique uma vez na prancheta e defina o tamanho da sua forma. Faça 15 x 15 pixels com um raio de canto de 7,5 boi. Altere a cor do círculo para um preenchimento azul e sem traço.

3. Clique em 'objeto' na barra de menu superior e selecione 'padrão' e, em seguida, 'fazer'.

4. Ajuste as preferências para que os pontos fiquem em uma grade quadrada.

Estas são as preferências que você precisa escolher:

• Selecione o tipo de bloco para grade
• Verifique no tamanho do bloco para arte
• Defina o espaçamento H e espaçamento V para 15 px por 15 px
• Selecione cópias para 9 x 9

Ao ver o padrão como a imagem abaixo, clique em Concluído. Isso salvará automaticamente o padrão no painel Amostras.

Como criar um padrão de pontos Lichtenstein com o ilustrador

Este padrão segue os mesmos passos que o anterior e muda apenas quando é hora de ajustar as preferências no criador de padrões. Abra as preferências de padrões Ben-Day e pressione 'Salvar uma cópia'. Nomeie o novo padrão como 'Pontos de Lichtenstein'. Quando você clicar em OK, ele será salvo como uma cópia no painel de amostras. Feche o padrão de pontos Ben-Day. De volta ao painel Amostras, abra o padrão de pontos Lichtenstein. Você verá um pop-up com o nome do padrão ao passar o mouse sobre ele. Nas preferências, altere apenas o tipo de layout para 'Brick by Row' e clique em Done.

Como adicionar padrões de arte em quadrinhos retrô às formas

Agora que você criou seus próprios padrões de quadrinhos retrô, pode aplicá-los a qualquer forma que desejar, a qualquer momento. Primeiro, você precisa salvar as amostras de padrão para que possa adicioná-las a qualquer projeto futuro.

1. No painel Amostras, selecione os dois novos padrões que criamos.

Clique no ícone da biblioteca de amostras e escolha 'Salvar amostras ”. Nomeie as novas amostras como 'Retro Comic Book Pattern' e clique em OK.

2. Quando você criar um novo projeto e quiser usar esses padrões, vá para o painel Amostras.

Você não verá nossas novas amostras lá, então você precisa importá-las. Mais uma vez, clique no ícone da biblioteca de Amostras e role para baixo até 'definido pelo usuário' e então o 'Padrão Retro Comic Book'. Uma nova janela será aberta com as amostras e as cores regulares com os padrões de quadrinhos incluídos. Agora eles estão prontos para usar em qualquer formato que você desejar.

3. Crie uma nova forma e preencha-a com um dos padrões.

O tamanho dos pontos dependerá do tamanho da forma que você criar. O tamanho máximo da forma é controlado pelo tamanho da prancheta.

Quanto menor for a forma, maiores serão os pontos e vice-versa. Se você usar uma forma pequena e achar que os pontos são muito grandes, clique com o botão direito do mouse no padrão dentro da forma e selecione 'transformar' e depois 'dimensionar'. Para tornar os pontos superminúsculos, escolha os seguintes parâmetros.

• Uniforme: 10%
• Em Opções: marque os padrões de transformação

Experimente parâmetros diferentes para a opção 'uniforme' para obter diferentes tamanhos de pontos.

4. Para criar uma forma de estrela com um estilo de quadrinhos retrô, crie um novo projeto em 1000 px por 1000 px.

No painel de cores, clique em preto para o traço e no padrão Lichtenstein para o preenchimento. Selecione a forma de estrela e clique na tela para fazê-la aparecer.

Ideias para usar a arte de quadrinhos retrô em web design

A tendência da arte de quadrinhos parece estar em alta. É claro que nem todas as marcas se beneficiarão com esse estilo de criatividade. Para as marcas divertidas e amantes da cor, os gráficos inspirados em pontos Ben Day e Lichtenstein são perfeitos para respirar ar fresco. O melhor uso para um padrão de pontos de quadrinhos é como fundo, sobre outra cor ou sem. Da mesma forma, tente usar grandes balões de fala como separadores ou exclamações de estilo de quadrinhos com seu conteúdo. Você pode fazer o seu próprio com os tutoriais acima ou obter algumas imagens já projetadas do Freepik.

Os designs abaixo foram obtidos com designs de quadrinhos fornecidos pela Freepik. Como você pode ver, os designers tomaram algumas liberdades na maneira como projetaram os tamanhos dos pontos. No entanto, eles ainda incorporam perfeitamente o estilo Retro Comic Book em sua própria maneira.

Conclusão

Como você pode ver, as possibilidades do design de quadrinhos retrô são bastante variadas. De estilos clássicos a versões mais modernas, você pode fazer praticamente qualquer coisa. Não importa se você mesmo cria os padrões ou busca alguns gráficos online, você pode criar coisas incríveis com a arte Retro Comic Book e Divi!