《网页开发工具》第二讲-photoshop基本操作.ppt

《《网页开发工具》第二讲-photoshop基本操作.ppt》由会员分享，可在线阅读，更多相关《《网页开发工具》第二讲-photoshop基本操作.ppt（46页珍藏版）》请在三一办公上搜索。

1、第二讲 photoshop基本操作,网页开发工具第二讲 photoshop基本操作,2.1 画笔工具的模式选择,1、正常 编辑或绘制每个像素，使其成为结果色。这是默认模式。（在处理位图图像或索引颜色图像时，“正常”模式也称为阈值。）2、溶解 编辑或绘制每个像素，使其成为结果色。但是，根据任何像素位置的不透明度，结果色由基色或混合色的像素随机替换。,网页开发工具第二讲 photoshop基本操作,3、背后 仅在图层的透明部分编辑或绘画。此模式仅在取消选择了“锁定透明区域”的图层中使用，类似于在透明纸的透明区域背面绘画。4、清除 编辑或绘制每个像素，使其透明。此模式可用于形状工具（当填充区域 被选

2、中时）、油漆桶工具、画笔工具、铅笔工具、“填充”命令和“描边”命令。您必须位于取消选择了“锁定透明区域”的图层中才能使用此模式。,网页开发工具第二讲 photoshop基本操作,5、变暗 查看每个通道中的颜色信息，并选择基色或混合色中较暗的颜色作为结果色。将替换比混合色亮的像素，而比混合色暗的像素保持不变。6、正片叠底 查看每个通道中的颜色信息，并将基色与混合色复合。结果色总是较暗的颜色。任何颜色与黑色复合产生黑色。任何颜色与白色复合保持不变。当您用黑色或白色以外的颜色绘画时，绘画工具绘制的连续描边产生逐渐变暗的颜色。这与使用多个标记笔在图像上绘图的效果相似。,网页开发工具第二讲 photos

3、hop基本操作,7、颜色加深 查看每个通道中的颜色信息，并通过增加对比度使基色变暗以反映混合色。与白色混合后不产生变化。8、线性加深 查看每个通道中的颜色信息，并通过减小亮度使基色变暗以反映混合色。与白色混合后不产生变化。9、变亮 查看每个通道中的颜色信息，并选择基色或混合色中较亮的颜色作为结果色。比混合色暗的像素被替换，比混合色亮的像素保持不变。,网页开发工具第二讲 photoshop基本操作,10、滤色 查看每个通道的颜色信息，并将混合色的互补色与基色复合。结果色总是较亮的颜色。用黑色过滤时颜色保持不变。用白色过滤将产生白色。此效果类似于多个摄影幻灯片在彼此之上投影。11、颜色减淡 查看每

4、个通道中的颜色信息，并通过减小对比度使基色变亮以反映混合色。与黑色混合则不发生变化。12、线性减淡 查看每个通道中的颜色信息，并通过增加亮度使基色变亮以反映混合色。与黑色混合则不发生变化。,网页开发工具第二讲 photoshop基本操作,13、叠加 复合或过滤颜色，具体取决于基色。图案或颜色在现有像素上叠加，同时保留基色的明暗对比。不替换基色，但基色与混合色相混以反映原色的亮度或暗度。14、柔光 使颜色变暗或变亮，具体取决于混合色。此效果与发散的聚光灯照在图像上相似。如果混合色（光源）比 50%灰色亮，则图像变亮，就像被减淡了一样。如果混合色（光源）比 50%灰色暗，则图像变暗，就像被加深了一

5、样。用纯黑色或纯白色绘画会产生明显较暗或较亮的区域，但不会产生纯黑色或纯白色。,网页开发工具第二讲 photoshop基本操作,15、强光 复合或过滤颜色，具体取决于混合色。此效果与耀眼的聚光灯照在图像上相似。如果混合色（光源）比 50%灰色亮，则图像变亮，就像过滤后的效果。这对于向图像添加高光非常有用。如果混合色（光源）比 50%灰色暗，则图像变暗，就像复合后的效果。这对于向图像添加阴影非常有用。用纯黑色或纯白色绘画会产生纯黑色或纯白色。亮光 通过增加或减小对比度来加深或减淡颜色，具体取决于混合色。如果混合色（光源）比 50%灰色亮，则通过减小对比度使图像变亮。如果混合色比 50%灰色暗，则

