PS/UI设计师学习-新手入门第五课5-4 图层不透明度

除了改变位置和层次以外,图层一个很重要的特性就是可以设定不透明度。降低不透明度后图层中的像素会呈现出半透明的效果,这有利于进行图层之间的混合处理。

按下〖TAB〗隐藏所有调板,然后使用【视图 屏幕模式 全屏模式】〖按两次F〗将Photoshop切换到一种没有调板没有菜单没有窗口的显示方式。这种方式可以为操作留下最大的屏幕空间。

OK,现在在不借助图层调板的前提下完成以下操作:改变一个眼睛的色相让两个眼睛的色彩有所区别。然后将两个眼睛移动到脸的边缘。如下图。该怎么做呢?

PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第1张图片
PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第2张图片

我们来分析一下过程,改变色相就是使用色相/饱和度调整工具,虽然我们在之前已经使用过很多次,但不同的是这次多了图层的因素。所以要先正确地选择图层后再使用。在有图层调板的时候只要在调板中点击选择即可,而现在没有图层调板了,我们就需要使用前面所说的用移动工具来选择图层。

所以先选择移动工具

〖V〗,按住CTRL点击位于右方的“eye副本”层,再使用色彩/饱和度调整工具〖CTRL U〗,改变色相到+35左右(可自己决定其他数值)。然后移动到脸部边缘。再按住CTRL单击“eye”层并移动到合适位置。有必要的话再调整一下两个眼睛的图层层次,使改变颜色后的眼睛位于较高层次(可通过置为顶层命令来实现〖CTRL SHIFT ]〗)。这样就在不借助调板和菜单的前提下“摸黑”完成了操作。从这里我们也可以看出,能够摸黑行进的人其实对道路是了如指掌,内心是非常明亮的。

以后大家到公司应聘,在老板眼中,在全屏方式下完成操作的你肯定显得比那些需要借助菜单和调板的人来得更专业。因为他看不懂你操作的步骤,看不懂自然他感觉是因为操作者水平高啊。同样,全屏操作使得你在别人眼中看起来很酷。当然啦,在高手(比如我)和同是本教程的读者面前就免了吧。

0521现在回到正常显示方式〖F〗,当然大家也可以继续留在全屏方式下耍酷。然后〖F7〗开启图层调板(也适用于全屏方式)。然后在图层调板中改变eye层(注意正确选择图层)的不透明度为50%,如下左图红色箭头处。然后再改变eye副本层的不透明度为50%,图像效果改变顺序如下右图。

当不透明度为100%的时候,代表完全的不透明,图像看上去非常饱和非常实在。当不透明度下降的时候,图像也随着变淡。如果把不透明度设为0%,就相当于隐藏了这个图层。层的不透明度虽然只对本层有效,但会影响到本层与其他图层的显示效果。

在右图中可以看到,当蓝色眼睛层的不透明度下降以后,与脸层产生了一种色彩重叠的效果,在两者的相交区域内脸层的色彩加重了。此时位于其上层的紫色眼睛层没有受到影响,那是因为紫色眼睛层次较高且处于100%饱和状态。

当紫色眼睛层的不透明度下降以后,与蓝色眼睛层和脸层产生了重叠效果。这时无论改变蓝眼层或是紫眼层或是下方脸层的不透明度,都会同时影响三者间的重叠效果。

PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第3张图片
PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第4张图片
PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第5张图片
PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第6张图片

假设各图层中的像素均为100%不透明,那么当各图层处在100%的不透明度时,彼此间是不存在重叠效果的。当各图层处于半透明(即不透明度低于100%)时,在图层内容之间的重叠区域就会呈现色彩重叠的效果,此时改变任何一个层的不透明度,都会影响这个重叠区域内的效果。

注意在图层调板上,刚才调节不透明度的地方下面(下左图红色箭头处),也有一个百分比的调节,写着“填充”。试着调节一下,会发觉单独改变“填充”的效果和单独改变“不透明度”效果相同。它们其实是有区别的,这区别在后面的内容中就会学习到。

