Criado por Alex Lende

A partir do WordPress 5.8, você pode colorir sua imagem e cobrir blocos com filtros duotônicos! Duotone pode adicionar um toque de cor aos seus designs e estilizar suas imagens para se integrar bem aos seus temas.

Filtros? Gosta no Instagram?

O Duotone não funciona exatamente da mesma maneira que os filtros do Instagram. Enquanto os filtros do Instagram fazem ajustes de cores (níveis/curvas de cores e às vezes uma vinheta para os editores de fotos entre nós), os novos filtros duotônicos substituem inteiramente as cores de suas imagens.

Foto de Charles Pragnell .

Você pode pensar no efeito duotônico como um filtro preto e branco, mas em vez de as sombras serem pretas e os realces serem brancos, você escolhe suas próprias cores para as sombras e realces.

Por exemplo, um filtro de tons de cinza pode ser criado selecionando preto e branco como cores de sombra/realce e um filtro sépia escolhendo marrom e castanho.

Cores análogas podem adicionar um efeito sutil e funcionar bem para fundos de capa em que o texto sobreposto ainda precisa se destacar.

Efeitos muito mais vibrantes e interessantes podem ser feitos com cores complementares.

Como adiciono filtro duotônico?

O efeito duotônico funciona melhor em imagens de alto contraste, portanto, comece com uma imagem com muitas áreas grandes escuras e claras. Na barra de ferramentas do bloco, use o botão de filtro e escolha uma predefinição:

Você também pode escolher cores da paleta do seu tema ou uma cor personalizada de sua preferência.

Além do bloco de imagem, o tom duplo pode ser aplicado a imagens e vídeo no bloco de capa.

Duotônico

Isso substituirá as imagens na minha biblioteca de mídia?

Imagens e vídeos em sua biblioteca de mídia permanecerão inalterados. O efeito duotônico funciona usando filtros SVG e os propriedade do filtro CSS , para que a imagem ou vídeo nunca seja modificado em sua biblioteca. Por um lado, isso significa que você pode aplicar um filtro a uma imagem vinculada que não existe em sua biblioteca de mídia. Por outro lado, isso significa que o filtro não aparecerá em feeds RSS ou locais que usam o URL da imagem diretamente.

Posso adicionar cores duotônicas a blocos ou temas que eu desenvolvo?

A API para adicionar cores duotônicas aos blocos é experimental no Gutenberg v10.6. Ainda assim, a documentação para usá-lo em seus próprios blocos pode ser encontrada e será atualizada em Suporta Cor no Manual do Editor de Bloco. Os temas podem adicionar predefinições duotônicas com theme.json. Mais informações podem ser encontradas em Configurações globais e predefinições de estilo no Manual do Editor de Bloco.

Experimente agora usando o plugin Gutenberg

O recurso duotônico foi lançado na versão 10.6 do plugin Gutenberg, então você pode experimentá-lo agora, antes do lançamento do WordPress 5.8 em julho.


Agradecimentos a @joen e @ mkaz para obter assistência para escrever e revisar esta postagem.