No dia 23 de janeiro de 2018 completei 4 anos de blog. Pois é, o tempo voa.

Nos anos anteriores você me viu comemorar o aniversário apresentando estatísticas e informações sobre o ritmo de crescimento do blog, do canal no Youtube e do meu crescimento profissional – posts mais acessados, entrevistas, podcasts, enfim.

Você viu o lado bonito da história. Você não viu as pedras no meio do caminho, os questionamentos, os abacaxis. Pois bem, hoje é sobre isso que falarei com você.

Mas antes, como já é de costume, obrigado. Agradeço a você que vem acompanhando até aqui e espero que continue comigo nessa trajetória.

Hoje utilizarei este espaço para me expressar, dizer o que sinto desde que me dei conta que estava deixando de ser apenas um designer e me tornando um produtor de conteúdo com relevância na internet. Mas espera aí, eu deixei de ser apenas um designer? Ou melhor, eu sou apenas um designer e produtor de conteúdo?

Vamos por ordem cronológica.

2014

Em 2014 dei início a uma ideia antiga, a de ter um espaço para compartilhar tudo aquilo que eu havia aprendido. É claro que essa ideia, antes de 2014, passou por um longo período de maturação. Ela não foi implementada de uma hora para outra, mas lembro muito bem que em um determinado momento eu disse à minha esposa (namorada, na época): vou criar um blog, ganharei relevância e ficarei conhecido por ajudar as pessoas.

Porém, apesar de o blog ter crescido num ritmo muito rápido, não foi um ano fácil. Ao investir meu tempo no blog eu estava abrindo mão de outras coisas, de outros projetos. Eu estava focado em produzir, mas não tinha um planejamento. Eu não sabia onde isso ia dar. Ao mesmo tempo, problemas pessoais surgiram e levantaram a dúvida se eu deveria continuar ou não investindo no blog. Deveria eu voltar para o meu modelo antigo de trabalho? Enfim, permaneci focando no blog.

As reações estavam muito positivas, eu não podia desistir agora. Já estava dando palestras, sendo mencionado em outros blogs de design e recebendo algumas ofertas de parcerias.

No final do primeiro ano eu havia ganhado uma relevância muito acima do esperado – a verdade é que, naquele momento, eu ainda não esperava nada.

Aquilo me assustou um pouco.

2015

2015 foi meu ano intelectual. Comecei a explorar temas difíceis, complexos, que exigiam muito estudo e didática para sere transmitidos de maneira eficiente. Eu estava empolgado, doido para dar saída em tudo que eu achava que seria útil. O ritmo das publicações diminuiu, mas o nível técnico aumentou, e bastante.

Como consequência agora as pessoas reagiam ao conteúdo de forma mais vigorosa, mais espantosa e, de certa forma, sem que elas percebessem, em alguns momentos estavam sendo um pouco pessimistas em relação a si mesmas.

– Você é um gênio!

– Nunca serei igual você!

– Impossível chegar nesse nível!

Eu estava me tornando uma espécie de “celebridade” dentro do meu nicho. Será que eu queria isso?

Foi então que comecei a sentir o peso da responsabilidade que é estar nesta posição. Tudo que eu digo por aqui pode influenciar a vida de alguém. E essa influência pode ser para o bem ou para o mal.

Não é à toa que foi exatamente em 2015 que eu escrevi o artigo “Nunca vou chegar nesse nível”.

Este foi meu primeiro “desabafo”. Eu queria mostrar que a admiração por outra pessoa ou profissional não deve nos gerar frustrações, mas sim nos estimular a crescer.

Os problemas pessoais foram menores em 2015. Isso me ajudou a manter a mente tranquila para continuar produzindo, mas a coceira da responsabilidade estava aumentando.

2016

O ano dos podcasts, entrevistas e do sucesso arrebatador das análises gráficas.

Praticamente uma evolução linear de 2015. Conteúdos cada vez mais complexos e, consequentemente, cada vez menos conteúdo.

Nesse período alguns problemas pessoais estavam voltando à tona, o que começou a interferir na minha produtividade, mas não o suficiente para me parar.

Nesta fase eu recebia muitos depoimentos de pessoas dizendo como fui importante em suas vidas. Como um texto, um vídeo ou apenas uma frase teria sido o suficiente para uma mudança de rumo.

O peso da responsabilidade estava muito alto aqui. Tudo que eu fazia precisava ser “perfeito”. As pressões externas e internas da vida continuavam e minha exigência sobre mim mesmo estava aumentando.

Me sentia um cara de sorte, mas a ideia de “sucesso” nesse ponto me deixava dúvidas.

2017

O caos.

Qual meu papel aqui, afinal? Me peguei inseguro, incomodado com algo que eu não sabia explicar.

Foram anos vivenciando experiências de troca de conhecimento, de retornos positivos, mas também anos vivenciando os bastidores do que é ter um blog. Eu praticamente não recebia críticas negativas, mas estava me decepcionando cada vez mais com a internet – ou melhor, com as pessoas da internet.

Vi muitos comportamentos agressivos, pessoas agindo na simples intenção de fazer o mal, de causar a discórdia e ganhar no grito. Vi profissionais diminuindo outros de maneira agressiva e se unindo para atacar em grupo, em comportamento de manada. Vi pessoas inocentes venerando ídolos que elas sequer conhecem os valores. Enfim, eu agora tinha acesso a um universo que eu desconhecia antes de ter um blog. Isso foi me frustrando.

Mais frustrante ainda foi perceber que eu havia me tornado um desses ídolos. Eu não queria isso, queria ser apenas um cara publicando conteúdo na internet.

Mal sabia eu que isso era impossível.

Me senti como um impostor, um ator. Já que eu estou no meio disso tudo, o que me diferencia?

Será que eu mereço esse sucesso? Será que é justo eu estar nessa posição enquanto outras pessoas se sentem inferiores a mim – e a outras pessoas com relevância na internet?

Quando me dei conta estava vivenciando este mesmo senso de inferioridade. A única diferença é que eu estava me sentindo inferior a mim mesmo.

Depois de um tempo, em meio a estresses complexos na vida pessoal e uma gangorra de sentimentos na vida profissional, fui obrigado a investir no meu autoconhecimento.

Percebi que por mais que nós sejamos muito bons em algo, nós nos enxergamos apenas por dentro. Somente a gente conhece todas as nossas complexidades, medos e limitações. Mas quando olhamos alguém de fora só enxergamos aquilo que nos está acessível ou apenas o que queremos ver.

Foi então que entendi meu público e a mim mesmo. Quando percebi que não me enxergava por dentro como as pessoas me enxergavam por fora, entendi que isso é comum a todos nós.

Todos somos sucesso e fracasso ao mesmo tempo.

Encerrando

Problemas existem, fazem parte da vida.

Obstáculos, reflexões e inseguranças sempre surgirão. Se permita sentir isso, mas saiba dentro de você o que você realmente quer. Não se deixe enfraquecer pelo que você enxerga nos outros ou em você mesmo.

Use seu tempo e seu poder de decisão pra isso.

Um abraço e um ótimo 2018 pra você.

Crédito

• Unsplash

O post 4 anos à frente de um blog de design foi publicado originalmente em Walter Mattos.

Hoje damos início a uma série de tutoriais sobre o ajuste de Curvas no Photoshop.

Essa é uma ferramenta bastante poderosa e que nos permite criar uma infinidade de efeitos com uma única camada de ajuste.

Apenas para dar um exemplo, utilizei a imagem abaixo para tentar reproduzir o efeito Nashville, do Instagram, utilizando duas técnicas diferentes.

Processo 1: nesta versão precisei de 4 camadas para reproduzir o efeito.

É comum a gente seguir o impulso de criar uma camada em cima da outra, sem saber saber onde isso vai dar, e parar somente quando alcança um efeito desejado. A questão é que nem sempre esse processo, que normalmente é longo, é necessário.

Processo 2: aqui utilizei apenas um ajuste de Curvas.

Além de economizar em tempo, quando nós conseguimos alcançar efeitos complexos com uma única camada de Curvas nós também economizamos em tamanho de arquivo. É claro que isso vai depender da quantidade e dos tipos de camadas necessárias para alcançar o mesmo efeito de outra forma, mas quanto mais caminhos você souber para alcançar o mesmo resultado, melhor.

O objetivo dessa série não é mostrar como criar um efeito específico, mesmo porque isso não seria o suficiente para ajudar você a entender a ferramenta.

A ideia aqui é apresentar alguns conceitos básicos para quem não tem o mínimo de afinidade com as Curvas e, para quem já conhece a ferramenta, fazer com que ela se torne cada vez mais intuitiva.

Portanto, esta será uma introdução um pouco diferente. Não vou focar nas Curvas especificamente, mas naquilo que considero importante entender para que este se torne um processo natural e útil para vários tipos de projetos criativos.

Quem cedeu as imagens utilizadas nesse tutorial foi o Fotolia, um serviço banco de imagens da Adobe. Os links para essas imagens utilizadas neste material estão no final do artigo.

Bom, vamos lá?

Mistura de canais

Você provavelmente já deve saber que toda imagem digital é formada por canais. E esses canais, apesar de serem apresentados pra gente em tons de cinza, na verdade representam cores.

No exemplo acima nós estamos vendo 3 canais do modo RGB (Red, Green e Blue ou Vermelho, Verde e Azul), que são as 3 cores primárias da luz.

E é que é justamente quando ocorre a mistura desses 3 canais que nós temos uma imagem colorida.

Esses canais, que enxergamos em tons de cinza, funcionam exatamente como máscaras. Quanto maior a concentração de branco em um canal, mais visibilidade esse canal ou a cor desse canal tem em relação aos outros.

E quanto mais escuro for um canal, menos visibilidade esse canal tem em relação aos outros. O que significa, também, que se ele tem menos visibilidade o que resta é a mistura dos canais que possuem maior quantidade de branco.

E o ajuste de Curvas nos permite justamente reprogramar os tons desses canais de maneira bastante precisa e de forma que, no final, a gente obtenha diferentes misturas.

O resultado pode ser uma simples gradação de cores, como um efeito de Instagram.

Ou um efeito completamente exagerado e totalmente diferente da imagem original.

RGB vs. CMY

As cores RGB são opostas e inversamente proporcionais a outro esquema de cores provavelmente conhecido por você, o CMY (ou Ciano, Magenta e Amarelo).

Por elas serem opostas isso significa que toda vez que eu removo uma dessas cores eu estou, na verdade, adicionando a sua cor complementar. Então, caso eu remova vermelho de uma imagem RGB eu estou misturando os canais verde e azul para formar o ciano, que é a complementar do vermelho.

Logo, caso eu remova verde de uma imagem, estou misturando os canais vermelho e azul para formar o magenta.

E, caso remova azul de uma imagem, estou misturando os canais vermelho e verde para formar o amarelo.

E esse diagrama, além de ser bastante simples de memorizar, também apresenta outro tipo de informação que tem bastante relevância pra quem irá trabalhar com cores e canais em qualquer software gráfico.

Por ele a gente também observa que o vermelho, além de ser oposto ao ciano, é formado pela mistura de magenta com amarelo. O verde é formado da mistura entre o amarelo e o ciano. E o azul é formado da mistura entre ciano e magenta.

Tá, beleza. Mas que utilidade isso tem pra gente quando nós estamos falando de Curvas?

RGB vs. CMY nas Curvas

Bom, eu vou começar criando um ajuste de Curvas nessa imagem pelo Painel de Camadas.

E aqui, por enquanto, você vai fixar apenas na ideia de que sempre que eu subo com esse nó, ou o ponto da esquerda, estou clareando os tons da imagem.

E toda vez que eu desço com o ponto da direita estou escurecendo os tons dessa imagem, beleza?

Digamos que eu queira trazer um tom mais frio pra essa imagem. Eu quero que ela seja um pouco mais azul.

