恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
【D8】屁S从入门到UI-图层
0.0°
2016-11-28 原创文章 教程 举报 1836 7 11 0

PS入门系列教程,针对UI,

D8图层,有任何问题请【留言】Or 加Q群【438966865】

Image title

今天咱们继续上一讲,说说图层混合的模式、调整图层。最后再补充一些图层的命名规范~
Image title【混合模式】这个词,相信大家并不陌生,之前介绍画笔的时候就遇到过模式,昨天介绍图层样式的时候也有模式。它们都是一样的,但是我都没有细说,因为这个东西原理很难理解,尤其对初学者。
所以呢,我放到后面讲喽,大家都对PS有一些熟悉感了,咱们再说哈~
Image title可以看到,PS一共有6组混合模式。


什么是混合模式?
所谓混合模式,就是指一个层与其下图层的色彩叠加方式,不同的混合模式有不同的算法,得出的画面结果也不同。但是对于我们而言,没什么必要了解每一个原理,还是那句话,咱们试着看效果就OK了~这里我说一说简单的、网上查的原理,帮助大家记忆,你们看不懂不看就好~


明确概念:
【基色】最下面那层,可以理解为原来的图;
【混合色】上面的那层,改的就是这个图层的模式;
【结果色】=【基色】与【混合色】的计算结果。
Image title看图,左侧就是【基色】,右侧就是【混合色】

OK,咱们可以开始说啦~


第一栏:
【正常】
默认模式,显示混合色图层的像素,没有进行任何的图层混合。只能靠不透明度来混合颜色。
Image title【溶解】
将混合色图层的图像以散乱的点状形式叠加到基色图层的图像上,对图像的色彩不产生影响,与图像的不透明度有关。

配合调整不透明度可创建点状喷雾式的图像效果,不透明度越低,像素点越分散。 
Image title



第二栏 - 加深混合模式,可将当前图像与底层图像进行比较,使底层图像变暗。
Image title【变暗】
对混合的两个图层相对应区域RGB通道中的颜色亮度值进行比较,在混合图层中,比基色图层暗的像素保留,亮的像素用基色图层中暗的像素替换。总的颜色灰度级降低,造成变暗的效果。
Image title【正片叠底】
将上下两层图层像素颜色的灰度级进行乘法计算,获得灰度级更低的颜色而成为合成后的颜色,图层合成后的效果简单地说是低灰阶的像素显现而高灰阶不显现。
计算公式:结果色R = 混合色R *基色R / 255(G、B的数值算法一样)
Image title【颜色加深】
使用这种模式时,会加暗图层的颜色值,加上的颜色越亮,效果越细腻。让底层的颜色变暗,有点类似于正片叠底,但不同的是,它会根据叠加的像素颜色相应增加对比度。和白色混合没有效果。
计算公式:结果色 = (基色 + 混合色 - 255) * 255 / 混合色,其中如果(基色+混合色-255)出现负数则直接归零。
Image title【线性加深】
和颜色加深模式一样,线性加深模式通过降低亮度,让底色变暗以反映混合色彩。和白色混合没有效果。
计算公式:结果色 = 基色 + 混合色 - 255,如果得出数值小于0,则直接归零。
Image title【深色】
通过计算混合色与基色的所有通道的数值,然后选择数值较小的作为结果色。因此结果色只跟混合色或基色相同,不过产生出另外的颜色。白色与基色混合色得到基色,黑色与基色混合得到黑色。深色模式中,混合色与基色的数值是固定的,我们颠倒位置后,混合色出来的结果色是没有变化的。
Image title


第三栏 - 减淡混合模式,  在PS中每一种加深模式都有一种完全相反的减淡模式相对应,减淡模式的特点是当前图像中的黑色将会消失,任何比黑色亮的区域都可能加亮底层图像。
Image title【变亮】
与变暗模式相反,是对混合的两个图层相对应区域RGB通道中的颜色亮度值进行比较,取较高的的像素点为混合之后的颜色,使得总的颜色灰度的亮度升高,造成变亮的效果。用黑色合成图像时无作用,用白色时则仍为白色。
Image title【滤色】
正片叠底模式相反,将上下两层图层像素颜色的灰度级进行乘法计算,获得灰度级更高的颜色而成为合成后的颜色,图层合成后的效果简单地说是高灰阶的像素显现而低灰阶不显现。
计算公式:结果色 = 255 - 混合色的补色 * 及色的补色 / 255
Image title【颜色减淡】
会加亮图层的颜色值,加上的颜色越暗,效果越细腻。与颜色加深刚好相反,通过降低对比度,加亮底层颜色来反映混合色彩。与黑色混合没有任何效果。
计算公式:结果色 = 基色 + (混合色 * 基色) / (255 - 混合色)。混合色为黑色,结果色就等于基色,混合色为白色结果色就为白色。基色为黑色结果色就为黑色。
Image title【线性减淡】
类似于颜色减淡模式。但是通过增加亮度来使得底层颜色变亮,以此获得混合色彩。与黑色混合没有任何效果。
计算公式:结果色 = 基色 + 混合色,其中基色与混合色的数值大于255,系统就默认为最大值也就是255
Image title【浅色】
通过计算混合色与基色所有通道的数值总和,哪个数值大就选为结果色。因此结果色只能在混合色与基色中选择,不会产生第三种颜色。与深色模式刚好相反。
Image title


