网页美工设计Photoshop+Flash+Dreamweaver从入门到精通 第2版

版权信息

书名：网页美工设计Photoshop+Flash+Dreamweaver从入门到精通 第2版

ISBN：978-7-115-48943-2

本书由人民邮电出版社发行数字版。版权所有，侵权必究。

您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。

我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。

如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。

版权

著　　　　李洪雷　侯水生

责任编辑　陈聪聪

人民邮电出版社出版发行　　北京市丰台区成寿寺路11号

邮编　100164 　电子邮件　315@ptpress.com.cn

网址　http://www.ptpress.com.cn

读者服务热线：(010)81055410

反盗版热线：(010)81055315

内容提要

本书是专门讲述网页美工设计的图书，全面、系统地介绍利用Photoshop、Flash和Dreamweaver进行创作与设计的方法和步骤。

全书共17章，从Photoshop CC基础入门知识开始，全面介绍图片处理、特效文字设计、Logo与按钮设计、海报设计、动画设计、网页的排版布局等内容，最后通过综合实例，力求还原一个真实的网站建设任务，让读者更有针对性地学习网页设计的技巧。

本书对具有一定Photoshop、Flash和Dreamweaver基础的网页设计与制作人员和网站建设与开发人员有较高的参考价值，同时也可作为高等院校相关专业师生、网页制作培训班学员、个人网站爱好者与自学者的学习参考书。

前言

互联网信息技术彻底改变了人们的生活和工作，越来越多的企业和个人建立起网站来宣传自己，网页设计人员的需求量大大增加。网页设计是一项综合性的技能，是现代艺术设计中具有广泛性和前沿性的新媒体艺术形式之一。一个优秀的网站在栏目设计、导航设计、色彩搭配、内容设计等方面都非常严谨。有的网站看上去可能很简单，但却能够在网络中脱颖而出，这些网站可以给人一种吸引力，让浏览者在访问的同时，不知不觉地记住网站的相关信息，感受到企业的文化。如何让网站在网络上脱颖而出？网页美工无疑起到了重要的作用。网页的图片处理、特效文字设计、Logo与按钮设计、海报设计、动画设计、网页的排版布局等，都属于网页美工的范畴。如今客户的眼光越来越挑剔，对网页的视觉要求也越来越高，因此，网页美工已经成为网页设计中不可或缺的一个重要部分。

在众多网页美工类图书中，本书第1版上市距今已经3年了，期间重印达10多次，被各大培训机构和高职院校选作教材，目前仍然具有极强的生命力。

本书特色

• 知识系统、全面。本书从基础知识开始讲起，全面介绍图片处理、特效文字设计、Logo与按钮设计、海报设计、动画设计、网页的排版布局等内容，最后还给出了综合实例，力求还原一个真实的网站建设任务，让读者的学习更有针对性。

• 采用“基础+实例”的形式讲解。为了使读者能够真正掌握网页设计的技巧，本书通过大量实例全面介绍了网页美工设计的各个环节，而且对操作过程中的每一个步骤都有详细说明。不论是初学者，还是有一定基础的读者，只要根据这些步骤操作，就能顺利完成整个实例。

本书写作人员中既包括从业多年的网页设计培训教师，又包括一线的网页制作和网站建设人员，这使得本书理论与实践并重，方法与技巧并存。在编写过程中，我们力求精益求精，但难免存在一些不足之处，读者在使用本书时如果遇到相关技术问题，可以发E-mail和我们联系。

本书对具有一定Photoshop、Flash和Dreamweaver基础的网页设计与制作人员、网站建设与开发人员有较高的参考价值，同时也可作为高等院校相关专业师生、网页制作培训班学员、个人网站爱好者与自学者的学习参考书。

资源与支持

本书由异步社区出品，社区（https://www.epubit.com/）为您提供相关资源和后续服务。

配套资源

本书提供如下资源：

• 本书素材文件请到异步社区的本书购买页面中下载。

要获得以上配套资源，请在异步社区本书页面中点击 ，跳转到下载界面，按提示进行操作即可。注意：为保证购书读者的权益，该操作会给出相关提示，要求输入提取码进行验证。

提交勘误

作者和编辑尽最大努力来确保书中内容的准确性，但难免会存在疏漏。欢迎您将发现的问题反馈给我们，帮助我们提升图书的质量。

当您发现错误时，请登录异步社区，按书名搜索，进入本书页面，点击“提交勘误”，输入勘误信息，单击“提交”按钮即可。本书的作者和编辑会对您提交的勘误进行审核，确认并接受后，您将获赠异步社区的100积分。积分可用于在异步社区兑换优惠券、样书或奖品。

与我们联系

我们的联系邮箱是contact@epubit.com.cn。

如果您对本书有任何疑问或建议，请您发邮件给我们，并请在邮件标题中注明本书书名，以便我们更高效地做出反馈。

如果您有兴趣出版图书、录制教学视频，或者参与图书翻译、技术审校等工作，可以发邮件给我们；有意出版图书的作者也可以到异步社区在线提交投稿（直接访问http://www.epubit.com/selfpublish/submissionwww.epubit.com/selfpublish/submission即可）。

如果您是学校、培训机构或企业，想批量购买本书或异步社区出版的其他图书，也可以发邮件给我们。

如果您在网上发现有针对异步社区出品图书的各种形式的盗版行为，包括对图书全部或部分内容的非授权传播，请您将怀疑有侵权行为的链接发邮件给我们。您的这一举动是对作者权益的保护，也是我们持续为您提供有价值的内容的动力之源。

关于异步社区和异步图书

“异步社区”是人民邮电出版社旗下IT专业图书社区，致力于出版精品IT技术图书和相关学习产品，为作译者提供优质出版服务。异步社区创办于2015年8月，提供大量精品IT技术图书和电子书，以及高品质技术文章和视频课程。更多详情请访问异步社区官网https://www.epubit.com。

