教你掌握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

相关推荐

  • 我为什么喜欢sketch?

    数十万互联网从业者的共同关注!作者:luffy微信公众号:麒麟设计中心(ID:luffydesign)作者授权早读课发表,转载请联系作者。欢迎投稿到早读课,投稿邮箱:mm@zaodula.com文章底部可以评论留言啦,欢迎大家赞同质疑或吐槽。积极留言的同学,注意关注小编的回复,不定期送互联网畅销书以感谢你们的支持,么么哒!Adobe XD出来了,第一时间试用,感觉除了repeat grid和hotspot好像没什么亮点。笔者是一名无线U...

    2018-04-09
  • 用户体验方法论的演变

    用户体验工作流程令人困惑,即使对大多数设计师而言也是如此。最初Donald A. Norman创造了用户体验设计的概念:“我发明了这个词,因为我认为人机交互和可用性太窄了。我想涵盖该系统的所有方面,包括工业设计图形,交互界面,面对面交互和使用手册。从那时起,这个词被广泛传播,以至于它开始失去意义。”而到2016年,Don Norman开始谈及对于这个词的误解有多严重。在彻底了解现代用户体验之前,我们需要回顾20世纪90年代以来设计和开发...

    2018-03-07
  • 译文 | 交互设计的5大支柱

    文中提到的《交互设计最佳实践:卷1》/《用户体验设计文档指南》/《2014年Web UI模式》可在此处下载,建议先保存到网盘~

    2017-05-27
  • 交互设计在商业中的价值

    转载自“创设空间”:chuangshe_space简书链接:http://www.jianshu.com/p/d0b5baa600d2作者:Mr汤进er一、前话问题:一句话概括你理解的交互设计是什么?部分回复摘录:@哎呀,我擦~:大概就是通过使用者的某些动作才能激发出的产品或包装的第二功能吧。@捉急的小慢~~O~~:界面设计,形式和功能相融而令人愉悦的互动。@lcy:信息的输入,输出的过程。从大家对于这个问题的回复,不难看出,不同人对于...

    2018-03-05
  • 交互设计思路:积分模块改版总结

    作者根据工作经验对积分模块改版进行了一些总结,与大家分享,希望可以从中收获点滴。

    2017-05-04
  • 用户体验设计中的用户故事和场景

    翻译校对:晓黑 原文:http://usabilitygeek.com/tag/user-experience/ 有一段时间,最好的网站设计是一个装了一些很酷的新功能,一个怪异的导航和其他任何设计师认为不错。我们信任设计师的品味和意见往往甚至比我…

    2015-12-29
  • 未来,设计师的核心价值在哪里?我总结了4个进阶方法

    在 Web/iOS/Android 等旧平台成熟稳定、VR/AR 等新平台尚未全面兴起,设计标准化成为趋势的当下,作为用户体验设计师的核心价值又有哪些?本文作者将自己反思的一些经验总结了出来,一起来看看。

    2017-05-10
  • 在用户体验中询问用户的4个问题(译文)

    该客户的体验是一个思考的人从我们产品的认知度如何去成为一个真正有用的抽象用户,但抽象并非最终有意义。要真正改进您的产品,您需要与您的用户交谈。无论是面对面的,应用内的还是通过电子邮件发送的调查,都需要花时间与用户签到并保持对他们最重要的事情。这种双向反馈也是您可以用来帮助人们通过漏斗最有效的工具之一,并最终帮助他们坚持成为您产品的惯用用户。让我们看看如何从战略上使用问题从用户那里获得正确的信息 - 这种信息将帮助您采取行动。如何提出从收...

    2018-02-26
  • web表格设计攻略

    在后台管理系统、数据类产品等的设计中,表格作为一种常见的信息组织整理手段,甚至是web页面的基础设施之一,其重要性不言自明。结合最近做的几个项目和相关设计经验总结,特此整理出这样一篇设计攻略,希望能够对你的设计有所帮助。

    2017-04-28
  • ​从零开始做交互:第一章 交互设计基础知识

    [button type="primary" text="百度阅读:阅读全书" url="http://yuedu.baidu.com/ebook/6d8b975a49649b6648d7479d" open_new_tab="true"] [button type="primary" text="网易云课堂:阅读全书" url="http://study.…

    2015-08-07