6、通过增加对比度使图像变暗。,网页开发工具第二讲 photoshop基本操作,16、线性光 通过减小或增加亮度来加深或减淡颜色，具体取决于混合色。如果混合色（光源）比 50%灰色亮，则通过增加亮度使图像变亮。如果混合色比 50%灰色暗，则通过减小亮度使图像变暗。17、点光 根据混合色替换颜色。如果混合色（光源）比 50%灰色亮，则替换比混合色暗的像素，而不改变比混合色亮的像素。如果混合色比 50%灰色暗，则替换比混合色亮的像素，而比混合色暗的像素保持不变。这对于向图像添加特殊效果非常有用。,网页开发工具第二讲 photoshop基本操作,18、差值 查看每个通道中的颜色信息，并从基色中减去混合色

7、，或从混合色中减去基色，具体取决于哪一个颜色的亮度值更大。与白色混合将反转基色值；与黑色混合则不产生变化。19、排除 创建一种与“差值”模式相似但对比度更低的效果。与白色混合将反转基色值。与黑色混合则不发生变化。20、色相 用基色的亮度和饱和度以及混合色的色相创建结果色。,网页开发工具第二讲 photoshop基本操作,21、饱和度 用基色的亮度和色相以及混合色的饱和度创建结果色。在无(0)饱和度（灰色）的区域上用此模式绘画不会产生变化。22、颜色 用基色的亮度以及混合色的色相和饱和度创建结果色。这样可以保留图像中的灰阶，并且对于给单色图像上色和给彩色图像着色都会非常有用。23、亮度 用基色的

8、色相和饱和度以及混合色的亮度创建结果色。此模式创建与“颜色”模式相反的效果,网页开发工具第二讲 photoshop基本操作,2.2 仿制图章/图案图章,1、仿制图章工具的作用是“复印机”，就是将图像中一个地方的像素原样搬到另外一个地方，使两个地方的内容一致。既然是一个复印机，那就先要有原始原件，才谈得上复印。因此使用仿制图章工具的时候要先定义采样点，也就是指定原件的位置。步骤：1、定义采样点的方法是按住ALT在图像某一处单击2、在要进行复制的地方拖动进行绘制。,网页开发工具第二讲 photoshop基本操作,网页开发工具第二讲 photoshop基本操作,注意：,采样点要理解为复制的“起始点”

9、而不是复制的“有效范围”。采样点采样点，只是一个点而已。如果称为采样场的话，那就是代表一个范围了。仿制图章工具是应用到了笔刷的，因此使用不同直径的笔刷(下图中为40)将影响绘制范围。而不同软硬度(下图中为0%)的笔刷将影响绘制区域的边缘。一般建议使用较软的笔刷，那样复制出来的区域周围与原图像可以比较好地融合。仿制图章工具S/SHIFT S实际上经常被用来修补图像中的破损之处。方法就是用周围临近的像素来填充。,网页开发工具第二讲 photoshop基本操作,仿制图章工具S/SHIFT S有一个“对齐的”选项，默认是开启。该选项的作用是在多次绘制中，保持取样点与绘制起始点同步位移。注意我们反复强调

10、是绘制起始点，因为开启和关闭这个选项的区别就在于复制开始时候所使用的采样点。如果在一次复制中持续拖动更大的区域，则其他的地方还是会陆续作为采样区域被复制。此外，更改仿制图章的绘图模式SHIFT+/SHIFT-，所复制出来的图像效果也会产生改变，原理等同于图层混合模式的改变。如下图，将绿树分别以颜色减淡和亮度方式复制，得到了不同的效果。,网页开发工具第二讲 photoshop基本操作,网页开发工具第二讲 photoshop基本操作,2、图案图章是要运用到图案的。选择图案图章工具后，公共栏如下左图，可以看到其中有一个图案的选项(下左图红色箭头处)，点击会出现如下右图的图案列表。在列表中的图案上单击