“异步图书”是由异步社区编辑团队策划出版的精品IT专业图书的品牌，依托于人民邮电出版社近30年的计算机图书出版积累和专业编辑团队，相关图书在封面上印有异步图书的LOGO。异步图书的出版领域包括软件开发、大数据、AI、测试、前端、网络技术等。

异步社区

微信服务号

第2章　Photoshop CC入门基础

Photoshop的专长在于图像处理，而图像处理是对已有的位图图像进行编辑加工处理以及运用的过程。本章主要介绍Photoshop的基本操作，包括Photoshop CC的工作界面、前景色和背景色的设置、图像区域的选择、基本绘图工具的使用、创建文字和应用滤镜等基本知识。

学习目标

- Photoshop CC工作界面

- 设置前景色和背景色

- 创建选择区域

- 基本绘图工具

- 创建文字

- 图层与图层样式

- 应用滤镜

2.1　Photoshop CC工作界面

Photoshop CC的工作界面包括【菜单栏】、【选项栏】、【工具箱】、【文档窗口】、【图层面板】、【历史记录面板】，如图2-1所示。

图2-1　Photoshop CC的工作界面

2.1.1　菜单命令

Photoshop CC的菜单栏包括【文件】、【编辑】、【图像】、【图层】、【类型】、【选择】、【滤镜】、【3D】、【视图】、【窗口】和【帮助】11个菜单，如图2-2所示。

图2-2　菜单栏

• 【文件】菜单：对所修改的图像进行打开、关闭、存储、输出、打印等操作，如图2-3所示。

图2-3　【文件】菜单　

• 【编辑】菜单：编辑图层过程中所用到的各种操作，如复制图层，如图2-4所示。

图2-4　【编辑】菜单

• 【图像】菜单：用来修改图像的各种属性，包括图像和画布的大小、图像颜色的调整、图像的修正等，如图2-5所示。

图2-5　【图像】菜单

• 【图层】菜单：图层的基本操作命令，如图2-6所示。

图2-6　【图层】菜单

• 【类型】菜单：全新文字系统“消除锯齿”选项可弥补文字边缘成像的缺陷，使其更加逼真。这个新选项非常符合基于Windows和Mac渲染的主流浏览器的消除锯齿选项，如图2-7所示。

图2-7　【类型】菜单　

• 【选择】菜单：可以对选区中的图像添加各种效果或进行各种变化而不改变选区外的图像，还提供了各种控制和变换选区的命令，如图2-8所示。

图2-8　【选择】菜单

• 【滤境】菜单：用来添加各种特殊效果，如图2-9所示。

图2-9　【滤镜】菜单

• 【3D】菜单：增加了较多功能，可以制作出光感更为细腻、纹理更加丰富、阴影更加逼真的立体效果。“实时3D绘画”模式也可显著提升性能，并可最大限度地减少失真，如图2-10所示。

图2-10　【3D】菜单

• 【视图】菜单：用来调整图像在显示方面的属性，如图2-11所示。

图2-11　【视图】菜单

• 【窗口】菜单：用于管理工作环境，控制各种窗口，如图2-12所示。

图2-12　【窗口】菜单

• 【帮助】菜单：用于查找帮助信息，如图2-13所示。

图2-13　【帮助】菜单

2.1.2　工具箱

Photoshop的工具箱包含了多种工具。要使用这些工具，只要单击工具箱中的工具按钮即可，如图2-14所示。

图2-14　工具箱

• 【选框】工具（M）：可选择矩形、椭圆、单行和单列选区，用来在图像中选择区域。

• 【移动】工具（V）：用来移动当前图层或当前图层中选定的区域。

• 【套索】工具（L）：用来选择不规则的选区，包括自由套索、多边形套索和磁性套索工具。自由套索工具适合建立简单选区；多边形套索适合建立棱角比较分明但不规则的选区，如多边形、建筑楼房等；而磁性套索用于选择图形颜色反差较大的图像，颜色反差越大，选取的图形就越准确。

• 【魔棒】工具（W）：以点取的颜色为起点选取跟它颜色相近或相同的颜色，图像颜色反差越大，选取的范围就越广；容差越大，选取的范围就越广。

• 【裁剪】工具（C）：可以通过拖动选框，选取要保留的范围并进行裁切，选取后可以按Enter键完成操作，取消则按Esc键。

• 【切片】工具（K）：用来制作网页的热区。

• 【画笔】工具（B）：用于绘制柔边、描边。

• 【仿制图章】工具（S）：可以把其他区域的图像纹理轻易地复制到选定的区域。

• 【历史记录画笔】工具（Y）：用于恢复图像的操作，可以一步一步地恢复，也可以直接按F12键全部恢复。

• 【橡皮擦】工具（E）：可以清除像素或者恢复背景色。

• 【渐变】工具（G）：填充渐变颜色。

• 【模糊】工具（R）：模糊图像。

• 【减淡】工具（O）：使图像变亮。

• 【路径选择】工具（A）：选择整个路径。

• 【横排文字】工具（T）：在图像上创建文字。

• 【钢笔】工具（P）：绘制路径。

• 【矩形】工具（U）：绘制矩形。

• 【注释】工具（N）：添加文字注释。

• 【吸管】工具（I）：选取颜色。

• 【抓手】工具（H）：在图像窗口内移动图像。

• 【缩放】工具（Z）：可放大和缩小图像的视图。

2.1.3　工具选项栏

使用Photoshop CC绘制或处理图像时，首先需要在工具箱中选择工具，然后在选项栏中对该工具进行相应的设置，图2-15所示为【文本】工具的选项栏。

