Pixels, Cores e Telas

Designer!

Bem-vindo de volta.

A edição de hoje foi feita para ajudá-lo a compreender melhor as principais diferenças entre gráficos compostos por pixels (imagens raster) e gráficos compostos por fórmulas matemáticas (imagens vetoriais).

Você já se perguntou por que a identidade visual de uma marca é normalmente criada no Adobe Illustrator em vez do Photoshop?

Este artigo responderá a todas as suas dúvidas.

Porque em um mundo onde vemos imagens técnicas por toda parte, investigar sua natureza é uma busca existencial para entender como o mundo opera atualmente.

Sejam estáticas (imagens) ou em movimento (vídeos), as imagens técnicas podem ser vistas em todos os cantos do mundo digital e são o motor principal do sucesso por trás das maiores redes sociais.

Elas representam a maneira como o mundo se comunica com você — e ao entender como produzi-las, você descobre que pode se comunicar de volta com o mundo.

Aqui vai uma pergunta: uma imagem pode mudar a sua vida?

Uma história pode mudar a sua vida.

A educação pode mudar a sua vida.

Uma pessoa que você nunca imaginou conhecer pode mudar a sua vida.

Uma nova oportunidade de trabalho pode mudar a sua vida.

Mas será que uma imagem simples e estática poderia causar um impacto tão profundo a ponto de fazer você enxergar o mundo de uma maneira diferente para sempre?

Bem, vamos ver!

Todos sabemos que um dos componentes mais caros dos dispositivos digitais é a tela e a tecnologia por trás dela.

Quanto mais nítida a imagem exibida, mais caro será o aparelho — especificamente porque telas de alto padrão conseguem processar uma gama maior de cores e densidade de pixels.

Agora sacrificarei para sempre uma relíquia, minha fotografia mais bem guardada, para explicar esse assunto a você da melhor forma:

Contemple uma anêmona-de-pontas-bolha!

Este é o arquivo bruto gerado pela minha câmera.

Para medir o número de pixels, simplesmente multiplicamos a largura pela altura: 6000 pixels * 4000 pixels = 24.000.000 pixels

Isso significa essencialmente que existem 24 milhões de pixels neste arquivo.

Como uma orquestra, todos esses pixels trabalham juntos para representar a informação que capturei inicialmente através da lente.

Por ser uma imagem raster, podemos sempre reduzir sua resolução (tamanho) e aumentar sua densidade de pixels ao fazê-lo (também conhecida como DPI - Pontos por Polegada ou PPI - Pixels por Polegada), tornando-a ainda mais nítida em telas menores ao reduzir a escala.

Mas suponha que tivéssemos um telão gigantesco do tamanho de um edifício e precisássemos projetar essa imagem lá. Ela não ficaria tão boa: por ser uma imagem raster, não podemos adicionar mais pixels ou aumentar a resolução sem perder qualidade ou ter que sintetizar pixels artificiais através de interpolação.

Isso significa que imagens raster, como arquivos JPEG ou PNG, têm uma quantidade finita de qualidade atrelada à tela em que estão sendo visualizadas.

Esticá-las torna os pixels maiores, o que degrada a qualidade da imagem.

Agora vamos entender como tantos pixels conseguem representar com tanta perfeição a foto desta anêmona. A resposta reside em apenas uma coisa: cores!

Vamos diminuir a quantidade de cores para visualizar como a mesma imagem se comportaria em uma representação menos precisa.

1 / 9

Ao expandir a gama de cores, fazemos com que diferentes tonalidades preencham a imagem de forma harmoniosa, transformando-a em uma representação de alta fidelidade da anêmona.

Assim, a variação de cores e tons representa a espinha dorsal dos dados da imagem; sem esse espectro, não seria possível decodificá-la nem compreender a informação visual.

Se limitássemos a imagem a uma única cor, como o roxo, ainda teríamos diferentes tons de roxo para demarcar sombra e luz, tornando-a monocromática, mas ainda legível.

Agora que compreendemos o papel das cores, podemos analisar melhor a resolução por trás da imagem.

Se dermos um zoom curioso na imagem original, começamos a enxergar a malha de pixels por trás dela e percebemos imediatamente que um único pixel, isolado, não representa nada — mas quando combinado a outros 23.999.999 pixels, forma uma imagem belíssima!

Veja só isto.

1 / 4

Esplêndido!

O simples fato de termos 24 milhões de pixels trabalhando juntos para compor a anêmona diz muito sobre o ofício do design gráfico.