Bom, eu poderia simplesmente selecionar o canal azul, pelo Painel Curvas, e puxar o ponto da esquerda pra cima.

A gente já viu que quanto mais próximo de branco for um canal, mais visibilidade a cor desse canal tem na mistura geral. E aí você nota que, de todos os canais, o azul é o mais branco de todos.

Mas eu poderia também, ao invés disso, adicionar mais ciano. E como a gente viu mais acima, para adicionar ciano basta remover vermelho.

E aí você repara que quanto mais escuro é o canal vermelho, mais azul ou mais ciano, nesse caso, é a imagem final.

Caso você tenha dificuldade em memorizar ou mesmo antecipar essas misturas de cores, o Photoshop tem algumas maneiras de ajudar. Uma delas é através do círculo cromático do próprio Photoshop.

Pois é, o Photoshop tem um círculo cromático.

O círculo cromático do Photoshop

Por padrão, caso eu esteja com o Conta-Gotas (I) ativado eu posso utilizar o atalho “Alt + Shift” e clicar com o botão direito do mouse para habilitar esse Color Picker flutuante aqui na tela.

Aliás, esse atalho também funciona caso você esteja com o Brush (B) ativado, tá?

Eu sei que isso, por si só, já tem bastante utilidade e provavelmente pegou muita gente aí de surpresa, mesmo sendo uma ferramenta que tá aí no Photoshop pelo menos desde 2010.

Mas dá para ir além. A gente pode ir em “Edit > Preferences > General” e, na opção HUD, alterar o formato do Seletor de Cores para um círculo cromático utilizando qualquer uma das opções de Hue Wheel.

Agora, caso eu ainda esteja com o Conta-Gotas habilitado, quando eu utilizo novamente o atalho “Alt + Shift” e clico com o botão direito do mouse eu tenho um círculo cromático para selecionar cores, tonalidades, conferir relações de complementares, análogas, enfim.

E, além disso a gente consegue revisar algumas informações que vão nos ajudar a antecipar algumas misturas de canais. Como, por exemplo, o fato de que o magenta é resultado da mistura entre vermelho e azul.

Na verdade, vira e mexe a gente esbarra com algumas ferramentas do Photoshop que também nos ajudam a lembrar dessas combinações.

Caso eu crie um novo ajuste de camadas e selecione a opção Color Balance, por exemplo, você nota que a gente já tem uma cola aqui.

E, assim como no ajuste de Curvas, aqui eu também estou afetando apenas os tons dos Canais, ok? Então, caso eu queira adicionar magenta basta que, para isso, eu remova verde.

E aí você nota como é exatamente o canal verde que ficou mais escuro.

Tom e Cor

Caso você já tenha assistido a alguns tutoriais gringos sobre Curvas, deve ter visto muita gente chamando essa ferramenta de Tone Curve, ou curva de tons.

Isso significa que por mais que um ajuste de Curvas tenha influência sobre a forma como nós enxergamos as cores de uma imagem, elas não são necessariamente ajustes de cores, mas ajustes tonais.

A explicação simples é que se um ajuste de Curvas altera somente os tons dos canais, logo, qualquer ajuste de Curvas é um ajuste de tom. Mas o que seria tom, afinal?

De maneira simplificada eu posso dizer que o tom de uma cor é produzido pela quantidade da mistura que uma determinada cor tem com preto ou branco. Ou, em outras palavras, a quantidade de sombra ou luz que essa cor tem.

Quanto mais próximo branco é a mistura, mais claro é o tom.

E quanto mais próximo de preto é a mistura, mais escuro o tom.

Nesse momento é importante entender que cada cor já possui o seu próprio tom, independentemente do quanto nós misturamos ela com preto ou branco. Eu sei que, em princípio, isso pode parecer complicado de entender, mas na verdade é bem fácil.

Isso acontece porque o tom de uma cor tem relação com o brilho percebido pelos nossos olhos. E essas cores, por essência, já possuem brilhos diferentes.

Caso você aperte um pouquinho os olhos irá reparar que o círculo amarelo chama bem mais atenção que o azul, que está do lado oposto.

E caso eu remova um pouco do brilho dessas cores, por igual, essa relação não muda.

O amarelo continua tendo mais brilho que o azul.

Agora, caso eu elimine as características de cor desses círculos de maneira que sobrem apenas informações de preto, o que nós temos como resultado são esses valores.

E aí você observa que, mesmo eu tendo removido a mesma quantidade de brilho em todas as cores, o amarelo realmente tem bem menos presença de preto que o azul.

Tá dando pra sacar? Para amarrar a ideia vamos fazer um raciocínio inverso aqui.

Da mesma forma que esses tons podem representar cores diferentes, como nós acabamos de ver, eles também podem representar exatamente a mesma cor, mas com brilhos e valores tonais diferentes.

No Photoshop

Vamos facilitar esse entendimento utilizando o próprio Photoshop.

Aqui eu tenho uma imagem onde eu apliquei um efeito de Mosaico pra simular uns pixels bem grandes e destaquei 3 categorias de tons, T1, T2 e T3, cada um com seu valor tonal representado em quantidade de preto.

Aqui o objetivo é justamente mostrar que pixels com cores diferentes podem ter exatamente o mesmo tom.

E para confirmar essa igualdade de tons eu vou criar um novo ajuste de Curvas e selecionar o botão “Auto-select targeted adjustment tool”. O nome é complexo, mas a ferramenta é bem simples, na verdade.

Ela não só permite que eu enxergue o ponto exato de um determinado tom na linha do gráfico, como também permite que eu clique e arraste o mouse para alterar os valores dos tons da imagem.

Mas, como editar as Curvas não é o objetivo desse tutorial, vamos à leitura dos tons.

Os destaques de nome T1, tanto no pixel mais esverdeado quanto no pixel mais marrom, marcam exatamente o mesmo ponto ou o mesmo tom no gráfico. Esse tom, caso fosse convertido para Grayscale, teria aproximadamente 85% de preto. Por aí.

Já os destaques de nome T2, tanto no ponto bege como no ponto azul marcam exatamente o mesmo tom no gráfico, e esse tom é algo próximo de 50% de preto. Repara como ele marca um ponto bem no centro do gráfico.

E os da categoria T3, um bege claro e um azul claro, também marcam exatamente o mesmo ponto no gráfico. E essas cores, caso fossem convertidas em tons de cinza, também teriam o mesmo tom. Aproximadamente 15% de preto.

Tons escuros, médios e claros

Tanto o Histograma do ajuste de Curvas como o Histogramas dos Canais apresentam pra gente o mesmo tipo de informação – a quantidade relativa ou a concentração de pixels com um determinado tom em cada um dos Canais.

Caso você não saiba, o histograma dos Canais está acessível em “Window/Histogram”.

Esses tons variam de 100% de preto a 100% de branco – ou de tons totalmente escuros a tons totalmente claros.

Quanto mais alto for o gráfico, maior a concentração de pixels com um determinado tom.

Para facilitar essa compreensão a gente pode imaginar um degradê indo de preto para branco bem em baixo de cada um dos canais, exatamente como ocorre no gráfico de Curvas.

Ignora, por enquanto, o degradê vertical, ok? Esse aqui vai ficar pra outro vídeo.

E, utilizando esses degradês como referência, a gente pode fazer a subdivisão clássica desses tons. Começando da esquerda para a direita nós temos os tons escuros ou pretos, no meio os tons médios ou cinzas e do lado direito os tons claros ou brancos.

Não existe uma subdivisão exata, ok? O importante é a gente lembrar desses degradês da base.

Mas como esses degradês são imaginários eu vou deixar você aí com a função de decorar esse macete, beleza? E antes de começar a analisar esses tons na imagem é importante entender uma coisa.

O gráfico de Curvas é fixo. Ele sempre irá nos apresentar os gráficos da imagem original, independentemente do tipo de ajuste ou do canal que eu selecionar por essa janela.

A partir do momento em que eu fizer qualquer ajuste nessa diagonal, quem vai me dar as informações dos canais de maneira atualizada é o Histograma de Canais, beleza?

E, mais uma vez fazendo um raciocínio inverso, enquanto essa diagonal não sofrer nenhum tipo de ajuste, ou estiver no seu estágio 0, ela faz relação direta com o gráfico da imagem original.

Bom, e como a gente faz a correspondência entre os tons do gráfico e os tons da imagem?

Vamos selecionar o canal verde, por exemplo. Se nós imaginarmos uma linha cortando o centro exato desse display onde está inserido o gráfico, nós estamos marcando o ponto que corresponde a quantidade de pixels que possuem 50% de preto no canal verde.

Levando em consideração o degradê da base de cada canal a gente observa que o canal verde, assim como todos os canais, possui menos pixels cinzas do que cinzas claros e muito menos pixels cinzas do que pretos.

Esse mesmo tipo de leitura vale para todos os canais. Então, no gráfico de Curvas, enquanto essa diagonal não for alterada ela faz relação direta com o gráfico do fundo. Logo, o ponto central da diagonal no canal RGB, nesse estágio, também representa 50% de preto.

E se, por acaso, eu habilitar novamente a ferramenta “Auto-Select” eu consigo verificar a posição exata do tom de cada pixel (ou grupo de pixels) na linha do gráfico.

Então, caso eu pare o mouse nessa região escura da imagem eu estou destacando um ponto da linha que possui o mesmo valor que o degradê que está abaixo desse ponto.

E, através do gráfico, eu vejo a concentração de pixels que possui esse mesmo valor ou esse mesmo tom na imagem. E como a gente já havia constatado, essa é uma imagem com uma concentração bem alta de tons escuros.

E aí a gente percebe coisas curiosas, como o fato de que os cinzas “perfeitos”, ou aqueles que possuem 50% de preto, podem ser encontrados aqui entre as áreas de brilho e as áreas de sombra da modelo.

O que faz sentido, né? Os cinzas serem encontrados entre as áreas de luz e sombra.

E outro ponto interessante a ser observado é que, mesmo nas regiões mais claras dessa imagem, aparentemente nós não temos 100% de branco em nenhum dos canais.

Nenhum deles chega a indicar uma quantidade relevante de brancos aqui do lado direito.

Então, mesmo que eu dê um zoom no ponto mais claro dessa imagem, nessa área de brilho e reflexo aqui do olho da modelo, você nota que nem mesmo os pixels mais claros são realmente 100% brancos.

Para que a gente tenha 100% de branco eu preciso que pelo menos 1 pixel toque essa parede direita do gráfico em cada um dos canais.

Então, apenas para dar um exemplo rápido, você nota que à medida em que eu arrasto esse slider branco para a esquerda eu vou aproximando os canais da parede direita. E quanto mais eu aproximo os gráficos da parede direita, mais pixels brancos eu tenho aqui nessa região da imagem.

Até que chega um momento em que eu tenho um pico de brancos aqui do lado direito dos canais e uma imagem com brancos completamente estourados.

E isso é algo que você dificilmente vai querer, ok?

E, apenas reforçando a ideia de que é o Histograma de Canais quem oferece os dados de tons de maneira atualizada, o que nós enxergamos aqui agora é o seguinte.

O slider branco do gráfico de Curvas, que antes não possuía nenhuma informação de branco no canal RGB, foi arrastado para esquerda e agora indica que todos os pixels que antes eram cinzas claros agora são brancos.

Já no Histograma de Canais, esses 3 pontos dos canais R, G e B, individualmente, que antes não possuíam nenhuma informação de branco agora possuem muitos pixels brancos.

Eu vou entrar em mais detalhes sobre isso num próximo tutorial, mas por enquanto fica com essa dica aí, beleza?

Observação

Na verdade eu posso fazer alterações na diagonal sem editar pixels com um tom específico. Para isso basta não mover o ponto correspondente a esse tom.