第四栏 - 对比混合模式,它综合了加深和减淡模式的特点,在进行混合时50%的灰色会完全消失,任何亮于50%灰色区域都可能加亮下面的图像,而暗于50%灰色的区域都可能使底层图像变暗,从而增加图像对比度。
Image title【叠加】
叠加模式比较复杂,它是根据基色图层的色彩来决定混合色图层的像素是进行正片叠底还是进行滤色,一般来说,发生变化的都是中间色调,高色和暗色区域基本保持不变。像素是进行正片叠底混合还是屏幕混合,取决于基色层颜色。颜色会被混合,但基色层颜色的高光与阴影部分的亮度细节就会被保留。
计算公式:基色 > 128:结果色 = 255 - (255 - 混合色)* (255 - 基色) / 128。
Image title【柔光】
将混合色图层以柔光的方式加到基色图层,当基色图层的灰阶趋于高或低,则会调整图层合成结果的阶调趋于中间的灰阶调,而获得色彩较为柔和的合成效果。形成的结果是:图像的中亮色调区域变得更亮,暗色区域变得更暗,图像反差增大类似于柔光灯的照射图像的效果。变暗还是提亮画面颜色,取决于混合层颜色信息。产生的效果类似于为图像打上一盏散射的聚光灯。如果混合层颜色(光源)亮度高于50%灰,基色层会被照亮(变淡)。如果混合层颜色(光源)亮度低于50%灰,基色层会变暗,就好像被烧焦了似的。
计算公式:混合色 >128: 结果色 = 基色 + (2 * 混合色 - 255) * (Sqrt(基色/255)*255 - 基色)/255。
Image title【强光】
如果两层中颜色的灰阶是偏向低灰阶,作用与正片叠底模式类似,而当偏向高灰阶时,则与滤色模式类似。中间阶调作用不明显。正片叠底或者是滤色混合基层颜色,取决于混合层颜色。产生的效果就好像为图像应用强烈的聚光灯一样。如果混合层层颜色(光源)亮度高于50%灰,图像就会被照亮,这时混合方式类似于滤色模式。反之,如果亮度低于50%灰,图像就会变暗,这时混合方式就类似于正片叠底模式。该模式能为图像添加阴影。如果用纯黑或者纯白来进行混合,得到的也将是纯黑或者纯白。
计算公式:混合色 > 128 :结果色 = 255 - (255 - 混合色) * (255 - 基色) / 128。
Image title【亮光】
调整对比度以加深或减淡颜色,取决于混合层图像的颜色分布。如果混合层颜色(光源)亮度高于50%灰,图像将被降低对比度并且变亮;如果混合层颜色(光源)亮度低于50%灰,图像会被提高对比度并且变暗。
计算公式:混合色 > 128:结果色 = 基色 / (2 *(255 -混合色)) * 255。
Image title【线性光】
线性光通过减少或增加亮度,来使颜色加深或减淡。具体取决于混合色的数值。如果混合层颜色(光源)亮度高于中性灰(50%灰),则用增加亮度的方法来使得画面变亮,反之用降低亮度的方法来使画面变暗。
计算公式:结果色 = 2 * 混合色 + 基色 -255。数值大于255取255。
Image title【点光】
会根据混合色的颜色数值替换相应的颜色。如果混合层颜色(光源)亮度高于50%灰,比混合层颜色暗的像素将会被取代,而较之亮的像素则不发生变化。如果混合层颜色(光源)亮度低于50%灰,比混合层颜色亮的像素会被取代,而较之暗的像素则不发生变化。
计算公式:
2 * 混合色 - 255
基色 > 2 * 混合色:结果色 = 2 * 混合色。
Image title【实色混合】
实色混合是把混合色颜色中的红、绿、蓝通道数值,添加到基色的RGB值中。结果色的R、G、B通道的数值只能是255或0。因此结构色只有一下八种可能:红、绿、蓝、黄、青、洋红、白、黑。由此看以看出结果色是非常纯的颜色。
计算公式:混合色 + 基色 >= 255:结果色 = 255。
Image title