Agora, o próximo passo é apenas um.

Precisamos contar cada um dos pixels e confirmar a existência de todos esses 24 milhões de carinhas.

Brincadeira, claro que não.

Não somos cientistas, somos criativos.

Não existe certo ou errado no trabalho criativo: existe o que é estético e o que não é estético.

Da mesma forma que existe aquilo que agrada a muitas pessoas e aquilo que ressoa com poucas.

Escute bem, padawan.

Cada pixel importa se o seu objetivo é a excelência nesta área.

Existem muitos princípios universais que você deve levar em conta ao criar um anúncio, imagem ou layout — como acessibilidade, alinhamento, camadas, consistência, constância, cores, hierarquia e legibilidade... mas estes serão abordados em edições futuras.

Agora você já compreende os aspectos técnicos fundamentais por trás de uma imagem, o que o ajudará a manipular seus arquivos e ativos para criar gráficos memoráveis.

Mas lembre-se: suas imagens devem sempre ter alta resolução. Em um mundo de imagens técnicas, produzir algo com baixa resolução de pixels é como servir sorvete sem açúcar.

Agora vamos nos desviar ligeiramente do assunto para filosofar sobre algo que pode instigá-lo.

Porque, por meio dos pixels, tentaremos fazer o impossível.

Vamos investigar a origem da vida.

Na variação de zoom de 12800% da nossa imagem, não conseguimos interpretar praticamente nada, certo?

Mas o que acontece se um desses pixels resolver se rebelar e se desprender da composição em busca do seu próprio significado?

E num piscar de olhos, ele se foi!

Chamem os bombeiros da anêmona, temos uma emergência!

Será mesmo?

Alguém se pergunta o que aconteceu com a imagem original agora que lhe falta um pixel.

A resposta é: nada que possa ser percebido a olho nu.

Mas se dermos um zoom, começamos a sentir sua falta.

Consegue enxergá-lo? Eu sei que sim, você tem olhos afiados de designer.

Alguém pergunta lá do fundo do oceano: “O que é um ponto branco no meio do mar?”

Alguém grita de um submarino: “A menor ilha do mundo para peixes introvertidos!”

Errado! É apenas a ausência de um pixel rebelde.

Volte aqui, carinha, nós precisamos de você.

Talvez ele tenha partido em uma missão muito importante.

Devemos deixá-lo seguir seu caminho ou trazê-lo de volta?

Aqui está o nosso dissidente.

Eis a questão:

Por que ele fez isso? Talvez não gostasse de representar uma anêmona.

Por que alguém não gostaria de representar uma anêmona?

Talvez o pixel sequer soubesse que representava uma anêmona; ele apenas nasceu ali.

De qualquer forma, não estamos aqui para questionar suas intenções.

Estamos aqui para arredondar seus cantos.

Muita atenção ao seguinte, porque é fundamental para a sua jornada como designer e criativo:

A principal diferença entre algo que é redondo e algo que é quadrado é que absolutamente nada que vem da natureza possui linhas perfeitamente retas ou lados rigorosamente iguais.

Isso só significa uma coisa.

Coisas redondas são orgânicas.

Pense numa anêmona.

Coisas quadradas são artificiais e projetadas.

Pense numa porca mecânica.

Formas como quadrados, bem como outras geometrias regulares, são abstrações humanas usadas para descrever e categorizar o mundo físico.

Se analisarmos a estrutura de uma colmeia de abelhas, identificamos geometria, mas ela nunca será perfeitamente simétrica ou milimétrica, porque é imperfeita — como tudo o que é orgânico.

O que tudo isso significa?

Bem: que pixels são artefatos sintéticos e de engenharia criados para representar imagens em telas.

Significa também que nosso pixel rebelde tornou-se para sempre orgânico.

Consideremos por um instante que ele agora é uma forma consciente de vida, já que tomou a iniciativa de se desprender de sua origem.

Que sentido podemos extrair de todo esse devaneio?

Sentido algum.

Ou todos os sentidos do mundo se você aprecia semiótica.

Ficaremos com a segunda opção, mas para isso precisarei invocar a Vesica Piscis.

“Vesica... Piscis?”, alguém grita lá da praia.

“Vesica Piscis” deriva do latim e traduz-se literalmente como “bexiga de peixe”, devido ao seu formato ogival característico.

A Vesica Piscis é uma figura geométrica formada pela interseção de dois círculos de mesmo raio, na qual o centro de cada círculo repousa exatamente sobre a circunferência do outro.