Para ficar mais fácil de entender vamos voltar para a imagem do exemplo anterior, com a simulação dos “pixels” visíveis. Dessa vez eu destaquei vários “pixels” que possuem 50% de preto e criei um filtro PB pra gente focar apenas nas informações de tons da imagem.

Aliás, olha que curioso. Mesmo depois de criar um filtro PB os tons dos canais da imagem praticamente não mudam. Mais um indicativo de que tom independe de cor.

Bom, se agora eu criar um ajuste de Curvas e adicionar um ponto exatamente no meio dessa diagonal eu posso fixar esses pixels que possuem 50% de preto.

Então eu posso bagunçar as Curvas, fazer praticamente o ajuste que quiser que, enquanto eu não mover o ponto central estou protegendo os pixels que possuem 50% de preto.

Exceto em casos onde eu crie uma curva extrema que afete esses cinzas, como essa aqui.

Mas, por outro lado, caso eu mova somente esse ponto você nota que toda a curva se move junto. Logo, todos os pixels sofrem alteração, exceto os pixels que possuem 100% de preto e os pixels que possuem 100% de branco.

Mas, assim como na imagem anterior nós não tínhamos 100% de branco, nessa aqui nós não temos 100% de preto pelo mesmos motivos, ok? Repare que os canais estão relativamente longes da parede esquerda dos seus respectivos displays.

E, apenas para encerrar essa seção com outras referências, aqui vai uma imagem com uma concentração bem alta tons médios ou cinzas.

E, por último, uma imagem com predominância de tons quase exclusivamente claros.

Você praticamente não vê informação de pretos aqui.

Um olhar simplificado

Já que esse vídeo ficou com muita informação vamos tentar fazer uma espécie de resumo de tudo que foi falado utilizando uma ótica um pouco mais simplificada.

Lembra que eu disse que o gráfico nos apresenta a quantidade relativa de pixels de uma imagem?

Dá uma olhada nesse quadrado branco e no seu Histograma.

Voltando a imaginar o degradê em baixo dos gráficos, se eu tenho apenas pixels brancos, logo, eu tenho uma linha ocupando toda a altura do display e tocando a parede direita do gráfico. Essa, ao que tudo indica, é a única forma de representar a predominância de um único tom na imagem.

Mas, se agora eu acrescento metade de pixels pretos isso significa que eu tenho quantidades iguais de pretos e brancos ocupando toda a imagem.

E como eles possuem a mesma quantidade em relação à área total, eles possuem o mesmo tamanho no gráfico.

Agora dá uma olhada nessa outra situação. Abaixo eu tenho exatamente a mesma quantidade de pretos e cinzas.

E cada um deles possui metade da quantidade de pixels que nós temos de branco. Repara como isso fica muito bem representado no gráfico.

E caso eu acrescente mais um bloco cinza a gente muda novamente o cenário.

Agora nós temos o dobro de cinzas para a metade de pretos e brancos.

Tá dando pra sacar?

Então vamos avançar mais um pouco.

Observa o que acontece caso eu adicione azul no quadrado preto.

Observando o Histograma você nota que eu removi um pouco de preto do canal azul (ou seja, adicionei branco) e, consequentemente, se eu adicionei branco no canal azul eu adicionei azul na soma dos 3 canais, ou no canal RGB.

E a gente pode dizer que essa é a lógica por trás de todo o ajuste de Curvas.

Então, só para terminar esse exemplo, caso eu continue clareando o canal azul, até que ele fique mais claro do que escuro, você observa que a linha que antes estava próxima dos tons pretos agora está mais próxima dos tons claros.

E também percebe que, dos 3 canais, o azul é o único onde o que era preto ficou cinza claro.

Sendo assim, voltamos para a primeira etapa do tutorial, onde vimos que quanto mais branco ou mais claro for um canal em relação aos outros, mais visibilidade a cor desse canal tem na imagem final.

Encerrando

É isso.

Espero que você tenha gostado. Eu sei que muita gente utiliza as Curvas meio que na tentativa e erro, então espero que essa série, que ainda está tomando corpo, realmente ajude a tornar esse processo mais natural.

E, claro, também espero que você utilize esse vídeo como forma de ampliar seu repertório criativo no geral. Não se limite apenas a explorar essas dicas no uso específico de Curvas.

Última dica

Se você já me acompanha há algum tempo deve ter percebido que meu objetivo sempre foi explorar o máximo de conteúdo no menor tempo possível, e é exatamente por isso que eu sempre invisto nas transcrições de todos os vídeos.

Assim, quem ainda tá aprendendo ou apenas quiser revisitar o conteúdo com calma tem essa oportunidade através por aqui.

O curioso é que eu percebo que, apesar de eu divulgar isso em todos os vídeos, infelizmente, não são todos que sabem dessas transcrições. Então, fica aí a dica.

E, como sempre, caso ache que esse conteúdo pode ser útil a alguém, fique à vontade para compartilhar.

E, lembrando que todos os vídeos aqui do canal são legendados e, aqui no meu site, waltermattos.com, além das transcrições dos vídeos do canal você também encontra outras dicas, reflexões e tutoriais sobre design.

Valeu mais uma vez, pessoal, um abraço e até a próxima.

Créditos

• Fotolia: Conheça o banco de imagens da Adobe
• Fotolia: Galeria de imagens usadas no vídeo

O post O poder do ajuste de Curvas no Photoshop – EP01: Canais, Cores e Tons foi publicado originalmente em Walter Mattos.

Você conhece o painel “Appearance” do Illustrator? Mesmo?

Neste tutorial daremos uma olhada bem de perto nesse painel e veremos como criar diferentes tipos de efeitos sobre textos, de maneira que os textos permaneçam editáveis e os efeitos facilmente replicáveis.

Todas as imagens utilizadas neste tutorial são do Fotolia, um serviço de banco de imagens da Adobe. Os links para essas imagens estão no final do artigo.

Entendendo o Painel Appearance

Antes de partir para o primeiro efeito, vamos começar pelo básico. Você precisa não só entender como funciona o painel “Appearance”, como precisa saber que existe uma pequena diferença na forma como esse painel trata textos e outros objetos.

Este início será bastante introdutório, ok? Então, caso você já tenha a manha, fique à vontade para pular para as próximas etapas.

Caso o painel não esteja aparecendo para você, basta clicar em “Window > Appearance”.

Vamos nos concentrar no retângulo rosa, por enquanto.

Ele é um objeto separado do texto e, como a gente pode observar pelo painel, ele tem apenas preenchimento e um efeito de “Rounded Rectangle”, que faz com que ele tenha as bordas arredondadas.

É importante entender que toda informação que entrar nesse painel será considerada apenas uma aparência, uma característica visual do objeto.

E uma das vantagens do painel “Appearance” é justamente o fato de que posso adicionar um número ilimitado de contornos, de preenchimentos e de efeitos em um único objeto.

E como todas as propriedades desse retângulo são efeitos de aparência, caso eu clique no menu dropdown do painel, você nota a tenho a opção “Clear Appearance”, que faz com que eu limpe todas as características visuais desse objeto.

Nesse caso ele ainda está aqui, só que sem preenchimento, contorno ou qualquer tipo de efeito aplicado.

Bom, mas por que essa informação é relevante para a gente? Porque textos se comportam de maneira um pouco diferente dentro do painel “Appearance”.

Quando eu seleciono o texto você já nota uma diferença.

Apesar de poder acrescentar novas propriedades nesse objeto, eu não tenho nenhuma característica visual relacionada ao texto. E, nesse caso, também não temos a opção “Clear Appearance” disponível.

Mas se não temos nenhuma informação de aparência, por que o texto está branco?

Porque esse objeto “texto”, na verdade, tem uma espécie de subnível – os “Characters”. Isso significa que esse é um objeto composto por letras, números, enfim.

Caso eu clique na palavra “Characters”, entro nesse subnível.

Aqui eu encontro algumas características visuais, mas não posso acrescentar nenhum outro atributo aqui dentro além do preenchimento e contorno existentes, apenas editá-los.

E caso eu clique em “Type: No Appearance” eu volto para a etapa anterior onde o texto, teoricamente, não tem nenhum efeito de aparência. Por isso o nome “Type: No Appearance”.

Então, apenas fazendo um resumo mais visual, o que nós temos aqui é o seguinte:

De um lado o objeto “Path”, com algumas características de aparência registradas no painel e com a possibilidade de acrescentar outras características utilizando um dos três botões desse painel.

Do outro lado nós temos o objeto “Texto”, que num primeiro momento não tem nenhuma informação de aparência registrada, exceto pela opacidade do próprio objeto. Mas, apesar disso, nesse momento eu consigo acrescentar novas características utilizando os botões da base do painel.

Só que esse objeto “Texto” tem um subnível, os “Characters”. E dentro de “Characters” eu tenho informações de contorno e preenchimento, mas não posso acrescentar nenhuma outra característica.

Bom, se você tinha dúvidas sobre essas diferenças, espero que até aqui tenha ficado fácil de entender.

Então vamos começar a brincar com essas informações e testar algumas possibilidades.

Exemplo 01: Criando um Highlight atrás do texto

O primeiro efeito que nós vamos criar é bem simples, e é justamente uma simulação desse Highlight atrás do texto. Mas eu não quero que ele seja um objeto separado, quero que ele faça parte do texto.

Eu começo criando um novo preenchimento e altero a cor dele para um amarelo próximo da roupa da menina. Esse preenchimento não substitui o branco, ele está apenas na frente do branco. Então, caso eu oculte esse amarelo aqui no painel você ainda enxerga o texto branco.

E é aí que entra, na minha opinião, a grande maravilha do painel “Appearance”. Todo contorno ou preenchimento que eu adicionar aqui dentro se comporta praticamente como um novo objeto. E essa é a grande sacada.

Tanto é que eu tenho controle individual de opacidade e “Blending Mode” para cada um deles. E como se isso já não fosse suficiente eu posso aplicar efeitos isoladamente em um preenchimento ou em um contorno enquanto estiver aqui dentro do painel “Appearance”.

Então, para criar um retângulo de bordas arredondadas basta me certificar que estou com o novo preenchimento selecionado e venho no botão “Effects”, “Convert to Shape”.

Aqui eu escolho a opção “Rounded Rectangle” e, nesse exemplo, escolho os valores “50” e “18” pixels para a largura e altura relativas desse retângulo.

A única coisa que eu preciso fazer agora é arrastar esse preenchimento para trás dos “Characters”.

Assim o branco volta a aparecer e agora eu posso escrever o texto que eu quiser que o retângulo vai acompanhar esse texto em tempo real. Esse novo preenchimento se comporta praticamente como uma segunda instância do meu texto, só que agora com a aparência de um retângulo.

Então, se ao invés de aplicar um efeito de forma eu tivesse aplicado um efeito de deslocamento nesse preenchimento amarelo nós teríamos dois textos idênticos, mas cada um com uma cor. O branco como cor dos caracteres e o amarelo como cor do objeto.

Tá dando pra sacar? Mais pra frente eu vou exemplificar como criar esse efeito de deslocamento.

E existem algumas formas de replicar as características registradas aqui em outros objetos.

Copiando efeitos pelo Painel Appearance

E nesse primeiro exemplo nós vamos utilizar o próprio painel.

Basta arrastar a miniatura do topo do painel para outro objeto qualquer. Essa miniatura representa todas as características e efeitos aplicados nesse objeto.

Mas olha o que aconteceu, o texto ficou invisível.

Caso eu selecione esse novo texto você nota que o Illustrator copiou apenas o aquele novo preenchimento onde nós aplicamos o efeito. Ele não copiou as informações registradas dentro dos “Characteres”.

Então a gente acabou de descobrir que o Illustrator não copia as características dos caracteres dessa forma, utilizando o painel “Appearance”. Mas isso, na verdade, é bem fácil de resolver.