图2-15　【文本】工具的选项栏

2.1.4　浮动面板

在默认情况下，面板位于文档窗口的右侧，其主要功能是查看和修改图像。一些面板中的菜单提供其他命令和选项。可使用多种不同方式组织工作区中的面板。可以将面板存储在面板箱中，以使它们不干扰工作且易于访问，或者可以让常用面板在工作区中保持打开，还可将面板编组，或将一个面板停放在另一个面板的底部，如图2-16所示。

图2-16　面板

2.1.5　文档窗口

图像文档窗口就是显示图像的区域，也是编辑和处理图像的区域，可以实现Photoshop中所有的功能。也可以在这里对图像窗口进行多种操作，如改变窗口大小和位置，对窗口进行缩放等。文档窗口如图2-17所示。

图2-17　文档窗口

2.2　设置前景色和背景色

在Photoshop CC中，默认的前景色为黑色、背景色为白色。如果在设置了其他颜色后要恢复默认的颜色，则只需单击工具箱中的默认前景色和背景色按钮，如图2-18所示。

图2-18　单击按钮

前景色：用于显示和选取当前绘图工具所使用的颜色。单击【前景色】按钮，可以打开【拾色器】对话框并从中选取颜色，如图2-19所示。

图2-19　前景色

背景色：用于显示和选取图像的底色。选取背景色后，并不会改变图像的背景色，只有在使用部分与背景色有关的工具时才会依照背景色的设定来执行命令。单击【背景色】按钮，可以打开【拾色器】对话框并从中选取颜色，如图2-20所示。

图2-20　背景色

切换前景色与背景色：用于切换前景色和背景色。

默认前景色与背景色：用于恢复前景色和背景色为初始默认颜色，即100%黑色与白色。

在Alpha通道中，默认前景色是白色，背景色是黑色。

Photoshop使用前景色绘图、填充和描边选区，背景色是图层的底色。设置前景色和背景色具体操作步骤如下，所涉及的文件如表2-1所示。

表2-1

（1）打开素材文件“原始文件/CH02/设置背景.png”，如图2-21所示。

图2-21　打开素材文件

（2）在工具箱中选择【魔棒工具】，在舞台中单击选中草莓，如图2-22所示。

图2-22　选中草莓

（3）在工具箱中单击【背景色】按钮，打开【拾色器】对话框，选择设置的背景色，如图2-23所示。

图2-23　【拾色器】对话框

（4）单击【确定】按钮，选取背景色。按Ctrl+Delete组合键即可填充背景，如图2-24所示。单击按钮可以切换前景色和背景色。

图2-24　填充背景

2.3　创建选择区域

从图像中选取所需内容是图像处理的基础操作，各种图像的处理往往是基于图像选取并在所选区域上进行的。如何快速、精确地选取图像十分重要，这就要求掌握好各种选择工具的使用方法。

2.3.1　选框工具

在Photoshop CC中，可以使用工具箱中的【矩形选框工具】和【椭圆选框工具】在图像上选择选区。

使用【矩形选框工具】在图像上绘制选区的具体操作步骤如下，所涉及的文件如表2-2所示。

表2-2

（1）打开素材文件“原始文件/CH02/选择工具.jpg”，选择工具箱中的【矩形选框工具】，如图2-25所示。

图2-25　打开素材文件　

（2）将光标移动到图像上，按住鼠标左键进行拖动，释放鼠标后，即可绘制选区，如图2-26所示。

图2-26　绘制选区

（3）在工具箱中选择【椭圆选框工具】，如图2-27所示。

图2-27　选择【椭圆选框工具】　

（4）重复步骤（2）的操作选择圆形选区，如图2-28所示。

图2-28　绘制选区

2.3.2　套索工具

使用【套索工具】选取不规则选区的具体操作步骤如下。

（1）打开素材文件“原始文件/CH02/套索工具.jpg”，如图2-29所示。

图2-29　打开素材文件　

（2）选择工具箱中的【磁性套索工具】，如图2-30所示。

图2-30　选择【磁性套索工具】

（3）将光标移动到图像上，单击确定选取的起点，然后沿着要选取的物体边缘移动鼠标指针，如图2-31所示。

图2-31　单击选中区域　

（4）当选取的终点回到起点时，鼠标指针右下角会出现一个小圆圈，单击即可选取不规则选区，如图2-32所示。

图2-32　选取不规则选区

2.3.3　魔棒工具

Photoshop的【魔棒工具】是一个选区工具，其选择范围的多少取决于其工具选项栏中容差值的高低：容差值高，选择的范围就大；容差值低，选择的范围就小。【魔棒工具】的快捷键是字母W。图2-33所示为【魔棒工具】，【魔棒工具】选项栏如图2-34所示。

图2-33　【魔棒工具】　

图2-34　【魔棒工具】选项栏

使用【魔棒工具】选取选区的具体操作步骤如下，所涉及的文件如表2-3所示。

表2-3

（1）打开素材文件“原始文件/CH02/魔棒工具.jpg”，如图2-35所示。

图2-35　打开素材文件

（2）选择工具箱中的【魔棒工具】，如图2-36所示。

图2-36　选择【魔棒工具】

（3）在图像上单击选择区域，如图2-37所示。

图2-37　单击选中区域　

（4）选择【图层】面板中的背景图层，双击图层弹出【新建图层】对话框，如图2-38所示。

图2-38　【新建图层】对话框

（5）单击【确定】按钮，将图层解锁，如图2-39所示。

图2-39　解锁图层　

（6）按Delete键删除，抠取透明图像，如图2-40所示。

图2-40　抠取透明图像

（7）选择菜单栏中的【文件】|【导出】|【存储为Web所用格式】命令，打开【存储为Web所用格式】对话框，在文件格式下拉列表中选择PNG选项，选中【透明度】复选框，如图2-41所示。