Agora você deve estar se perguntando... como fomos do estudo dos pixels em imagens raster para uma figura que lembra o logotipo da Mastercard?

Paciência, padawan. Ainda temos muito a conversar, e sequer entramos nos gráficos vetoriais.

Este é um passo indispensável para o seu desenvolvimento filosófico como criativo: diz respeito ao ato de criar mais do que qualquer outra coisa.

Vamos trazer nosso pixel de volta, mas retirar seu preenchimento roxo e manter apenas o contorno.

O círculo é amplamente considerado um símbolo de totalidade, unidade e eternidade. É uma forma geométrica sem começo nem fim, representando o próprio conceito de existência como um ciclo contínuo.

Mas o pixel era um quadrado, lembra? Ele precisava se encaixar na grade.

O simples ato de se desprender da imagem da anêmona sintetiza o significado por trás da Vesica Piscis.

Arredondar seus cantos foi o nosso toque.

Afinal de contas, somos designers e podemos fazer o que quisermos com os nossos pixels.

Eles são a tinta a óleo na nossa tela.

Ainda assim, ele se desprendeu por conta própria e se tornou uno.

Um universo inteiro em si mesmo, representando um único pixel autônomo, e não mais uma composição com milhões de pontos.

Isso é crucial, pois o ponto de partida da Vesica Piscis é um único círculo solitário.

“Primeiro éramos um, depois éramos dois; e ao abraçarmos o mundo, nos tornamos muitos, unidos em nossa diversidade”, alguém disse certa vez.

E o que acontece agora com o pixel dissidente?

Ele anseia por representar uma nova imagem que melhor expresse seu propósito e a filosofia de sua vida de pixel.

Então ele se move novamente, mas desta vez em direção ao seu próprio limite para compreender o que o cerca.

Como quem se pergunta: “Certo, e agora? Em que devo me transformar?”

Como quem se estica e explora seu próprio potencial para entender do que é capaz.

Ao se expandir e compreender um dos seus lados, vértices ou extremos, ele ampliou para sempre o seu alcance e se duplicou inconscientemente.

É como se descobrisse que podia mudar a própria cor — e agora nunca mais poderá voltar a ser um pixel monótono.

A área da Vesica Piscis é a zona do “Eureka!”. Ela é associada à máxima “Faça-se a luz”, pois é o próprio portal da evolução criativa.

É o encontro da versão antiga do pixel com a versão recém-descoberta.

Como resultado imediato, a linha tracejada se converte em linha contínua, e o que antes era um único pixel agora são “dois”: o antigo à esquerda, o novo à direita, e a consolidação de ambos no centro!

Está acompanhando? Estamos quase lá.

O pixel encontrou uma nova versão de si mesmo por pura exploração e coragem.

Durante muitos anos de sua existência, ele pensou que fosse apenas um pixel roxo compondo uma fotografia.

Então percebeu que podia ser muito mais e cortou o cordão, sem se importar com o que os outros pixels pensariam.

Em seguida, descobriu dentro de si a capacidade inédita de alterar sua própria cor.

Naturalmente, o pixel está em êxtase por ter descoberto um novo superpoder e deseja aprender ainda mais sobre si mesmo.

O que ele faz? Move-se em novas direções dentro do seu próprio corpo!

Veja só isto.

Agora ele descobriu que contém múltiplas facetas, e é apenas uma questão de tempo até sintetizá-las em uma nova versão integrada de si mesmo.

Agora ele é um pixel com muito mais recursos! Percebeu que pode mudar sua cor, sua forma, seu contorno, sua escala e até rotacionar.

Ele se tornou um gráfico vetorial — que, em vez de pixels em imagens raster, é composto por fórmulas matemáticas que desenham uma imagem.

Embora essa analogia tenha sido construída no contexto do pixel, ela representa perfeitamente muitas outras dimensões da vida.

E você deveria guardar isso em algum canto da sua mente.

Mas por ora, vamos mergulhar nos gráficos vetoriais!