就现在来说可以认为两者的作用都相同,就是更改图层的不透明度。那么将眼睛层的不透明度设为50%填充设为100%,与不透明度设为100%填充为50%的效果,在图像中看来是相同的。如果将两者都设为50%,那么图层就是25%的实际不透明度了。

类似这样几种不透明度综合作用的例子在Photoshop中很常见,也并不复杂。举个例子,比如新建一层用50%不透明度的笔刷绘制图案,当图层不透明度为100%的时候,图案就已经是50%的不透明效果了。如果图层不透明度再下降为50%,那么图案的实际不透明度就应该是50%基础上再50%,就是25%。这时所看到的效果,应该和用100%不透明度的笔刷绘制后将图层不透明度降为25%的效果(100%基础上的25%,就是25%),是一致的。可以调出信息调板〖F8〗,比较一下两者的色彩数值,应该是相等的。如下中图。当然,如果用25%的笔刷然后以100%的图层不透明度显示,那么效果也和下中图相同。从这里我们不难总结出,图像的实际不透明度就是与之有关的几个不透明度值的乘积。

PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第7张图片

PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第8张图片
PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第9张图片
PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第10张图片

在实际的操作中,图层不透明度因为位置明显所以大家经常只记得这个不透明度控制,而忽略了Photoshop中其他的不透明度控制。这其他的不透明度控制主要是指绘图工具在绘制时工具本身的不透明度设置。初学者常因为图层不透明度为100%时图像还是半透明而感到困惑,这很可能就是因为没有顾及到绘图工具的不透明度设置。

建议大家在使用画笔等绘图工具时最好都设为100%不透明度,后期通过调节图层不透明度去实现各种半透明效果。为什么这么说呢?

首先绘图工具的不透明度要在绘制前设置,然后在绘制时才能看到效果,不满意的话还要撤销,然后重新设置再行绘制。这自然较为麻烦。相比之下图层不透明度不仅调节方便,并且效果立现。不满意可以直接修改无需重绘。

再者也是比较重要的一点,就是不透明度在后期调整中只能降低而不能提高。如果先使用50%的笔刷绘制了图像,那么在以后的调整中只能降低而无法高于这原始的50%不透明度。所以为了保留最大的调整余地,也为了方便及简化操作,应该把图像的半透明效果全部交给图层不透明度去控制。

当然,在实际的制作中也常会遇到需要在一个图层的不同区域设置多种不透明度的情况。那么首先考虑能够分层制作就分层,在不同层中设置不透明度。如果难于分层制作,那么还是建议在绘制时候都使用100%不透明度,然后使用以后课程中将要介绍的图层蒙版去实现不同地方的不同半透明效果。如下图即是使用图层蒙版实现了同一图层中不同区域的多种不透明度。

PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第11张图片
PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第12张图片

这里要附带说明一下,信息调板中所反映的色彩数值,是以在图像上所呈现的效果为准的。并不是以图层中实际像素的颜色为准。这一点与不透明度的数值显示原理相同。造成图层中实际像素颜色值与呈现效果中颜色值不同的原因目前有两个:一是图层中像素的不透明度低于100%(无论是绘制时还是更改图层不透明度),造成了与下方图层中颜色产生混合。二是我们后面要学习到的,由于更改了图层混合模式,即使图层中像素的不透明度为100%,而图层本身的不透明度设定也是100%,也会造成与下方图层中的颜色产生混合。

现在回来说说刚才提到的在图层调板中的“填充”百分比,它的效果看起来和图层不透明度差不多,那么它们有什么区别呢?首先明确这个填充也是一种不透明度,但它只针对图层中原始的像素起作用。

那什么叫原始像素呢?就是指如同我们刚才那样画上去的图形,可以是用画笔、形状或者填充选区等方式绘制出来的,也可以是从其他图像中粘贴过来的部分。可以说到此为止我们在Photoshop图层中所制作和看到的效果都属于原始像素。

与之相对应的,有一种类型的图像不是通过绘制或粘贴产生,而是通过其他方式表现出来的。比如在后面课程中将会学习到的图层样式。样式的英文单词是Style,在Photoshop以及Illustraotr中都存在。样式可以用很简单的步骤做出很出色的效果,因此非常好用。现在我们先来阐述样式的概念。