Primeiro volto para a palavra “Girl” e excluo o preenchimento branco registrado nos “Characters”. Depois crio um novo preenchimento no objeto e altero a cor dele para branco.

Feito isso, basta arrastar novamente a miniatura do texto “Girl” para a o texto invisível.

Exemplo 02: Múltiplos contornos, Patterns e volumes no texto

E agora que o básico já foi compreendido vamos partir para um exemplo um pouco mais complexo. A gente vai simular múltiplos contornos, volumes e outros tipos de efeitos sem que, para isso, nós precisemos converter o texto em curvas.

A partir de agora eu vou detalhar cada vez menos, ok?

Você vai ver que uma vez que você entende como funciona o painel e tendo, claro, o mínimo de noção sobre as opções de efeitos no Illustrator, esse é um procedimento que se torna bastante intuitivo e experimental ao mesmo tempo.

Bom, se você observar o painel já deve ser capaz de fazer uma leitura bem completa do que está rolando aqui.

De baixo para cima e, apenas nos itens visíveis, no primeiro lugar nós temos um preenchimento bege, que faz a base do texto.

Acima dele nós temos outro preenchimento. Esse, com um “Pattern” e no modo “Overlay”. Então, já fica a dica. É possível adicionar quantos padrões você quiser, tanto em preenchimentos quanto em contornos aqui dentro desse painel, ok? Inclusive, dá pra fazer combinações de diferentes “Patterns”, se você quiser.

E acima desse “Pattern” nós temos um “Stroke” marrom.

Beleza, eu duplico o preenchimento bege e me certifico de selecionar a cópia de baixo. Eu quero criar uma nova cor entre o marrom, que está oculto, por enquanto, e o bege. Essa cor será um verde escuro.

Mantendo o preenchimento estiver selecionado eu venho em “Effect > Path > Offset Path”.

Isso faz com que eu aumente a espessura desse preenchimento, de forma que ele fique com a aparência um contorno atrás da cor bege.

E com o mesmo preenchimento selecionado eu venho novamente em “Effect > Distort & Transform > Transform”.

Aqui eu habilito o “Preview” e movo esse preenchimento “1px” na horizontal e “1px” na vertical. Isso faz com que ele se desloque para baixo e para a direita, simulando um deslocamento no ângulo negativo de “45º”.

E enquanto eu for aumentando o número de cópias, eu estou na verdade criando novos preenchimentos nessa mesma direção, numa distância de “1px” entre cada cópia.

E é por essa distância ser tão curta que eu praticamente não vejo nenhum espaço entre eles, criando aí a ilusão de volume, de um objeto sólido. Nesse caso “10 cópias” já causa o efeito que eu quero. Posso dar “Ok”.

E antes de continuar, um aviso rápido.

Eu já falei sobre um processo bem parecido com esse no primeiro tutorial aqui do canal, de 2014. Pois é, já tem esse tempo todo!

Nesse vídeo eu demonstro como criar um “Long Shadow” utilizando o painel “Appearance”. Então, caso você não tenha assistido esse tutorial e quiser prestigiar o primeiro vídeo do canal dá uma passadinha por lá e aproveita para tentar complementar esse tutorial aqui, beleza?

Bom, e em relação ao resto não tem mistério.

Habilitando agora os itens que estão ocultos, de baixo para cima eu tenho em primeiro lugar justamente um efeito de “Long Shadow”.

A única diferença entre esse preenchimento e o que nós acabamos de criar é a cor, a opacidade, que nesse caso está com “70%” no modo “Multiply”, e o número de cópias do efeito “Transform” que, nesse caso, é maior pois a sombra precisa aparecer atrás do efeito de volume da letra.

Mais acima nós temos outro “Stroke”, que também recebe um efeito de deslocamento para baixo e para direita, mas sem cópia nenhuma.

E ele também recebe um efeito de opacidade para causar essa ilusão de sombra projetada dentro da letra.

Por último, nós temos mais um “Stroke”. Esse, com um efeito de “Offset”, para que ele ocupe uma área maior que o contorno marrom e, também, com um degradê aplicado nesse “Stroke”.

Então, assim como é possível criar “Patterns” em preenchimentos e contornos dentro do “Painel Appearance”, é possível, também, criar degradês em preenchimentos e contornos.

Esse é o resultado:

Mole também, né?

De maneira simples e rápida conseguimos criar um efeito relativamente complexo, mas com o mínimo de esforço.

Copiando efeitos utilizando Graphic Styles

E, mesmo com esse aparente grau de complexidade, a gente consegue copiar essas informações para outros objetos. E caso eu queira copiar essas informações para vários objetos ao mesmo tempo aquele processo de arrastar a miniatura do painel já não seria o ideal.

É mais fácil criar um “Graphic Style”.

Para isso basta vir em “Window > Graphic Styles” e arrastar qualquer objeto com os efeitos pra dentro dessa janela.

Esses efeitos agora viraram um estilo. E esse estilo carrega todas as propriedades de aparência, do “Paine Appearance”, do objeto que parar aqui dentro.

Isso significa que você pode selecionar vários objetos com propriedades diferentes e substituir essas propriedades pelo estilo que você criou.

Beleza? Então, vamos partir para o último exemplo.

Exemplo 03: Caixa de texto estilizada

Nós vamos criar uma espécie de box estilizado atrás da caixa de texto.

Apesar de simples, eu escolhi esse terceiro exemplo por ele ser um pouco diferente do que você talvez esteja acostumado a ver e pode ser que ele te dê outras ideias, também.

Eu tenho aqui um texto com um box branco atrás. E esse box nada mais é que um preenchimento com um efeito de “Convert to Shape”, exatamente como nós fizemos no primeiro exemplo com o Highlight.

A única diferença é que, como dessa vez eu tenho uma caixa de texto, ele vai acompanhar as alterações que eu fizer nessa caixa de texto ao invés de acompanhar a quantidade de textos que eu digito.

Agora eu vou trazer um pouco mais de personalidade para esse layout. Primeiro eu crio um novo contorno na frente do preenchimento preto e altero a cor dele para laranja.

Agora eu quero que esse contorno também seja um retângulo. Então, para isso, basta manter o “Alt” pressionado enquanto eu arrasto o efeito do preenchimento branco para esse contorno que eu acabei de criar.

Pois é, o mesmo “Alt” que você usa para duplicar objetos também funciona para duplicar efeitos dentro do painel “Appearance”.

Bom, continuando, eu vou alterar as propriedades desse retângulo para “50px” e “100px”.

Em seguida eu converto esse contorno em um brush. E eu decidi escolher o“Charcoal Pencil”, que um brush é padrão, e alterei espessura desse contorno até obter um resultado bacana.

E para dar o toque final eu volto para o painel, duplico esse contorno e mantenho a propriedade do pincel, mas excluo o efeito de retângulo.

E como esse “Stroke” agora está sem efeito nenhum ele volta a ser aplicado sobre o texto, mas não é isso que eu quero.

Eu quero copiar novamente as mesmas propriedades do retângulo branco para que esse novo pincel ocupe as bordas agora. E, para finalizar, altero a cor desse contorno para branco.

E fechou.

A gente tem uma base para várias possibilidades criativas aqui, com a vantagem não só de poder replicar isso de maneira bem rápida, como também de editar e criar um padrão para futuras aplicações caso seja necessário.

Tá dando pra sacar o poder que esse painel tem?

Ah, e antes que eu esqueça, uma dica extra. Tá vendo esse “til” aqui, decentralizado?

Eu poderia corrigir isso trabalhando a entrelinha do texto, mas hoje o Illustrator tem uma ferramenta que ajuda a resolver isso de uma maneira bem intuitiva e que pode ser uma mão na roda em determinadas situações.

Basta manter a ferramenta texto (Type) pressionada e selecionar essa ferramenta aqui, a “Touch Type”.

Agora sim, com ela eu consigo mover esse til para o ponto que eu quiser. Aliás, apenas a título de curiosidade, eu consigo mover qualquer caractere, ok?

E mesmo depois do ajuste o texto continua editável, normalmente.

Recolor Artwork

Para encerrar é sempre válido lembrar de uma das ferramentas mais interessantes e até certo ponto subestimadas no Illustrator, o “Recolor Artwork” (Edit > Edit Colors > Recolor Artwork).

Com ele você consegue alterar todas as cores individualmente, inclusive cores de degradê, sem precisar recorrer à ferramenta “Gradient” ou sequer ao painel “Appearance”.

Inclusive, eu já dei algumas dicas bem legais sobre como recolorir bitmaps usando essa ferramenta.

Outros exemplos

Encerrando

Espero que você tenha gostado e que tenha ficado claro que o objetivo desse vídeo não é apenas te ensinar como criar o efeito X ou Y, mas tentar te ajudar a compreender o painel “Appearance” o suficiente para que você consiga agilizar e ampliar suas possibilidades criativas.

Eu sei que o painel “Appearance” pode não ser tão intuitivo no início, mas uma vez que você pega o macete ele se torna uma ferramenta extremamente fácil de experimentar.

E você não precisa ter conhecimento avançado de Illustrator para isso. Basta ser curioso.

Bom, e como já é de costume dizer, caso ache que esse conteúdo pode ser útil a alguém, fique à vontade para compartilhar com essa pessoa.

Lembrando que todos os vídeos aqui do canal são legendados e possuem versões transcritas no meu site, waltermattos.com, onde você também encontra outras dicas, reflexões e tutoriais sobre design.

Valeu mais uma vez, pessoal, um abraço e até a próxima.

Créditos

• Fotolia: Conheça o banco de imagens da Adobe
• Fotolia: Galeria de imagens usadas no vídeo

O post Como criar múltiplos efeitos em textos utilizando o Painel Appearance no Illustrator foi publicado originalmente em Walter Mattos.

O vídeo de hoje tem conteúdo misto. Começamos com uma análise do o pôster do filme Logan e, ao mesmo tempo, embarcamos em um estudo sobre como elementos apresentados em diagonal podem ser percebidos dentro de um design.

Exploraremos as diagonais dominantes, barroca e sinistra, e veremos possíveis mensagens e valores transmitidos por elas em diferentes composições.

Espero que goste.

O grid

Nesse vídeo eu não vou focar em grids, mas para não perder o costume eu vou arriscar aqui uma estrutura apenas para testar se existe uma possível relação entre os elementos do pôster.

Sem muito esforço a gente percebe que, por mais que não tenha existido um grid intencional (e eu não estou dizendo que não houve), com apenas um círculo, duas diagonais e duas linhas a gente consegue enxergar que, pelo menos, harmonia e equilíbrio a gente encontra aqui.

Aliás, eu não acredito que seja coincidência o fato dos olhos do Logan estarem alinhados com as duas diagonais do pôster.

Essas diagonais costumam ter importância em uma composição, e eu vou entrar em detalhes sobre isso mais pra frente.

As garras e seus possíveis significados

Tentando puxar alguns possíveis significados o que a gente tem aqui é um Logan com uma expressão cansada, apesar de determinado, e com duas garras que chamam bastante atenção nessa composição.

Foi a primeira vez que eu vi um pôster do Wolverine onde ele aparece apenas com 2 garras. E para quem assistiu ao filme sabe que isso pode ter um significado relativamente óbvio.

Nós temos uma personagem no filme que possui 2 garras em cada mão, a X-23.

Não estou dizendo que essas garras sejam da X 23, mas sim uma possível referência a elas, ok? Isso por si só já seria algo interessante. E, na dúvida, eu acredito que as garras das X-23 parecem ser um pouco mais espaçadas que as garras do Wolverine.

E, além dessa referência à X-23, existe também o fato de que, como eu falei, esse é um Logan mais velho, cansado, e as suas garras já não possuem mais a mesma eficiência de antes. Isso é algo que fica bastante claro no filme e essa composição também poderia ser uma referência a isso.

