Como criar uma imagem duotônica no Photoshop

Enquanto você está trabalhando no design do seu próximo site, há um tipo comum de plano de fundo que você pode estar considerando: fotografia. Embora essa tendência não seja necessariamente única, com certeza é eficaz para definir uma cena e mergulhar o usuário no ambiente de um site. “Se você está procurando uma maneira de usar a fotografia, mas com um pouco mais de entusiasmo, você sempre pode tentar uma imagem duotônica – ambas são interessantes de se ver e fáceis de criar! ”

Antes de aprendermos a criar uma imagem duotônica no Photoshop, vamos mergulhar um pouco mais nessa tendência de design.

O que é uma imagem duotônica?

Em sua essência, um duotônico é simplesmente uma imagem feita de duas cores. Você provavelmente já os viu antes em campanhas como o 2015 Year in Review do Spotify.

Isso está se tornando cada vez mais popular, especialmente entre agências e marcas menores. Os efeitos Duotone são uma ótima maneira de incorporar e reforçar sua marca e suas cores em todo o seu trabalho e seu site. Para lhe dar um pouco de inspiração, LPK mostra um exemplo maravilhoso de como usar isso.

Se você estiver interessado em experimentar essa técnica, deve ser estratégico na foto que escolher manipular. Embora tecnicamente você possa aplicar o efeito duotônico a qualquer foto, ele ficará melhor em uma imagem com muito contraste. Eu também recomendo usar uma imagem com um fundo sólido, de preferência branco - isso facilita o estabelecimento da cor base que você está procurando!

Se você tiver acesso a um estúdio e estiver interessado em tirar fotos personalizadas, lembre-se dessas dicas enquanto monta o cenário. Se você estiver trabalhando com conteúdo existente, sempre poderá manipular a foto primeiro para aumentar o contraste ou alterar a cor do plano de fundo.

• Se você estiver interessado em participar do curso e baixar os recursos gratuitos do Photoshop, vá para esta seção!
• Se você já se inscreveu no curso, clique aqui para ir direto para o tutorial do modelo!

No restante do tutorial, abordarei dois métodos que você pode usar para criar manualmente uma imagem duotônica no Photoshop. A primeira é a opção integrada do Photoshop (funciona bem, mas não a minha favorita) e a segunda usa um mapa de gradiente (meu método preferido, a menos que você esteja usando nossa ação gratuita, é claro!).

Quando estiver pronto, carregue sua imagem no Photoshop e crie uma camada duplicada da foto. Ao editar a duplicata (em vez da camada inferior original), você sempre terá uma versão não editada da foto para usar.

Pronto para criar uma imagem duotônica no Photoshop? Vamos começar.

Como usar a opção padrão de dois tons do Photoshop

1. Converta a imagem para tons de cinza de 8 bits

Para usar a opção de tom duplo que está embutida no Photoshop, primeiro você terá que converter a imagem em uma escala de cinza de 8 bits. Selecione a cópia da sua foto e vá até Image> Mode> Grayscale. Verifique também se a opção 8 bits/canal está selecionada no mesmo menu Modo.

Quando você seleciona esta opção, algumas notificações vão aparecer. A primeira pergunta se você deseja achatar a imagem ou mesclar as camadas antes de alterar o modo de cor. Se você tiver muitas camadas, a mudança de cor pode afetar como as coisas são exibidas (nesse caso, o achatamento pode ser útil para preservar seu trabalho), mas, nesse caso, não se preocupe em achatar a imagem. Se você quiser a cópia original, não mescle suas camadas.

A próxima notificação pergunta se você deseja descartar as informações de cores. Você terá que fazer isso para usar a opção padrão de dois tons, então vá em frente e clique em “Descartar”.

2. Converta a imagem para um tom duplo

Quando o modo de imagem estiver em escala de cinza de 8 bits, você poderá usar a opção padrão de tom duplo no Photoshop. Selecione a camada e vá para Imagem > Modo > Duotônico.

3. Selecione suas cores

Quando a imagem estiver no modo duotônico, você poderá começar a selecionar suas cores. A parte boa é que, assim que você selecionar uma nova cor, a imagem será atualizada para que você possa ver como as coisas ficam (desde que a caixa de seleção Visualizar esteja marcada). Além disso, o processo começa a ficar um pouco desajeitado. Você tecnicamente pode ajustar as curvas para cada cor, mas a imagem não é atualizada em tempo real, tornando um pouco difícil ver o que está acontecendo e resultando em muitas idas e vindas. Brinque com as cores e configurações até encontrar o efeito desejado.

