UI培训

亿元级外企UI培训企业

  • 全国服务监督电话4008270010
ui培训 > UI教程 > 达内UI培训PS基础教程-20- Photoshop图层初识
  • 达内UI培训PS基础教程-20- Photoshop图层初识

    发布:达内  来源:达内  时间: 2015年08月28日

  • 如果我们要改变下左图上方的蓝色小球位置,就需要先创建一个符合小球大小的选区,这并不困难,可以使用椭圆选框工具来创建一个正圆的选区(可通过〖空格 CTRL 单击图像〗放大图像)。之后使用移动工具移动选区中的内容就可以了,如下中图所示,白色箭头代表鼠标拖动的方向和目的地,在今后的图例中都将使用这种箭头来表示拖动轨迹。...

  • 如果我们要改变下左图上方的蓝色小球位置,就需要先创建一个符合小球大小的选区,这并不困难,可以使用椭圆选框工具来创建一个正圆的选区(可通过〖空格 CTRL 单击图像〗放大图像)。之后使用移动工具移动选区中的内容就可以了,如下中图所示,白色箭头代表鼠标拖动的方向和目的地,在今后的图例中都将使用这种箭头来表示拖动轨迹。
    但是移动后,原先小球所在的地方产生了一个空白区域,如下右图。这是因为原先的内容被“挖走”,于是Photoshop 利用背景色来填补这个空缺,也就是说依据背景色的不同,填补这块区域的颜色也不同。很明显这样做破坏了图像。
    破坏图像的罪魁祸首是谁呢?严格来说是我们,因为那个洞不就是我们挖的嘛,呵呵。其实真正的原因在于:所有的图像,或者说这幅图片中所有的像素,都是位于同一个图层中,彼此密不可分。因此移动一个地方的像素就会造成空缺。这就如同在一张纸上挖一块必然会留下一个空洞一样。这对于充满变数的创意设计过程而言是非常不方便的。如果需要改动某个部分,就必须完全重新做过。
    现在明白为什么现实生活中的书法家不是普通人能够当得了的吧,因为文字必须一笔到底一气呵成,中途无法修改,需要凭借大量长时间的练习才能拥有这种驾驭力。

    <a style='color:blue' href='http://www.tedu.cn/'>达内</a>