É claro que em uma primeira leitura esse é apenas um pôster com um rosto, duas facas e algumas informações de texto.

Mas é bem plausível que pelo menos uma dessas referências tenha sido intencional. Isso mostraria como um pequeno detalhe, quando bem pensado, pode ter um valor enorme dentro de um design.

Mas tem mais. Ainda é possível extrair um terceiro motivo para essas garras. E isso se deve única e exclusivamente à essa diagonal na qual as garras se encontram.

A diagonal dominante

Eu poderia dizer que entre as 3 seções que compõem esse pôster, as garras são elementos que se destacam graças à essa inclinação que escolheram para elas.

Se você assistiu à análise anterior deve lembrar que eu mencionei a faixa do Aguilar como um elemento de grande importância no layout.

Isso porque ela ajudava não só a quebrar a simetria do pôster como também complementava uma diagonal que ajudava a trazer uma leitura harmoniosa para a composição.

No caso de hoje é parecido, mas diferente.

A diagonal das garras certamente ajuda a quebrar a simetria do pôster. E isso é bom, interessante do ponto de vista do design. Mas essa inclinação escolhida para elas também pode ajudar a complementar o peso dramático trazido pela expressão física do Logan.

Esse é um pôster que dificilmente me transmite alguma positividade.

Observa, por exemplo, como seria o pôster se as garras estivessem viradas para o lado oposto.

Sentiu alguma diferença?

O fato é que, em uma composição, uma diagonal muito marcante pode ser capaz de alterar sua percepção ou suas emoções dependendo da forma em que elas estão direcionadas.

E, por regra, nós temos dois tipos de diagonais dominantes em uma composição, a diagonal barroca e a diagonal sinistra.

Diagonal sinistra

A diagonal sinistra é aquela que normalmente tem o seu ponto mais alto no topo esquerdo da composição e o ponto mais baixo na base direita da composição – dependendo da forma que você estrutura seu grid.

Essa diagonal tende a oferecer uma leitura agressiva e incômoda para nós. Teoricamente elementos que acompanham essa diagonal não nos despertam boas sensações.

E no pôster do Logan nós temos a presença de um elemento que tem exatamente os mesmos valores que a diagonal sinistra. O ponto mais alto das garras está no lado esquerdo e o mais baixo no lado direito.

E por que essa característica sugeriria uma mensagem negativa?

Isso provavelmente tem a ver com a nossa forma de leitura, principalmente a ocidental, e também com a nossa percepção sobre a ideia de gravidade.

Olhando para essa cena aqui, por exemplo, você diria que essa bola está subindo ou descendo a ladeira?

Descendo, né?

Por isso não é incomum encontrar composições onde essa inclinação é escolhida para trazer um peso dramático à cena. Normalmente ela representa ideias como queda, pessimismo, derrota, depressão, etc.

Ou seja, normalmente mensagens negativas.

Se você assistiu à minha análise dos pôsteres do filme Mad Max e assistiu ao filme deve lembrar das observações que eu levantei sobre os personagens dessa composição aqui, né?

Diagonal barroca

A diagonal barroca, por sua vez, representa justamente o oposto.

Composições que usam ou se aproximam dessa diagonal tendem a ser mais agradáveis aos olhos, independentemente da mensagem proposta.

Então, caso o pôster do Logan fosse invertido, por mais que a mensagem continue sendo a de um Wolverine cansado e maltratado, a nossa percepção pode ser um pouco menos incômoda e mais otimista.

Voltando à cena da bola e a ladeira, é bem provável que agora você imagine essa bola subindo ao invés de descendo, né?

Também é por isso que não é incomum encontrar composições onde essa diagonal ou inclinação seja usada para representar valores positivos como crescimento, sucesso, vitória, felicidade, etc.

E voltando à análise dos pôsteres de Mad Max, caso você tenha assistido ao meu vídeo e ao filme deve lembrar qual é uma possível mensagem por trás desse pôster aí.

Diagonais do pôster Logan

Então, apenas para encerrar o papel da diagonal no pôster do Logan, o que a gente tem aqui são duas possibilidades.

A primeira seria o fato de terem usado as diagonais barroca e sinistra, ou as diagonais das quinas, como guias para posicionar o rosto do Logan de maneira que os olhos coincidam com essas diagonais. Nesse ponto, pelo menos, nós temos uma simetria perfeita acontecendo aqui.

Depois usaram outra diagonal justamente para quebrar essa simetria e, possivelmente, ajudar a traduzir alguns significados que podem ser extraídos desse pôster.

Toda regra tem exceção

E, pessoal, depois desses exemplos e regras que soltei aqui é sempre bom lembrar que para toda regra existe pelo menos uma exceção.

Você irá encontrar muitas composições com diagonais dominantes ou importantes esteticamente que não transmitem necessariamente valores negativos ou positivos.

Além disso, a diagonal também não precisa necessariamente representar todo enredo por trás da história. Ela pode representar apenas um fragmento específico.

A mensagem completa será sempre aquela interpretada através das cores, das formas, das expressões dos personagens, enfim, de uma série de elementos que nunca trabalham sozinhos.

Contexto histórico

Não encontrei exatamente quando os termos “diagonal barroca” e “diagonal sinistra” surgiram, mas é certo que não é de hoje que diagonais ou linhas oblíquas são usadas em composições.

E quando usadas de maneira intencional, o fato é que elas podem ser escolhidas tanto para transmitir uma mensagem ou despertar uma emoção como simplesmente para equilibrar visualmente uma composição.

Encerrando

E é claro que eu não poderia encerrar lembrando que é muito importante conhecer e saber como usar as regras, mas mais importante que isso é tentar entender como as mensagens são percebidas, interpretadas.

Não é um grid ou uma linha que irá definir a qualidade do seu design ou garantir a sua correta interpretação. São vários fatores que exercem influência sobre isso, e é por isso que você não pode parar de estudar e prestar atenção no mundo a sua volta.

Espero que você tenha gostado e, como sempre, caso ache que esse conteúdo pode ser útil a alguém, fique à vontade para compartilhar com essa pessoa.

E se você ainda não conhece meu trabalho, saiba que todos os vídeos do canal são legendados e possuem versões transcritas no meu site, waltermattos.com, onde você também encontra outras dicas, reflexões e tutoriais sobre design.

Valeu, um abraço e até a próxima.

Crédito

Pôster do filme Logan: Trailer Addict

Indicação de leitura

• Design Básico: Grids
• Geometria do Design
• Gestalt do Objeto
• Elementos da Semiótica Aplicados ao Design

Referências externas

• 48 linhas para designers guardarem na gaveta
• Great Compositions: Alfred Eisenstaedt

O post Pôster Logan e o papel da diagonal em uma composição foi publicado originalmente em Walter Mattos.

Neste vídeo apresento uma técnica bem bacana para criar patterns de uma maneira bastante intuitiva.

E o mais legal é que, com essa mesma técnica, você conseguirá criar desde padrões simples a padrões com um grau de complexidade maior, como os padrões sem emenda. Ou seja, aqueles onde você possui conexões entre os elementos, mas fica difícil distinguir exatamente onde essas conexões são feitas – efeito esse também conhecido como Rapport.

A intenção desse vídeo é apresentar a técnica de maneira otimizada para quem for utilizá-la em qualquer software gráfico. Portanto, basta escolher seu programa favorito e colocar a mão na massa.

Espero que goste.

Exemplo 1: Pattern com formas geométricas

Vamos começar com um exemplo bem básico. Eu tenho aqui uma composição simples com alguns objetos soltos e eu quero transformar isso em um padrão.

É claro que eu já poderia utilizar essa imagem como um módulo e criar um pattern a partir dele.

Mas digamos que eu prefira uma transição um pouco mais homogenia. Eu não estou satisfeito com esses intervalos ou vazios aqui no meio.

E para resolver isso eu poderia tentar preencher as 4 quinas ou as bordas dessa composição, mas existe uma forma que eu considero ainda mais eficiente de fazer isso.

Criando 4 cópias do módulo original

Primeiro eu crio 4 versões iguais dessa composição, que eu estou considerando como um módulo, e organizo dessa forma – dois módulos em cima e dois em baixo.

É importante que não haja nenhum espaço entre eles, ok?

Encontrando o novo módulo

Depois eu pego a área total de um módulo e faço uma marcação com essa mesma área bem no centro da composição, entre as 4 cópias que a gente acabou de criar.

E pronto. Caso você não conheça essa técnica, é aqui que sua cabeça vai dar um pequeno nó.

Esse contorno central é o nosso novo módulo.

E acredite ou não, o pattern que resulta desse novo módulo é exatamente igual ao pattern formado pelo módulo original – ou pela nossa composição original.

Olha aí os mesmos intervalos entre os módulos.

Tá, mas se nada mudou por que isso é interessante pra gente?

Simples, porque agora ao invés de preencher as quinas ou a borda do módulo original, basta preencher o meio desse novo módulo. E, além disso, eu consigo visualizar de maneira muito mais clara como será formado o pattern.

Basta observar que todos os objetos que atravessam um dos lados da borda desse novo módulo possuem cópias do lado oposto.

Observa os triângulos abaixo, por exemplo. A parte do triângulo que está dentro do novo módulo é exatamente igual à parte que está fora. E é exatamente isso caracteriza um pattern.

Então, caso eu mova ele para qualquer lugar, eu preciso mover também a sua cópia do lado oposto, ok? Esse é o único cuidado que nós precisamos ter ao utilizar o novo módulo.

Beleza?

Novo pattern sem emendas

Bom, agora só falta preencher o espaço central.

Eu posso, por exemplo, começar copiando alguns objetos que já existem e alterar ângulos, tamanhos e cores ou mesmo criar novas formas. Não importa. A ideia é preencher o espaço.

E uma vez satisfeito é só criar o pattern a partir desse novo módulo.

O resultado é um padrão bem mais homogêneo e, como você pôde ver, com o mínimo de trabalho possível.

Bem fácil de executar em qualquer software gráfico que você utilize por aí.

Entendendo a técnica no detalhe

Antes de partir para o último exemplo vamos ver se eu consigo explicar melhor o que acabou de acontecer aqui.

Primeiro, vamos dividir o módulo original em 4 blocos, 01, 02, 03 e 04, e também destacar as quinas com as mesmas numerações dos seus respectivos blocos.

Aproveitei para já posicionar, também, a área que do que virá a ser o nosso novo módulo.

Acontece que quando fazemos as 4 cópias do módulo original nós temos uma inversão total desses 4 blocos dentro da área do novo módulo.

Ou seja, se antes eu tinha a sequência 01, 02, 03 e 04, agora eu tenho a sequência 04, 03, 02 e 01. E isso também fez com que as quinas se concentrem agora no centro.

E, consequentemente, tudo que antes fazia parte do centro agora está agora atravessando as bordas desse novo módulo, já com encaixes perfeitos entre um lado e outro.

Dá uma olhada como ficam esses blocos organizados por cores.

Bacana, né?

E o fato é que quando nós estamos falando de patterns, esse tipo de inversão não resulta em mudança alguma. Exceto pelo fato de que agora, como eu falei, ficou muito mais fácil visualizar e corrigir antecipadamente qualquer tipo de problema relacionado às repetições.

Aliás, as inversões 03, 04, 01 e 02 também geram exatamente o mesmo pattern.

Assim como as inversões 02, 01, 04 e 03.

Fica aí, então, algumas possibilidades pra você estudar.

Exemplo 2: Rapport com composição floral

Então tá, depois desse exemplo relativamente simples você deve estar se perguntando como utilizaria esse método em uma composição um pouco mais complexa, certo?

E a resposta é: exatamente do mesmo jeito.

Acima temos o floral, que baixei no site Freepik. Você pode fazer o download caso queira tentar reproduzir.

Faça o download do Floral