第五栏 - 比较混合模式,可比较当前图像与底层图像,然后将相同的区域显示为黑色,不同的区域显示为灰度层次或彩色。
Image title【差值】
将要混合图层双方的RGB值中每个值分别进行比较,用高值减去低值作为合成后的颜色。所以这种模式也常使用,白色与任何颜色混合得到反相色,黑色与任何颜色混合颜色不变。
计算公式:结果色 = 绝对值(混合色 - 基色)。
Image title【排除】
排除于差值的作用类似,只是排除模式的结果色对比度没有差值模式强。白色与基色混合得到基色补色,黑色与基色混合得到基色。
计算公式:结果色 = (混合色 + 基色) - 混合色 * 基色 / 128。
Image title【减去】
减去模式的作用是查看各通道的颜色信息,并从基色中减去混合色。如果出现负数就归为零。与基色相同的颜色混合得到黑色;白色与基色混合得到黑色;黑色与基色混合得到基色。
计算公式:结果色 = 基色 - 混合色。
Image title【划分】
划分模式的作用是查看每个通道的颜色信息,并用基色分割混合色。基色数值大于或等于混合色数值,混合出的颜色为白色。基色数值小于混合色,结果色比基色更暗。因此结果色对比非常强。白色与基色混合得到基色,黑色与基色混合得到白色。
计算公式:结果色 = (基色 / 混合色) * 255。
Image title


第六栏 - 色彩混合模式,色彩的三要素是色相、饱和度和亮度,使用色彩混合模式合成图像时,PS会将三要素中的一种或两种应用在图像中。
Image title【色相】
合成时,用混合图层的色相值去替换基层图像的色相值,而饱和度与亮度不变。决定生成颜色的参数包括:基层颜色的明度与饱和度,混合层颜色的色相。
Image title【饱和度】
用混合图层的饱和度去替换基层图像的饱和度,而色相值与亮度不变。决定生成颜色的参数包括:基层颜色的明度与色相,混合层颜色的饱和度。饱和度只控制颜色的鲜艳程度,因此混合色只改变图片的鲜艳度,不能影响颜色。
Image title【颜色】
用混合图层的色相值与饱和度替换基层图像的色相值和饱和度,而亮度保持不变。决定生成颜色的参数包括:基层颜色的明度,混合层颜色的色相与饱和度。这种模式下混合色控制整个画面的颜色,是黑白图片上色的绝佳模式,因为这种模式下会保留基色图片也就是黑白图片的明度。
Image title

【明度】
用当前图层的亮度值去替换下层图像的亮度值,而色相值与饱和度不变。决定生成颜色的参数包括:基层颜色的色调与饱和度,混合层颜色的明度。跟颜色模式刚好相反,因此混合色图片只能影响图片的明暗度,不能对基色的颜色产生影响,黑、白、灰除外。
Image title至此,混合模式叨叨完了,其实大家不必都掌握啦,UI中用的比较多的有【叠加】【滤色】【正片叠底】



喝口水继续说,【调整图层】
Image title其实大家不难发现,调整图层和之前讲到的【菜单】-【图像】-【调整】是基本相同的,所以细节我并不想多说,只想举个栗子说一下用法:
Image title想说明3点:
1.调整图层不会影响像素,删掉图层就恢复原样,所以比菜单那里要好用些;
2.调整图层影响下面所有图层;
3.若想要调整图层之影响一层或者一组,有个快捷键Alt。

-总结-

最后,感觉今天内容有点太过丰满了,图层命名放到骨感的D10好了~反正是规范类的东西~
大家一定要动手试一试图层混合模式哦~!这个很重要!~做拟物和banner不可或缺的东西~


更多内容:关注微信公众号UIDX,或加Q群438966865

以上内容为爽Yy原创,如需转载请帮忙打个广告

Image title

点个支持一下呗~

更新:2016-11-28

收藏

7人已收藏

  • 0

    作品

  • 0

    粉丝

  • 0

    关注

  • 【番外1】屁S从入门到UI-切图初级
  • 【D10】屁S从入门到UI-蒙版&动作
  • 【D9】屁S从入门到UI-快捷键
  • 【D7】屁S从入门到UI-图层

    猜你喜欢

      2016-11-28 原创文章 教程 举报 1836 7 11 0

      【D8】屁S从入门到UI-图层

      0.0°

      你确定要举报【D8】屁S从入门到UI-图层

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年11月28日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      11
      7
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录