平面图形图像处理（第二版） - 万水书苑-出版资源网

全文

(1)第 4 章图像的编辑处理位图图像的编辑处理是多媒体软件制作中十分重要的工作内容，其中界面设计更是重中之重。交互界面设计的好坏对软件用户的接受、认可程度有着很大的影响。目前，图像处理软件使用比较广泛的有 Photoshop、PhotoDeluxe、Ulead iPhoto Express、Ulead PhotoImpact 等，首先对各软件的特色功能做一个大体的了解。在后面的编辑处理中可以综合运用。 1．Adobe Photoshop Adobe 公司出品的 Photoshop 可能是目前众多的图像处理软件中最为用户所熟知的图像处理软件，如图 4-1 所示，其界面整洁、逻辑性强，许多功能的符号已成为图像编辑软件操作方式的标志图标。它的主要用途是对一幅数字图像进行修改、处理，在处理色彩校正方面更是相当出色。其强大的文字编辑处理能力、基于图层进行操作的位图式编辑方式得到了很多用户的认可。除此之外，Photoshop 提供了十分强大的滤镜功能，能够非常轻易地制作出模糊、光影、火焰、烟雾、水纹等奇妙的艺术效果，为图像的编辑处理锦上添花。在陆续推出的新版本的 Photoshop 中，不断添加新工具、近乎完美的人性化操作，给用户的编辑处理带来巨大的便利。. 图 4-1. 2．Adobe PhotoDeluxe PhotoDeluxe 是 Adobe 公司推出的一款快速图像处理软件，如图 4-2 所示，它不像 Photoshop 那么专业，更适合于普通的初级用户。循序渐进的操作指导、功能强大的模板编辑方式，让用户在最短的时间内快速掌握此软件。.

(2) 72. 平面图形图像处理（第二版）. 图 4-2. 3．Ulead iPhoto Express Ulead iPhoto Express 界面十分友好，如图 4-3 所示，功能操作按钮形象非常突出。在图像的编辑处理方面采用的是模板化思想，提供了如贺卡、名片、海报、日历等 17 种类型的模板设计，可供选择的模板样式多达 500 种以上。另外，在文字处理方面，Ulead iPhoto Express 十几种文字的特殊变形效果会使你的文字设计充满新意。很多原本只有专业人士才能做到的事情，在 Ulead iPhoto Express 中通过简单的按钮选择设置，任何人都可以轻松做到。. 图 4-3.

(3) 第 4 章图像的编辑处理. 73. 4．Ulead PhotoImpact PhotoImpact 也是 Ulead 公司的产品，它真正地将新一代的影像编辑修改、特效制作以及多种形式的输出表达方式彻底整合。PhotoImpact 的操作界面如图 4-4 所示，它十分适合于网页影像处理。网页背景的无接缝处理、3D 按钮制作、Banners、镜框效果以及 GIF 动画等在 PhotoImpact 中都可以满意地实现。. 图 4-4. 界面设计在图像编辑处理领域中极具代表性，几乎涉及所有的技术操作。制作项目“彩色电视机原理与维修”多媒体教学软件需要多个图像界面的设计制作，不同的学习单元采用不同的界面呈现各自的内容、完成交互跳转。下面的制作就以“彩色电视机的基本组成”界面（如图 4-5 所示）的设计制作为主线案例，介绍图像处理的各类技巧，主打软件选用功能十分完善的 Photoshop。. 图 4-5. “彩色电视机的基本组成”界面.

(4) 平面图形图像处理（第二版）. 74. 4.1. 图像的属性设置. 制作需求：“彩色电视机的基本组成”界面文件的建立及图像属性设置。具体操作步骤：（1）开启 Photoshop 软件，单击“文件”→“新建”命令，如图 4-6 所示。（2）在弹出的如图 4-7 所示的对话框中，根据图像屏幕显示需要：图像显示尺寸设为 800 像素×600 像素，如图 4-8 所示；图像分辨率设置为 72 像素/英寸；色彩模式设为 RGB 模式，如图 4-9 所示；色彩深度设为 8 位，如图 4-10 所示；背景设为纯白色，如图 4-10 所示；文件名改为“基本组成界面”，最终的设置如图 4-11 所示。. 图 4-6. 图 4-7. 图 4-8.

(5) 第 4 章图像的编辑处理. 图 4-9. 75. 图 4-10. 图 4-11. （3）新建文件属性设置完毕后，单击“确定”按钮，出现如图 4-12 所示的操作界面，此时大部分菜单、工具都可以使用了。. 图 4-12.