11、右键可以更改名称或删除图案。点击图案列表右上角的圆三角按钮建会出现类似笔刷调板中的选择列表，其中有复位图案、载入图案等。其使用方法和效果与笔刷调板一致。,网页开发工具第二讲 photoshop基本操作,选定了一个图案之后，在图像中按下鼠标并拖动就可以将所选图案绘制到图层中。如果所绘制的区域大于图案的尺寸，则在超过的部分中图案将重复出现。这种重复的特点又称为图案平铺，就如同我们在地面上铺设有图案的地毯一样。相同的图案将重复出现。并且彼此头尾(准确地说是四周)衔接，最明显的表现就是图案块之间上下左右互为对齐。在图案图章工具的公共栏有一个“对齐的”选项，如果开启的话，多次绘制的图案将保持连续平铺特性

12、。图案图章工具还有一个“印象派”的选项，开启之后所绘制出来的图象就带有色彩过渡分明的印象派风格，这些色彩都取自于所选的图案。,2.3 修复画笔/修补/污点修复画笔/红眼移除工具/颜色替换,1、修复画笔工具 和修补工具，其实都是基于我们前面所说的图章工具的派生工具，并弥补了图章工具的一些不足。最大特点：产生交融，兼顾了复制前后的图像，在两者间取得平衡。,网页开发工具第二讲 photoshop基本操作,网页开发工具第二讲 photoshop基本操作,2、修补工具 经常会在修补图像的时候用到修复画笔工具。不过在使用上它也同画笔一样属于轨迹型，轨迹型绘图工具完全依赖使用者鼠标的移动，虽然灵活，但对于绘

13、制区域边界的把握不够精准，比如在复制嘴唇的时候，很容易就将鼻子也复制过来了。虽然减小笔刷宽度可以改善这一点，但较小的笔刷又会增加绘制的时间。为了弥补这个不足，我们可以使用修补工具，修补工具的作用原理和效果与修复画笔工具是完全一样的，只是它们的使用方法有所区别。,网页开发工具第二讲 photoshop基本操作,修补工具的操作是基于区域的，因此要先那样定义好一个区域(与选区类似)。注意修补工具在公共栏的设置中有一项“修补”，现在确保其选择为“源”，而“透明”选项为关闭，然后如下第1图创建一个选区。和普通的选区一样，这里的选区创建后也可以进行加、减、交叉等修改，其快捷键也相同。加上为SHIFT，减去

14、为ALT，交叉为SHIFT_ALT。选区完成后，从选区内开始拖动鼠标(如果在选区外拖动将会重新创建选区)，在图像中寻找要复制到该选区的图像，拖动的时候可以在原先的选区中看到复制后的效果。,网页开发工具第二讲 photoshop基本操作,3、污点修复画笔 污点修复画笔 出现在PhotoshopCS2版本中，相当于橡皮图章和普通修复画笔的综合作用。它不需要定义采样点，在想要消除的地方涂抹就可以了。既然称之为污点修复，意思就是适合于消除画面中的细小部分。因此不适合在较大面积中使用。如果你想把人物从画面中抹去，最好还是使用橡皮图章工具来完成。可以用污点修复工具去除人物脸上的小疤痕。,网页开发工具第二讲

15、 photoshop基本操作,4、红眼移除工具 红眼移除工具 出现在PhotoshopCS2版本中，使用起来更为简单，只需要框选红眼区域就可以消除。如下图。如开启了对齐功能CTRL_SHIFT_;【视图对齐】，并且开启了【视图对齐到图层】，那么红眼移除工具在框选的时候，选框边会自动对齐红眼区域。,网页开发工具第二讲 photoshop基本操作,5、颜色替换 颜色替换工具的原理是用前景色替换图像中指定的像素，因此使用时需选择好前景色。选择好前景色后，在图像中需要更改颜色的地方涂抹，即可将其替换为前景色，不同的绘图模式会产生不同的替换效果，常用的模式为“颜色”。在图像中涂抹时，起笔(第一个点击的)

