教你掌握27种图层混合模式的用法

嗯,让我们从最最基础的说起——像素。你就把他当成一个个五颜六色的小色块.这些小色块们都有一个特定的标记值,比如,RGB值,CMYK值了。当然透明色块也是像素,不过值是零罢了。我们的计算机就是靠识别这些数值来认识颜色的。

嗯,让我们从最最基础的说起——像素。你就把他当成一个个五颜六色的小色块.这些小色块们都有一个特定的标记值,比如,RGB值,CMYK值了。当然透明色块也是像素,不过值是零罢了。我们的计算机就是靠识别这些数值来认识颜色的。

Ok,我们再来看三个概念:

基色,混合色,结果色

(以下的示意图如无特别说明均来自于我们伟大的啊逗比PhotoShop)

教你掌握27种图层混合模式的用法

很好理解是不是,如果你新建了一个白色背景的画布,那么这个白色就是基色。再比如,你再牛皮纸上作画,那么,那黄黄的颜色就是你的基色了。

混合色就是我们所选的前景色,这里我选择了红色。

结果色,在正常模式下,这个结果是应该是红色的,但是由于我调整了一定的画笔透明度,所以底部的白色有一部分显示出来了,得到这种类似于粉色的结果色。

(呸呸呸,这么简单,还说这么多,你真是啰嗦啊)

教你掌握27种图层混合模式的用法

这种方式也是我们画家作画的基础,但是在我们的数字时代,所谓的电子画布上,是不是可以哟更多的选择呢?

比如,我们只混合颜色的明亮度,而饱和度和色相都不发生变化;

比如,我们值混合暗部的颜色,或者只混合亮部的颜色呢。

所以,PS出现了,LOOK!

教你掌握27种图层混合模式的用法

这货一共有六组27种混合模式,掉渣天啊,天里边全是渣~

OK,回到问题,原谅我上文都跑偏了~

PS中图层混合模式中柔光、叠加、强光等原理是什么?

正常模式组:

正常:编辑或者绘制每个像素,使其成为结果色;

溶解:编辑或者绘制每个像素,使其成为结果色,但是根据像素位置的不透明度,随机替换基色和混合色。

变暗模式组:

变暗:查看每种颜色的颜色信息,选择基色和混合色中较暗的颜色作为结果色,比混合色亮的像素被替换,比混合色暗的像素保持不变

正片叠底:查看每种颜色的颜色信息,并将基色和混合色复合,(任何颜色与白色复合保持不变,与黑色复合变为黑色)所以结果色总是较暗的颜色。由于存在复合的步骤,所以正片叠底的效果比变暗模式显得更加自然和柔和,所以,这个也是很常用的叠加模式了。

颜色加深:查看每种颜色的颜色信息,通过增加对比度使基色变暗来反衬混合色,当然,与白色混合后不产生任何变化,由于效果比较生硬,话说,我好像都没有用到过。

线性加深:查看每种颜色的颜色信息,通过减小亮度使基色变暗来反衬混合色,与白色混合不产生变化,与颜色加深模式有些类似。

深色,这个最简单了,查看基色和混合色的信息,选取其中较深的颜色作为混合色,所以不会产生新的颜色

变亮模式组

变亮:查看每种颜色的颜色信息,选择基色和混合色中较亮的颜色作为结果色,比混合色暗的像素被替换,比混合色亮的像素保持不变

滤色:查看每种颜色的颜色信息,并将基色和混合色复合,(任何颜色与黑色复合保持不变,与白色复合变为白色)所以结果色总是较亮的颜色。这个简直是太常用了。

颜色减淡:查看每种颜色的颜色信息,通过增加对比度使基色变亮来反衬混合色,当然,与黑色混合后不产生任何变化,由于效果比较生硬。

线性减淡:查看每种颜色的颜色信息,通过增加亮度使基色变暗来反衬混合色,与黑色混合不产生变化,与颜色减淡模式有些类似。