Eu sugiro brincar com essas configurações por um minuto, apenas para ter uma ideia delas, mas quando você estiver pronto, vamos passar para o segundo método para criar duotones no Photoshop.

Como usar um mapa de gradiente para criar um tom duplo

1. Aplique um mapa de gradiente

Para este método, você não precisará se preocupar em alterar a imagem ou escolher um modo de cor específico. Claro, se você quiser editar alguma coisa, vá em frente, mas a foto funcionará bem do jeito que está. Quando estiver pronto, selecione a cópia da sua imagem e vá até Image > Adjustments > Gradient Map.

Dependendo de sua configuração padrão, esta configuração irá sobrepor a imagem com um gradiente para um mapeamento em tons de cinza. Se o padrão não for preto e branco, clique no menu suspenso e selecione essa opção. Se você seguiu o primeiro método, verá que já estamos na metade do caminho para criar nosso duotônico.

Dica profissional: Veja a caixa de seleção ao lado de Reverter? Ao clicar nele, você inverterá as cores da foto. Para este tutorial, deixaremos desmarcado, mas se quisermos que o plano de fundo seja mais escuro que o assunto, essa opção pode ajudá-lo a mudar as coisas.

2. Escolha suas cores

Ao clicar na barra de gradiente, você abrirá o Editor de gradiente em uma nova janela. Aqui você pode selecionar suas cores e ajustar como elas são exibidas na imagem.

Como você pode ver, as imagens finais parecem um pouco diferentes umas das outras, mas ambas resultam em maravilhosos duotones. Prefiro usar um Gradient Map simplesmente porque é um pouco mais fácil controlar a intensidade das cores e para onde vão os tons escuros e claros, mas ambos os métodos são fáceis de usar.

Participe do nosso curso 2019 Web Design Trends para uma ação gratuita do Photoshop em dois tons!

Se você está procurando um recurso rápido e fácil para experimentar essa tendência, você pode obter os arquivos deste tutorial, incluindo uma ação com opções de mapa de gradiente pré-criadas! Cadastre-se no formulário abaixo para baixar o arquivo, ou clique aqui para mais detalhes sobre o curso.

[optin-monster-shortcode id=”dktout15rz4zcbcifnsl”]

Obrigado por participar do nosso curso de tendências de design!

Primeiro, baixe a ação do Photoshop aqui.

Como usar o Duotoner

Instale a ação

Depois de baixar a ação, clique duas vezes no arquivo para instalá-lo. Abra a imagem que deseja usar no Photoshop e, em seguida, abra a janela Ações.

Para navegar até a janela Ações , selecione Janela > Ações ou mantenha pressionada a tecla Shift + F9 .

Depois de abrir a janela Ações, selecione a camada de imagem à qual deseja aplicar o efeito duotônico.

Selecione e reproduza a ação

Clique no menu suspenso na pasta “Flywheel – Glitch-a-tron”. Agora, selecione “Glitch-a-tron – Select and hit play” e pressione o botão play do triângulo na parte inferior da janela.

Depois de apertar o play, você verá um monte de camadas, cada uma com um esquema de cores duotone diferente! Para alternar, tudo o que você precisa fazer é tornar a camada desejada visível.

Nota: Se você tiver mais de uma camada de dois tons visível, as cores se misturarão e você poderá começar a perder alguns detalhes da sua foto. Para manter as coisas nítidas, certifique-se de ter apenas uma camada visível de cada vez (ou sinta-se à vontade para experimentar sobrepondo os dois tons para um efeito totalmente diferente!).

Bônus: redefina sua imagem em um piscar de olhos

Caso você queira voltar atrás, a ação cria automaticamente uma captura de tela que permite voltar à sua imagem antes da ação ser aplicada.

Navegue até a janela Histórico selecionando Janela > Histórico . Role até o topo e clique em “Snapshot”. Isso redefine tudo, então você está pronto para ir!

O que você acha do duotone? Você acha que eles são uma forte tendência de design ou prefere imagens coloridas? Compartilhe seus pensamentos abaixo!

Baixe esses arquivos gratuitos do Photoshop

Baixe os modelos gratuitamente abaixo!

Não sabe o que ler a seguir? Confira esta lista:

• 13 tendências de web design para 2020
• Como otimizar imagens para a web: um guia passo a passo para melhorar o desempenho do site
• Como usar técnicas de recorte e mascaramento CSS e SVG
• Como adicionar um botão back-to-top pegajoso ao seu site