16、像素颜色将作为基准色，选项中的“取样”、“限制”和“容差”都是以其为准的。,网页开发工具第二讲 photoshop基本操作,限制选项：“连续”方式将在涂抹过程中不断以鼠标所在位置的像素颜色作为基准色，决定被替换的范围。“一次”方式将始终以涂抹开始时的基准像素为准。“背景色板”方式将只替换与背景色相同的像素。以上3种方式都要参考容差的数值。取样选项：“不连续”方式将替换鼠标所到之处的颜色。“邻近”方式替换鼠标邻近区域的颜色。“查找边缘”方式将重点替换位于色彩区域之间的边缘部分。,2.4 橡皮擦/背景色橡皮擦/魔术橡皮擦,1、橡皮擦 Ps中的橡皮擦就是用来擦除像素的，擦除后的区域将为透明。橡皮擦工

17、具可以选择以画笔笔刷或铅笔笔刷进行擦除，两者的区别在于画笔笔刷的边缘柔和带有羽化效果，铅笔笔刷则没有。此外还可以选择以一个固定的方块形状来擦除。不透明度、流量以及喷枪方式都会影响擦除的“力度”，较小力度(不透明度与流量较低)的擦除会留下半透明的像素。如果在背景层上使用橡皮擦，由于背景层的特殊性质擦除后的区域将被背景色所填充。因此如果要擦除背景层上的内容并使其透明的话，要先将其转为普通图层。,网页开发工具第二讲 photoshop基本操作,网页开发工具第二讲 photoshop基本操作,2、背景色橡皮擦工具 背景色橡皮擦工具 的使用效果与普通的橡皮擦相同，都是抹除像素，可直接在背景层上使用，使用

18、后背景层将自动转换为普通图层。其选项与颜色替换工具有些类似，可以说它也是颜色替换工具，只不过真正的颜色替换工具是改变像素的颜色，而背景色橡皮擦工具将像素替换为透明 而已。,网页开发工具第二讲 photoshop基本操作,3、魔术橡皮擦工具 魔术橡皮擦工具 在作用上与背景色橡皮擦类似，都是将像素抹除以得到透明区域。只是两者的操作方法不同，背景色橡皮擦工具采用了类似画笔的绘制(涂抹)型操作方式。而这个魔术橡皮擦则是区域型(即一次单击就可针对一片区域)的操作方式。还记得魔棒工具吗？魔棒点击后会根据点击处的像素颜色及容差产生一块选区。魔术橡皮擦工具的操作方式也是如此，只不过它将这些像素予以抹除，从而留

19、下透明区域。换言之，魔术橡皮擦的作用过程可以理解为是三合一：用魔棒创建选区、删除选区内像素、取消选区。,2.5 模糊/锐化/涂抹/减淡/加深/海绵,1、模糊工具 模糊工具 是将涂抹的区域变得模糊，模糊有时候是一种表现手法，将画面中其余部分作模糊处理，就可以凸现主体。如在照片中将人物之外的地方使用模糊工具涂抹，就可以突出人物。注意模糊工具的操作是类似于喷枪的可持续作用，也就是说鼠标在一个地方停留时间越久，这个地方被模糊的程度就越大。模糊工具的其他选项和前面的工具类似。,网页开发工具第二讲 photoshop基本操作,网页开发工具第二讲 photoshop基本操作,2、锐化工具 锐化工具 的作用和

20、模糊工具正好相反，它是将画面中模糊的部分变得清晰。模糊的最大效果就是体现在色彩的边缘上，比如树干上的斑点，原本边缘分明，在模糊处理后边缘被淡化，整体就感觉变模糊了。而锐化工具则反其道而行之，强化色彩的边缘。但过度使用会造成色斑，因此在使用过程中应选择较小的强度并小心使用。另外，锐化工具在使用中不带有类似喷枪的可持续作用性，在一个地方停留并不会加大锐化程度。不过在一次绘制中反复经过同一区域则会加大锐化效果。不能将模糊工具和锐化工具当作互补工具来使用,网页开发工具第二讲 photoshop基本操作,3、涂抹工具 涂抹工具 的效果就好像在一幅未干的油画上用手指划拉一样，如下左图。如果打开“手指绘画”

21、选项，就好比手指先蘸染一些颜料再在画面中划拉一样。绘画的颜色就是前景色。,网页开发工具第二讲 photoshop基本操作,网页开发工具第二讲 photoshop基本操作,4、减淡工具 减淡工具 早期也称为遮挡工具(因为其原理与传统洗印照片工艺中的遮挡相似而得名)，作用是局部加亮图像。可选择为高光、中间调或暗调区域加亮。5、加深工具 加深工具的效果与减淡工具相反，是将图像局部变暗，也可以选择针对高光、中间调或暗调区域，这里就不再介绍了，大家自己试验即可。这两个工具曝光度设定越大则效果越明显。如果开启喷枪方式则在一处停留时具有持续性效果。,网页开发工具第二讲 photoshop基本操作,6、海绵工

