将图像转换为蒙版

平面设计 瘸子 透明度 css 面具
2022-01-09 22:40:35

我有一张带有一些阴影的绿色背景图片。我想将它用作蒙版,这样我就可以将它放在任何颜色(例如红色或粉红色)的背景上,并获得相同风格的阴影。

我尝试将其转换为灰度并将不透明度更改为 20%,但这导致图像更暗。

我在管理员可以设置模板颜色的网页上使用它。然后我在 CSS 中使用这样的东西:

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

在此处输入图像描述

在 Ubuntu 上使用 Gimp 2.8.6。

4个回答

您可以使用 去饱和图像Colors > Desaturate...接下来,使用Colors > Color to Alpha...消除使其变暗的灰色 ( #808080)。

将不透明度设置为 40% 就可以了。

我刚刚对我创建的网站做了一个小测试: 在此处输入图像描述

您不能仅使用纯色背景上的蒙版灰度图层来精确复制图像,因为绿色的色调也会随着垂直渐变而变化。

您只需使用吸管工具从图像中间选择一种中等绿色调,最大化其饱和度和值并使用图层 → 透明度 → 颜色到 Alpha...工具将该颜色变为透明,就可以非常接近。但是,这会使您的图层在顶部和底部出现色偏,这是您可能不想要的。

更好的解决方案可能是将图像分解为色调、饱和度和值(HSV),丢弃色调通道并将饱和度和值通道重建为灰度蒙版,该蒙版可以放置在任何纯饱和颜色之上以复制饱和度和具有新色调的原始图像的值。

一种方法是:

  1. 使用颜色 → 组件 → 分解...工具使用 HSV 模式将图像分解成层。

  2. 删除色相层。我们不会使用它。

  3. 选择饱和图层,打开图层→蒙版→添加图层蒙版...对话框,选择“图层的灰度副本”模式并选中“反转蒙版”复选框。

  4. 对值层也重复步骤 3。

  5. 使用桶填充工具(在“填充整个选择”模式下),用全黑填充值层(不是它的蒙版!),用全白填充饱和层。

  6. 将值层移动到堆栈中饱和层的上方。

  7. 或者,使用Image → Merge Visible Layers...或使用Layers → Merge Down将图层合并在一起。

生成的半透明灰度图像应如下所示:

半透明PNG图像
点击下载/查看全尺寸。

诀窍是,在步骤 3-5 之后:

  • “饱和度”层在原始颜色饱和度为 0% 时为纯白色,在饱和度为 100% 时为透明,并且
  • “值”层将是纯黑色,原始颜色的值为 0%,透明的值为 100%。

将这两个图层(或它们合并的组合)放在纯饱和颜色背景之上,然后复制将 HSV 颜色转换为 RGB 的过程:您从正确色调的纯饱和颜色开始,混合足够的白色以获得所需的颜色饱和度,然后混合足够的黑色以获得所需的值。

这是生成的图像在各种彩色背景上的样子:

绿色背景 (#83ff00) 蓝色背景 (#00aeff​​) 橙色背景 (#ffa200) 红色背景 (#ff002a)
颜色:绿色 ( #83ff00)、蓝色 ( #00aeff)、橙色 ( #ffa200)、红色 ( #ff002a)。

在 The Gimp 中,您可以使用color 到 alpha来做与 Photoshop 答案基本相同的事情我建议仍然去饱和,然后将白色设置为 alpha,以防你有不止一种颜色。看起来有一些蓝色/黄色的变化。关键步骤是:

  1. 去饱和图像,以便您拥有灰度图像
  2. 将白色(您可以在颜色选择器中为白色输入#FFFFFF)设置为 alpha
  3. 另存为 png 以保持透明度
  • 打开频道面板。

在此处输入图像描述

  • 确定哪个频道可以为您提供所需的对比度。

方法一:

  • 选择Image > Calculations并使用您选择的通道作为源 1,相同的通道或“灰色”作为源 2,“正常”作为混合模式。选择“新文档”作为目的地。

在此处输入图像描述

  • 将新文档的模式更改为 RGB 或灰度并另存为 png 或 jpeg。

方法二:

  • Ctl/Cmd 并单击您选择的频道的缩略图。

  • Edit > Copy或 Ctl/Cmd-C

  • File > New,接受尺寸,Edit > Paste或 Ctl/Cmd-V

  • 删除背景层。

  • Image > Mode > RGB

  • 另存为具有透明度的 24 位 png。

您可以在需要时将任一生成的图像用作叠加层或 Alpha 通道。