Confira esta imagem a seguir:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 477 503.4" style="enable-background:new 0 0 477 503.4;" xml:space="preserve">
<path d="M445.9,265.6c-4.2-18.6-20.8-31.9-38.3-37.5c-27.2-8.7-50.3-1.5-68.7,13.6c36.7-67.3,71.6-133.3,39.7-214.3
	c-5.8-14.8-29.9-8.6-24.1,6.4c41,104.2-39.7,186.1-77.6,277.2c-9.7,1.2-18.6,5-26.1,10.6h-4.2c3.3-51.4,56.5-80.9,73.9-127.9
	c5.6-15.1-18.4-21.8-23.9-6.9c-19,51.4-71.8,76.7-74.8,134.8h-26.1c4.9-45.4,39.3-81.5,67.1-116.3c25.6-32,48-65.4,57.5-105.7
	c3.7-15.6-20.5-21.5-24.2-5.9c-12.9,54.8-57.5,96.3-90,142.2c9.8-19.9,20.6-39.6,29.1-60.2c18.5-44.9,11.4-87.3-12.4-128.4
	c-8.1-13.9-28.3,0.7-20.3,14.4c40.6,69.8-4.5,129.9-30.7,195.1c8.3-46.4,28-92.8,5.8-136.4c-7.3-14.3-28-0.5-20.8,13.7
	c15.5,30.4-0.5,70.2-7.4,101.1c-0.7,3.3-1.4,6.5-2,9.8c-9-24.9-27-44.6-57.9-49.5c-18.2-2.9-39,1.6-51.1,16.3
	c-14.2,17.2-8.2,39.9,3.1,56.7c8.9,13.3,29.8-0.3,20.8-13.7c-15.6-23.2-0.6-39.5,25.7-34.4c45.1,8.8,46,65.1,39.2,100.5
	c-13.7,10-22.7,26.1-22.7,44.4v64.5c0,30.3,24.6,54.8,54.8,54.8c8.3,0,16-2,23.1-5.3c4.4,3.3,9.8,5.3,15.6,5.3h47
	c5.9,0,11.3-2,15.6-5.3c7,3.3,14.8,5.3,23.1,5.3c30.3,0,54.8-24.6,54.8-54.8v-64.5c0-17.4-8.2-33-20.9-43
	c10-34.7,36.1-83.6,79.9-71.2c25.8,7.3,31.8,28.6,7.5,42.3c-14,7.9-1.5,29.4,12.4,21.6C435.3,304.9,450.8,287.3,445.9,265.6
	L445.9,265.6z"/>
</svg>

Você deve estar pensando: “Imagem? Tudo o que vejo é um bloco estranho de código; acho que sua imagem quebrou, está tentando me enganar?”

Pois bem: é exatamente assim que imagens vetoriais são construídas. Embora possuam cores, formas e camadas, elas não são compostas por pixels, mas por código puro.

Aqui está o mesmo código renderizado em formato visual:

Isso não apenas significa que nosso pixel dissidente se transformou em uma anêmona ao moldar sua forma através de curvas, mas também que agora ele pode ter qualquer dimensão ou resolução que desejar.

Esta é a diferença mais fundamental entre gráficos vetoriais e raster:

Gráficos vetoriais podem ser ampliados infinitamente, sem qualquer perda de nitidez ou limite de resolução.

É precisamente por isso que o logotipo de uma marca é sempre construído como vetor: ele pode assumir variadas formas e cores, mas nunca é composto originariamente por pixels.

Exatamente porque um logotipo precisa ser aplicado desde um cartão de visita minúsculo até um outdoor gigante, exigindo flexibilidade e nitidez absolutas.

Mas tudo isso significa que nunca poderíamos converter a foto original da anêmona em um gráfico vetorial?

Bem, nós podemos.

A foto da anêmona pode ser vetorizada tanto manualmente por um ilustrador quanto através de vetorização automática por software. Vejamos como ficaria com a segunda opção:

1 / 6

Você pode notar que a sensação visual é diferente, pois ela perde a profundidade de detalhes no processo de abandonar a sutileza dos pixels.

Embora não pareça tão realista, trata-se de um conjunto de dados muito mais complexo, pois agora tudo é expresso por matemática pura. (O código nem sequer caberia nesta newsletter)

Por exemplo, veja a versão com 30 cores: ela é formada por nada menos que 3.070 formas distintas.

Se analisarmos apenas as linhas de contorno (wireframe), é assim que ela se parece:

E se dermos um zoom bem de perto, percebemos que não existem mais pixels!

O que antes era uma fotografia de anêmona agora é uma ilustração vetorial composta por formas sólidas e milhares de curvas matematicamente calculadas!

E assim concluímos esta lição.

Seja você um ser humano, um pixel dissidente ou uma anêmona, agora você sabe um pouco mais sobre o que compõe as imagens nas telas e por que gráficos raster são fundamentalmente distintos de gráficos vetoriais!

Fique ligado para a próxima edição de Design.

Câmbio e desligo!