图2-41　【存储为Web所用格式】对话框　

（8）单击【存储】按钮，打开【将优化结果存储为】对话框，【格式】选择【仅限图像】，如图2-42所示。单击【保存】按钮，即可将图像输出为背景透明的GIF图像。

图2-42　【将优化结果存储为】对话框

2.4　基本绘图工具

在处理网页图像的过程中，绘图是最基本的操作。Photoshop CC提供了非常简捷的绘图功能。下面就来讲述在Photoshop中画笔、铅笔、加深和减淡工具的应用。

2.4.1　画笔工具

【画笔工具】是工具箱中经常用到的选项，下面将讲述【画笔工具】的具体应用，所涉及的文件如表2-4所示。

表2-4

（1）打开素材文件“原始文件/CH02/画笔工具.jpg”，如图2-43所示。

图2-43　打开素材文件

（2）选择工具箱中的【画笔工具】，如图2-44所示。

图2-44　选择【画笔工具】

（3）在工具选项栏中单击【点按可打开“画笔预设”选取器】，在弹出的对话框中选择相应的画笔，并设置画笔大小，如图2-45所示。

图2-45　选择相应的画笔

（4）在图像中单击，即可得到相应的形状，如图2-46所示。

图2-46　得到相应的形状

2.4.2　铅笔工具

【铅笔工具】用于随意性的创作，可以随意地画出各种线条和形状。下面讲述【铅笔工具】的具体使用方法，所涉及的文件如表2-5所示。

表2-5

（1）打开素材文件“原始文件/CH02/铅笔工具.jpg”，如图2-47所示。

图2-47　打开素材文件

（2）选择工具箱中的【铅笔工具】，如图2-48所示。

图2-48　选择【铅笔工具】

（3）在工具选项栏中单击【点按可打开“画笔预设”选取器】，在弹出的对话框中选择相应的铅笔，并设置铅笔大小，如图2-49所示。

图2-49　选择相应的铅笔

（4）在图像中单击，即可得到相应的形状，如图2-50所示。

图2-50　得到相应的形状

2.4.3　加深和减淡工具的应用

【减淡工具】的主要作用是改变图像的曝光度，对图像中局部曝光不足的区域使用减淡工具后，可对该局部区域的图像增加明亮度（稍微变白），使很多图像的细节可显现出来。

【加深工具】的主要作用也是改变图像的曝光度，对图像中局部曝光过度的区域，使用加深工具后，可使该局部区域的图像变暗（稍微变黑）。图2-51所示为【减淡工具】和【加深工具】。【减淡工具】和【加深工具】的工具选项栏相同，图2-52所示为【减淡工具】选项栏，包括画笔、范围、曝光度。

图2-51　【减淡工具】和【加深工具】

图2-52　【减淡工具】选项栏

下面讲述【减淡工具】和【加深工具】的应用，具体操作步骤如下，所涉及的文件如表2-6所示。

表2-6

（1）打开素材文件“原始文件/CH02/加深减淡.jpg”，如图2-53所示。

图2-53　打开素材文件

（2）选择工具箱中的【减淡工具】，如图2-54所示。

图2-54　选择【减淡工具】

（3）在图像上单击即可减淡图像，如图2-55所示。

图2-55　减淡图像

（4）选择工具箱中的【加深工具】，在图像上单击即可加深图像，如图2-56所示。

图2-56　加深图像

2.5　创建文字

在Photoshop CC中，使用【文字工具】不仅可以将文字添加到文档中，同时也可以制作各种特殊的文字效果。

2.5.1　输入文字

在Photoshop中，【文字工具】包括【横排文字工具】、【直排文字工具】、【横排文字蒙版工具】和【直排文字蒙版工具】。要选取某个工具，可以单击相应的工具按钮，如图2-57所示。可以对文本进行更多的控制，如实现在输入文本时自动换行、将文本转换为路径等。

图2-57　【文字工具】

下面通过实例讲述文字的输入，具体操作步骤如下。

（1）打开素材文件“原始文件/CH02/输入文字.jpg”，选择工具箱中的【横排文字工具】，如图2-58所示。

图2-58　打开素材文件

（2）在图像上单击并输入文字，如图2-59所示。

图2-59　输入文字

2.5.2　设置文字属性

输入文字后，当对文字的字体或颜色不满意时，可以在工具选项栏或【字符】面板中修改文本属性，如图2-60所示。

图2-60　【字符】面板

选中要设置字体的文本，在【字体】下拉列表中选择要设置的字体，选中其中一个字体，单击即可使当前文本应用该字体，如图2-61所示。

图2-61　选择要设置的字体

选中要设置字体大小的文本，在【字体大小】下拉列表中设置字体的大小，如图2-62所示。单击【字符】面板中的【颜色】文本框，弹出【拾色器】对话框，如图2-63所示。

图2-62　设置字体大小

图2-63　【拾色器】对话框

在【消除锯齿】下拉列表中根据需要选择，如图2-64所示。

图2-64　消除锯齿

选择以后即可设置文字的属性，如图2-65所示。

图2-65　设置文字的属性

2.5.3　文字的变形

使用【变形文字】命令可以对文字进行多种变形，【变形文字】对话框如图2-66所示。

图2-66　【变形文字】对话框

在【变形文字】对话框中的各参数如下。

• 样式：选择要进行变形的风格，在其下拉列表中选择样式，如图2-67所示。

• 水平和垂直：选择文字弯曲的方向。

• 弯曲、水平扭曲和垂直扭曲：用来控制文字弯曲的程度。

图2-67　样式

下面通过实例讲述变形文字的创建方法，具体操作步骤如下，所涉及的文件如表2-7所示。

表2-7