浅色,这个最简单了,查看基色和混合色的信息,选取其中较浅的颜色作为混合色,所以不会产生新的颜色

叠加模式组

叠加:复合或者过滤颜色,具体取决于基色,图案或者颜色在现有基础上相加,同时保留基色的明暗对比,不替换基色,但基色与混合色互相混合后反映颜色的亮度和暗度

柔光:使颜色变量或者变暗,具体取决于混合色

强光:复合或过滤颜色,具体取决于混合色

亮光:通过增加或者减小对比度来使图像更亮或者更暗,具体取决于混合色

线性光:线性光是“线性加深”和“线性减淡”的马太效应组合,亮更亮,暗的更暗

点光:点光就是“变亮”和“变暗”的马太效应组合,亮更亮,暗的更暗

实色混合:查看每个通道的颜色信息,根据混合色替换颜色,如何混合色比50%的灰色亮,则替换此混合色为白色,反之,则为黑色,实际上这货就是把灰度图像转换成了黑白图像了。

差值模式组

差值:查看每个颜色的颜色信息,从基色中减去混合色,或者从混合色中减去基色,具体看谁的颜色数值更大,与白色混合反转基色值,与黑色混合不产生变化。

排除:效果跟差值类似,但是对比度更低的效果

减去:查看各通道的颜色信息,并从基色中减去混合色。如果出现负数就剪切为零。与基色相同的颜色混合得到黑色;白色与基色混合得到黑色;黑色与基色混合得到基色。

划分:查看每个通道的颜色信息,并用基色分割混合色。基色数值大于或等于混合色数值,混合出的颜色为白色。基色数值小于混合色,结果色比基色更暗。因此结果色对比非常强。白色与基色混合得到基色,黑色与基色混合得到白色。

色相组:

色相:结果色保留混合色的色相,饱和度及明度数值保留明度数值。

饱和度模式是用混合色的饱和度以及基色的色相和明度创建结果色 颜色模式是用混合色的色相,饱和度以及基色的明度创建结果色。

明度混合模式是利用混合色的明度以及基色的色相与饱和度创建结果色。她跟颜色模式刚好相反,因此混合色图片只能影响图片的明暗度,不能对基色的颜色产生影响,黑、白、灰除外。黑色与基色混合得到黑色;白色与基色混合得到白色;灰色与基色混合得到明暗不同的基色。

 

原文地址:zhihu

作者:李明姝

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/32337/

(0)
CatherineCatherine
上一篇 2017-06-05 00:31
下一篇 2017-06-05 02:32