22、具 海绵工具 的作用是改变局部的色彩饱和度，可选择减少饱和度(去色)或增加饱和度(加色)。效果如下图中的船体部分所示。流量越大效果越明显。开启喷枪方式可在一处持续产生效果。注意如果在灰度模式的图像(不是RGB模式中的灰度)中操作将会产生增加或减少灰度对比度的效果。还有要注意的是，海绵工具不会造成像素的重新分布，因此其去色和加色方式可以作为互补来使用，过度去除色彩饱和度后，可以切换到加色方式增加色彩饱和度。但无法为已经完全为灰度的像素增加上色彩。,2.6 渐变/油漆桶,1、渐变工具 渐变工具 的作用是产生逐渐变化的色彩，在设计中经常使用到色彩渐变，而这也是我们后面进行网页设计时必须使用的。使用渐

23、变工具后在公共栏中点击如下左图红色箭头所示处，就会出现渐变设定列表，从中选择一个“红色、绿色”的设定，选择后可在渐变缩览图中看到大致效果。右方有一排按钮是渐变样式的选择，先选择第一种线形渐变，然后新建一个图像并在其中拖拉，松手后即可完成。,网页开发工具第二讲 photoshop基本操作,注意创建渐变时候拖拉的线条，那线条的长度代表了颜色渐变的范围。那么在上右图中看起来我们只是拖拉了一段距离，并没有充满画面，但之后产生的渐变却充满了画面。除非有选区或蒙版存在，否则渐变一定是充满全画面的。也就是说无论线条有没有充满画面，产生的渐变都将充满画面。而定义渐变的线条代表颜色从红到绿的“变化范围”。在这个

24、范围之前和之后的，都将以单色填补。,网页开发工具第二讲 photoshop基本操作,网页开发工具第二讲 photoshop基本操作,径向渐变，它是将起点作为圆心，起点到终点的距离为半径，将颜色以圆形分布(下图白色圆圈之内)。半径之外的部分用终点色填充(下图白色圆圈之外)。角度渐变，它是以起点为中心，起点与终点的夹角为起始角，顺时针分布渐变颜色(如下图白色箭头所指)。对称渐变,可以理解为两个方向相反的径向渐变合并在一起。从起点出发，同时往相反的两个方向渐变。菱形渐变,效果类似于径向渐变，都是从起点往周围的扩散式渐变。只不过这里是菱形而不是圆形。菱形的4条棱中的一条就是起点到终点的线段，其余三条棱

25、相当于这条线段以起点为中心旋转90、180和270。4个终点之外由终点色填充剩余区域。,网页开发工具第二讲 photoshop基本操作,在渐变工具的公共栏中有“反向”的选项，它的作用是将起点色与终点色颠倒。注意虽然目前为止我们在渐变中都只用两种颜色，但实际上渐变色是可以由多种颜色组成的，在Photoshop默认的渐变列表中就可以找到。那么反向选项所颠倒的不仅是起点与终点色，还包括其中的所有过渡色彩。比如一个渐变色由“红绿黄蓝”组成，那么被反向之后就是“蓝黄绿红”。如下图。渐变工具的“仿色”选项可以在较少的颜色中创建较为平滑的过渡效果。渐变工具“透明区域”选项可以保持渐变设定中的透明度，如果关闭

26、，渐变色中就不带有透明区域。,网页开发工具第二讲 photoshop基本操作,在渐变工具的公共栏中有“反向”的选项，它的作用是将起点色与终点色颠倒。注意虽然目前为止我们在渐变中都只用两种颜色，但实际上渐变色是可以由多种颜色组成的，在Photoshop默认的渐变列表中就可以找到。那么反向选项所颠倒的不仅是起点与终点色，还包括其中的所有过渡色彩。比如一个渐变色由“红绿黄蓝”组成，那么被反向之后就是“蓝黄绿红”。如下图。渐变工具的“仿色”选项可以在较少的颜色中创建较为平滑的过渡效果。渐变工具“透明区域”选项可以保持渐变设定中的透明度，如果关闭，渐变色中就不带有透明区域。,2、自定义渐变 有时候我们需