（1）打开素材文件“原始文件/CH02/变形文字.jpg”，如图2-68所示。

图2-68　打开素材文件

（2）选择工具箱中的【横排文字工具】，在舞台中输入文字“繁花似锦”，如图2-69所示。

图2-69　输入文字

（3）单击工具选项栏中的按钮，弹出【变形文字】对话框，在对话框中的【样式】下拉列表中选择【上弧】选项，如图2-70所示。

图2-70　【变形文字】对话框

（4）单击【确定】按钮，即可设置变形文字效果，如图2-71所示。

图2-71　设置变形文字效果

2.6　图层与图层样式

图层是处理图像的关键，在处理和编辑图像的过程中，几乎每幅图像都会用到图层。

2.6.1　图层基本操作

添加图层是图层编辑中应首先学会的操作。新建图层一般可以通过【图层】面板或图层菜单命令来添加，而新添加的图层将位于【图层】面板中所选图层的上方。

1．添加图层

选择菜单中的【窗口】|【图层】命令，打开【图层】面板，在面板中单击【创建新图层】按钮，如图2-72所示，即可在图层的上方新建图层，如图2-73所示。

图2-72　单击【创建新图层】按钮

图2-73　新建图层

2．删除图层

对一些没有用的图层，可以将其删除，方法是选中要删除的图层，然后单击【图层】面板中的【删除图层】按钮，弹出Adobe Photoshop CC提示框，如图2-74所示，单击“确定”按钮，即可将所选的图层删除。

图2-74　Adobe Photoshop CC提示框

3．合并图层

在一幅图像中，建立的图层越多，所占用的磁盘空间越大。因此，对一些不必要分开的图层，可以将它们合并以减少文件所占用的磁盘空间，同时也可以提高操作速度。

选中要合并的图层，在【图层】面板中单击按钮，在弹出的菜单中选择相应的合并命令即可，如图2-75所示。

• 向下合并：可以将当前作用图层与下一图层合并为一个作用图层。

• 合并可见图层：可以将当前所有可见图层的内容合并到背景图层或目标图层中，而将隐藏图层排列到合并图层的上面。

• 拼合图像：可将图像中所有图层合并，并在合并过程中丢弃隐藏的图层。

图2-75　选择相应的合并选项

2.6.2　设置图层样式

图层样式是Photoshop最具有魅力的功能之一。它能够产生许多惊人的图层特效。对图层样式所做的修改，均会实时地显示在图像窗口中。灵活使用图层样式，可为艺术创作提供一个极好的实现工具。

图层样式设置非常简单，只要按以下方法操作即可。

（1）选中应用样式的图层，选择菜单中的【图层】|【图层样式】|【混合选项】命令，弹出【图层样式】对话框，在对话框中设置图层的样式，如图2-76所示。

图2-76　【图层样式】对话框　

（2）选中应用样式的图层，在【图层】面板中单击底部的【添加图层样式】按钮，如图2-77所示，在弹出的菜单中选择相应的样式，弹出【图层样式】对话框，即可进一步设置图层样式。

图2-77　【图层】面板

2.7　应用滤镜

滤镜主要用来实现图像的各种特殊效果。它具有非常神奇的作用。

2.7.1　渲染

渲染滤镜可以在图像中创建云彩图案、折射图案和模拟的光反射，也可在3D空间中操纵对象，并从灰度文件中创建纹理填充以产生类似3D的光照效果。

下面通过实例讲述渲染滤镜的应用，具体操作步骤如下，所涉及的文件如表2-8所示。

表2-8

（1）打开素材文件“原始文件/CH02/渲染.jpg”，如图2-78所示。

图2-78　打开素材文件

（2）选择菜单栏中的【滤镜】|【渲染】|【镜头光晕】命令，如图2-79所示。

图2-79　选择【镜头光晕】命令

（3）选择以后弹出【镜头光晕】设置框，设置光照效果的相应参数，如图2-80所示。

图2-80　设置光照效果的相应参数

（4）单击【确定】按钮，即可设置光照效果，如图2-81所示。

图2-81　设置光照效果

2.7.2　风格化

【风格化】滤镜采用置换像素和通过查找并增加图像的对比度的方式，在选区中生成绘画或印象派的效果。它是通过完全模拟真实艺术手法进行创作的。在使用【查找边缘】和【等高线】等突出显示边缘的滤镜后，可选择【反相】命令用彩色线条勾勒彩色图像的边缘或用白色线条勾勒灰度图像的边缘。下面通过实例讲述风格化滤镜的应用，具体操作步骤如下，所涉及的文件如表2-9所示。

表2-9

（1）打开素材文件“原始文件/CH02/渲染.jpg”，如图2-82所示。

图2-82　打开素材文件

（2）选择菜单栏中的【滤镜】|【风格化】|【拼贴】命令，如图2-83所示。

图2-83　选择【拼贴】命令

（3）在弹出的【拼贴】对话框中设置【拼贴数】和【最大位移】为10和10%，如图2-84所示。

图2-84　【拼贴】对话框

（4）单击【确定】按钮，即可设置拼贴效果，如图2-85所示。

图2-85　设置拼贴效果

2.7.3　模糊滤镜

在Photoshop中【模糊滤镜】效果共有6种，可以使图像中过于清晰或对比度过于强烈的区域产生模糊效果。它通过平衡图像中已定义的线条和遮蔽区域清晰边缘旁边的像素，使其变化显得柔和。

下面通过实例讲述模糊滤镜的应用，具体操作步骤如下，所涉及的文件如表2-10所示。

表2-10

（1）打开素材文件“原始文件/CH02/模糊.jpg”，如图2-86所示。

图2-86　打开素材文件

（2）选择菜单栏中的【滤镜】|【模糊】|【动感模糊】命令，如图2-87所示。

