将前景主题转换为透明度?

平面设计 adobe-photoshop 瘸子 PNG 透明度
2022-02-03 15:31:17

我有一个 24 位 PNG,其中的主题是一个微妙的图案。图案本身为浅灰色,即 PNG 的背景颜色为#eee,图案为稍深的灰色。

我想将前景主题转换为一系列透明度级别。换句话说,我的计划是创建一个通过 CSS 定义纯色的网页,并将图像放在这些颜色上,以便仅使用一张图像为多种颜色提供重复图案。

我可以找到很多关于使背景透明的教程,但是如何将前景主题转换为透明度?

我是图形设计软件的新手。Adobe Photoshop 5 可用,我还可以安装适用于 Windows 的免费软件(如 Windows Gimp)。

(我在谷歌上搜索过这个,并且在这个网站上有几个相关的问题——fx“向现有的 PNG 添加透明度”。到目前为止,我发现的通常解决了将一种纯色背景颜色更改为透明的问题,这不是我的正在寻找。)

更新:这是我要转换的原始 PNG:

图案

(注意:此图像已获得许可,不允许他人使用或重新分发):

4个回答

您可以尝试从GIMP 的颜色菜单中将颜色转换为 alpha,然后选择此图像中最暗的颜色将其设置为 alpha。这是我得到的结果(图像在这里几乎看不到,右键单击查看图像或下载):

透明图片

并将其用作背景颜色设置为 HTML 页面的背景,#aa00cc我得到了以下结果:

背景

在 Photoshop 中:

  1. 图像 → 模式 → 灰度。

  2. 打开频道面板并按住命令,同时单击频道的缩略图。这将从频道中进行选择。

  3. 选择 → 反向。

  4. 打开图层面板并创建一个新的位图图层。

  5. 按 D 将前景色和背景色重置为白色和黑色。

  6. 按 X 交换前景色和背景色。这意味着黑色是前景色。

  7. 按选项删除以用黑色填充选择。

  8. 关闭原始图像的图层(它应该是底层)。

您现在有一个全黑的图层,图像数据位于 Alpha 通道中。

您必须记住的第一件事是,您的图案颜色,无论多么微妙,都应该保持中性(最好是灰色阴影),以确保它可以匹配尽可能多的“背景”颜色。

撇开这一点不谈,有很多方法可以实现你想做的事情。在这种情况下,我认为,最简单的方法(同时也是最好的)是:

  1. 将您的图像复制到一个新层(如果它仍然是“背景”层,它将不起作用,因为 Ps 中的“背景”总是完全不透明的)。这可以通过例如Ctrl+ J( Cmd+J如果那是你的船 ;))来完成
  2. 双击图层进入“图层样式”窗口。默认情况下,您应该登陆“混合选项”部分。在那里,在底部,您应该看到两个滑块,默认情况下填充有黑色到白色的渐变。上层应标记为“本层”。如果要使图像的白色部分透明,请移动右侧滑块。您应该看到“棋盘”出现在图案最亮的地方。现在它是完全透明或不透明的,但您可以通过Alt单击滑块添加“中间”透明阶段。然后它将一分为二,使滑块部分之间的颜色“半透明”。您可以在本教程中阅读更多内容。
  3. 差不多就是这样!如果您想查看新的透明图案在不同背景颜色下的外观,请在图案下方添加一个彩色图层(我建议使用“纯色”调整图层,因为它可以让更改填充颜色变得轻而易举)。
  4. 确保只有透明图案可见并将其导出为透明 PNG。您可以通过多种方式执行此操作,但我的建议是使用“保存为 Web”功能,因为您将能够根据给定的参数在导出 PNG 之前查看它的外观。

如果我正确理解您的问题,您需要创建一个带有图案(例如 50% 透明度)且没有背景(100% 透明度)的 PNG

像这样:在此处输入图像描述

深色和浅色部分覆盖背景,因为它们是半透明的(使用渐变显示背景是可交换的):

在此处输入图像描述

这样,即使图案保持不变,您也可以更改背景颜色、渐变或图像。

更新:这只是反转并用作图层蒙版的图案:

在此处输入图像描述