E o curioso é que, apesar de eu ter baixado essa imagem procurando por patterns, ela não veio preparada para isso.

Perceba que quando nós criamos as 4 cópias percebe não existem conexões entre os módulos. Os cortes estão bem visíveis.

Observe as folhas e flores, pois as curvas podem confundir.

E cá entre nós, essa ilustração está pedindo por um Rapport, né?

E para fazer isso basta continuar com o procedimento, mas com uma pequena diferença. Depois de criar o módulo central eu não vou simplesmente criar novos objetos aqui no meio.

Como essa área já está preenchida, mas não do jeito que eu quero, eu preciso antes excluir essas figuras que estão cortadas e criando as linhas de emenda.

Depois disso basta preencher esse espaço. E aqui, a criatividade é quem manda.

Nesse caso eu apenas copiei e redistribuí elementos que já existiam na ilustração original.

E quando eu estiver satisfeito, mais uma vez, basta transformar essa área central no meu novo módulo e criar o pattern a partir dele.

E esse é o resultado.

Como você pôde ver, essa é uma técnica bem intuitiva para criar padrões. Existem muitas formas previamente planejadas e, até mesmo, matemáticas para montar um Rapport ou outros tipos de Patterns, mas aqui eu decidi mostrar uma técnica que aprendi há muitos anos com uma cliente minha e que, sem dúvida alguma, tem sido mão na roda para mim.

Espero que seja pra você também.

Encerrando

E é isso.

Espero que você tenha gostado. Deixa sua opinião aí nos comentários ou compartilhe os seus próprios padrões. Por que não? Essa troca de experiências só tende a beneficiar todo mundo, né?

E claro, caso você ache que esse conteúdo pode ser útil a alguém, fique à vontade para compartilhar com essa pessoa.

Se você ainda não conhece meu trabalho, saiba que todos os vídeos do canal são legendados e possuem versões transcritas aqui no site, waltermattos.com, onde você também encontra outras dicas, reflexões e tutoriais sobre design.

Valeu mais uma vez, um abraço e até a próxima.

Crédito

Freepik: Pattern com floral

Referências externas

• Estampaholic: O que é Rapport
• Design Sponge: How to make a repeat Pattern
• Metapix: Encontrando o módulo com Rapport

O post Como criar patterns sem emenda de um jeito simples e intuitivo foi publicado originalmente em Walter Mattos.

Quem diria! Dia 23 de janeiro de 2017 e cá estou completando meu terceiro ano de blog e canal no Youtube. E como já é de costume, não poderia começar este retrospecto sem meu agradecimento a você.

Muito obrigado! De verdade.

E assim como as edições anteriores, este texto, além de um agradecimento é também uma comemoração e resumo sobre essa experiência. Se você for um designer que pretende ter o seu próprio canal de comunicação um dia, esse registro anual pode ser um incentivo ou, pelo menos, uma referência sobre esta realidade. Realidade essa que, aliás, pretendo manter por um bom tempo.

Seguem os links das edições anteriores, caso tenha perdido:

• 2 anos à frente de um blog de design
• 1 ano à frente de um blog de design

Bom, vamos lá.

Publicações

Em 2016 foram 13 publicações, sendo 11 delas vídeos produzidos para o Youtube.

Comparando com as 29 publicações de 2015 tive uma queda mais de 50% no volume de produção para o blog. Por outro lado, se em 2015 eu gastava mais ou menos 10h de trabalho por vídeo, e já achava muito, de 2016 para cá essa média aumentou para 30 horas de trabalho.

Mas isso não é necessariamente ruim, pois apesar da queda no número de publicações houve um aumento significativo no número de pessoas que começaram a acompanhar esse trabalho. O canal, por exemplo, iniciou 2016 com aproximadamente 17.000 inscritos e fechou o ano com mais de 32.000 pessoas. Um número que, para mim, confesso ser assustador!

Fico realmente muito feliz pelo fato de que, apesar da baixa frequência, vocês continuam aderindo ao conteúdo.

Espero que continue assim.

Record de visualizações em um único dia

Lista de canais brasileiros relacionados a design gráfico para conferir no Youtube: O post com o record de mais longo título do blog também foi o que teve o maior número de visualizações em um único dia.

Ele gerou quase 6.000 visualizações no site em poucas horas, e também teve um alcance orgânico de 28.700 pessoas no Facebook.

A intenção inicial era compartilhar apenas canais brasileiros com a proposta de falar sobre design gráfico em seu âmbito mais amplo – seus cânones, teorias, etc.

Mas o fato é que, durante minha pesquisa, encontrei pouquíssimos canais com essa única proposta. Então decidi que compartilharia todos que eu encontrasse que tivessem alguma relação com design gráfico. Seria uma forma de tentar incentivar os produtores de conteúdo a produzirem mais e, ao mesmo tempo, estimular os leitores também.

Conteúdo mais trabalhoso

Grids no Design Gráfico – O que você precisa saber antes de começar a usar: Esse foi o conteúdo mais trabalhoso dos 3 anos de existência do blog, mas foi por pouco. Foram apenas 3 horas de diferença entre ele e a análise do pôster do filme Dr. Strange, que menciono em detalhes mais abaixo.

No total, considerando estudo, roteiro, vídeo e outras etapas menores, como legenda, preparação de imagens para o blog e Newsletter, foram aproximadamente 77h de trabalho. Divida este tempo em no máximo 2 horas de trabalho por dia e temos pelo menos 38 dias de trabalho.

Podcasts

Foram 7 podcasts gravados no ano de 2016, todos em colaboração com o blog Aparelho Elétrico.

• É possível ser imune a críticas?
• Perfeccionismo: herói ou vilão?
• Podcast da depressão: estamos exagerando no humor?
• Como ser um profissional relevante sem exagerar no currículo
• O impacto do isolamento na vida do freelancer
• Erros comuns que os freelancers cometem
• Relacionamento com o cliente

Ao vivo

• Setup Conference (Goiânia): Fui um dos palestrantes no evento voltado para os profissionais dos setores de publicidade, vídeo, fotografia e design.
• Live: Processo Criativo (Canal Ferreira Studios): Live gravada em colaboração com Leonardo Ferreira, juntamente com os designers Pedro Panetto e Guilherme Dantas.
• Banca na Unigranrio: Tive a honra fazer parte da banca dos projetos de conclusão dos alunos de Design Gráfico da universidade.

Entrevistas

• Em Cena – Walter Mattos: Um papo bacana com a RTV Digital Films. Falei sobre meu background, minhas inspirações e, no final, me atrevi a dar algumas dicas para profissionais criativos.
• Revista Dot #11: Este é um projeto semestral realizado pelos cursos de Design Gráfico e Design de Produto da faculdade de Administração e Arte de Limeira. Trocamos uma ideia sobre minhas motivações para manter o blog e meu trabalho como designer de marcas.
• CastCriativo #01 – Bate-papo com Walter Mattos sobre design de marcas: Nesta entrevista em formato de Podcast eu e Fabrício Augusto, do blog Os Criativos, levantamos reflexões sobre a possível desvalorização do profissional designer, discutimos boas práticas para apresentação de projetos e, entre outros assuntos, falamos também sobre plágio.

Os 5 vídeos mais assistidos no Youtube em 2016

Diferentemente de 2015, onde a maioria dos vídeos mais assistidos haviam sido lançados no ano anterior, o vídeo mais assistido em 2016 foi lançado exatamente em 2016. E ocupando o segundo lugar da lista ainda está o primeiro vídeo lançado no canal, sobre Long Shadow no Illustrator. Parece que o pessoal gosta desse tema.

• Grids no Design Gráfico: O que você precisa saber antes de começar a usar
• Duas formas fáceis de criar Long Shadow no Illustrator
• Proporção Áurea: Ferramenta ou Mito?
• Análise do Design: Pôster Dr. Strange
• O grid vem antes ou depois do design da marca?

O destaque, porém, vai para a análise do pôster do filme Dr. Strange, que foi o vídeo com a mais rápida projeção do canal. Foi lançado no final de outubro de 2016 e, ainda assim, conseguiu alcançar a quarta posição entre os vídeos mais assistidos do ano.

Para quem perdeu, lancei um vídeo no meu Instagram mostrando um pouco desse processo.

Em breve… #makingof #drstrange #design #poster #tutorial #adobe #illustrator #waltermattos #grids #geometry #drestranho #cinema #movie #youtube

Um vídeo publicado por Walter Mattos (@waltermattos) em Out 17, 2016 às 4:46 PDT

Os 5 posts mais lidos no blog em 2016

A lista está bem parecida com a de 2015, exceto pela entrada da relação de canais do Youtube. Ainda acho impressionante como o público do blog parece ser diferente do público do meu canal, pois os posts mais acessados por aqui são os artigos, não os vídeos.

• Template de proposta para projeto de design
• Lista de canais brasileiros relacionados a design gráfico para conferir no Youtube
• Dicas e atalhos úteis de Illustrator
• Planilha para calcular o valor do seu projeto
• Dicas para montar seu briefing de design de marca

Newsletter

A Newsletter continua em crescimento orgânico e natural, sem vínculo a nenhum tipo de download ou condição para assiná-la ou mesmo cancelar a inscrição. Quem assina garante o recebimento das novidades do blog, do canal no Youtube e, vez ou outra, recebe também algumas curiosidades e bastidores das produções.

Em 2016 foram mais de 1.300 novos inscritos, representando hoje um total de mais de 3.800 pessoas.

Encerrando

Mais um ano de expectativas completamente superadas. Antes de escrever esse artigo eu não estava ciente desses números, ou pelo menos ainda não tinha caído a ficha.

Isso certamente não seria possível se não fossem as pessoas que ajudaram a compartilhar o conteúdo. Deixo meu agradecimento a todos, especialmente aos que entraram em contato direto comigo, seja para tirar dúvidas, agradecer ou simplesmente mandar mensagens de incentivo. O volume de retorno que eu recebo por publicação tem aumentado de maneira estratosférica, o que infelizmente faz com que eu não consiga responder todos.

Por isso, assim como fiz ano passado, peço que insista. Mande e-mail, utilize os campos de comentários ou, em caso de dúvidas rápidas, ao Twitter, pois ele facilita bastante a comunicação de maneira ágil.

Obrigado novamente, um abraço, um excelente 2017 para você e até a próxima.

O post 3 anos à frente de um blog de design foi publicado originalmente em Walter Mattos.

Hoje iremos dar uma olhada no design do pôster do filme Assassin’s Creed, baseado no game de mesmo nome.

Essa análise será bem rápida e puramente estrutural. O interessante é que, dessa vez, nós não iremos encontrar proporção áurea, regra dos terços ou nenhuma outra regra específica, para falar a verdade. Vamos fazer apenas subdivisões geométricas do espaço e utilizar um olhar analítico para buscar possíveis relações entre as partes desse layout e o todo.

E no final deste post eu vou pedir a sua ajuda para continuar essa análise de maneira um pouco mais aprofundada. Pode ser?

Então vamos lá.

O quadrado e o céu, o retângulo e a igreja

A primeira coisa que eu reparei quando olhei para esse pôster, mesmo antes de traçar qualquer linha, foi que o céu me parecia estar inserido dentro da área de um quadrado. Consequentemente isso faria com que a igreja – ou catedral, não sei dizer exatamente o que é, estaria relacionada com esse retângulo no topo.

E até que a hipótese não me pareceu ruim, mas ainda era preciso avançar um pouco mais na análise.

A diagonal e a faixa

Então eu encontrei as diagonais do quadrado e, consequentemente, o centro e vertical do pôster.

E aqui as coisas começaram a ficar interessantes. Repara como faixa vermelha que sai da cintura do personagem acompanha a diagonal que toca a base direita e o topo esquerdo do quadrado.

Na minha opinião essa diagonal tem um papel importante nesse pôster.