图2-87　选择【动感模糊】命令

（3）选择以后弹出【动感模糊】设置页面，设置模糊效果，如图2-88所示。

图2-88　设置模糊效果

（4）单击【确定】按钮，即可显示模糊效果，如图2-89所示。

图2-89　显示模糊效果

2.8　实战——滤镜制作蓝色光束

本章主要讲述了Photoshop CC入门的基础知识，下面具体讲述实际操作。制作放射光束的重点是【径向模糊】滤镜的应用，可以直接对背景素材或自制的一些纹理模糊进行处理以得到初步的放射光束，然后再用其他滤镜加强及锐化光束，后期再渲染颜色即可，如图2-90所示。

图2-90　蓝色光束效果

下面通过实例讲述滤镜制作蓝色光束的操作步骤，所涉及的文件如表2-11所示。

表2-11

（1）打开素材文件“原始文件/CH02/蓝色光束.jpg”，如图2-91所示。

图2-91　打开素材文件

（2）选择工具箱中的【画笔工具】，在选项栏中单击【点按可打开“画笔预设”选取器】按钮，在弹出的列表框中选择设置画笔，如图2-92所示。

图2-92　选择设置画笔

（3）在图像的四周随意涂抹，如图2-93所示。

图2-93　涂抹图像

（4）在选项栏中将前景色设置为黑色，在图像中间随意地涂抹，如图2-94所示。

图2-94　设置为黑色涂抹图像

（5）选择菜单中的【滤镜】|【风格化】|【凸出】命令，弹出【凸出】对话框，设置凸出的大小和深度，如图2-95所示。

图2-95　【凸出】对话框

（6）单击【确定】按钮，完成凸出效果设置，如图2-96所示。

图2-96　凸出效果

（7）打开【图层】面板，将背景图层拖到【创建新图层】按钮上，复制一个图层，如图2-97所示。

图2-97　复制图层

（8）选择菜单中的【滤镜】|【风格化】|【查找边缘】命令，设置查找边缘效果，如图2-98所示。

图2-98　设置查找边缘效果

（9）选择菜单中的【选择】|【反向】命令，设置反向效果，如图2-99所示。

图2-99　设置反向效果

（10）打开【图层】面板，将【混合模式】设置为【线性减淡】选项，如图2-100所示。

图2-100　设置为【线性减淡】选项

（11）设置线性效果，如图2-101所示。

图2-101　设置线性效果

（12）选择菜单中的【图层】|【合并可见图层】命令，进行合并图层操作，如图2-102所示。

图2-102　合并图层

（13）选择菜单中的【滤镜】|【模糊】|【径向模糊】命令，打开【径向模糊】对话框，设置模糊参数，如图2-103所示。

图2-103　【径向模糊】对话框

（14）单击【确定】按钮，完成径向模糊效果设置，如图2-104所示。

图2-104　径向模糊效果

（15）选择工具箱中的【横排文字工具】，在选项栏中设置相应的参数，在舞台中输入文字Photoshop，如图2-105所示。

图2-105　输入文本

第3章　处理设计网页图片

Photoshop是一个功能强大的图像处理软件，可以对各种格式的图片文件进行非常精细与独特的处理。正确使用Photoshop处理图片可以增加网页的美观，提高网页的下载速度。

学习目标

- 几种常见的抠图工具及方法

- 制作商品倒影的方法

- 制作格子效果图片

- 更换图片背景

- 制作木纹背景图片

3.1　几种常见的抠图工具及方法

本节将介绍如何使用Photoshop抠图，以及怎么快速得到目标选区的几种方法。

3.1.1　通道抠图

通道抠图就是通过通道抠图。抠图时要在颜色通道里观察所抠取的图像以及周围图像的对比度是否清晰，越清晰说明越容易抠出。通过通道抠图可简单快速完成细节复杂的图像，省时又省力。具体操作步骤如下，所涉及的文件如表3-1所示。

表3-1

（1）打开素材文件“原始文件/CH03/通道抠图.jpg”，如图3-1所示。

图3-1　打开素材文件

（2）打开【图层】面板，双击背景图层，弹出【新建图层】对话框，如图3-2所示。

图3-2　【新建图层】对话框

（3）单击【确定】按钮，解锁背景图层，如图3-3所示。

图3-3　解锁背景图层

（4）选择菜单中的【窗口】|【通道】命令，打开【通道】面板，将前3项去除，留有蓝色，如图3-4所示。

图3-4　【通道】面板

（5）将【蓝】图层拖到底部的【创建新通道】按钮处，复制新的通道，如图3-5所示。

图3-5　复制通道

（6）选择菜单中的【图像】|【调整】|【亮度/对比度】命令，弹出【亮度/对比度】对话框，将【亮度】设置为39，如图3-6所示。

图3-6　【亮度/对比度】对话框

（7）单击【确定】按钮，调整亮度对比度，如图3-7所示。

图3-7　调整亮度对比度

（8）选择菜单中的【选择】|【载入选区】命令，弹出【载入选区】对话框，如图3-8所示。

图3-8　【载入选区】对话框

（9）单击【确定】按钮，载入选区，如图3-9所示。

图3-9　载入选区

（10）打开【通道】面板，将【蓝 拷贝】图层去除显示，显示上面的4个图层，如图3-10所示。

图3-10　【通道】面板

（11）选择菜单中的【选择】|【反向】命令，反选图像，如图3-11所示。

图3-11　反选图像

（12）按Ctrl+Delete组合键即可删除选区背景，如图3-12所示。

图3-12　删除选区背景

（13）选择菜单中的【文件】|【置入】命令，弹出【置入】对话框，选择要置入的背景图，如图3-13所示。

图3-13　【置入】对话框

（14）单击【置入】按钮，置入背景图像，如图3-14所示。

