Converter imagem em máscara


9

Tenho uma imagem de fundo verde com algumas sombras. Gostaria de usá-lo como uma máscara para poder colocá-lo em segundo plano com qualquer cor (por exemplo, vermelho ou rosa) e obter o mesmo estilo de sombras.

Tentei convertê-lo em escala de cinza e alterar a opacidade para 20%, mas isso resultou em uma imagem muito mais escura.

Estou usando isso em uma página da web onde o administrador pode definir a cor do modelo. Então, eu estou usando algo parecido com isto em CSS:

background: #557d0d url("img/background.png") center center;

insira a descrição da imagem aqui

Usando o Gimp 2.8.6 no Ubuntu.


Supondo que um hue-rotatefiltro CSS3 para alterar a cor não seja uma opção? Consulte stackoverflow.com/questions/17721960/… ou stackoverflow.com/questions/12546499/…
Takkat

Respostas:


5

Você pode dessaturar a imagem com Colors > Desaturate.... Em seguida, use Colors > Color to Alpha...para eliminar o cinza, o que o torna mais escuro ( #808080).

Defina a opacidade para 40% e deve funcionar.

Acabei de fazer um pequeno teste com um site que criei: insira a descrição da imagem aqui


3

Não é possível replicar exatamente a imagem usando apenas uma camada de escala de cinza mascarada em um plano de fundo de cor sólida, pois o matiz da cor verde também varia ao longo do gradiente vertical.

Você poderia chegar muito perto apenas escolhendo um dos tons de verde médio a partir do meio da imagem com a ferramenta conta-gotas, maximizando a sua saturação e valor e transformar essa cor transparente usando a Camada → Transparência → Cor para Alpha ... ferramenta. No entanto, isso deixaria sua camada com projeções de cores na parte superior e inferior, o que você pode não querer.

Uma solução melhor pode ser decompor a imagem em matiz, saturação e valor (HSV), descartar o canal de matiz e reconstruir os canais de saturação e valor em uma máscara de escala de cinza que pode ser colocada sobre qualquer cor saturada pura para replicar a saturação e valor da imagem original com o novo matiz.

Uma maneira de fazer isso seria:

  1. Use a ferramenta Cores → Componentes → Decompor ... para decompor a imagem em camadas usando o modo HSV.

  2. Exclua a camada de matiz. Nós não vamos usá-lo.

  3. Selecione a camada de saturação, abra a caixa de diálogo Camada → Máscara → Adicionar máscara de camada ... , selecione o modo "Cópia em escala de cinza da camada" e marque a caixa de seleção "Inverter máscara".

  4. Repita a etapa 3 para a camada de valor também.

  5. Usando a ferramenta Preencher balde (no modo "Preencher seleção inteira"), preencha a camada de valor ( não a máscara!) Com todo preto e a camada de saturação com todo branco.

  6. Mova a camada de valor acima da camada de saturação na pilha.

  7. Opcionalmente, mescle as camadas com Imagem → Mesclar camadas visíveis ... ou com Camadas → Mesclar para baixo .

A imagem semitransparente em escala de cinza resultante deve ficar assim:

Imagem PNG semitransparente
Clique para fazer o download / visualizar em tamanho real.

O truque é que, após as etapas 3 a 5:

  • a camada "saturação" será branca pura onde a cor original estava 0% saturada e transparente onde está 100% saturada, e
  • a camada "valor" será preto puro onde a cor original possui 0% e transparente onde 100%.

Colocar essas duas camadas (ou sua combinação mesclada) em cima de um fundo de cor saturada pura e replica o processo de conversão de uma cor HSV em RGB: você começa com a cor saturada pura da tonalidade correta e mistura branco o suficiente para obter o desejado saturação e, em seguida, misture preto suficiente para obter o valor desejado.

Veja como é a imagem resultante em vários fundos coloridos:

Fundo verde (# 83ff00) Fundo azul (# 00aeff) Plano de fundo laranja (# ffa200) Fundo vermelho (# ff002a)
Cores: verde ( #83ff00), azul ( #00aeff), laranja ( #ffa200), vermelho ( #ff002a).


2

No The Gimp, você pode fazer essencialmente a mesma coisa que a resposta do photoshop, usando cores para alfa . Eu recomendaria ainda dessaturar e, em seguida, definir branco como alfa, caso você tenha mais de uma cor. Parece que há alguma variação de azul / amarelo. Os principais passos são:

  1. imagem dessaturada para que você tenha uma imagem em escala de cinza
  2. defina branco (você pode inserir #FFFFFF para branco no seletor de cores) como alfa
  3. salve como png para manter a transparência

Observe que a conversão para escala de cinza em vez de dessaturação pode resultar em uma imagem sem canal alfa e você pode adicioná-la novamente usando a caixa de diálogo de camadas . Você também pode precisar fazer isso se o arquivo original que você abriu não tiver canal alfa.
Hurtstotouchfire 5/05

1
  • Abra o painel de canais.

insira a descrição da imagem aqui

  • Decida qual canal fornecerá o grau de contraste que você está procurando.

Método 1:

  • Selecione Image > Calculationse use o canal que você escolheu como Fonte 1, o mesmo canal ou "Cinza" como Fonte 2 e "Normal" como o Modo de mesclagem. Escolha "Novo documento" como destino.

insira a descrição da imagem aqui

  • Altere o modo do novo documento para RGB ou escala de cinza e salve como png ou jpeg.

Método 2:

  • Ctl / Cmd clique na miniatura do canal que você escolheu.

  • Edit > Copy ou Ctl / Cmd-C

  • File > New, aceite as dimensões Edit > Pasteou Ctl / Cmd-V

  • Exclua a camada de fundo.

  • Image > Mode > RGB

  • Salvar como um png de 24 bits com transparência.

Você pode usar qualquer uma das imagens resultantes como uma sobreposição ou como um canal Alpha sempre que necessário.


Este parece ser o Photoshop, a OP pediu uma solução GIMP.
Kelunik

-2

Clique duas vezes em Camada; uma caixa de estilo Camada será exibida; no lado esquerdo, localize e selecione Sobreposição de gradiente e altere a cor do Gradiente de acordo com sua necessidade; clique em OK; em seguida, na caixa de sobreposição Gradiente, altere o estilo para linear e altere o ângulo e a escala de acordo com sua necessidade.


Segunda vez que você adicionou o link da sua empresa. Isso não cheira a spam, isso é spam!
Mensch
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.