(6) 76. 平面图形图像处理（第二版）. （4）在素材库中挑选一张背景图，如图 4-13 所示，使用“移动”工具将背景图拖拽到“基本组成界面”文件中。. 图 4-13. （5）适当调整背景图的大小和位置，“基本组成界面”文件的基本属性设置完毕，选择合适的路径进行存储。本制作单元最终的效果如图 4-14 所示。. 图 4-14.

(7) 第 4 章图像的编辑处理. 4.2. 77. 添加文字效果. 制作需求：“基本组成界面”文件的基本属性设置完毕后，首先添加界面的静态标题—— 彩色电视机的基本组成，标题文字需要添加一定的艺术效果，用于区分界面其他类型的文字。具体操作步骤：（1）将存储的“基本组成界面”文件打开，选择“文字”工具，并在相应的位置单击，出现文字提示符，输入“彩色电视机的基本组成”一行文字，如图 4-15 所示。. 图 4-15. （2）将文字全部选取，根据需要在格式工具栏中改变文字的大小、字体、颜色等，如图 4-16 所示。. 图 4-16.

(8) 78. 平面图形图像处理（第二版）. （3）在格式工具栏中还隐设有文字变形设置面板和特征设置面板，单击相应的按钮，设置面板随即弹出，如图 4-17 和图 4-18 所示。. 图 4-17. 图 4-18. （4）文字输入后，需要添加一些艺术效果，最常用的方法就是通过层效果来实现，如图 4-19 所示，单击“图层”→“图层样式”→“混合选项”命令，弹出如图 4-20 所示的“图层样式”对话框。.

(9) 第 4 章图像的编辑处理. 79. 图 4-19. 图 4-20. （5）添加外部阴影，方法是：单击“投影”选项，一边适当调整各个参数值，一边观察添加效果，如图 4-21 所示。（6）为文字描边，方法是：单击“描边”选项，设置面板随即刷新，如图 4-22 所示，选用稍暗橘红为描边色，描边宽度为 3 像素。（7）此时的界面标题颜色稍微有点暗淡，添加一些外发光会有很好的视觉效果。单击“外发光”选项，如图 4-23 所示是外发光的辐射范围稍微设置得大一些得到的结果。.

(10) 80. 平面图形图像处理（第二版）. 图 4-21. 图 4-22. 图 4-23.

(11) 第 4 章图像的编辑处理. 81. 标题的艺术加工到此结束，以上的设置很好地满足了本界面需求。但是不同的制作项目，界面的风格、色调都会有很大的区别，需要制作出不同的艺术效果去贴合整个界面的视觉需求。下面看一下其他层效果能给文字带来什么样的变化。如图 4-24 所示是“内阴影”内部阴影层效果。. 图 4-24. 如图 4-25 所示是“内发光”内部发光层效果。. 图 4-25. 如图 4-26 所示是“斜面和浮雕”浮雕层效果。如图 4-27 所示是“光泽”绸缎光泽层效果。如图 4-28 所示是“颜色叠加”颜色覆盖层效果。.

(12) 82. 平面图形图像处理（第二版）. 图 4-26. 图 4-27. 图 4-28.

(13) 第 4 章图像的编辑处理. 如图 4-29 所示是“渐变叠加”过渡填充层效果。. 图 4-29. 如图 4-30 所示是“图案叠加”底纹填充层效果。. 图 4-30. 如图 4-31 所示是界面所有的文字标题添加完毕后的效果，另存一个文件备份。. 图 4-31. 83.

(14) 84. 平面图形图像处理（第二版）. 4.3. 图像的“克隆”. 制作需求一： “彩色电视机的基本组成”界面文件需要添加两个外形一致的按钮，使用“克隆”技术即可快速得到类似的按钮。具体操作步骤：（1）将“基本组成界面”文件打开，在“图层”面板中单击“新建图层”按钮，如图 4-32 所示，新建一个“图层 2”。. 图 4-32. （2）使用矩形选取工具在界面中定义一个矩形区域，如图 4-33 所示。. 图 4-33. （3）鼠标在“过渡填充”工具上停留几秒，会出现该栏的备选工具，选择“油漆桶”工具，如图 4-34 所示。.

(15) 第 4 章图像的编辑处理. 85. 图 4-34. （4）确保软件的前景色为白色，选择了“油漆桶”工具后再单击先前定义的矩形框，矩形框被填充了白色，如图 4-35 所示。. 图 4-35. （5）矩形虚线框的去除可以使用快捷键 Ctrl+D，也可以选用“矩形”选取工具，在矩形外部单击一下，矩形虚线即刻消失，如图 4-36 所示。.