Tanto a faixa vermelha como o título do filme são elementos que se relacionam com essa diagonal e são, também, os únicos elementos que ajudam a quebrar a simetria dominante do layout.

Se não fossem esses dois elementos o pôster seria praticamente 100% simétrico. Aliás, ainda existe um terceiro elemento, que é um detalhe, mas também contribui pra essa leitura diagonal, por mais que ele não se relacione diretamente com o quadrado.

E eu me refiro a essa ponta aqui da igreja.

Reparou como o lado esquerdo do pôster é mais claro que o direito?

Isso acaba evidenciando essa ponta. E por mais que seja apenas um detalhe, provavelmente foi intencional e induz uma leitura diagonal que além de servir como uma forma de guiar nosso olhar para o título do filme pode, também, ajudar a trazer equilíbrio e conforto na leitura dessa composição.

O triângulo e as mãos do personagem

E continuando, caso eu insira um triângulo nesse quadrado você nota que as mãos do personagem tocam as laterais do triângulo.

É claro que eu ainda não posso afirmar com muita certeza se houve ou não um grid ou diagrama sendo usado aqui, mas eu começo a enxergar que poderia sim existir uma base para esse layout.

O círculo central, o personagem e o título

E agora, caso eu crie um círculo central com a mesma largura do pôster nós encontramos novas relações bem interessantes aqui.

A começar pelo fato de que o círculo praticamente toca a cabeça do Aguilar, que é o personagem do filme. E a partir da base do círculo eu também encontro uma área retangular, aqui na base direita, que pode ter sido usada como referência para o posicionamento do título.

Esse retângulo tem exatamente ¼ do tamanho do retângulo do topo.

E esse retângulo maior, por sua vez, tem o centro coincidindo exatamente com o topo do círculo.

Apesar disso parecer uma coincidência absurda em um primeiro momento, não é nenhuma surpresa.

Abrindo um parêntese rápido, o que acontece aqui é o seguinte:

Não importa a proporção da área disponível no layout.

Contanto que eu tenha um círculo no centro…

… um quadrado na base, e ambos com a mesma largura do layout…

… a área que sobra acima do quadrado sempre terá o centro coincidindo com o topo do círculo.

E para falar a verdade, apesar de agora parecer bem óbvio, eu não pesquei isso de primeira não, tá? Tive que fazer alguns testes pra entender o que estava rolando aqui.

A linha e o nome do ator

Bom, agora falta encontrar alguma justificativa para o posicionamento nome do ator. Em princípio eu confesso que não esperava encontrar nada, mas olha que curioso.

Caso eu crie um círculo centralizado e com a mesma altura que o retângulo do topo e, na sequência, eu insira um quadrado nesse círculo, eu encontro a linha que pode ter dado origem ao posicionamento escolhido para o nome do ator.

Esse é o resultado da nossa análise:

Caso ela faça algum sentido, essa teria sido um composição bastante simples e intuitiva de criar.

Participe da análise

Será que é possível viajar um pouquinho mais nessa análise?

Sempre dá, né.

E é por isso que, dessa vez, eu termino pedindo a sua participação. E para gente manter sintonia e a certeza de que estamos analisando o mesmo layout, recomendo que faça o download do pôster que utilizei clicando no botão abaixo.

Faça o download do pôster

Então, para incentivar seu olhar analítico eu vou dar algumas dicas do que pode ser observado por você.

Grid ou diagrama

A começar por um novo estudo de grid.

Será que é possível encontrar outro tipo de grid ou diagrama aqui?

Será que a gente encontra outra forma de justificar a posição desses elementos de forma que faça algum sentido, como um grid modular, por exemplo?

Já que nós encontramos subdivisões geométricas bem exatas até que faria sentido um grid modular aqui.

Ou, partindo para outro extremo, você pode argumentar também que essa é uma composição 100% espontânea e que não existe a possibilidade de ter sido usado um grid por aqui.

De qualquer, independentemente da sua resposta, a única coisa que eu peço é que você responda com o mínimo de embasamento, ok?

Cores

E sobre as cores, o que pode ser dito?

Existe alguma relação entre as cores apresentadas aqui?

Nós teríamos, por exemplo, uma composição com cores complementares, análogas ou não existiria nenhuma relação entre elas?

Eu imagino que muito do que nós vemos aqui faz relação direta com o game, mas será que as cores escolhidas possuem intenção de transmitir algum tipo de sentimento ou emoção, por exemplo?

O personagem

E em relação ao personagem, uma das coisas que eu me pergunto é por que ele estaria em formato de cruz, de cabeça para baixo e logo abaixo de uma igreja.

A orientação do pôster

E, por último, você pode brincar com a orientação do pôster e me dizer se enxerga alguma referência diferente.

Caso eu faça um espelhamento vertical, por exemplo, será que existe alguma mensagem oculta que ficou mais clara agora?

Enfim, essas são apenas algumas possibilidades do que você pode analisar. E a intenção aqui é que você viaje o máximo possível, sem se restringir necessariamente às minhas sugestões, ok?

Fica à vontade para compartilhar todas as suas hipóteses aí nos comentários. E, por favor, sem medo de falar alguma besteira, mesmo porque o objetivo aqui não é dizer se você está certo ou errado, mas sim pensar junto.

Recado rápido

E antes de encerrar, apenas um recado rápido.

Muita gente não sabe, mas eu tenho uma participação bastante ativa no podcast do blog Aparelho Elétrico.

Lá o foco é trocar ideias com profissionais independentes, sejam eles designers ou não. Eu sei que tem muita gente por aqui que trabalha por conta própria, então, caso você ainda não conheça, dá uma olhada.

Ou melhor, dá “uma ouvida”, né?

Encerrando

E é isso. Esse foi curtinho.

Caso você tenha gostado e acha que esse conteúdo pode ser útil a alguém, fique à vontade para compartilhar com essa pessoa.

E se você ainda não conhece meu trabalho, saiba que todos os vídeos são legendados e possuem versões transcritas no meu site, waltermattos.com, onde você também encontra outras dicas, reflexões e tutoriais sobre design.

Valeu, um abraço e até a próxima.

Crédito

Pôster do filme: Commingsoon.net

Referências externas

• Aparelho Elétrico
• Trailer do filme Assassin’s Creed

Indicação de leitura

• Design Básico: Layout
• A Psicologia das Cores
• Sistema de Grelhas (Grids)
• Dicionário de Símbolos
• Gestalt do Objeto
• História da Beleza

O post Análise do Design: Pôster Assassin’s Creed foi publicado originalmente em Walter Mattos.

No dia 28 de outubro de 2016 participei da Setup Conference, um evento realizado em Goiânia cujo o intuito era estimular o setor audiovisual através de palestras e workshops realizados por profissionais dos setores de publicidade, vídeo, fotografia e design.

O objetivo da minha palestra era mostrar como um processo aparentemente restritivo pode ser, contraditoriamente, um gerador de possibilidades que nos traz muita liberdade criativa. Se você já está familiarizado com meu trabalho deve imaginar que estou me referindo ao uso da geometria como fundamento ou ferramenta durante um processo criativo.

A conversa teve suas fases filosóficas, históricas e muitos exemplos de grids, proporções e técnicas de composição centenárias utilizadas por artistas e designers ainda hoje. E, claro, não pude deixar de mostrar um pouco sobre como eu utilizo estas restrições no meu trabalho como designer e produtor de conteúdo.

O fato é que eu estava com bastante receio de levar essa temática para fora da minha “zona de conforto”, o Rio de Janeiro. Fiquei muito feliz em perceber que estava sendo recebido de braços abertos e com olhares curiosos. Muitas pessoas, para a minha surpresa, já conheciam o trabalho que venho desenvolvendo com este blog.

Apesar da minha estadia ter sido curta tive tempo de trocar uma ideia rápida com algumas pessoas. Inclusive, tive a oportunidade de conhecer pessoalmente os designers Pedro Panetto e Guilherme Sebastiany, profissionais bastante conhecidos no mercado nacional e que também atuam como produtores de conteúdo.

Ao final da palestra bati um papo maneiro com o pessoal. Conheci professores, alunos e profissionais em diferentes estágios que confiaram em mim para ajudá-los com suas dúvidas e me retribuíram com suas próprias análises sobre o que lhes foi apresentado. Cara, que dia especial!

Isso me fez refletir. Aliás, venho tendo essa reflexão há algum tempo.

Desde que lancei o blog, em 2014, os convites para palestras, eventos e entrevistas começaram a chegar. A verdade é que, ainda hoje, fico muito feliz e surpreso sempre que isso acontece, principalmente porque a grande maioria dos contatos é feita de maneira bastante afetuosa. É difícil me acostumar com as proporções que as coisas tomam na internet. Perceber que as pessoas me conhecem é uma sensação boa e ao mesmo tempo estranha.

Trabalho há muitos anos no silêncio do meu home office, portanto, viver isolado nesse quadrado era minha realidade até pouquíssimo tempo atrás. Aliás, caso tenha se identificado recomendo que ouça este podcast: O impacto do isolamento na vida do freelancer.

Ainda não faço ideia do mundo em que me meti quando decidi criar um blog, mas tenho certeza que essa proximidade com você, leitor, é algo que eu sempre quis e não sabia.

São quase 3 anos de blog e ainda não tenho condições de manter a frequência de postagens que eu gostaria devido ao meu trabalho como designer de marcas. Às vezes chego a lançar um post a cada 2 meses por conta disso. Sigo, sem me preocupar com isso, o caminho oposto ao recomendado para quem pretende ganhar presença online.

Mas o fato é que fico muito emocionado cada vez que percebo a relação que estou criando com as pessoas, mesmo com esse gap entre uma aparição e outra. Com certeza o evento me ajudou a sentir ainda mais forte o peso da responsabilidade que é estar aqui desse lado, mas também ajudou a perceber o quanto vocês ajudam a deixar essa trajetória mais leve através dos conselhos, críticas e, especialmente, do carinho que recebo em troca.

Não sei se daqui a 10 anos eu serei menos designer e mais produtor de conteúdo ou o contrário, mas tenho certeza que enquanto eu conseguir manter esse relacionamento sincero com você estarei feliz. Obrigado por isso.

Valeu, pessoal.

Um abraço e até a próxima.

Curiosidade sobre a imagem da capa

Este cachorrinho é um mimo que ganhei dos organizadores do evento. Segundo o livro que veio com ele seu nome é Cadu e ele representa a amizade. Decidi usá-lo na capa deste artigo pois além dele marcar minha passagem pelo evento é, também, um ótimo representante da gratidão que senti enquanto escrevia esse texto.

O post Como a Setup Conference me fez refletir sobre meu futuro profissional foi publicado originalmente em Walter Mattos.

Neste vídeo faço uma análise completa sobre o design do pôster do filme Dr. Strange, ou Dr. Estranho.

A análise é dividida em duas partes, semiótica e análise estrutural.

Na primeira etapa você verá estudo de cores e a busca por possíveis mensagens e significados transmitidos pelos elementos do pôster, como as torres, o círculo central e o próprio personagem. Na sequência tento fazer o processo inverso da criação, analisando a estrutura de forma minuciosa e levantando deduções que envolvem proporção áurea e relações encontradas entre os próprios elementos do layout.

Obs: ao final do post você verá links para livros e outras referências que podem ajudar aos interessados neste tipo de análise.

Vamos lá?

Análise semiótica do design

Fazendo uma primeira leitura rápida desse pôster eu vejo um homem, um feiticeiro, atravessando uma espécie de portal.

Esse portal, segundo o próprio background do personagem, permite que ele viagem entre dimensões. E isso está muito bem representado aqui através de repetições que parecem espelhos de um mesmo universo.

Esse é o básico para a gente poder começar uma análise com o mínimo de compreensão sobre a proposta desse pôster. 

As complementares laranja e azul