图3-14　置入背景图像

3.1.2　魔棒抠图

魔棒抠图针对产品和背景有非常明显的色彩或者明度的区别，常与套索工具结合使用。优点是快速，缺点是不适合对复杂的背景对象进行抠图。具体操作步骤如下，所涉及的文件如表3-2所示。

表3-2

（1）打开素材文件“原始文件/CH03/魔棒抠图.jpg”，如图3-15所示。

图3-15　打开图像

（2）打开【图层】面板双击背景图层，解锁图层，如图3-16所示。

图3-16　解锁图层

（3）在工具箱中选择【魔棒工具】，在舞台中单击选择区域，如图3-17所示。

图3-17　选择区域

（4）按住键盘中的Shift键继续在舞台中单击，直到选择了合适的区域，如图3-18所示。

图3-18　选择合适区域

（5）按键盘中的Delete键删除选择区域，如图3-19所示。

图3-19　删除选择区域

（6）选择菜单中的【选择】|【反向】命令，反向图像，按Ctrl+C组合键复制图像，如图3-20所示。

图3-20　复制图像

（7）选择菜单中的【文件】|【打开】命令，在弹出的【打开】对话框中选择图像文件“广告.jpg”，如图3-21所示。

图3-21　打开图像

（8）选择菜单中的【编辑】|【粘贴】命令，粘贴抠取的图像，如图3-22所示。

图3-22　粘贴图像

3.1.3　蒙版抠图

快速蒙版和橡皮擦工具是操作十分简单的抠图工具，只要使用它们，即使是细小的头发丝也可以轻松完成抠取，这时只要在快速蒙版状态下选择与之直径相适应的画笔涂抹即可。具体操作步骤如下，所涉及的文件如表3-3所示。

表3-3

（1）打开素材文件“原始文件/CH03/蒙版抠图.jpg”，如图3-23所示。

图3-23　打开素材文件

（2）打开【图层】面板，双击背景图层，弹出【新建图层】对话框，如图3-24所示。

图3-24　【新建图层】对话框

（3）单击【确定】按钮，解锁图层，如图3-25所示。

图3-25　解锁图层

（4）选择工具箱中的【画笔工具】，在选项栏中单击【点按可打开画笔预设选取器】按钮，在弹出的列表中选择合适的画笔，如图3-26所示。

图3-26　选择画笔

（5）在工具箱中单击【以快速蒙版模式编辑】选项，将光标移动到图像上，在舞台中涂抹选择区域，如图3-27所示。

图3-27　涂抹选择区域

（6）按Ｑ键退出快速蒙版，回到【图层】面板，即可选择涂抹的区域，如图3-28所示。

图3-28　选择涂抹的区域

（7）按Delete键，删除选区的图像，如图3-29所示。

图3-29　删除选区的图像

（8）选择工具箱中的【铅笔工具】，在选项栏中将【不透明度】设置为20%，将边缘多余的背景擦除，如图3-30所示。

图3-30　删除选区

（9）选择菜单中的【文件】|【存储为Web所用格式】对话框，弹出【存储为Web所用格式】对话框，将预设格式设置为png，如图3-31所示。

图3-31　【存储为Web所用格式】对话框

（10）单击【存储】按钮，弹出【将优化结果存储为】对话框，如图3-32所示。单击【保存】按钮，即可成功将其存储为透明图像。

图3-32　【将优化结果存储为】对话框

3.2　制作商品倒影的方法

在淘宝上开店少不了商品图片，一幅好的宝贝图片胜过千言万语，每个店主都需要清晰、漂亮的图片来宣传自己的商品。

制作商品倒影的具体操作步骤如下，所涉及的文件如表3-4所示。

表3-4

（1）启动Photoshop CC，选择菜单中的【文件】|【新建】命令，弹出【新建】对话框，将【宽度】设置为450像素，【高度】设置为600像素，如图3-33所示。

图3-33　【新建】对话框

（2）单击【确定】按钮，新建空白文档，如图3-34所示。

图3-34　新建空白文档

（3）在工具箱中选择【渐变工具】，在选项栏中单击【点按可编辑渐变】，弹出【渐变编辑器】对话框，设置渐变颜色，如图3-35所示。

图3-35　【渐变编辑器】对话框

（4）单击【确定】按钮，设置渐变颜色，在选项栏中单击【径向渐变】，在舞台中绘制填充渐变，如图3-36所示。

图3-36　填充渐变

（5）选择菜单中的【文件】|【置入】命令，弹出【置入】对话框，选择合适的对象，如图3-37所示。

图3-37　【置入】对话框

（6）单击【置入】按钮，置入图像文件，将其拖动到合适的位置，如图3-38所示。

图3-38　置入图像文件

（7）打开【图层】面板，选择置入的图像图层，将其拖放到底部的【新建图层】按钮上，复制图层，如图3-39所示。

图3-39　复制图层

（8）选择菜单中的【编辑】|【变形】|【垂直翻转】命令，翻转图像，如图3-40所示。

图3-40　翻转图像

（9）打开【图层】面板，单击底部的【添加矢量蒙版】按钮，添加图层蒙版，如图3-41所示。

图3-41　添加图层蒙版

（10）选择工具箱中的【渐变工具】，设置渐变颜色，在舞台中的翻转图像上填充渐变，如图3-42所示。

图3-42　填充渐变

（11）打开【图层】面板，将【不透明度】设置为50%，如图3-43所示。

图3-43　设置不透明度

（12）设置以后即可看到倒影效果，如图3-44所示。

图3-44　倒影效果

3.3　制作格子效果图片

设计的过程中，用到格子的情况也非常多。本节就来学习如何使用简单的格子为照片添加特殊的效果，具体操作步骤如下，所涉及的文件如表3-5所示。

