Sketch: Blending Modes 101 — Versão em Português

Mauricio Uehara
Design + Sketch
Published in
3 min readJun 7, 2016

PS: If you're not feeling like practicing your Portuguese skills, English version here.

Esse texto é para você que, assim como eu, usa blending modes na base da tentativa e erro. Recentemente decidi aprender um pouco mais sobre essa técnica, e consegui entender um pouco mais de seu funcionamento, pelo menos os que mais uso no dia-a-dia: Multiply, Screen, Lighten e Overlay.

Multiply

Ficou bem famoso ultimamente através das fotografias do Spotify. Seu funcionamento, como o próprio nome diz, consiste em multiplicar as cores de cada layer. Para cada um dos canais RGB de cada pixel na tela existe um valor numérico de 0 a 255 que indica o quanto de luminosidade na cor especificada esse pixel terá. Então um vermelho bem vermelho terá 255 no canal Red e 0(zero) nos canais Blue e Green.

Ao aplicar o Multiply em duas layers, cada pixel terá o seu valor convertido para uma escala de 1 a 0 que é então, multiplicado entre si. Algumas observações práticas podem ser tiradas daí:

  • O resultado será sempre uma imagem mais escura;
  • O preto possui valor zero em todos os canais, ou seja, qualquer cor multiplicada por preto produzirá preto;
  • O branco possui valor 1 em todos os canais, ou seja, qualquer cor será mantida ao ser multiplicada por branco.

Com isso, se você tiver que aplicar rapidamente uma imagem que está sem o fundo transparente e não quiser se aventurar com o magic wand, o Multiply pode te ajudar a aplicá-lo de uma forma minimamente satisfatório.

Blending mode normal à esquerda e multiply à direita
Foto original à esquerda, camada com background #FF465D em Multiply à direita

Screen

O resultado visual do Screen é o oposto do Multiply, ou seja, se tivermos um elemento que seja branco com fundo preto, podemos usar esse blending mode para aplicá-lo rapidamente:

Blending mode Normal à esquerda e Screen à direita

Lighten

Como vimos o Multiply nos ajuda a obter um estilo à la Spotify, porém ainda não está exatamente parecido, ainda falta uma segunda cor. Entra em ação o Lighten.

Esse blending mode compara as informações de cores de cada pixel das duas layers e registra o mais claro. Ou seja, podemos usá-lo para aplicar uma camada de cor apenas em nosso perfil escuro da foto, desde que essa cor seja mais escura que o nosso vermelho utilizado ela só será aplicada nas áreas mais escuras:

À direita temos nossa foto com uma camada #103661 em Lighten.

Overlay

Por último, o Overlay que é um misto do Multiply e do Screen. Ele basicamente aplica o Multiply para os pixels mais escuros e o Screen para os mais claros. Com isso, o resultado obtido é um aumento do contraste da imagem:

Se aplicarmos uma camada de #000 em Overlay em nossa imagem, perceba o aumento do contraste.

Outros materiais

Se vocês quiserem se aprofundar mais nesse tema, deixo aqui alguns links interessantes:

Gostaram do conteúdo? Ajude a divulgar recomendando através do coração abaixo! Muito obrigado :)

--

--