<a style='color:blue' href='http://ui.tedu.cn/'>UI培训</a>PS基础教程-20-  Photoshop图层初识

    而使用图层之后,可以将球和背景分离开,存放在不同的图层上,这样移动球的时候就不会对背景造成破坏,如下左图。下右图是调整前后图层调板的样子。从中可以看到图层调板中不再是单一的背景层。

    达内UI培训PS基础教程-20-  Photoshop图层初识

    图层在我们的设计过程中是很重要的。初学者要特别注意图层的层次问题,因为层次会引起遮挡。另外图层混合模式是一个难点,按照我们目前的知识水平而言,要理解图层混合模式是比较困难的。实际上即使是专业的熟练的使用者也未必通晓。在实际使用中大家就自己多试验各种混合模式的效果。以后再去理解具体的原理。
    现在喝口水,打起精神,本课的内容“有点多”。其中有关图层混和模式的内容将在后面的课程中系统学习,只在本节的练习中略为尝试一下。


    在前面的课程中我们已经几次和图层打了擦边球,现在来正式地学习图层。图层是Photoshop中很重要的一部分。图层也已经成为所有图像软件的基础概念之一。在Illustrator和GoLive中也有相类似的概念。
    究竟什么是图层呢?它有什么意义和作用呢?
    比如我们在纸上画一个人脸,先画脸庞,再画眼睛和鼻子,然后是嘴巴。画完以后发现眼睛的位置歪了一些。那么只能把眼睛擦除掉重新画过,并且还要对脸庞作一些相应的修补。这当然很不方便。在设计的过程中也是这样,很少有一次成型的作品,常常是经历若干次修改以后才得到比较满意的效果。
    那么想象一下,如果我们不是直接画在纸上,而是先在纸上铺一层透明的塑料薄膜,把脸庞画在这张透明薄膜上。画完后再铺一层薄膜画上眼睛。再铺一张画鼻子。如下图,将脸庞、鼻子、眼睛分为三个透明薄膜层,最后组成的效果。这样完成之后的成品,和先前那幅在视觉效果上是一致的。
    虽然视觉效果一致,但分层绘制的作品具有很强的可修改性,如果觉得眼睛的 位置不对,可以单独移动眼睛所在的那层薄膜以达到修改的效果。甚至可以把这张薄膜丢弃重新再画眼睛。而其余的脸庞鼻子等部分不受影响,因为他 们被画在不同层的薄膜上。这种方式,极大地提高了后期修改的便利度。最大可能地避免重复劳动。因此,将图像分层制作是明智的。

    达内UI培训PS基础教程-20-  Photoshop图层初识

    在Photoshop中我们也可以使用类似这样“透明薄膜”的概念来处理图像。在图层调板〖F7〗中可以察看和管理Photoshop中的图层。图层调板是最经常使用的调板之一,通常与通道和路径调板合并在一起。一幅图像中至少必须有一个层存在。
    0501如果新建图像时背景内容选择白色或背景色,那么新图像中就会有一个背景层存在,并且有一个锁定的标志 。如下左图。如果背景内容选择透明,就会出现一个名为图层1的层。如下右图。

    达内UI培训PS基础教程-20-  Photoshop图层初识

    现在我们就利用图层来绘制一个简单的人脸。新建一个图像〖CTRL N/CTRL 双击空白区域〗,尺寸400×300或自定,RGB模式8位通道。背景内容白色。
    然后打开图层调板〖F7〗,在其中看到已经有一个名称是“背景”的图层存在了,并且图层最右方有一个锁定的标志 。类似上左图。

    0502图层调板可以显示各图层中内容的缩览图,这样可以方便查找图层。默认是小缩览图,可以使用中或大,也可关闭缩览图。方法是在图层调板空白区域(即没有图层显示的地方)单击右键更改缩览图大小,如下左图。也可点击图层调板右上角的小三角按钮 ,在弹出菜单中选择“调板选项”。如下右图。下方的“将缩览图剪切到图层边界”和“将缩览图剪切到文档边界”选项是缩览图显示的方式,现在先如下左图选择为后者即可。注意:CS及更早版本不能选择缩览图显示方式。
    即使是小缩览图,占用图层调板的空间也很多,有时候反而降低了图层调板的使用效率,所以在实际使用中意义不大。当大家熟练以后,建议关闭缩览图以获取较大的图层调板使用空间。在下面我们先使用小缩览图查看方式。

    达内UI培训PS基础教程-20-  Photoshop图层初识

    现在我们通过以下的实际操作过程来学习图层,新建一个400×255(注意单位是像素,也可自己设定)的白色背景图像,然后新建一个图层用来画脸庞。新建图层的方法就是点击图层调板下方的 按钮(下左图红色箭头处),会看到图层调板多出了一个叫“图层1”的层,这样就已经建好了图层了。通俗地说已经盖上了一层透明薄膜。
    用这种方法建立的新层都是透明的,注意缩略图中“图层1”显示出灰白相间的方块。这种方块图案我们在以前见过,是对图像透明部分的表示方法。透明部分也就是没有任何像素存在的地方,是一种“空空如也”的状态,就如同透明且没有任何图案的玻璃一样。
    0503按住ALT键在图层调板中双击“图层1”会出现一个对话框,如下中图。可以在其中改变图层名称和颜色标记。颜色标记的作用是让图层名字在调板中显得突出,与图层中的内容倒并无关系,可依自己的喜好任意选择颜色标记。这里我们把名字改为face,把颜色改为红色。
    如果只想更改图层名称,直接在图层调板中双击图层名即可(注意不要双击图层名之外的区域),将会出现输入框,如下右图。可以使用中文命名图层。

    达内UI培训PS基础教程-20-  Photoshop图层初识

    我们使用形状工具中的椭圆 〖U或SHIFT U〗来绘制,注意必须使用第三种“填充像素”绘图方式( 红色箭头处)。其他设定参照下图。这里一定要设置正确。

    达内UI培训PS基础教程-20-  Photoshop图层初识

    选择一个自己喜欢的前景色在face层中画一个椭圆当作脸蛋。画之前一定要注意图层调板中目前选择的是否为face层,画完后从face层的缩览图中可以看到大致的形状。如下左图。如果画之前选择的图层是背景层,这个椭圆就会被画到背景层上。要当心不要犯这样的错误。
    再新建一个图层命名为eye,颜色标记为绿。选择一个与前面不同的颜色画一个代表眼睛的圆。绘制过程中按住SHIFT键可绘制出正圆形。如下中图。
    缩览图可用来判断并选择图层,不过一些较细小的部分在缩览图中就很难看到,比如下中图eye层的缩览图就看的很不清楚。这是因为两个缩览图的比例是符合图像中两个图层的实际比例的。要想提高图层缩略图的可读性,可使用 较大的缩览图。但大缩览图也会增加图层调板的高度而降低图层调板的效率,所以为了方便查找和选择,应该用恰当的名字命名图层,同时使用颜色标记加以区别。除此之外,也可以使用“将缩览图剪切到图层边界”这种方式(CS及更早版本不具备),如下右图,缩览图将以各自图层中的内容作为比例标准,而不再以整幅图像的大小作为比例标准。具体使用何种显示方式可依据各自的喜好和实际需要。
    这个脸蛋是不是有点象鸡蛋?哈哈,大家不要觉 它简陋,因为此时我们是尽量用简单的图形来讲解图层,现在就接触过于复杂的图像反而会令大家眼花缭乱。掌握好知识以后别说是鸡蛋,就算是原子弹氢弹我们也能画出来。再 说达芬奇当年不也是从画鸡蛋开始的嘛。

    达内UI培训PS基础教程-20-  Photoshop图层初识

    现在看起来是独眼龙,应该把另外一边的眼睛也补画上才完整。但是有个问题,两个眼睛应该要一样大吧,那如何能画一个与之前一样大小的圆呢?这个时候可以通过复制现有的图层来达到目的。我们将eye层复制一个就可以了。
    0504复制图层的方法是在图层调板中将图层拖动到下方的新建图层按钮 上。这样会生成一个名为“副本”的新层。图层的颜色标志也会随之复制。如下左图。 也可以按住ALT键拖动图层。如下中图。
    在选择图层的前提下通过【图层 新建 通过拷贝的图层】〖CTRL J〗来复制,但颜色标志不会随之复制。 通过【图层 复制图层】命令可以将图层复制到其他的图像中去,前提条件是在Photoshop中有多个图像打开,可以在目标中选择所打开的图像名称,选择为新建(如下右图)的话,将会建立一个新的图象。
    在这里明确一下图像和图层的关系:图层从属于图像,一幅图像中可以存在多个图层。

    达内UI培训PS基础教程-20-  Photoshop图层初识

    复制完之后,看见画面上还是只有一个眼睛。这是因为这种方法所复制出的图层和原图层位置完全一致,是重叠在一起的。此时在图层调板中选择“eye副本”层,使用移动工具 〖V〗在图像中拖动即可。同时按住SHIFT键即可保持水平、竖直或45度方向的拖动。如下左图。移动工具在公共栏的选项有两个选项:自动选择图层、显示定界框,在这里我们先将它们全部关闭。它们的作用稍后将介绍。
    另外在移动过程中,可能会出现如下中图的那些粉红色的线,这些是智能参考线,它能够使我们更加方便地观察图层对齐的效果,这将在后面的内容介绍,现在先不用理会。如果觉得碍眼,可通过【视图 显示 智能参考线】关闭。
    需要注意的是,移动工具是以图层调板中目前的选择层为移动对象的,与鼠标在图像中的位置并没有关系。也就是说,只要在图层调板中选择了眼睛层,那么无论移动工具在图像中任何一个地方按下拖动,都将会拖动眼睛层。 使把光标放在脸或其他图层的图像上也是拖动眼睛层。如下右图,在几个红点处按下鼠标都可以拖动眼睛层。但前提条件是移动工具公共栏中的“自动选择图层”选项必须关闭。

    达内UI培训PS基础教程-20-  Photoshop图层初识

    0505此外在使用移动工具的时候,可以使用键盘的上下左右键来移动图层,这种使用方向键头移动的方式也称为“轻移”。每次轻移的距离依据图像显示比例不同而不同,如果在100%显示比例下,每次轻移的距离是1像素,按住SHIFT键每次移动10像素。显示比例越小轻移的实际距离就越大。

    牢牢记住:我们针对图层的任何操作都应该是有针对性的,被选中的层才可以进行移动或者是其他一些操作,这个原则很重要。比如想要使用画笔工具画东西,就必须先明确要画在哪个层上。选错图层是新手常犯的错误。或者 忘记了层次的概念,把应该分层制作的部分做在了同一个层上。再经过了若干步后才会发觉到最初的错误。比如前面我们画完脸后没有新建层,而把眼睛也接着画在脸这个层上。这样虽然错了,但此时在图像上却看不出来,因 这时画面效果和分层制作是一样的。而要复制眼睛层时就会发现错误了,因为复制出来的图层中也是一个脸加一个眼睛。从现在起,我们心中就要时刻有着图层这个观念。就如同吃饭时要记着拿筷子夹菜一样。

    虽然在Photoshop中可以同时选择多个图层(CS及更早版只能选择一个图层),因此移动工具也可以同时移动多个图层,但画笔等绘图类工具只能在一个图层中使用,比如不可能同时在face层和eye层中绘制图像。以后要学习的滤镜也只能 对单个图层作用。因此要随时注意当前选择的层是否正确。选择图层的方法就是在图层调板中相应的层上点击一下即可。

    0506除了用上面的方法来复制图层以外,也可以使用移动工具在移动中直接进行复制。方法是选择移动工具后,在图像中按住ALT键,光标从会变为 ,表示启动了移动复制功能,拖动鼠标即可复制出新层(按下鼠标后可放开ALT键)。如下图。同时按住SHIFT键可保持水平(需全程按住不放)。
    其实,在图层调板中也可以按住ALT键拖动图层来完成复制,如下右图。

    达内UI培训PS基础教程-20-  Photoshop图层初识

    0507现在再来明确图层和图像的关系:图像是指最初由新建命令(或打开已有的图像)建立的,是由多个(至少一个)图层所合成的整体效果。它具有尺寸和边界。
    而图层实际上是没有边界的,可包含比整个图像更大的内容,最简单的证明就是:大家可以将eye或face层移动到图像边缘之外去再移回来。但超出图像尺寸范围的部分将看不到。这就如同风景和相机的关系一样,拍摄下来的照片能反映出局部的风景,但不代表实际的风景就只有照片中那么多。
    可以认为一幅图像中各图层的大小是相同的,因为都是无限大。只是不同图层中所包含的像素可能不同。所谓像素不同就是指图层中图像的大小或颜色上的差 。比如上例face层中的像素数量就多于eye层。而我们通过复制的两个 睛层,像素数量和颜色都是相同的。如果更改了其中一个眼睛层的颜色,那么这两个层的像素就属于数量相同而颜色不同了。

  • 上一篇:达内UI培训PS基础教程-19- 论选区的不透明度

    下一篇:达内UI培训PS基础教程-21-图层的选择

网站导航
2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56