Uma das coisas que me chamou bastante atenção foi a predominância do laranja e azul, que são cores opostas ou complementares no círculo cromático.

Esse é o tipo de combinação que oferece o melhor ou maior contraste possível e costuma ser naturalmente agradável aos olhos, quando usada de maneira equilibrada.

No caso desse pôster você nota que eles utilizam o azul um pouco dessaturado e preenchendo a maior parte do layout. Ele é o que podemos chamar de cor dominante.

Já o laranja atua como cor de destaque. Ele é mais concentrado em um único ponto, é bastante saturado e iluminado e tem o papel de guiar o olhar do espectador para o que realmente interessa, o personagem.

E essa diferença de intensidade entre as cores é uma maneira bastante eficiente de trabalhar com as complementares de maneira equilibrada. Como elas são naturalmente contrastantes, usá-las com a mesma intensidade e vibração pode causar um incômodo visual, principalmente quando envolve texto.

Por isso, apenas reforçando, é aconselhável que ao usar cores complementares você tente diferenciar a intensidade de uma delas para equilibrar a composição e contribuir para uma boa leitura.

E basta a gente olhar alguns fragmentos do trailer desse filme para confirmar essa prática.

Repara como nesses exemplos o laranja recebe mais destaque o azul.

Inclusive, muitas vezes eles exageram na saturação do tom de pele para deixar o laranja mais presente.

Já nesse outro exemplo o laranja foi escurecido em alguns pontos e, dessa vez, é o azul que atua como cor de destaque.

Possíveis significados das cores

E partindo para possíveis sensações ou significados é possível encontrar sentido para essas cores dentro do contexto apresentado aqui.

Laranja

O laranja, nesse caso, tem uma representatividade bem direta e óbvia, na minha opinião. Ele se relaciona muito bem aqui com as ideias de energia e poder, tanto por conta do portal como do próprio personagem.

Mas, partindo para um caminho um pouco além do óbvio e com base no background do personagem, novamente, ele pode representar também as ideias de vitalidade e ganho de conhecimento, que é um processo pelo qual ele passa antes de se tornar um feiticeiro.

Azul

Já o azul se aplica dentro de um contexto um pouco mais amplo.

Eu poderia dizer que ele se relaciona simbolicamente com as ideias de infinito, humanidade e, principalmente harmonia.

O azul também é conhecido como a cor do espelho e cor da irrealidade ou super-realidade. Todos contextos que fazem bastante sentido, principalmente depois daquela primeira leitura que nós fizemos no início.

Simetria

Um outro fator que me chamou bastante atenção nesse pôster foi a simetria. Esse é um design muito bem dividido em 4 blocos praticamente iguais, tanto na horizontal como na vertical.

Eu acredito que, como significado, isso pode sugerir que apesar do aparente caos apresentado existe um equilíbrio, uma ordem acontecendo aqui.

Em momento algum eu tenho a sensação de desordem ou destruição, por exemplo.

O personagem

Sem dúvida alguma ele é o principal elemento desse cenário. O que faz dele, em termos técnicos, o elemento focal dessa composição.

Ele é uma figura centralizada e vertical, o que ajuda a reforçar a simetria da composição e sugere algumas simbologias associadas à essas características, como estabilidade, nobreza ou alguém de grande importância, e confiança.

Porém, ele é pequeno em relação ao pôster, o que pode significar que ele ainda está chegando e não domina esse ambiente, mas ao mesmo tempo ele está andando em direção ao espectador. Ou seja, de maneira bastante subliminar isso pode significar que está rolando uma evolução desse personagem. Ele está crescendo, evoluindo.

Eu confesso que tenho minhas suspeitas em relação ao fato de ele estar atravessando o portal com o pé esquerdo. Não sei se isso tem algum valor simbólico ou se está relacionado a superstição de alguma forma. Mas como Hollywood tem o costume de deixar mensagens subliminares e ele é o único personagem apresentado por aqui, qualquer característica pode representar algum sinal. Ainda mais se tratando de um filme que tem como proposta apresentar o místico, o oculto.

Mas enquanto o filme não sai, a gente só pode especular. Então vamos lá.

O círculo

Agora vamos ao item que talvez seja a primeira coisa que alguém repara ao olhar para este pôster, mesmo que de forma inconsciente. O círculo laranja ou o portal.

Ele é o principal influenciador do elemento focal nessa composição. Você só olha para o personagem porque ele existe. E isso não ocorre apenas pelo contraste de cores, como também pelo próprio fato de ele ser um objeto geométrico e o fato de ele enquadrar o personagem, de certa forma.

Essas são algumas das várias características que definem um influenciador do elemento focal. E, aqui, elas são muito bem usadas em um único elemento.

Eu não sei se ele tem a intenção de transmitir outra coisa além do próprio fato de ser um portal, mas essa estrutura também me remete vagamente a ideia de um olho.

Inclusive, esse portal é praticamente uma cópia do cordão que ele leva no peito, chamado exatamente de Olho de Agamotto.

E somando isso ao fato de ele estar atravessando o portal, a gente pode interpretar como um sinal de que ele já não é mais um ser sob vigilância, mas sim aquele que agora enxerga tudo.

As 4 torres

Agora vamos dar uma olhada rápida nos 4 cantos do pôster, mais especificamente nas 4 torres.

Para mim elas representam duas situações de importância nessa composição.

A primeira delas é o fato de que elas também são influenciadoras do elemento focal, assim como o círculo. Além do fato de elas também terem contraste com o fundo elas estão apontando diretamente para o personagem, atuando como uma espécie de guia, ou guias subliminares.

Ou seja, eu olho para elas e, logo na sequência, meus olhos são empurrados de volta para o personagem.

Uma outra característica que me chama atenção é o fato de que, justamente por elas estarem apontando para o personagem, elas podem significar ou representar algum tipo de ameaça.

Enquanto o personagem parece ser um alvo dentro de um círculo, elas parecem armas apontadas para ele.

Caso isso tenha algum fundamento eu não saberia dizer se elas representam o local onde acontecerá alguma ameaça no filme ou se elas estão organizadas dessa forma apenas para fazer uma representação conceitual de perigo.

Plano de fundo 

Agora vamos ao elemento que eu considero mais interessante nessa composição, o plano de fundo.

A gente tem essa área urbana que lembra muito um caleidoscópio e, assim como os outros elementos da composição, atua como um espelho. E esse espelho tem como base uma única matriz que se repete 8 vezes dando um giro completo no pôster.

O curioso é que se você reparar bem, essa estrutura é visivelmente uma estrela de 8 pontas.

E dentro desse contexto até que é possível encontrar algumas simbologias que se encaixariam muito bem aqui. Mas eu decidi escolher apenas duas, começando pela Rosa dos Ventos.

Rosa dos Ventos

Rosa dos Ventos é o nome que se dá a imagem que nós vemos dentro das bússolas e que tem como função orientar na localização.

E dentro de um contexto simbólico ela também pode representar luz, sorte e a necessidade de encontrar um caminho, uma direção.

Traçando novamente um paralelo com o background personagem, essas são características que fazem sentido. De forma bem resumida, o Dr. Strange era uma pessoa normal, um médico, que sofreu um acidente e passou por uma transformação, uma mudança de rumo, onde ele recebeu um treinamento e se tornou o mago supremo que nós vemos nesse pôster.

E indo além a gente pode fazer uma comparação com os próprios poderes que ele adquire quando se transforma. Entre seus poderes mais conhecidos estão o teletransporte, a viagem no tempo e a manipulação de dimensões.

E essas são características que certamente a gente pode correlacionar com o que está sendo apresentado nesse pôster, principalmente se a ideia de Rosa dos Ventos fizer algum sentido.

Nesse caso ela atuaria como uma representação simbólica ao fato de não existirem barreiras espaciais ou temporais para esse personagem. Ele simplesmente pode ir para onde e quando quiser.

Estrela do Caos

E existe uma outra estrela de 8 pontas que também se enquadra como uma possível simbologia aqui e, dessa vez, dentro de um contexto mais místico, a Estrela do Caos.

Ela é formada justamente por 8 pontas e um círculo no meio. Algo que de cara lembra o que nós vemos aqui no pôster.

Ela representa o vazio do cosmos, o universo e também faz relação com alteração do estado de consciência e alteração de realidade.

Seja isso proposital ou coincidência, o curioso é que estas também são características que se relacionam com esse personagem.

Análise estrutural do design

Agora vamos deixar a análise semiótica de lado e partir para uma análise mais focada na estrutura do design.

O quadrado e os ângulos de 45º

E eu começo voltando para o ponto onde eu dividi o pôster em 8 partes com base no plano de fundo.

Assim que eu encontrei essa divisão eu percebi que as diagonais estavam inclinadas em um ângulo de 45 graus. E isso, consequentemente, significa que no ponto onde elas encontram as extremidades do pôster eu tenho um quadrado.

De primeira eu reparei que esse quadrado poderia ter sido usado como referência para os tamanhos das 4 torres.

E já que existe a possibilidade desse quadrado ter sido usado como referência para as torres, nada impede que ele tenha ajudado a definir outras relações e proporções dos objetos desse layout.

Então eu fui além e descobri uma relação muito forte com a Proporção Áurea.

Proporção Áurea

Olha o que acontece quando eu divido esse quadrado por 1, 618, que para quem não conhece é o número que corresponde à Proporção Áurea.

O resultado é esse quadrado menor no qual as quinas coincidem exatamente com essas 4 estruturas de metal que avançam por trás do portal.

E, provavelmente, esse quadrado também foi usado como base para definir a altura e posicionamento do personagem.

E além disso, caso eu estique as laterais desse quadrado menor até elas tocarem o maior, o que eu tenho é um retângulo áureo que se alinha perfeitamente com as pontas das 4 torres.

E agora, caso eu volte com a estrela de 8 pontas, você nota que além de nós termos as arestas coincidindo com a imagem do fundo, como nós já havíamos constatado, os vértices internos dessa estrela também tocam o quadrado menor de maneira exata.

Então a gente tem bastante argumento para deduzir que, pelo menos até aqui, alguma estrutura foi usada para criar essa composição.

E para finalizar, já que eu estava nesse caminho, eu inseri uma guia de composição com base no retângulo áureo e multipliquei ela 4 vezes.

E avançando mais um pouco no processo você nota que isso foi o suficiente para encontrar outros pontos coincidentes que, no final das contas, podem não ter sido tanta coincidência assim.

Aliás, é bem possível que a gente tenha acabado de analisar um pôster criado com base em um grid composto.

Encerrando

E é isso, pessoal.

Espero que você tenha gostado e que esse post, assim como os outros aqui do site, ajude a enxergar que design não é apenas forma, mas também é fundamento e mensagem. Principalmente mensagem, por mais que isso dependa de interpretação.

Nós, como designers, temos não só o papel e obrigação de saber transmitir mensagens como o de saber interpretá-las.

Eu não quero que você concorde comigo. O meu objetivo aqui é apenas estimular você a se interessar cada vez mais sobre design, seja no campo da ferramenta, da teoria ou das reflexões e viagens que eu compartilho com você para que você possa fazer as suas por conta própria.

E eu realmente espero estar no caminho certo.

Valeu. Um abraço e até a próxima.

Indicação de leitura

• Geometria do Design
• A Psicologia das Cores
• Grid Systems
• Dicionário de Símbolos
• Gestalt do Objeto
• Elementos da Semiótica Aplicados ao Design

Referências externas

• Understanding Composition
• Understanding Colors
• 48 linhas para designers guardarem na gaveta
• Cores laranja e azul no cinema
• Dicionário de símbolos online
• Análise do trailer do filme Dr. Strange
• Sobre o Dr. Strange (Marvel)
• Trailer do filme Dr. Strange

O post Análise do Design: Pôster Dr. Strange foi publicado originalmente em Walter Mattos.