相关推荐

  • 两个交互设计鸿沟-评估与执行

    译者 / 熊猫小生校对 / 不器作者 /Kathryn Whitenton前言:通过每次交互,用户都必须克服理解系统当前状态和了解如何改变系统当前状态的双重挑战。设计师可以通过意识到这些鸿沟并用透明的概念模型来消除这些鸿沟,从而为他们提供支持。上周,我买了一款很棒的新蓝牙耳机 ; 但遗憾的是,我花了一个多小时才把它连接到我的电脑上。尽管耳机手册和电脑支持网站作出了承诺,但耳机并未自动与计算机连接。我在重新阅读说明书之后,检查了耳机和电脑...

    2018-03-28
  • 商业化的产品设计方向

    商业型产品顾名思义面向的都是企业级用户,这是与消费型产品的最大不同,消费级产品关注的是个人用户,所以在产品角色分析上商业型与消费型就存在很大的不同,但在一定程度上产品设计又是相通的,可能很多人已经比较了解消费级产品了,所以我现在就剖析一下商业型产品。

    2015-01-06
  • APP引入一个新世界的可能性

    在上一篇文章中,我们介绍了概念"设计的地方,"这也解释了如何你可以更好地了解您的应用程序的使用情况和它的功能,以及如何可以变为更加重要的一部分,您的用户日常生活的步伐。我们这样做是通过分解如何分析应用程序功能的位置,如精确位置的数据已迅速成为必不可少的提供您的用户行为和利益的富有洞察力。

    2015-01-05
  • 【用户体验】Smartisan OS 联系人列表多音字

    大家都在讨论用户体验(因为不说显得自己很土),但是这些人是不关心用户体验的,关系是人就会做出下面这种机制的不能理解的举动,例如为了帮助大家解决L代表的罗或刘的姓氏联系人的区分,Smartisan OS的工程师做了…

    交互设计 2015-08-26
  • 交互设计与服务设计视角下,谁才是用户,什么又是产品?

    服务设计,是2017-2018比较火热的一个专业了,相比于交互设计或工业设计,服务设计更关注与利益相关者之间的关系。今年的Aalto New Media 专业的申请中,有明确要求需要根据两篇文章的读后感写一篇Essay(1),其中一篇是“How to Fix Facebook—Before It Fixes Us(2)”,深入阅读之后,有一个明确的观点想和大家分享一下。之前从交互式设计角度或者用户研究角度对于 Facebook 的分析文...

    2018-05-02
  • UI|人性化交互设计 美食订餐网站

    类别:美食网站设计:BASOV(乌克兰)今天品牌先生为大家分享乌克兰 BASOV 工作室设计的一款美食订餐的网站。从选餐到订餐下单,设计师进行了很便捷的交互设计,让网站尽到最大的便捷和简约,这样客户也会爱上这样的网站。网站的建立不单单是界面UI设计出漂亮的界面,包括客户的需求和网站的结构等等,此款网站在前期原型交互设计上的用心在图中也都体现了出来。▼(品牌先生独家整理,转载请告知或注明出处)UI-- END --请点击下方“阅读原文”去...

    2018-02-21
  • UX设计师们,扔掉那些UX设计工具吧!

    “你以你的方式做你的事,我们想让你以完全相同的方式做你的事,但是是用更少的时间并且和更多的远程的人一起做这件事。““如果产品设计是为在各自职务中被束缚的人们解决问题,那么很多自称产品设计师、UX设计师的人事实上是职业的数字艺术家。他们是艺术家、是装饰上的设计师、是美工,但是不是一个职业的产品设计师……”仅仅是目前服务于我们设计师的技术,是不再会领导我们走向成功的。“我们相信制造降低软件开发门槛的产品是非常有必要的。事实上,我们对这类新的程序非常感兴趣。这可能是人们编写程序的更好方式,一旦诞生就将带来巨大的冲击。构架更合理,语言更精简,但很可能我们会去做同样的事。思考这样一个事情:程序语言接下来会面临什么呢?”

    2017-05-26
  • 深聊软件设计中最基础的控件元素

    控件作为组织界面最基础的元素,相信大家都不会陌生,今天想谈谈这个不起眼的话题。文章从现实的控件过渡到软件界面,再用三大输入法的控件作为实际案例解说,全文干货满满,来收!扩大词汇量有助于提高你在某种语言上的表达能力,扩大「设计词汇量」可以帮助你更好地进行设计。但要记住,界面设计真正的艺术在于:解决正确的问题。

    2017-06-04
  • 【免费试听】成都UI-UE交互设计免费试听课了解一下!

    德阳中公教育官方微信长按关注,了解更多资讯。周一见!周一见!周一见!没错下周一!成都UI-UE交互设计免费试听课开课啦!与其宅在家里浪费时间不如来体验一下UI设计前五天免费试学4月16日--4月20号机会有限,先到先到得哦!UI-UE交互设计是什么?UI-UE交互设计就是指对产品的人机交互、操作逻辑、界面美观的整体设计!为什么要学习UI-UE?人才需求旺盛,成IT行业职位新宠人才缺口大,行业势头发展迅猛虽然UI这么好,但是不仅对人才的需...

    2018-04-11