(16) 86. 平面图形图像处理（第二版）. 图 4-36. （6）白色矩形与界面背景不是很协调，如图 4-37 所示，单击“橡皮”工具，在格式工具栏定义橡皮大小和边缘轮廓，这里需要选用过渡、柔和的橡皮。. 图 4-37. （7）用“橡皮”工具将白色矩形的两端适当擦除，如图 4-38 所示。（8）按钮外形就制作完毕了，需要进行按钮的“克隆”复制。操作很简单，如图 4-39 所.

(17) 第 4 章图像的编辑处理. 87. 示，在“图层”面板中将“图层 2”按钮层拖拽到“新建/复制”按钮上，“图层 2”按钮层就会复制，成为“图层 2 副本”，复制的按钮外形与“图层 2”的一样。. 图 4-38. 图 4-39. （9）使用“移动”工具将复制的按钮移动到合适的位置，如图 4-40 所示。（10）在按钮上添加文字，最终的按钮效果如图 4-41 所示。. 图 4-40. 图 4-41. 若需要“克隆”复制的物体没有单独的层，复制就比较复杂了。.

(18) 88. 平面图形图像处理（第二版）. 制作需求二：克隆“基本组成界面”背景图中的紫色光晕。具体操作步骤（方法一）：（1）将“基本组成界面”文件打开，首先对需要复制的对象进行范围的选取。如图 4-42 所示，选用“套索”工具，并且在格式工具栏中设置 10 像素的羽化效果。. 图 4-42. （2）将需要复制的部分圈选出来，如图 4-43 所示。. 图 4-43. （3）单击“编辑”→“拷贝”命令，如图 4-44 所示，先将选取区域的图像复制到剪贴板，.

(19) 第 4 章图像的编辑处理. 89. 再使用“粘贴”命令粘贴到“基本组成界面”文件中。. 图 4-44. （4）可以发现在“图层”面板中增加了一个复制层“图层 2”，如图 4-45 所示。（5）用移动工具将复制层移动到合适的位置，如图 4-46 所示。. 图 4-45. 图 4-46. 具体操作步骤（方法二）：（1）单击“橡皮图章”按钮，在格式工具栏设置合适的大小，如图 4-47 所示。.

(20) 90. 平面图形图像处理（第二版）. 图 4-47. （2）按住 Alt 键的同时单击需要复制的对象，此时的“橡皮图章”如图 4-48 所示。这样的操作是为“橡皮图章”定义图像。. 图 4-48. （3）定义完毕后，松开 Alt 键，鼠标光标恢复为圆形，用鼠标在需要添加的位置涂抹即刻出现先前定义的图像，如图 4-49 所示。.

(21) 第 4 章图像的编辑处理. 91. 图 4-49. 可以发现在“图层”面板中，复制的结果并没有增加图层，如图 4-50 所示。这样的“克隆”方法有自己的优势，也有不好的方面。例如，先前定义的图像在复制时不能十分清晰地确定复制的位置，复制的图像不能随意改动。. 图 4-50. 4.4. 图像的“修复”. 制作需求：在“彩色电视机的基本组成”界面中，需要添加一个实体彩色电视机。用来扫描的画册由于多次翻阅，有了一些折痕，扫描得到的数字照片（彩色电视机图像）右下角也出现了一条折痕，严重影响美观，因此需要使用软件进行“修复”处理。具体操作步骤：（1）将扫描文件打开，仔细观察受损画面的内容，如图 4-51 所示，局部“损伤”的色块完全可以通过附近的色块来填补，这里的“修复”其实是一个局部“克隆”、局部填补的过程。（2）为了选取的精确，操作时最好将图像放大，如图 4-52 所示。（3）根据受损色块的外形来定义需要复制的区域，如图 4-53 所示，用“套索”工具进行选取，并且将选取范围设置 2px 的羽化。.

(22) 平面图形图像处理（第二版）. 92. 图 4-51. 图 4-52. 图 4-53. （4）将圈选的区域虚线框移动到附近的正常色块，如图 4-54 所示。（5）单击“编辑”→“拷贝”命令，先将选取区域的图像复制到剪贴板，再使用“粘贴” 命令粘贴，如图 4-55 所示。此时会出现一个复制的新层。（6）使用“移动”工具将复制的色块移到相应的位置，如图 4-56 所示。（7）色块的复制、填充必须分块进行，不同的色块最好分多次进行，按照上述同样的方法，先是定义受损色块的区域外形，如图 4-57 所示。.