我们如果到乡村去游玩,常会看到布满爬山虎的墙,爬满青藤的树干或电线杆。它们的外表看上去都是绿色的。如下左图是我在福建泉州拍摄的照片。那屋子的墙本来就是绿色的吗?不是,那绿色是由外部的寄生植物产生的。所谓寄生就要有一个宿主,墙壁是爬山虎的宿主,没有墙壁就没有爬山虎。从这种特性上,我们可以称爬山虎的绿色是添加在墙上的一种Style,也就是样式。引申开去,衣服是身体的样式,京剧脸谱是演员的样式等。它们都有一个共同的特点就是需要一个宿主。而它们的作用通俗地说就是为宿主“化妆”。

0522Photoshop中的样式是指图层样式,就是在图层的基础上为图层化妆、添加一些视觉效果。我们可以打开样式调板【窗口 样式】,默认的样式调板应该如下右图。

如果其中的样式列表不符,可以点击调板右上角的

按钮后选择复位样式并在确认对话框中按下好按钮。如果排列的方式不符,就点击调板右上角的

按钮后选择小缩览图。如果选择纯文本、小列表或大列表方式可以直接看到每个样式的名称。缩览图方式下将鼠标停留在缩览图上一会儿也会出现名称提示。

位于下右图样式列表第一行第一个的样式(红色箭头处)功能是清除。可以通过点击它来清除图层上现有的样式。

PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第13张图片

PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第14张图片
PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第15张图片
PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第16张图片

注意,这个

按钮在以后课程中统称为圆三角按钮,它位于调板的右上角。复位调板的方法一般就是点击该调板的圆三角按钮后在弹出菜单中选择相应的复位选项。为节约篇幅,在之后的内容中将不再叙述复位的方法,只会提“复位笔刷”、“复位样式”之类。

调出样式调板后,选中face层(使用移动工具按住CTRL单击图像中的face),然后在样式调板中点击各种现成样式,会看到脸层发生了各种各样的变化。如下左图。

同时注意图层调板中face层发生了变化,在原先的face层名字之后出现了

标志和一个三角形(下右图红色箭头处),点击三角形后会出现许多附属样式层,这些是样式的独立效果指示,也就是图层样式为face层所做的各种具体的化妆方法。一个图层样式可以由一个或多个独立的效果组成。可以通过点击左端的眼睛图标

来隐藏某项独立效果,关闭下右图兰色箭头处的眼睛标志将隐藏(不是删除)整个样式。平时应点击三角形收起附属样式层以节约调板空间。

PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第17张图片

PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第18张图片

PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第19张图片

PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第20张图片

除了利用现有的样式外,我们也可以自己设定样式。图层样式对于网页设计来说是很重要很常用的,关于样式设定的详细内容将在以后课程中介绍。这里先粗略接触一下。

首先清除掉face层现有的样式,可以使用菜单【图层 图层样式 清除图层样式】,也可以在图层调板face层上点击右键然后选择清除样式,注意点击的位置不能在图层缩览图上。其余的方法以后介绍。

清除样式之后我们来自己设定一个简单的阴影效果,确保选择层是face层,然后点击图层调板下方的

标志,如下左图红色箭头处。注意在这个标志有边还有一个很细小的向下三角形。还记得工具栏中的部分按钮也有一个细小的三角形吗?这种三角形就是表示点击后会有其他选项出现,相当于多项选择题。而没有小三角形的按钮点击后就执行单一功能,没有其他选项,相当于单选题。

点击后选择投影这一项,将出现一个如下中图的很大的设置框,全部的图层样式效果都在这里设置。由于前面我们已经选择了投影这一项,所以看到在设置框左边的样式效果列表中投影一项已自动打勾。设置框右边也自动切换到投影的一些调整选项。在这里我们都使用默认的投影设置而不作其他的调整,因为说好了现在只是粗略“见识”一下,图层样式的详细内容将在以后课程中介绍。所以按下设置框右上角的好按钮,完成设定。此时可以看到face层被添加了一个阴影的效果。如下右图。

PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第21张图片
PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第22张图片
PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第23张图片
PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第24张图片

PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第25张图片

PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第26张图片

此时我们来看图像中新增加的阴影部分,这阴影是用绘图工具画上去的吗?不是。它是根据face层这个“宿主”产生的附属效果,也可以说是附属像素。因此,这阴影部分便不属于“原始像素”。此时在图层调板中改变填充的百分比数值为0%,就会看到一个奇妙的效果。如下图。原先绿色的face层消失了,只剩下阴影。

PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第27张图片
PS/UI设计师学习-新手入门第五课5-4 图层不透明度_第28张图片

为什么以前我们下降填充不透明度的效果,和下降整体图层不透明度效果是一样的,而现在却不一样了呢?

以前我们的图层中只含有原始像素,而现在除了原始像素之外又多了一部分的附属像素。前面说过,填充控制的是图层中原始像素的不透明度,也就是说填充对附属像素是无效的。所以这一次我们下降填充后属于原始像素的脸消失了,属于附属像素的阴影部分不受影响。于是产生了如上图般的效果。

虽然同处在一个图层中,但是原始像素和附属像素属于两个不同的“行政区”。从级别上来说,图层整体不透明度是最高级的,是中央政府,它控制着图层中所有的行政区,包括原始和附属像素。而填充属于地方政府,它只负责管辖原始像素行政区。

0523除了从图层调板拉动滑杆改变不透明度的数值以外,还可以使用键盘上的数字键来快速设定。比如改为80%就按一下8,30%就按一下3,如果要改为47,快速地先后按下4和7。这样是更改图层整体不透明度数值。如果按住SHIFT再按数字键将更改填充不透明度数值。需要注意的是,数字键在键盘上分布在两个地方,一是位于字母区上方,二是位于键盘右方专门的数字小键盘区。如果要更改填充不透明度的数值,在按住SHIFT键之后必须按位于字母区上方的数字键才有效。

需要注意的是,更改不透明度只能针对单个图层有效。如果同时选择了多个图层,是不能更改不透明度的。如果确实需要同时更改多个图层的不透明度,可以通过后面将要学习到的图层组来实现。

这种方法和在以前课程中所学到的改变画笔工具不透明度的方法一样。那如何区别呢?

其实很简单,如果选择了绘图类工具,数字键就是改变这个工具的百分比选项,这个百分比选项未必是不透明度,比如模糊工具〖R/SHIFT R〗的选项是强度。而如果没有选择绘图类工具,数字键就是改变图层的不透明度。

作为我们现在来说,要记熟哪些是绘图类工具哪些不是,还是比较困难的。教大家一个快速判定是否可以使用数字键的方法:就是观察目前的公共栏中是否有百分比选项。有的话数字键就是改变这个工具选项。没有的话就是改变图层不透明度。如果有两个百分比选项,那么另外一个就是按住SHIFT键后再按数字键。

现在就本节中比较难懂和重要的部分作一下总结:

1:各个图层不透明度互相独立,各自调整。

2:图层不透明度为100%不能保证图像就是完全不透明的。图像半透明效果可能是由多种因素综合作用而成。

3:如果图层中所有像素的不透明度低于50%,将无法用选择工具按住CTRL键在图像中直接点击选择。如果低于10%就不再出现在右键关联菜单中。

4:背景层作为一种特殊图层,一定是100%不透明,且不能调整不能移动。

注意,在后面的课程中将不再叙述图层的选择方法,因此请仔细学习这部分内容并确保能够熟练操作。

还有,本节中提到的原始像素和附属像素这两个概念名词,是我们为了便于大家理解而自创的,在Photoshop官方的技术文档中并不存在。在其他教程中也许也看不到(如果看到的话,很可能那就是引用了我们这里的解释方法哦)。大家要根据这两个名词理性地去理解这两类像素的概念,掌握之后则不必拘泥于这里的名称。

全教程完,学完记得交作业。如果本教程对您有所帮助,请推荐给你的朋友。

你可能感兴趣的:(PS/UI设计师学习-新手入门第五课5-4 图层不透明度)