表3-5

（1）打开素材文件“原始文件/CH03/格子效果.jpg”，如图3-45所示。

图3-45　打开素材文件

（2）打开【图层】面板，将背景图层拖到到底部的【创建新图层】按钮上，复制背景图层，如图3-46所示。

图3-46　复制图层

（3）选择菜单中的【图像】|【调整】|【黑白】命令，弹出【黑白】对话框，设置相应的参数，如图3-47所示。

图3-47　【黑白】对话框

（4）单击【确定】按钮，黑白效果设置完成，如图3-48所示。

图3-48　黑白效果

（5）选择菜单中的【滤镜】|【扭曲】|【水波】命令，弹出【水波】对话框，设置相应的参数，如图3-49所示。

图3-49　【扩散亮光】对话框

（6）单击【确定】按钮，扭曲效果设置完成，如图3-50所示。

图3-50　扭曲效果

（7）打开【图层】面板，将不透明度设置为80%，将图层混合模式改为【柔光】，如图3-51所示。

图3-51　图层混合模式改为【柔光】

（8）柔光效果设置完成，如图3-52所示。

图3-52　柔光效果

（9）选择工具箱中的【渐变工具】，在选项栏中单击【点按可编辑渐变】按钮，弹出【渐变编辑器】对话框，单击选中渐变颜色，如图3-53所示。

图3-53　【渐变编辑器】对话框

（10）单击【确定】按钮，设置渐变颜色，在舞台中绘制填充渐变效果，如图3-54所示。

图3-54　填充渐变效果

（11）选择菜单中的【编辑】|【首选项】|【参考线、网格和切片】命令，弹出【首选项】对话框，设置参考线，如图3-55所示。

图3-55　设置参考线

（12）打开【图层】面板，单击底部的【创建新图层】按钮，新建图层1，如图3-56所示。

图3-56　新建图层1

（13）选择菜单中的【视图】|【显示】|【网格】命令，显示网格效果，如图3-57所示。

图3-57　显示网格效果

（14）选择工具箱中【单行选框工具】和【单列选框工具】，按住Shift键在网格线上单击选择选区，如图3-58所示。

图3-58　选择选区

（15）将背景色设置为白色，按Ctrl+Delete组合键填充所选线框，如图3-59所示。

图3-59　填充所选线框

（16）选择工具箱中的【魔棒工具】，在图像上单击方框选择区域，如图3-60所示。

图3-60　选择区域

（17）选择工具箱中的【渐变工具】，在选项栏中单击【点按可编辑渐变】按钮，弹出【渐变编辑器】对话框，设置渐变颜色，如图3-61所示。

图3-61　设置渐变颜色

（18）单击【确定】按钮，设置渐变颜色，在舞台中绘制即可对选中的区域进行填充，在选项栏中将【不透明度】设置为24%，如图3-62所示。

图3-62　填充区域

3.4　更换图片背景

下面通过【魔棒工具】讲述快速更换图像背景的方法，具体操作步骤如下，所涉及的文件如表3-6所示。

表3-6

（1）打开素材文件“原始文件/CH03/更改背景.jpg”，如图3-63所示。

图3-63　打开素材文件

（2）打开【图层】面板，双击背景图层，将其解锁，如图3-64所示。

图3-64　解锁背景图层

（3）选择工具箱中的【魔棒工具】，在舞台中单击选中区域，如图3-65所示。

图3-65　选中区域

（4）按住键盘中的Shift键，在舞台中继续单击选中区域，如图3-66所示。

图3-66　继续单击选中区域

（5）选择工具箱中的【渐变工具】，在选项栏中单击【点按可编辑渐变】按钮，弹出【渐变编辑器】对话框，设置渐变颜色，如图3-67所示。

图3-67　设置渐变颜色

（6）单击【确定】按钮，设置渐变颜色。在选项栏中将【不透明度】设置为50%，在舞台中按住鼠标从上向下绘制填充背景，如图3-68所示。

图3-68　填充背景

3.5　制作木纹背景图片

下面通过实例讲述创建木纹背景的方法，具体操作步骤如下，所涉及的文件如表3-7所示。

表3-7

（1）选择菜单中的【文件】|【新建】命令，新建空白文档，在工具箱中设置前景色和背景色，如图3-69所示。

图3-69　新建文档

（2）选择菜单中的【滤镜】|【渲染】|【纤维】命令，弹出【纤维】对话框，设置【差异】为14，【强度】设置为15，如图3-70所示。

图3-70　【纤维】对话框

（3）单击【确定】按钮，纤维效果设置完成，如图3-71所示。

图3-71　纤维效果

（4）选择菜单中的【滤镜】|【模糊】|【动感模糊】命令，弹出【动感模糊】对话框，将【距离】设置为5像素，如图3-72所示。

图3-72　【动感模糊】对话框

（5）单击【确定】按钮，动感模糊效果设置完成，如图3-73所示。

图3-73　动感模糊效果

（6）选择菜单中的【图像】|【调整】|【色阶】命令，弹出【色阶】对话框，设置其参数，如图3-74所示。

图3-74　【色阶】对话框

（7）单击【确定】按钮，色阶效果设置完成，如图3-75所示。

图3-75　色阶效果

（8）选择工具箱中的【矩形选框工具】，在舞台中绘制选框，按住键盘中的Shift键绘制另一个选框，如图3-76所示。

图3-76　绘制选框

（9）选择菜单中的【滤镜】|【扭曲】|【旋转扭曲】命令，弹出【旋转扭曲】对话框，将【角度】设置为110度，如图3-77所示。

图3-77　【旋转扭曲】对话框

（10）单击【确定】按钮，即可显示旋转扭曲效果，如图3-78所示。

图3-78　旋转扭曲效果