(23) 第 4 章图像的编辑处理. 93. 图 4-54. 图 4-55. （8）移到正常色块的区域复制色块，如图 4-58 所示。（9）在复制色块时，注意此时的操作层必须在原稿图层上，如图 4-59 所示，即具有正常色块的图层。.

(24) 平面图形图像处理（第二版）. 94. 图 4-56. 图 4-58. 图 4-57. 图 4-59. （10）复制填充好后，可能会发现复制的色块与原图的色调有些不融合，或是过浅或是过深，还有明显的界线，主要是先前复制的色块与填充区域的色块在亮度上有一定的区别造成的，需要作进一步的处理，如图 4-60 所示，单击复制层，确保后面的操作在复制层上进行。（11）单击“图像”→“调整”→“亮度/对比度”命令，如图 4-61 所示，在弹出的设置面板中适当调节设置参数，注意观察图像的变化，最终达到色彩的正常过渡。.

(25) 第 4 章图像的编辑处理. 图 4-60. 图 4-61. 95.

(26) 96. 平面图形图像处理（第二版）. （12）还可以通过工具栏的“加深”工具和“减淡”工具来进行，如图 4-62 所示，这两个工具的使用，只要在图像上直接涂抹即可起到加深或减淡的效果。. 图 4-62. （13）最终的修复效果如图 4-63 所示，同样，这样的修复也可以使用“橡皮图章”来进行，工具的使用在上面已作了详细的介绍，读者可以自行练习。. 图 4-63. 4.5. 图像的剪切处理. 制作需求一：扫描画册得到的彩色电视机数码照片有黑色背景，不符合界面需求，需要.

(27) 第 4 章图像的编辑处理. 将黑色背景剪切去除，并将彩电图像移到界面文件中。具体操作步骤（方法一）：（1）将扫描并经过修复的彩电图片打开，如图 4-64 所示，选择“多边形套索工具” 。. 图 4-64. （2）沿着彩电的外形边缘勾勒出选取范围，如图 4-65 所示。. 图 4-65. 97.

(28) 98. 平面图形图像处理（第二版）. （3）选取范围确定后，单击“选择”→“修改”→Feather 命令，设置羽化半径为 2 像素，如图 4-66 所示。. 图 4-66. （4）若需要背景色改为统一的白色，可以使用“选择”→“反向”命令，将选取范围进行反转，即先前选取的区域改为非选取区域，如图 4-67 所示。（5）此时黑色的背景成为选取区域，单击“编辑”→“清除”命令，如图 4-68 所示，黑色背景被清除。. 图 4-67.

(29) 第 4 章图像的编辑处理. 图 4-67（续图）. 图 4-68. 99.

(30) 100. 平面图形图像处理（第二版）. 图 4-68（续图）. （6）若需要透明背景，彩电外形被勾勒后，直接使用“编辑”→“拷贝”和“粘贴”命令，在“图层”面板中出现复制的新层，如图 4-69 所示。. 图 4-69. （7）直接拖拽“背景”图层到“垃圾桶”按钮，如图 4-70 所示，背景原图消失。.

(31) 第 4 章图像的编辑处理. 101. 图 4-70. （8）透明背景的图片如图 4-71 所示，选择合适的路径进行存储，为保证透明背景，只能选择 Photoshop 特有的 PSD 格式存储。这样的图片可以直接拖拽到其他文件中使用，十分方便。. 图 4-71. 具体操作步骤（方法二）：（1）使用“钢笔”工具来剪除背景。将扫描并经过修复的彩电图片打开，如图 4-72 所示，选择“钢笔”工具。（2）设置“钢笔”工具的参数，单击“路径”按钮，如图 4-73 所示。（3）沿着彩电的外形边缘勾勒出钢笔路径，如图 4-74 所示。（4）用“钢笔”工具将彩电的外形勾勒出路径后，通过“路径”面板上的按钮将路径转换成选区，如图 4-75 所示。.

(32) 102. 平面图形图像处理（第二版）. 图 4-72. 图 4-73. 图 4-74.