27、要的渐变色并不包含在渐变列表中，这就需要我们自己来定义渐变。点击公共栏中的渐变缩览图，就会出现如右图的设置框。,网页开发工具第二讲 photoshop基本操作,网页开发工具第二讲 photoshop基本操作,3、油漆桶工具 油漆桶工具 的作用是为一块区域着色，着色方式为填充前景色或图案。并且附带了色彩容差的选项。其实际作用就好比先用魔棒工具创建选区后再予以填充。因此大家可以用魔棒工具各个选项的概念来对应油漆桶的各个选项，只是多出了一个图案填充方式和“所有图层”选项。图案填充的效果与图案图章工具 的特点是一样的，即如果填充区域大于图案将产生平铺。“所有图层”的作用和其他工具相同，在关闭的情况下只

28、能对所选图层有效。,2.7 历史记录画笔/历史记录艺术画笔,1、历史记录画笔 历史记录画笔工具将指定的历史记录状态或快照用作源数据。通过重新创建指定的源数据来绘画。打开历史记录面板，所有的操作都记录在该面板中。单击每个操作最前面的方格，可以设定历史记录画笔的记忆位置。然后用鼠标在画面中刷过，可以将画面恢复到该操作进行之前的效果。,网页开发工具第二讲 photoshop基本操作,2、历史记录艺术画笔 历史记录艺术画笔工具使用指定历史记录状态或快照中的源数据，以风格化描边进行绘画。通过尝试使用不同的绘画样式、大小和容差选项，可以用不同的色彩和艺术风格模拟绘画的纹理。像历史记录画笔工具一样，历史记录

29、艺术画笔工具也将指定的历史记录状态或快照用作源数据。但是，历史记录画笔通过重新创建指定的源数据来绘画，而历史记录艺术画笔在使用这些数据的同时，还使用您为创建不同的颜色和艺术风格设置的选项。,网页开发工具第二讲 photoshop基本操作,2.8 文字工具,因为文字有时被称为文本，因此文字工具有时也被称为文本工具。共有4个，分别是横排文字、直排文字、横排文字蒙版、直排文字蒙版。选择横排文字工具T/SHIFT_T后，在画面中单击，在出现输入光标后即可输入文字，回车键可换行。若要结束输入可按CTRL_回车或点击公共栏的提交按钮。Photoshop将文字以独立图层的形式存放，输入文字后将会自动建立一个

30、文字图层，图层名称就是文字的内容。文字图层具有和普通图层一样的性质，如图层混合模式、不透明度等，也可以使用图层样式。如果要更改已输入文字的内容，在选择了文字工具的前提下，将鼠标停留在文字上方，点击后即可进入文字编辑状态。,网页开发工具第二讲 photoshop基本操作,2.9 裁切,裁切工具 不属于绘图工具，对它最通俗的理解就是一把裁刀，将图像不需要的部分切去。打开图片选择裁切工具C，确保共公栏中高度、宽度和分辨率都为空，如不为空点击“清除”按钮即可。然后在图像中拖拉出一个矩形裁切框，框内是裁切后保留的区域。注意共公栏此时会有“屏蔽”、“颜色”、“不透明度”的选项，它们3个的作用就是在建立裁切框后遮蔽其他区域，提供视觉参照。矩形裁切框之外的区域变得暗淡，而裁切框之内的图像保持不变，这样就突出了对比效果。建立裁切框后，按下回车键或在裁切框内双击即可完成裁切。也可以点击共公栏中的提交按钮。若要放弃裁切可按ESC或点击共公栏中的取消按钮。,网页开发工具第二讲 photoshop基本操作,在建立之后可以如同自由变换CTRL_T那样修改：拖动4边的中点(可组合ALT键)可进行缩放；拖动4个角点(可组合SHIFT/ALT/SHIFT_ALT)可同时缩放4边；在4个角点之外拖动(可组合SHIFT)将旋转裁切框。,网页开发工具第二讲 photoshop基本操作,