使去饱和图像透明,仅保留阴影和高光

平面设计 adobe-photoshop Photoshop 效果 透明度 PNG
2022-01-20 15:57:56

这几天我一直在尝试这样做,但没有得到我需要的结果。我不确定我在标题中使用了正确的术语,如果没有,请随时纠正我,我会更新它。

我想从这个出发: 在此处输入图像描述

对此(我已经对透明度的一个区域进行了采样以显示 k 值以防万一)。注意阴影/亮点在那里,但没有别的: 结果图像

这允许我在透明图像下方放置一个填充纯色的图层。结果是一件不同颜色的衬衫,并且可以看到阴影/亮点:

填充蓝色的层放置在透明衬衫层下方 在此处输入图像描述

填充黑色的层放置在透明衬衫层下方 在此处输入图像描述

有人对我如何能够做到这一点有任何想法吗?我已经能够接近结果,但我的透明度要么不够,要么太多。我失去了很多阴影/高光细节。起始图像的文件类型为 JPG。

更新:

我需要最终结果是这样的PNG: 在此处输入图像描述

这个 PNG 看起来像白色背景,但将其放入 Photoshop 或 GIMP 中,您会看到衬衫是透明的。我需要对这是如何完成的进行逆向工程,以便可以对其他衣服进行处理。

上述PNG的有趣之处在于,图像透明部分的阴影、高光和中间调都可以单独选择。Photoshop:选择->颜色范围->阴影、高光或中间调。下图显示我的意思: 在此处输入图像描述

4个回答

当指定白色作为透明度的 Alpha 通道时,我们将不能有不透明的高光,因为这些每个定义都是白色的,因此是完全透明的。

要让 Alpha 通道同时保留突出显示的白色区域和黑色阴影,我们最好选择灰色来分配 Alpha。

  • 为了更清楚地显示效果,我首先使您的原始图像更暗,并增加对比度。您需要同时调整源对比度,并选择最适合您需要的灰度以获得更好的效果。

  • 然后我将 alpha 通道分配给“灰色”颜色(而不是白色):

    在此处输入图像描述

现在,当我们用例如绿色背景覆盖这张图片时,我们可以看到,高光和阴影都被保留了。

在此处输入图像描述

我们可以看到,当用于深色时,原始图像的白色区域可能仍然太亮而无法达到预期的效果。当我们选择灰色而不是白色源来创建我们的 Alpha 通道模板时,可以克服这一点。

下面(左上)我在白色原稿上使用了不透明度为 20% 的灰色桶填充。将透明度 Alpha 通道分配给灰色(右上角)后,我们可以叠加彩色背景(左侧黑色、中间深红色、右侧象牙白)以实现底线效果。

在此处输入图像描述

为此,您最好为阴影和高光创建单独的通道

阴影可以直接取自白色T恤,作为衬衫颜色的乘数 0-100%)(图层模式:乘)

至于亮点,这真的取决于材料。布在表面上反射的光不多,所以它的大部分颜色来自漫射光(衬衫的颜色)。为了提取镜面光,我会在白衬衫的图像上使用高通滤波器(直方图适应:只有明亮的颜色,而不是黑暗的颜色)并用它来使衬衫变亮,但可能只有 20% (低反射)。

层数:

在此处输入图像描述

结果图像:

在此处输入图像描述

有更简单的方法 - 选择白色背景,反转它,定义画笔预设,创建基于透明、灰度的新文件 - 就是这样。选择画笔,它是列表中的最后一个,然后用黑色四色样本单击一次。瞧!比你可以保存为 web - png。

使用 CSS 过滤器而不是多个图像

您应该使用CSS 过滤器为网站的图像着色。

在此处输入图像描述

好处如下。

  1. 只需要一张图片。
  2. 较小的图像文件大小。
  3. 无需使用图像编辑器即可更好地控制颜色。
  4. 移动友好。
  5. 更快的加载时间。
  6. 更好的搜索引擎优化。

对于Hue ,使用这个 CSS 过滤器:

img {
  -webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}

对于亮度使用:

img {
  -webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}

饱和度使用

img {
  -webkit-filter: saturate(8);
  filter: saturate(8);
}

对于灰度使用:

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}