(33) 第 4 章图像的编辑处理. 103. 图 4-75. （5）选取范围确定后，单击“选择”→“修改”→Feather 命令，设置羽化半径为 2 像素，如图 4-76 所示。. ` 图 4-76. （6）若需要背景色改为统一的白色，可以使用“选择”→“反向”命令，将选取范围进行反转，即先前选取的区域改为非选取区域，如图 4-77 所示。（7）此时黑色的背景成为选取区域，单击“编辑”→“清除”命令，如图 4-78 所示，黑色背景被清除。.

(34) 104. 平面图形图像处理（第二版）. 图 4-77.

(35) 第 4 章图像的编辑处理. 105. 图 4-78. （8）若需要透明背景，彩电外形被勾勒后直接单击“编辑”→“拷贝”和“粘贴”命令，在“图层”面板中出现复制的新层，如图 4-79 所示。.

(36) 106. 平面图形图像处理（第二版）. 图 4-79. （9）直接拖拽“背景”图层到“垃圾桶”按钮，如图 4-80 所示，背景原图消失。. 图 4-80. （10）透明背景的图片如图 4-81 所示，选择合适的路径进行存储，为了保证透明背景，只能选择 Photoshop 特有的 PSD 格式存储。这样的图片可以直接拖拽到其他文件中使用，十分方便。制作需求二：在后期实现按钮交互功能时，不同的鼠标操作对应不同的样式显示，一般通过多张按钮图片的切换实现按钮变化，需要将按钮图片以合适的尺寸单独存储。此时需要对图片大小进行剪切。具体操作步骤：（1）将前面制作好的按钮界面文件打开，如图 4-82 所示。.

(37) 第 4 章图像的编辑处理. 图 4-81. 107. 图 4-82. （2）选择“剪切”工具，在界面文件中单击、拖动、单击，形成框选矩形，如图 4-83 所示，矩形外部全部被黑色遮罩覆盖。. 图 4-83. （3）鼠标在矩形框内部双击，图像就以矩形框的界线剪切，如图 4-84 所示。（4）将图像另存为“按钮 1” ，如图 4-85 所示。（5）在“图层”面板中，单击文字层的“层效果”按钮，弹出文字层先前定义好的层效果设置面板，单击“颜色叠加”选项，如图 4-86 所示。.

(38) 108. 平面图形图像处理（第二版）. 图 4-84. 图 4-85. 图 4-86.

(39) 第 4 章图像的编辑处理. （6）将覆盖颜色改为蓝色，如图 4-87 所示。. 图 4-87. （7）按钮文字的填充色由原先的黄橘红变成蓝色，如图 4-88 所示。. 图 4-88. （8）将变色的按钮另存为“按钮 1+” ，如图 4-89 所示。. 图 4-89. 109.

(40) 110. 平面图形图像处理（第二版）. （9）另外一个按钮的剪切重复以上操作即可。最后，每个按钮得到两张图片，在后面的按钮交互设置中可以直接调用。. 4.6. 图像的旋转调整. 制作需求：扫描得到的彩电图片经过剪切处理已经将黑色背景去除，如图 4-90 所示，可以将图像直接拖拽到“彩色电视机的基本组成”界面文件里使用，但是图像大小、变形角度需要作进一步的调整。. 图 4-90. 具体操作步骤：（1）将“基本组成界面”文件和透明彩电图片都打开，用“移动”工具将彩电图片直接拖拽到“基本组成界面”文件中，如图 4-91 所示。. 图 4-91. （2）由于彩电图片是扫描图，图像分辨率为 300 像素/英寸，在屏幕上的显示尺寸很大，.

(41) 第 4 章图像的编辑处理. 111. 如图 4-92 所示，拖拽到“基本组成界面”文件中，彩电图片很大，需要进行尺寸调整。. 图 4-92. （3）单击“编辑”→“变换”→“缩放”命令，如图 4-93 所示，对图像进行缩放处理。. 图 4-93. （4）由于图像过大，缩放调节框超出了文件显示区域，只好使用格式工具栏的缩放百分.

(42) 平面图形图像处理（第二版）. 112. 比设置来实现缩放，如图 4-94 所示。. 图 4-94. （5）图像调整到合适的大小后，单击工具栏中的任何工具，弹出缩放确认面板，如图 4-95 所示，单击“应用”按钮。（6）经过缩放，如图 4-96 所示，彩电大小适合界面的整体格局。. 图 4-95. 图 4-96. （7）若图像的外形不符合界面需求，可以使用其他变形工具继续调整，单击“编辑”→ “变换”→“旋转”命令可以实现图像的旋转，如图 4-97 所示。.

(43) 第 4 章图像的编辑处理. 113. 图 4-97. （8）单击“编辑”→“变换”→“斜切”命令可以实现图像纵横方向的变形，如图 4-98 所示。. 图 4-98. （9）单击“编辑”→“变换”→“扭曲”命令可以实现图像任意方向上的变形，如图 4-99 所示。（10）单击“编辑”→“变换”→“透视”命令可以实现视觉缩放，即单侧双向缩放，如图 4-100 所示。.

(44) 114. 平面图形图像处理（第二版）. 图 4-99. 图 4-100. （11）单击“编辑”→“变换”→“旋转 180°” 、 “旋转 90°（顺时针） ” 、 “旋转 90°（逆时针） ”命令可以分别实现图像的 180 度旋转、90 度顺时针旋转、90 度逆时针旋转，如图 4-101 所示。. 图 4-101.

(45) 第 4 章图像的编辑处理. 115. 图 4-101（续图）. （12）单击“编辑”→“变换”→“水平翻转”和“垂直翻转”命令可以实现图像的水平镜面反转和垂直镜面反转，如图 4-102 所示。. 图 4-102.

(46) 116. 平面图形图像处理（第二版）. 图 4-102（续图）. 4.7. 图像的色彩校正. 制作需求一： “彩色电视机的基本组成”界面文件中，添加的彩电图像颜色有些暗，与鲜艳的背景图相比不够明亮，需要进行必要的亮度调整。具体操作步骤：（1）将添加了彩电的“基本组成界面”文件打开，如图 4-103 所示。. 图 4-103. （2）单击“图像”→“调整”→“亮度/对比度”命令，如图 4-104 所示。.

(47) 第 4 章图像的编辑处理. 117. 图 4-104. （3）在弹出的对话框中适当调节亮度、对比度的参数，如图 4-105 所示。彩电图像的亮度增加，调试结果如图 4-106 所示。. 图 4-105. 图 4-106. 制作需求二：在“彩色电视机的基本组成”界面文件中，还需要添加“退出”按钮。按钮的图文设计是随机浮动的小球，但是从素材库中挪用的小球颜色与背景颜色不匹配，如图 4-107 所示，需要进行色调的调整，变成如图 4-108 所示的最终效果。色调变换的操作方法有很多，如图 4-109 所示， “图像”→“调整”命令子菜单下的所有选项大部分是关于色彩调整的。.

(48) 平面图形图像处理（第二版）. 118. 图 4-107. 图 4-108. 图 4-109. 方法一：单击“图像”→“调整”→“色彩平衡”命令，在弹出的对话框中改变各种颜色的比例关系即可达到变色的效果，如图 4-110 所示。方法二：单击“图像”→“调整”→“色相/饱和度”命令，在弹出的对话框中改变采用的色系也可以达到变色的效果，如图 4-111 所示。方法三：单击“图像”→“调整”→“变化”命令，在弹出的对话框中通过单击需要颜色的按钮达到变色的效果，如图 4-112 所示，十分直观。.

(49) 第 4 章图像的编辑处理. 图 4-110. 图 4-111. 图 4-112. 119.

(50) 120. 平面图形图像处理（第二版）. 另外，通过“图像”→“模式”→“灰度”命令将图像的色彩模式变为灰度图，图像的色彩自然变成灰色的，如图 4-113 所示。. 图 4-113. 制作需求三： “彩色电视机的基本组成”界面的退出按钮设计需要的是多个浮动的小球，为达到很好的视觉效果，需要添加一些艺术效果，对整个界面起到活跃气氛的作用。对小球的艺术加工还是通过层效果来进行，在前面的文字标题的制作过程中，对文字的艺术加工也是通过层效果来进行的，现在将这些随机组合的效果添加到图层上，同样会得到丰富、精彩的视觉特效。具体操作步骤：（1）单击“图层”→“图层样式”→“混合选项”命令，弹出“图层样式”对话框，选用“外发光”和“内发光”两个层效果即可满足制作需求，如图 4-114 所示。. 图 4-114.

(51) 第 4 章图像的编辑处理. 121. （2）小球的艺术效果添加完毕后，再进行复制工作。如图 4-115 所示，在“图层”面板中，用鼠标将图层 3（小球所在图层）拖拽到“复制”按钮上。. 图 4-115. （3）通过“编辑”→“变换”→“缩放”命令将复制的小球缩小，如图 4-116 所示。（4）重复上述复制、缩小操作，复制出多个小球，如图 4-117 所示。. 图 4-116. 图 4-117. （5）最后添加上“退出”文字，如图 4-118 所示，退出按钮制作完毕。. 图 4-118.

(52) 122. 平面图形图像处理（第二版）. 4.8. 添加滤镜效果. 制作需求：“退出”按钮设计采用的是随机浮动的小球，配合背景的动态视觉感观还需要进一步加强。因此决定在小球右侧添加运动轨迹，如图 4-119 所示。. 图 4-119. 具体操作步骤：（1）使用文字工具在界面中添加一些不规则排列的数字或字符，如图 4-120 所示。. 图 4-120. （2）在“图层”面板中，文字层有“T”字标识，如图 4-121 所示，在文字层上右击，在.

(53) 第 4 章图像的编辑处理. 123. 弹出的快捷菜单中选择“栅格化文字”选项，将文字层转换为图形层。转换完毕后，文字层独有的“T”字标识消失，如图 4-122 所示。. 图 4-121. 图 4-122. （3）单击“滤镜”→“模糊”→“动感模糊”命令，使用运动模糊滤镜，如图 4-123 所示。. 图 4-123.

(54) 124. 平面图形图像处理（第二版）. （4）在弹出的“动感模糊”对话框中，将模糊距离设置为 400 像素，观察模糊效果，如图 4-124 所示。. 图 4-124. （5）运动光晕有些过宽，视觉效果有些牵强，还需要进一步调整，单击“编辑”→“变换”→“缩放”命令，如图 4-125 所示。. 图 4-125. （6）将运动光晕适当缩小宽度，如图 4-126 所示。（7）若感觉光晕过浅，可以在“图层”面板中拖拽复制，光晕就会变得十分耀眼，如图 4-127 所示。.

(55) 第 4 章图像的编辑处理. 图 4-126. 125. 图 4-127. （8）复制的光晕层可以适当移动位置，营造出运动的视觉特效，如图 4-128 所示。. 图 4-128. （9）还可以使用羽化边缘的橡皮进行局部修饰，使运动光晕更加的形象、逼真，如图 4-129 所示。. 图 4-129.

(56) 126. 平面图形图像处理（第二版）. 最终的处理效果如图 4-130 所示。. 图 4-130. Photoshop 的“滤镜”菜单可以实现各种各样的视觉特效，下面简要了解一下各类滤镜的特色功能。 “滤镜”菜单的“艺术效果”子菜单中的滤镜是模仿各种材质画布绘制的美术图像效果，如图 4-131 所示。. 图 4-131.

(57) 第 4 章图像的编辑处理. 127. 图 4-131（续图）. “滤镜”菜单的“画笔描边”子菜单中的滤镜是模仿各种画笔的绘制效果，如图 4-132 所示。.

(58) 128. 平面图形图像处理（第二版）. 图 4-132.

(59) 第 4 章图像的编辑处理. 图 4-132（续图）. “滤镜”菜单的“扭曲”子菜单中的滤镜是实现各种形式的变形，如图 4-133 所示。. 图 4-133. “滤镜”菜单的“杂色”子菜单中的滤镜是添加或去除各种杂点，如图 4-134 所示。. 129.

(60) 130. 平面图形图像处理（第二版）. 图 4-133（续图）. 图 4-134.

(61) 第 4 章图像的编辑处理. 131. 图 4-134（续图）. “滤镜”菜单的“像素化”子菜单中的滤镜是实现各种形式的块化处理，如图 4-135 所示。. 图 4-135.

(62) 132. 平面图形图像处理（第二版）. 图 4-135（续图）. “滤镜”菜单的“渲染”子菜单中的滤镜是可以十分简单的实现各种渲染效果，如图 4-136 所示。 “滤镜”菜单的“锐化”子菜单中的滤镜是实现图像的各种锐化处理，如图 4-137 所示。. 图 4-136.

(63) 第 4 章图像的编辑处理. 133. 图 4-136（续图）. “滤镜”菜单的“素描”子菜单中的滤镜是模仿各种素描的美术效果，如图 4-138 所示。. 图 4-137.

(64) 134. 平面图形图像处理（第二版）. 图 4-138. “滤镜”菜单的“风格化”子菜单中的滤镜是实现各种风格的艺术效果，如图 4-139 所示。. 图 4-139. “滤镜”菜单的“纹理”子菜单中的滤镜是添加各种纹理，如图 4-140 所示。.

(65) 第 4 章图像的编辑处理. 135. 图 4-140. 在以后的图形处理中，各种滤镜的使用可以随机结合，创造出各种眩目的视觉特效。. 4.9. 图像的“整合”. 制作需求： “基本组成界面”文件是软件的单元操作界面，承担软件运行时的各种交互功能。界面需要的图像素材大体已制作完毕，接下来的工作就是将各种界面成分组合到一起，仔细观察发现界面彩电的画面与整个界面的内容不符，修改方法是将其他画面整合到彩电的屏幕区域。具体操作步骤：（1）将制作好的界面文件打开，前面单项介绍制作的所有对象一一陈列，如图 4-141 所示。（2）使用“放大”工具将彩电对象局部放大，如图 4-142 所示。. 图 4-141. 图 4-142.

(66) 136. 平面图形图像处理（第二版）. （3）用“套索”工具将彩电屏幕区域勾勒出来，如图 4-143 所示。. 图 4-143. （4）在“图层”面板中，确保“彩电”图层为当前操作层，单击“复制”按钮，在“彩电”图层的上层新建一个空图层“图层 3”，如图 4-144 所示。. 图 4-144. （5）前景色设置为黑色，再使用“油漆桶”工具将勾勒区域填充黑色，如图 4-145 所示。（6）选择“矩形选区工具”，在图像文件的非选取区域单击，选取虚线框消失，如图 4-146 所示。也可以使用 Ctrl+D 快捷键取消选取虚线框。.

(67) 第 4 章图像的编辑处理. 图 4-145. 图 4-146. 137.

(68) 138. 平面图形图像处理（第二版）. （7）单击“图层”→“图层样式”→“内发光”命令，弹出“图层样式”对话框，具体设置如图 4-147 所示。. 图 4-147. （8）荧蓝色的“内发光”层效果的添加使彩电屏幕有了通透的感觉，如图 4-148 所示。.

(69) 第 4 章图像的编辑处理. 139. 图 4-148. （9）打开一张用数码相机拍摄的彩电电路板图片，用“移动”工具将电路板图片拖拽到 “基本组成界面”文件中，如图 4-149 所示。. 图 4-149. （10）使用“变形”工具将电路板进行变形，如图 4-150 所示。（11）用带有羽化边缘的“橡皮”工具将多余的部分擦除，如图 4-151 所示。.

(70) 140. 平面图形图像处理（第二版）. 图 4-150. 图 4-151. （12）在“图层”面板中，为确保“电路板”图层为当前操作层，调节“填充”比例，适当淡化电路板，如图 4-152 所示，并在合适位置添加元器件。. 图 4-152. （13）彩电处于一个色彩虚幻的空间，过于分明、硬朗的物体边界会给人十分突兀的感.

(71) 第 4 章图像的编辑处理. 141. 觉，因此还需要对彩电的外边界进行处理。外边界的处理同样使用层效果来实现，前面对彩电黑色屏幕图层“图层 3”进行了内发光设置，右击该层的层效果“f”标识，在弹出的快捷菜单中选择“拷贝图层样式”选项，对层效果进行复制，如图 4-153 所示。. 图 4-153. （14）单击“图层”面板中的“彩电”图层“图层 2” ，使之成为当前操作层，在“彩电” 图层上右击，在弹出的快捷菜单中选择“粘贴图层样式”选项，在“彩电”图层设置了相同的层效果，如图 4-154 所示。这样的操作十分简单，可以高效地完成多个图层相同图层效果的设置，无须多次重复设置调整。. 图 4-154. （15）在“彩电”图层的外边缘同样添加内发光的效果，如图 4-155 所示，但是层效果还需要进一步调整。.

(72) 142. 平面图形图像处理（第二版）. 图 4-155. （16）双击层效果标识，在弹出的设置面板中增加外发光的层效果，如图 4-156 所示。. 图 4-156. 最后的制作效果如图 4-157 所示，彩电和虚幻的色彩空间有了比较好的融合。（17）单击“放大”工具，在文件中右击，在弹出的快捷菜单中选择“按屏幕大小缩放” 命令，图像恢复到适合软件界面显示操作的大小，如图 4-158 所示。.

(73) 第 4 章图像的编辑处理. 图 4-157. 图 4-158. 143.

(74) 平面图形图像处理（第二版）. 144. （18）界面空间十分有限，如何在有限的空间中合理、美观地安排各种素材成分，对设计制作是一个很大的考验。仔细观察图 4-159 至图 4-161 与图 4-158 有哪些细微变化，共同探讨每个界面格局的好与不好之处。. 图 4-159. 图 4-160. 图 4-161.

(75)