如何复制PS乘法层模式

有谁知道使用图像或CSS复制Photoshop的乘法层模式的好方法吗?

我正在制作一个缩略图的项目,当你将鼠标hover在他们上面时,会有一个颜色叠加层,但是devise者使用了一个图层集合,我无法弄清楚如何在networking上生成它。

我提出的最好的事情是使用rgba或透明PNG,但即使如此,它看起来不正确。

有新的CSS属性被引入做这件事情,他们是blend-modebackground-blend-mode

目前,你不能在任何生产环境中使用它们,因为它们是非常新的,目前只有Chrome Canary(实验性networking浏览器)和Webkit Nightly才支持。

这些属性的设置与Photoshop的混合模式几乎完全一样,并允许将各种不同的模式设置为这些属性的值,例如overlayscreenlightencolor-dodge ,当然还有其他方法。 。

blend-mode将允许图像(也可能是内容?我还没有听到任何build议,在这一点上,但是)层叠在一起,以应用这种混合效果。

background-blend-mode将非常相似,但将用于背景图像(使用backgroundbackground-image ),而不是实际的图像元素。


编辑:随着浏览器支持越来越多,下一节变得有点不切实际..检查这个图表,看看哪些浏览器支持这个: http : //caniuse.com/#feat=css-backgroundblendmode


如果您的计算机上安装了最新版本的Chrome,则可以通过在浏览器中启用某些标记来实际查看这些样式(只需将它们放入您的地址栏中:)

 chrome://flags/#enable-experimental-web-platform-features chrome://flags/#enable-css-shaders * note that the flags required for this might change at any time 

启用那些坏男孩,然后看看这个小提琴: http : //jsfiddle.net/cqzJ5/ (如果风格在浏览器中正确启用,应该混合两个图像,使场景看起来像在水下)

虽然这可能不是目前最合理的答案,因为几乎完全不存在对这个特性的支持,但是我们可以希望现代浏览器在不久的将来会采用这些特性,给我们提供一个非常好的和简单的解决scheme来解决这个问题。

一些额外的阅读资源混合模式和CSS属性:

只是为了logging,这家伙正在开发一个图书馆这样做。 我刚刚进行研究,还没有尝试过。

https://github.com/Phrogz/context-blender

简单一点的SVG:

 <svg width="200" height="200" viewBox="10 10 280 280"> <filter id="multiply"> <feBlend mode="multiply"/> </filter> <image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300" /> </svg> 

和一些CSS:

 #kitten:hover { filter:url(#multiply); } 

小提琴: http : //jsfiddle.net/7uCQQ/381/

24.png是可能的 – 如果你知道这个技巧。

在插图画家,你可以导出graphics为24.png,但这似乎从来没有像繁殖一样工作。

我已经find了。

  1. 自行获取您的乘法graphics
  2. 在其后面放置一个纯黑色的100%框,然后select两个graphics
  3. 在透明度窗口中select“制作蒙版”,然后select“反转蒙版”
  4. 导出为24.png文件

当在图片顶部的z-index(ed)时工作就像一个乘法运算。

没有这样的能力可用。 你得到的唯一的合成选项更接近:

  • HTML5 <canvas> (这是a + b不是a * b,具有与乘法相反的效果)

  • min或仅在IE中subtract Compositorfilter。

两者都不实际。

一般来说,您不应该尝试将Photoshop复合图像导出为图层,而是将其渲染为单个不透明的图像。 对于翻转,您可以制作两个图像(一个用于正常状态,一个用于hover),并使用CSS :hover样式select不同的背景图像,或者更好,因为它不需要预加载并减lessHTTP请求,图像合成为一个,并使用background-image / background-position在每个状态下显示该图像的右侧部分作为背景图像。 (“CSS精灵”)

我最近有必要做OP所要求的,所以我search了一下。 我发现了一个很好的方法来通过在Photoshop中制作透明的PNG来复制乘法效果。

  1. 创build一个与您的乘法图层尺寸相同的新文档。
  2. 用黑色填充文档。
  3. 添加一个vector蒙版(层窗口底部图层“fx”左侧的图标)。
  4. Alt/Option + click面具本身。
  5. 现在复制并粘贴乘法图层到面具。
  6. Cmd/Ctrl + i来反转刚刚粘贴的图层。
  7. 在此图层下创build一个新图层,并将图像添加到乘法叠加后面。
  8. 一切都应该看起来非常接近你想要的结果。 如果需要,您可以调整我们创build的蒙版图层的opacity
  9. 当它看起来不错,只需切换底层的可见性,并保存蒙版图层作为PNG等瞧!

所有功劳都来自Sojeong从https://superuser.com/questions/381704/multiply-blending-mode-to-png

看看这个: http : //www.webdesign.org/photoshop/photoshop-basics/remove-white-using-channels.10545.html

使用这些说明,我在黑白图像(在我的情况下是墨迹绘图,黑色和灰色在纯白色的背景上)上水印黑色背景(在我的情况下为木头)上取得了巨大的成功。 与Adobe的真正的Multiplyfilter几乎没有任何区别。

我使用Photoshop指令从我的图像中删除白色,在透明背景上只留下黑色和灰色。 把这个保存到PNG中,并把它放在CSS / HTML的木头上看起来还不如多,但是强烈地降低了PNG的亮度解决了它(浅灰色突出了,使它变丑)。

一般来说,我build议你在Photoshop中玩耍,复制networking的情况:一个半透明(没有特别的东西)层在坚实的背景之上。 上面的教程可能会让您重现繁复或其他奇特的效果。

不知道你是否会有运气。 据我所知,即使您尝试将一些先进的JavaScript与它集成,也是不可能的。