第1篇 基础入门篇

第01章 UI设计快速入行

什么是设计？什么是UI？在IT界中经常会听到各种专业词汇，跨入这个行业，才知道UI是英文User Interface的缩写。那么在学习UI设计之前，首先要了解什么是设计、UI设计的一些基本要求和制作流程，并且要熟悉Photoshop的基本操作。只有理解这几点并且掌握Photoshop的核心知识，读者才能真正开始UI设计之旅。

1.1 UI设计的基础

设计就是把一种计划、规划、设想通过视觉形式传达出来的行为过程。简单地说就是一种创造行为，一种解决问题的过程，它区别于其他艺术类的主要特征之一就是设计更具有独创性。

UI设计的相关知识，包括数字化图像基础、UI设计者与产品设计团队、UI设计与产品团队项目流程的关系等，只有认识并且了解UI设计的规范和基本原则才能够更好地设计出出色的产品。

实例 001 设计的要义

设计是以“视觉”作为沟通和表现的方式，是通过多种方式来创造和结合符号、图片和文字，借此传达想法或讯息的视觉表现。

设计的第一要义是“新”。设计要求新、求异、求变，否则设计将不能称之为设计。而这个“新”有着不同的层次，它可以是改良型也可以是创造型，但无论如何，只有新颖的设计才会在大浪淘沙中闪现出与众不同的光芒，迈出走向成功的第一步。

设计的第二要义是“合理”。一个设计之所以被称为“设计”，是因为它解决了问题。设计不可能独立于社会和市场而存在，符合价值规律是设计存在的直接原因。

设计的第三要义是“人性”。设计就是为人而设计的，服务于人们的生活需要是设计的最终目的。当然，设计也要遵循人类基本的审美意趣。对称、韵律、均衡、节奏、形体、色彩、材质以及工艺等都是能够想到的审美法则，似乎都能够在设计中找到相应的应用。

实例 002 设计的创作思路

在设计的过程中，需要很多工具来配合完成这项任务，首先人们会自然地想到纸笔。其实不尽然，纸笔只是早期所需要的最基本的工具之一。设计的主要核心是创作，所以最重要的工具就是思想，其次是草图、计算机以及争议。

1．思想

思想是最重要的设计工具。除了技术，设计要求具有判断力和创造力，设计的关键是观察、定量和分析思维中所需要的布局，再一一将其呈现。

2．草图

草图就是设计者利用各种形式将自己所需要表达的思想呈现在一个平面上，如一个图标的设计，可以利用纸笔迅速地表现出设计的大致模式。在设计过程中，这也许是设计师或者艺术总监的一种手绘素描众多概念的一部分创意过程。

3．计算机

计算机在设计行业被认为是一个不可或缺的工具。计算机和应用软件通常被专业人士认为是比传统方法更有效的生产工具。然而，仍有一些设计师继续使用手册和传统工具生产，但新的想法是通过试验工具和方法不断地探索出来的，所以不管是哪种方法，只要设计工具能够更好地表达出想要的效果就行。

4．争议

在APP设计过程中，一些设计上的争议有时候也是必要的。设计者可以使用草图探索多个或复杂的想法，并在不断地探索与争议中产生最终需要的设计成果。

实例 003 设计的分类

在设计界中，有许多种类的设计行业，大致可以分为技术设计、艺术设计、营销设计、视觉传达设计、工业设计以及环境设计6大类。下面列举出几类历史较久、广为人知的设计种类，图1-1所示为设计分类图表。

UI设计属于视觉传达设计的一种，是机器与用户交流的一种界面设计。除了以上列出来的几种设计外，还有信息设计和通用设计，信息设计就是将信息以可见的形式表现出来，方便人们辨识。通用设计，是指通过设计，使产品、空间以及标识等，不受使用者的年龄、性别、身体状况以及能力等的影响，都可以方便使用。

实例 004 什么是UI设计

UI的原意是用户界面，是英文名User Interface的缩写，概括成一句话就是——人和工具之间的界面。这个界面实际上体现在生活中的每一个环节，如计算机操作时鼠标与手就是这个界面，开车时方向盘和仪表盘就是这个界面，看电视时遥控器和屏幕就是这个界面。

所以，也可以将UI分成两大类：硬件界面和软件界面。本书主要讲述的是软件界面，即介于用户与计算机之间的一种界面，也可以称之为特殊的或者是狭义的UI设计。图1-2所示为数字电视的UI界面。

实例 005 UI设计的分类

UI设计可依工作内容分为3部分，分别是用户研究、交互设计以及界面设计。

1．用户研究——用户测试/研究工程师（User Experience Engineer）

在产品开发前期，通过调查研究，了解用户的工作性质、工作流程、工作环境以及工作中的适用习惯，挖掘用户对产品功能的需求和希望，为界面设计者提供有力的思考方向，设计出让用户满意的界面。

用户研究不是软件UI设计者主观的行为，而是站在用户的角度去探讨产品的开发设计。它最终的目标是提高产品的可用性，使设计的产品更容易被人接受、适用，并且记忆。

当产品最终被推上市场后，设计者还应主动地收集市场的反馈。因为市场反馈是用户使用后的想法，是检验界面与交互设计是否合理的标准，也是积累经验的重要途径。

2．研究人与界面的关系——交互设计师（Interaction Designer）

交互设计是指人与机器之间的交互工程，一般都是由软件工程师来制作。交互设计师的工作主要是设计软件的操作流程、树状结构、软件的结构以及操作规范等。一个软件产品在编码之前需要做的就是交互设计，并且确立交互模型和交互规范。

人机交互设计的目的在于加强软件的易用、易学以及易理解程度，使计算机真正方便地为人类服务。

3．界面设计——图形设计师（Graphic UI Designer）

国内目前大部分软件UI设计工作者都是从事界面设计工作。界面设计工作者也常被人称之为美工，但实际上并不是单纯的美术工作者，而是软件产品信息界面的设计师。

从心理学的意义上来分，界面可分为感觉和感情两个层次，用户界面设计是屏幕产品的重要组成部分。界面设计需要了解的认知心理学、设计学以及语言学等在界面中都扮演着重要的角色。用户界面设计的三大原则是把界面放在用户的控制下、减少用户的记忆负担和保持界面的一致性。

实例 006 UI设计的规范

UI设计的规范主要是为了保证设计团队朝着一个方向、风格和目的来设计出界面效果，以便于团队之间的相互合作，提高作品的质量效果。

界面是软件与用户交流最直接的层面，界面的好坏决定用户对软件的第一印象。设计良好的界面能够引导用户自己完成相应操作，起到向导作用。界面设计主要是为了达到以下目的。

以用户为中心。设计由用户控制的界面，而不是界面控制用户。

清楚一致的设计。所有界面的风格保持一致，具有相同含义的术语保持一致，易于用户理解和使用。

拥有良好的直觉特征。以用户所熟悉的现实世界事务的抽象来给用户暗示和隐喻，帮助用户迅速学会软件的使用。

较快的响应速度。

界面要简洁、美观。

UI设计时应该重视以下规则。

实例 007 设计基本原则

界面不仅是一个应用程序，它应该能为用户服务，是用户与程序沟通的唯一途径。图1-3所示为设计基本原则的流程图。

设计的基本原则有以下几点。

简易性：界面的简洁是为了让用户便于使用、便于了解，并降低用户发生错误选择的可能性。

用户的语言：界面中要使用能反应用户本身的语言，而不是设计者的语言。

易记性：人脑不是计算机，在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆极不稳定且有限，24小时内的遗忘率为25%。所以对用户来说，浏览信息要比记忆信息更容易。

一致性：是每一个优秀界面都具备的特点。界面的结构必须清晰且一致，风格必须与内容一致。

清楚：在视觉效果上便于理解和使用。

用户的观点和熟练度：想他们所想，做他们所做。用户总是按照他们自己的方法理解和使用。

排列：一个有序的界面能让用户轻松地使用。

安全性：用户能自由做出选择，并且所有选择都是可逆的。在用户做出危险的选择时有信息介入系统并提示。

灵活性：简单来说就是要让界面更加方便被用户使用，但不同于上述几点。即互动多重性，不局限于单一的工具。

人性化：高效率和用户满意度是人性化的体现。设计应包括专家级和初级玩家系统，即用户可根据自己的习惯定制界面，并能保存设置。

实例 008 设计流程及方法

通常一个团队将UI设计流程分为4个简单的阶段：分析、设计、配合以及验证。下面就来简单地介绍这4个阶段。图1-4所示为UI设计流程图。

1．分析阶段

分析阶段又分为需求分析、用户场景模拟以及竞品分析。简单地说就是用户体验的一个过程，从用户体验中不断地开拓、探索，寻求用户最满意的效果。

2．设计阶段

设计阶段采用面向场景、面向事件驱动和面向对象的设计方法。这个阶段是在设计过程中同时考虑到3种不同情况而做出来的设计措施，产品的用户定位对UI设计师来说是最重要的因素。

3．配合

UI设计师交出产品设计图时，需要更多的开发人员、测试人员进行截图配合。

4．验证

产品完成后，UI设计师需对产品的效果进行验证。是否与当初设计产品时的想法一致，是否可用，用户是否接受，以及与需求是否一致，都需要UI设计师验证。

实例 009 项目需求分析

UI设计项目的需求包括以下3个方面。

1．设计需求

（1）系统设计需求文档。

（2）系统结构文档（如栏目划分、目录结构以及导航方式等）。

（3）较复杂页面表现形式草图。

（4）较复杂业务流程文档。

（5）如可能，提供参考和示例站点。

（6）与程序员沟通部分页面实现方法。

2．页面制作需求

（1）经过确认的美术设计方案图。

（2）系统设计需求文档等，较复杂业务流程文档。

（3）所需页面脚本需求，与程序员沟通部分页面实现方法。

3．提交给程序员的内容

（1）静态模版页：首页以及二级页面HTM文件、CSS样式单以及相关页面Java Script代码，可用于直接嵌入代码。栏目的命名规则与程序协商，建立统一的规范。

（2）所有按键图标统一。

（3）部分容易混淆颜色的色值。

（4）图片统一放在一个目录下。

实例 010 UI设计者与产品设计团队

UI设计者需要怎样与产品设计团队一起协同合作呢？最重要的是建立一个严格的产品开发过程，设计者必须要平等地与工程、市场以及业务管理部门进行协同工作，这种协同工作需要明确每个方面的责任和权利，保证分工明确，从而帮助企业从设计中获得更大的收益。

下面介绍的这种责任划分，平衡了每个方面的权利，可以极大地提高设计的成功率，并保证企业在产品开发的整个周期中给予应有的支持。

设计团队负责用户对产品的满意度。

工程团队负责产品的实现和制造。

市场营销团队负责说服顾客购买产品。

管理团队负责产品的利润率。

1.2 Photoshop UI设计快速入门

通过前面对设计概念的认识和对UI设计的了解，下面开始学习UI设计最需要的工具之一——Photoshop应用软件。本节将通过运用新版本Photoshop CC软件进入UI设计的初级阶段。在这个阶段中首先需要学习Photoshop CC最基本，也是在设计中最常用到的操作知识。

实例 011 了解Photoshop和UI的关系

Photoshop是美国Adobe公司开发的一款图形图像软件，目前最新的版本是Photoshop CC。多数人对于Ph oshop的了解仅限于“一个很好的图像编辑软件”，应用也是在图像处理的层次上，实际上，Photoshop除了在平面广告设计领域有广泛的应用外，在网页与界面设计领域同样有着广泛的运用。

UI界面是由色块和线条构成的，通过不同颜色的变换和制作技巧，可以使UI界面变得更加逼真、丰富。Photoshop不仅能够满足UI界面的制作需要，利用各种滤镜和命令快速地实现用户所需要的效果，还可以利用外挂插件增强Photoshop的许多功能，使设计者能够更好、更方便地设计出想要的效果。

实例 012 启动Photoshop应用程序

下面以在Windows 7中启动Photoshop CC软件为例，介绍启动Photoshop CC软件的操作方法。

操作步骤

01 安装好Photoshop CC应用软件后，单击“开始”|“所有程序”|“Adobe Photoshop CC”命令，如图1-5所示。

02 系统开始加载Photoshop CC应用程序，如图1-6所示。

提示

03 应用程序加载完毕后，进入Photoshop CC工作界面，单击“文件”|“打开”命令，打开一张素材文件，如图1-7所示。

实例 013 退出Photoshop应用程序

当用户完成图像文件的编辑后，若不再需要使用Photoshop CC软件，则可以退出该程序，以提高系统的运行速度。

将鼠标指针移至图像编辑窗口的“关闭”按钮，如图1-8所示，单击鼠标左键，即可关闭当前打开的图像文件。

将鼠标指针移至菜单栏右侧的“关闭”按钮，如图1-9所示，单击鼠标左键，即可关闭打开的所有图像文件，退出Photoshop CC应用程序。

实例 014 了解Photoshop工作界面

运用Photoshop对UI界面进行各种处理，就需要认识并了解该软件的工作界面。Photoshop CC软件的工作界面主要由菜单栏、状态栏、工具箱、工具属性栏、图像编辑窗口和浮动面板6个部分组成，如图1-10所示。

1．菜单栏

Photoshop CC软件把标题栏和菜单栏进行了合并。菜单栏位于整个窗口的顶端，显示了当前应用程序的名称、菜单命令以及用于控制文件窗口显示大小的最小化、最大化（还原窗口）、关闭窗口等几个按钮，如图1-11所示。菜单栏由“文件”“编辑”“图像”“图层”“类型”“选择”“滤镜”“3D”“视图”“窗口”和“帮助”11个菜单命令组成，单击任意一个菜单项都会弹出其包含的命令。Photoshop CC软件中的绝大部分功能都可以利用菜单命令来实现。在菜单栏左侧的程序图标单击鼠标左键，在弹出的下拉菜单中可以执行最小化窗口、最大化窗口、还原窗口和关闭窗口等操作。如果菜单中的命令呈现灰色，则表示该命令在当前编辑状态下不可用；如果菜单命令右侧有一个三角符号，则表示此菜单包含有子菜单。

2．状态栏

状态栏位于图像编辑窗口的底部，主要用于显示当前所编辑图像的各种参数信息。状态栏主要由显示比例、文件信息和提示信息3部分组成。

状态栏右侧显示的是图像文件信息，单击文件信息右侧的小三角形按钮即可弹出快捷菜单，其中包含了当前图像文件信息的各种显示方式选项，如图1-12所示。

3．工具箱

工具箱位于工作界面的左侧，如图1-13所示。要使用工具箱中的工具，只要单击工具按钮即可在图像编辑窗口中使用。若在工具按钮的右下角有一个小三角形，表示该工具按钮还有其他工具，在工具按钮上单击鼠标左键并长按左键，可弹出所隐藏的工具选项，如图1-14所示。

4．工具属性栏

工具属性栏一般位于菜单栏的下方，主要用于对所选取工具的属性进行设置，它提供了控制工具属性的选项，其显示的内容会根据所选工具的不同而发生改变。在工具箱中选取相应的工具后，工具属性栏将显示该工具可使用的功能，如选取工具箱中的快速选择工具，相应的工具属性栏如图1-15所示。

5．图像编辑窗口

在Photoshop CC软件工作界面的中间，呈灰色区域显示的即为图像编辑工作区。当打开一个文档时，工作区中将显示该文档的图像编辑窗口，图像编辑窗口是编辑图像的主要工作区域，图形的绘制或图像的编辑都在此区域中进行。在图像编辑窗口中可以实现Photoshop CC软件中的所有功能，也可以对图像编辑窗口进行多种操作，如改变窗口大小和位置等。当新建或打开多个文件时，图像标题栏的显示呈灰白色时，即为当前编辑窗口，如图1-16所示，此时所有操作将只针对当前图像编辑窗口。若想对其他图像窗口进行编辑，则移动鼠标指针至相应的图像标题栏上，单击鼠标左键即可。

6．浮动面板

浮动面板主要用于对当前图像的颜色、图层、样式及相关的操作进行设置。

默认情况下，浮动面板是以面板组的形式出现的，它们位于工作界面的右侧，用户可以根据需要进行分离、移动和组合等操作。

用户若要选择某个浮动面板，可单击浮动面板窗口中相应的标签；若要隐藏某个浮动面板，可单击“窗口”菜单中带记的命令，或单击浮动面板窗口右上角的“关闭”按钮若要打开被隐藏的面板，可单击“窗口”菜单中不标记的命令。图1-17所示为“窗口”菜单与“通道”面板。

实例 015 了解Photoshop的工具箱

在Photoshop CC软件的工具箱中，包含了用于各种创建和编辑图像、图稿、页面元素的工具和按钮，灵活地运用工具箱中的各类工具，包括展开工具箱、移动工具箱、隐藏工具箱、选择复合工具以及预设工具，有助于用户设计出更优秀的作品。本节将详细介绍Photoshop CC软件工具箱的控制方法。

1．展开工具箱

Photoshop CC软件的工具箱是以图标形式展现的，用户从工具的形态可以了解该工具的功能。在工具箱中，单击鼠标左键，可以在工具箱中选取任意工具，进行相应的操作，如图1-18所示。在工具箱中的工具图标右下角的三角形按钮上单击鼠标右键，就会显示出隐藏的其他具有相似功能的工具，如图1-19所示。

2．移动工具箱

在Photoshop CC软件中，默认情况下，工具箱停放在编辑窗口的左侧，如图1-20所示。将光标置于工具箱顶部的空白处，单击鼠标左键并向右拖曳，即可将工具箱从停放位置拖出，可放在窗口的任意位置，如图1-21所示。

3．隐藏工具箱

在Photoshop CC软件中，隐藏工具箱可以最大限度地利用图像编辑窗口，使图像显示的区域更加宽敞，为用户创造更舒适的工作界面。

在Photoshop CC应用程序中，单击“窗口”|“工具”命令，即可隐藏工具箱，如图1-22所示。再次单击“窗口”|“工具”命令，即可显示工具箱，如图1-23所示。

4．选择复合工具

在Photoshop CC应用程序中，想要选取工具箱中的工具只需要单击工具箱内相应的图标即可，如果工具图标右下角带有三角形的图标，就表示此工具下隐藏复合工具，用户可以按住鼠标左键不放或者单击鼠标右键，显示所包含的复合工具。复合工具包含的功能很丰富，灵活运用可以提高处理图片的速度。

选取任意工具下带有三角形图标的复合工具，如减淡工具，单击鼠标右键，如图1-24所示。弹出复合工具组，将鼠标指针移至加深工具处单击鼠标左键，即可选取加深工具，如图1-25所示，选取完成后，释放鼠标左键，即可完成工具的选择。

5．设置预设工具

在Photoshop CC软件中，用户使用“预设管理器”可以载入各种工具预设、画笔库、形状库、渐变库以及样式库等外部文件。

选取工具箱中的渐变工具在工具属性栏中单击“工具预设”右侧的下拉按钮弹出预设面板，选中“仅限当前工具”复选框，如图1-26所示。单击预设面板右上角的“创建新工具预设”按钮弹出“新建工具预设”对话框，设置工具名称，如图1-27所示。

单击“确定”按钮后，预设好的“渐变工具1”即可显示在预设面板中，如图1-28所示。将鼠标指针移至“渐变工具1”选项上，单击鼠标右键，在弹出的快捷菜单中选择“删除工具预设”选项，如图1-29所示，即可删除工具预设。

提示

保存工具参数设置后，用户下次使用时，参照上述介绍的方法，在弹出的预设面板中选择工具预设名称即可。若要复位当前工具参数或所有工具参数，则在弹出的预设面板中单击右上角的小锯齿形按钮在弹出的列表框中选择“复位工具”或“复位所有工具”选项即可。

实例 016 管理Photoshop面板

Photoshop CC面板汇集了图像操作中常用的选项和功能。在编辑图像时，选取工具箱中的工具或执行菜单栏中的命令后，使用面板可以进一步细致地调整各个选项，将面板上的功能应用到图像上。本节主要向读者介绍管理Photoshop面板的操作方法。

1．展开面板

Photoshop CC软件中包含了多个面板，用户在“窗口”菜单中可以单击需要的面板命令，将该面板展开，然后对图像进行编辑。在Photoshop CC应用程序中，打开一个素材文件，默认情况下的面板如图1-30所示。单击“窗口”|“画笔”命令，即可展开“画笔”面板，如图1-31所示。

2．移动面板

Photoshop CC软件中包含了多个面板，用户可以根据自己的使用习惯移动面板，这样通过单独的面板操作，可以减少用户许多不必要的麻烦。

在Photoshop CC软件中，打开一个素材文件，移动鼠标指针至面板上方的区域，如图1-32所示。单击鼠标左键并拖曳至合适位置后释放鼠标左键，即可移动面板，如图1-33所示。

3．隐藏面板

用户在Photoshop CC软件中编辑图像时，可以隐藏不需要的面板，以提供更多的工作空间。单击面板右上角的“关闭”按钮，如图1-34所示，即可隐藏面板。

提示

除了运用上述方法可以隐藏面板外，用户还可以按【Shift+Tab】组合键，即可在保留工具箱的情况下，隐藏所有的面板。Photoshop CC软件一共提供了20多种面板，其中最常用的是“图层”“通道”和“路径”面板，运用这些面板可以对当前图像的图层、通道、路径以及色彩等进行相关的设置和控制，使用户在处理图像时更为方便、快捷。

实例 017 管理Photoshop工作窗口

打开Photoshop CC软件后，它自动在桌面上创建一个Photoshop CC软件的窗口，用户可以根据工作需要，调整窗口的大小与位置。

1．最小化窗口

用户在Photoshop CC软件中编辑图像时，可以根据需要对Photoshop CC软件的窗口进行最小化操作，单击Photoshop CC软件标题栏的“最小化”按钮即可，如图1-35所示，也可以移动鼠标指针至系统桌面的任务栏图标上，单击鼠标左键，即可最小化工作窗口。

提示

除了运用上述方法可以最小化窗口外，还可以在桌面的任务栏上的Photoshop CC软件图标上，单击鼠标右键，在弹出的快捷菜单中选择“最小化”选项。

2．最大化窗口

Photoshop CC软件窗口在默认情况下是最大化显示的，单击Photoshop CC软件标题栏的“最大化”按钮如图1-36所示，即可最大化窗口。

在Photoshop CC软件中，用户可以同时打开多个图像文件，因此软件窗口中就包含了多个图像窗口，可分别控制软件窗口和图像编辑窗口的状态，如最小化、最大化、还原窗口和关闭窗口。但由于软件窗口是父窗口，因此对图像窗口的调整受限于软件窗口。

3．还原窗口

用户编辑图像时，可以根据工作需要对Photoshop CC软件的窗口进行还原操作。单击Photoshop CC软件标题栏的“向下还原”按钮，如图1-37所示，即可还原窗口。窗口未还原前，标题栏右上角的按钮呈“向下还原”状态；当被还原后，按钮则转换成“最大化”按钮状态。

实例 018 优化Photoshop系统参数

在使用Photoshop CC软件的过程中，用户可以根据需要对Photoshop CC软件的操作环境进行相应的优化设置，这样有助于提高工作效率。

1．优化界面选项

在Photoshop CC软件中，用户可以根据需要优化操作界面，这样不仅可以美化图像编辑窗口，还可以在执行设计操作时更加得心应手。优化界面选项的方法很简单，用户只需单击“编辑”|“首选项”|“界面”命令，弹出“首选项”对话框，单击“标准屏幕模式”右侧的三角形下拉按钮，在弹出的列表中选择“选择自定颜色”选项，设置RGB参数值为0、144、255，如图1-38所示，单击“确定”按钮，返回“首选项”对话框，单击“确定”按钮，标准屏幕模式即可呈自定颜色显示，如图1-39所示。

2．优化文件处理选项

用户如果经常对文件处理选项进行相应优化设置，不仅不会占用计算机内存，而且还能加快浏览图像的速度，更加方便操作。优化文件处理选项的方法很简单，用户只需单击“编辑”|“首选项”|“文件处理”命令，弹出“首选项”对话框，如图1-40所示，单击“图像预览”右侧的下拉按钮，在弹出的列表框中选择“存储时询问”选项，如图1-41所示，单击“确定”按钮，即可优化文件处理。

3．优化暂存盘选项

在Photoshop CC软件中设置优化暂存盘可以让系统有足够的空间存放数据，防止空间不足，丢失文件数据。优化暂存盘的方法很简单，用户只需单击“编辑”|“首选项”|“性能”命令，弹出“首选项”对话框，如图1-42所示，在“暂存盘”选项区中，选中“F驱动器”复选框，如图1-43所示，单击“确定”按钮，即可优化暂存盘。

4．优化内存与图像高速缓存选项

在Photoshop CC软件中，用户使用优化内存与图像高速缓存选项，可以改变系统处理图像文件的速度。优化内存与图像高速缓存选项的方法很简单，用户只需单击“编辑”|“首选项”|“性能”命令，弹出“首选项”对话框，在“内存使用情况”选项区中的“让Photoshop使用”数值框中输入402，如图1-44所示，在“历史记录与高速缓存”选项区中分别设置“历史记录状态”为40、“高速缓存级别”为4，如图1-45所示，单击“确定”按钮，即可优化内存与图像高速缓存。

提示

在“首选项”对话框中，设置“让Photoshop使用”的数值时，系统默认数值是50%，适当提高这个百分比可以加快Photoshop软件处理图像文件的速度，在设置“高速缓存级别”数值时，用户可以根据自己计算机的内存配置与硬件水平进行数值设置。

实例 019 控制Photoshop图像窗口

在Photoshop CC软件中，用户可以同时打开多个图像文件，其中当前图像编辑窗口会显示在最前面，用户可以根据工作需要移动窗口位置、调整窗口大小、改变窗口排列方式和在各窗口之间切换，让工作变得更加方便。

1．调整窗口位置与大小

在处理图像的过程中，如果需要把一幅图像放在一个方便操作的位置，就需要调整图像编辑窗口的位置。调整窗口位置的方法很简单，用户只需将鼠标指针移至图像编辑窗口的标题栏上，单击鼠标左键并拖曳至合适位置，即可调整窗口的位置。图1-46所示为调整窗口位置后的前后对比效果。

当图像编辑窗口无法完整显示图像时，用户可以调整编辑窗口的大小。调整窗口大小的方法很简单，用户只需将鼠标指针移至图像编辑窗口的边框线上，单击鼠标左键并拖曳，即可改变窗口的大小。图1-47所示为调整窗口大小后的前后对比效果。

提示

在改变图像窗口大小时，拖曳鼠标指针至不同的位置，当指针等形状时，单击鼠标左键并拖曳，也可以改变图像窗口的大小。

2．调整窗口排列方式

在Photoshop CC软件中，当打开多个图像文件时，每次只能显示一个图像编辑窗口内的图像，若用户需要对多个窗口中的内容进行比较，可将各窗口以水平平铺、浮动、层叠和选项卡等方式进行排列。调整窗口排列方式的方法很简单，用户只需单击菜单栏中的“窗口”|“排列”|“平铺”命令，即可将各个窗口平铺排列。图1-48所示为调整窗口排列方式后的前后对比效果。

3．切换当前窗口

当图像编辑窗口中同时打开多幅素材图像时，用户可运用鼠标选择需要编辑的窗口，进行窗口的切换。切换当前窗口的方法很简单，用户只需移动鼠标指针至“3．切换当前窗口（1）”素材图像的图像编辑窗口上，单击鼠标左键，即可将“3．切换当前窗口（1）”素材图像置为当前窗口。图1-49所示为切换当前窗口后的前后对比效果。

提示

实例 020 控制Photoshop图像显示

在Photoshop CC软件中，熟练掌握图像的显示方式，可以更加方便地编辑图像。

1．放大/缩小显示图像

素材文件 素材\第1章\1号店．jpg

效果文件 无

实例要点 通过放大/缩小工具，对图像进行放大或者缩小的操作。

思路分析 在编辑和设计作品的过程中，用户可以根据工作需要对图像进行放大或缩小操作，以便更好地观察和处理图像，使用户工作时更加方便。

操作步骤

01 打开本书配套光盘中的“素材\第1章\1号店．jpg”文件，如图1-50所示。

02 单击“视图”|“放大”命令，如图1-51所示。

03 执行操作后，即可放大图像的显示，如图1-52所示。

04 单击两次“视图”|“缩小”命令，即可使图像显示比例缩小一半，如图1-53所示。

2．按适合屏幕显示图像

用户在编辑图像时，可根据工作需要放大图像进行更精确的操作，当编辑完成后，单击缩放工具属性栏中的“适合屏幕”按钮，即可将图像以最合适的比例完全显示出来。当选择工具箱中的抓手工具时，其工具属性栏的变化如图1-54所示。

1 滚动所有窗口：选中该复选框，在使用手抓工具时将滚动所有打开的文档窗口。

2 100%：单击该按钮，即可将图像显示的比例变成100%。

3 适合屏幕：单击该按钮，当前窗口将缩放为屏幕大小。

4 填充屏幕：缩放当前窗口以适合屏幕。

在Photoshop软件中，打开本书配套光盘中的“素材\第1章\信息．jpg”文件，如图1-55所示。选取工具箱中的抓手工具在工具属性栏中，单击“适合屏幕”按钮，执行操作后，图像即可以适合屏幕的方式显示，如图1-56所示。

提示

3．移动图像窗口显示区域

当所打开的图像因缩放超出当前显示窗口的范围时，图像编辑窗口的右侧和下方将分别显示垂直和水平方向的滚动条。此时，用户可以拖曳滚动条或使用抓手工具移动图像窗口的显示区域，以便更好地查看图像。

在Photoshop软件中，打开本书配套光盘中的“素材\第1章\夕阳．jpg”文件，选取工具箱中的缩放工具放大图像显示，如图1-57所示。选取工具箱中的抓手工具将鼠标指针移至图像上，当鼠标指针呈抓手形时，单击鼠标左键的同时并拖曳，即可移动图像编辑窗口的显示区域，如图1-58所示。

4．按区域放大显示图像

放大/缩小工具的属性栏的变化如图1-59所示。

1 放大/缩小：单击放大按钮即可放大图片；单击缩小按钮即可缩小图片。

2 调整窗口大小以满屏显示：自动调整窗口的大小。

3 缩放所有窗口：同时缩放所有打开的文档窗口。

4 细微缩放：用户选中该复选框，在画面中单击鼠标左键并向左或向右拖动，能够快速放大或缩小图像；取消该复选框时，在画面中拖动鼠标，会出现一个矩形框，放开鼠标后，矩形框中的图像会放大至整个窗口。

5 100%：单击该按钮，即可将图像显示的比例变成100%。

6 适合屏幕：在窗口中最大化显示完整的图像。

7 填充屏幕：在整个屏幕内最大化显示完整的图像。

素材文件 素材\第1章\选项．jpg

效果文件 无

实例要点 通过缩放工具，进行区域放大显示素材图像。

思路分析 可以通过区域放大显示图像，更准确地放大所需要操作的图像显示区域，选择工具箱中的缩放工具即可操作对象。

操作步骤

01 打开本书配套光盘中的“素材\第1章\选项．jpg”文件，如图1-60所示。

02 在工具箱中选取缩放工具将鼠标指针定位在需要放大的图像位置，单击鼠标左键的同时并拖曳，创建一个虚线矩形框，如图1-61示。

03 释放鼠标左键，即可放大显示所需要的区域，如图1-62所示。

5．切换图像显示模式

素材文件 素材\第1章\书香．jpg

效果文件 无

实例要点 通过“屏幕模式”命令，切换图像的显示模式。

思路分析 用户在处理图像时，可以根据需要切换图像的显示模式。Photoshop CC软件为用户提供了3种不同的屏幕显示模式，即“标准屏幕模式”“带有菜单栏的全屏模式”以及“全屏模式”。

操作步骤

01 打开本书配套光盘中的“素材\第1章\书香．jpg”文件，此时的屏幕显示为“标准屏幕模式”，如图1-63所示，该模式是Photoshop CC软件默认的显示模式。

02 单击“视图”|“屏幕模式”|“带有菜单栏的全屏模式”命令，如图1-64所示。

03 执行上述操作后，图像编辑窗口的标题栏和状态栏即可被隐藏，屏幕切换至“带有菜单栏的全屏模式”，如图1-65所示。

04 单击“视图”|“屏幕模式”|“全屏模式”命令，执行操作后，弹出信息提示框，如图1-66所示。

05 单击“全屏”按钮，即可切换至“全屏模式”，如图1-67所示，在该模式下Photoshop CC隐藏窗口中所有的内容，以获得图像的最大显示。

提示

除了运用上述方法切换图像显示模式外，用户在处理图像的过程中还可以通过一种常用的快捷方法切换图像显示模式，即用户只需在最大化的Photoshop CC应用程序窗口中，按【F】键，即可以在上述3种显示模式之间进行切换。

实例 021 控制Photoshop图像画布

在Photoshop CC软件中，用户可以根据工作需要对画布进行翻转操作。用户只需单击“图像”|“图像旋转”|“垂直翻转画布”命令，即可垂直翻转画布。图1-68所示为垂直翻转画布后的前后对比效果。

若用户想水平翻转画布，只需单击“图像”|“图像旋转”|“水平翻转画布”命令，即可水平翻转画布。图1-69所示为水平翻转画布后的前后对比效果。

实例 022 应用Photoshop辅助工具

用户在绘制和编辑UI界面图像时，灵活掌握标尺、参考线、网格、计数工具和注释工具等辅助工具的使用方法，可以在处理图像的过程中精确地对图像进行定位、对齐、测量等操作，以便更加准确有效地处理图像。

1．显示隐藏标尺

素材文件 素材\第1章\打的．jpg

效果文件 无

实例要点 通过“标尺”命令，显示当前指针的坐标位置。

思路分析 标尺显示了当前鼠标指针所在位置的坐标，应用标尺可以精确选取一定的范围和更准确地对齐对象。

操作步骤

01 打开本书配套光盘中的“素材\第1章\打的．jpg”文件，如图1-70所示。

02 单击“视图”|“标尺”命令，即可显示标尺，如图1-71所示。

03 将鼠标指针移动至水平标尺与垂直标尺的相交处，单击鼠标左键并将其拖曳至图像编辑窗口中的合适位置，如图1-72所示。

04 释放鼠标，即可更改标尺原点，此时图像编辑窗口中的图像显示效果如图1-73所示。

05 移动鼠标指针至水平标尺和垂直标尺的相交处，双击鼠标左键，即可还原标尺的位置，如图1-74所示。

06 单击“视图”|“标尺”命令，即可隐藏标尺，此时图像编辑窗口中图像显示如图1-75所示。

2．创建删除参考线

素材文件 素材\第1章\专题．jpg

效果文件 无

实例要点 通过“参考线”命令来协助对齐，使用户更加准确地定位图形对象的位置。

思路分析 参考线是浮动在整个图像上却不被打印的直线，用户可以移动、删除或锁定参考线，参考线主要用来协助对齐和定位图形对象。

操作步骤

01 打开本书配套光盘中的“素材\第1章\专题．jpg”文件，此时图像编辑窗口中的图像显示如图1-76所示。

02 单击“视图”|“新建参考线”命令，弹出“新建参考线”对话框，设置各选项，如图1-77所示，单击“确定”按钮。

03 执行操作后，即可创建垂直参考线，此时图像编辑窗口中的图像显示如图1-78所示。

04 单击“视图”|“新建参考线”命令，弹出“新建参考线”对话框，设置各选项，如图1-79所示，单击“确定”按钮。

05 执行操作后，即可创建水平参考线，此时图像编辑窗口中的图像显示如图1-80所示。

06 单击“视图”|“标尺”命令，显示标尺，在水平标尺上单击鼠标左键的同时向下拖曳鼠标指针至图像编辑窗口中的合适位置，即可创建水平参考线，如图1-81所示。

07 在垂直标尺上单击鼠标左键的同时，向右侧拖曳鼠标指针至图像编辑窗口中的合适位置，创建垂直参考线，如图1-82所示。

08 选取工具箱中的移动工具拖曳鼠标指针至图像编辑窗口中的水平参考线上，鼠标指针呈双向箭头形状，此时图像编辑窗口中的显示如图1-83所示。

09 单击鼠标左键并向下拖曳至合适位置，即可移动参考线，如图1-84所示。

10 单击“视图”|“清除参考线”命令，即可删除全部参考线，如图1-85所示。

提示

3．应用网格

素材文件 素材\第1章\添加新乘机人．jpg

效果文件 效果\第1章\航添加新乘机人．jpg

实例要点 通过“网格”命令，来定位和对齐所编辑区域的对象。

思路分析 网格由一连串的水平和垂直点组成，常用来协助绘制图像时对齐窗口中的任意对象。

操作步骤

01 打开本书配套光盘中的“素材\第1章\添加新乘机人．jpg”文件，如图1-86所示。

02 单击“视图”|“显示”|“网格”命令，在图像中显示网格，如图1-87所示。

03 单击“视图”|“对齐到”|“网格”命令，可以看到在“网格”命令的左侧出现一个标志√，如图1-88所示。

04 在工具箱中选取矩形选框工具，拖曳鼠标指针至图像编辑窗口中的相应位置处，单击鼠标左键并拖曳，绘制矩形框时，会自动对齐到网格进行绘制，如图1-89所示。

提示

除了运用上述方法显示或隐藏网格外，用户还可以按【Ctrl+'】组合键，在图像编辑窗口中显示或隐藏网格。

4．运用计数工具

在Photoshop软件中，用户可以使用计数工具对图像中的对象计数，也可以自动对图像中的多个选定区域计数。运用计数工具的方法很简单，用户只需选取工具箱中的计数工具，拖曳鼠标指针至图像编辑窗口中，此时鼠标指针呈形状，单击鼠标左键，即可创建计数，用与上述相同的方法，单击鼠标左键，依次创建多个计数。图1-90所示为运用计数工具计数后的前后对比效果。

提示

单击工具属性栏中的“切换计数组的可见性”按钮即可隐藏计数。

5．运用注释工具

注释工具是用来协助制作图像的，当用户做好一部分的图像处理后，需要让其他用户帮忙处理另外一部分的工作时，在图像上需要处理的部分添加注释，内容即是用户所需要达到的处理效果。当其他用户打开图像时即可看到添加的注释，就知道该如何处理图像。运用注释工具的方法很简单，用户只需选取工具箱中的注释工具移动鼠标至图像编辑窗口中，单击鼠标左键，弹出“注释”面板，在“注释”文本框中输入说明文字，即可创建注释，在素材图像中显示注释标记。

1.3 图像处理基本操作

Photoshop CC作为一款图像处理软件，绘图和图像处理是它的“看家本领”。在使用Photoshop CC软件开始创作之前，需要先了解此软件的一些常用操作，如处理图像的基本操作、修改和调整图像、调整图像的显示、图像的撤销和重复操作等，熟练掌握各种操作，可以更好、更快地设计作品。

实例 023 新建文件

若要在一个空白的文件上绘制或编辑图像，就需要先新建文件。

在Photoshop应用程序中，单击“文件”|“新建”命令，弹出“新建”对话框，设置各选项，如图1-91所示。单击“确定”按钮，即可新建一幅空白的图像文件，如图1-92所示。

在“新建”对话框中，各选项的含义如下。

名称：设置文件的名称，也可以使用默认的文件名。创建文件后，文件名会自动显示在文档窗口的标题栏中。

预设：可以选择不同的文档类别，如Web、A3、A4打印纸、胶片和视频常用的尺寸预设。

宽度/高度：用来设置文档的宽度和高度，在各自的右侧下拉列表框中选择单位，如像素、英寸、毫米或厘米等。

分辨率：设置文件的分辨率，在右侧的下来列表框中可以选择分辨率的单位，如“像素/英寸”“像素/厘米”。

颜色模式：这是用来设置文件的颜色模式，如“位图”“灰度”“RGB颜色”或“CMYK颜色”等。

背景内容：设置文件背景内容，如“白色”“背景色”或“透明”。

高级：单击“高级”按钮，可以显示出对话框中隐藏的内容，如“颜色配置文件”和“像素长宽比”。

存储预设：单击此按钮，打开“新建文档预设”对话框，可以输入预设名称并选择相应的选项。

删除预设：当选择自定义的预设文件后，单击此按钮，可以将其删除。

图像大小：读取使用当前设置的文件大小。

实例 024 存储文件

用户可以保存当前编辑的图像文件，以便于在日后的工作中对该文件进行修改、编辑或输出操作。

在Photoshop应用程序中，单击“文件”|“打开”命令，打开一幅素材图像，此时图像编辑窗口中的显示如图1-93所示。单击“文件”|“存储为”命令，弹出“储存为”对话框，设置各选项，单击“保存”按钮，如图1-94所示，即可保存图像。

“储存为”对话框中各选项的含义如下。

保存在：用户保存图层文件的位置。

文件名/格式：用户可以输入文件名，并根据不同的需要选择文件的保存格式。PSD是Photoshop软件的专用格式，也是新建文件时默认的格式，此格式可以将图像文件的图层、参考线等属性信息一起存储。

作为副本：选中该复选框，可以另存一个副本，并且与源文件保存的位置一致。

注释：用户可自由选择是否有作者注释。

Alpha通道/图层/专色：用来选择是否存储Alpha通道、图层和专色。

使用校样设置：当文件的保存格式为EPS或PDF时，用户才可选中该复选框。用于保存打印用的校样设置。

ICC配置文件：用于保存嵌入文档中的ICC配置文件。

缩览图：创建图像缩览图。方便以后在“打开”对话框中的底部显示预览图。

Photoshop CC软件所支持的图像格式有二十几种，因此它可以作为一个转换图像格式的工具来使用。在其他软件中导入图像，可能会受到图像格式的限制而不能导入，此时用户可以使用Photoshop CC软件将图像格式转换为软件所支持的格式。

PDF格式： PDF（便携文档）格式是一种通用的文件格式，支持矢量数据和位图数据，具有电子文档搜索和导航功能，是Adobe Illustrator和Adobe Acrobat的主要格式。PDF格式支持RGB、CMYK、索引、灰度、位图和LAB模式，不支持Alpha。

RAW格式：RAW格式是一种灵活的文件格式，用于在应用程序与计算机平台之间传递图像。该格式支持具有Alpha通道的CMYK/RGB和灰度模式，以及无Alpha信道的多信道、LAB、索引和双色调模式等。

PCX格式：PCX格式采用GLE无损压缩方式，支持24位、256色的图像，适合保存索引和线画稿模式的图像。该格式支持RGB、索引、灰度和位图模式，以及一个颜色通道。

PXR格式：PXR格式是转为高端图形应用程序设计的文件格式。它支持具有单个Alpha通道的RGB和灰度图像。

DCM格式：DCM（医学数字成像和通行）格式通常用于传输和存储医学图像，如超声波DICOM和扫描图像。文件包含图像数据和标头，其中存储了有关病人和医学图像的信息。

PNG格式：PNG格式用于无损压缩和在Web上显示图像。与GIF不同，PNG支持244位图像，并产生无锯齿状的透明背景，但某些早期的浏览器不支持该格式。

SCT格式：SCT（连续色调）格式用于Scitex计算机上的高端图像处理，该格式支持CMYK、RGB和灰度图像，不支持Alpha通道。

TGA格式：TGA格式专用于Truevision视频板的系统，它支持一个单独Alpha通道的32位RGB文件，以及无Alpha通道的索引、灰度模式，16位和24位的RGB文件。

便携位图格式：便携位图格式支持单色位图，可用于无损数据传输。因为许多应用程序都支持此格式，甚至可以在简单的文本编辑器中编辑或创建此类文件。

实例 025 关闭文件

对图像进行保存后，用户可以随时关闭当前所打开的图像文件。

在Photoshop应用程序中，单击“文件”|“打开”命令，打开一幅素材图像，如图1-95所示。单击“文件”|“关闭”命令，如图1-96所示，即可关闭图像文件。

实例 026 管理图像

在Photoshop CC软件中，移动与删除图像是图像处理的基本操作，下面向读者介绍移动和删除图像的操作方法。

1．移动图像

在Photoshop CC软件中，移动工具是最常用的工具之一，移动图层、选区内的图像以及整个图像编辑窗口中的图像都需要用到它。用户选中移动工具后，其属性栏的变化如图1-97所示。

1 自动选择：如果文档中包含多个图层或图层组，可在选中该复选框的同时单击“选择组或图层”按钮，在弹出的下拉列表框中选择要移动的内容选项。选择“组”选项，在图像中单击鼠标左键时，可自动选择工具下面包含像素的最顶层的图层所在的图层组。选择“图层”选项，使用移动工具在图像中单击鼠标左键时，可自动选择工具下面包含像素的最顶层的图层。

2 显示变换控件：选中该复选框以后，系统会在选中图层内容的周围显示变换框，通过拖动控制点对图像进行变换操作。

3 对齐图层：在选择了两个或两个以上的图层时，可以单击相应按钮，使所选的图层对齐。包括顶对齐垂直居中对齐、底对齐、左对齐、水平居中对齐以及右对齐。

4 分布图层：在选择3个或3个以上的图层时，可单击相应的按钮使所选的图层按照一定的规则分布。这些按钮包括按顶分布、垂直居中分布按底分布按左分布水平居中分布以及按右分布。

5 自动对齐图层：在选择3个或3个以上的图层时，可以单击该按钮，弹出“自动对齐图层”对话框，在其中可选中“自动”“透视”“拼贴”“圆柱”“球面”以及“调整位置”6个单选按钮。

在Photoshop CC应用程序中，打开两幅素材图像，如图1-98所示。选取移动工具，将鼠标指针移至“横排登录界面”图像编辑窗口中，单击鼠标左键的同时将其拖曳至“背景”图像编辑窗口中，释放鼠标左键，即可移动图像，如图1-99所示。

提示

将某个图像拖入另一个图像编辑窗口时，按住【Shift】键，可以使拖入的图像位于当前文档的中心，如果这两个文档的大小相同，则拖入的图像就会与当前文档的边界对齐。

2．删除图像

素材文件 素材\第1章\星光时代广场．psd

效果文件 效果\第1章\星光时代广场．psd

实例要点 拖曳图层至“删除图层”按钮上，删除图像。

思路分析 在Photoshop CC软件中，用户在编辑图像的过程中，会在应用程序中创建许多且不同内容的图层或图像，将多余或不必要的图层或图像删除，不仅可以节省磁盘空间，也可以提高软件运行速度，使用户操作时更加便捷。下面向读者详细介绍删除图像的操作方法。

操作步骤

01 打开本书配套光盘中的“素材\第1章\星光时代广场．psd”素材图像，如图1-100所示。

02 选取移动工具将鼠标指针移至需要删除的图像上，单击鼠标右键，弹出快捷菜单，选择“图层1”图层，如图1-101所示。

03 “图层1”图层处于被选中的状态，将鼠标移至“图层1”图层上，单击鼠标左键的同时将其拖曳至面板下方的“删除图层”按钮上如图1-102所示。

04 释放鼠标左键，即可删除“图层1”图层，如图1-103所示。

实例 027 自由变换图像

运用Photoshop CC软件处理图像时，为了制作出相应的图像效果，使图像与整体画面和谐统一，需要对某些图像进行斜切、扭曲、透视、变形等变换操作。

1．缩放/旋转图像

素材文件 素材\第1章\时钟．psd

效果文件 效果\第1章\时钟．psd

实例要点 通过“变换”命令，缩放/旋转图像。

思路分析 在Photoshop CC软件中，用户在缩放或旋转图像后，能改变平面图像的显示视角，同时也可以将倾斜的图像纠正。使用“缩放”命令，可以对所选图像进行任意放大或缩小操作。下面向读者详细介绍缩放/旋转图像的操作方法。

操作步骤

01 打开本书配套光盘中的“素材\第1章\时钟．psd”素材图像，如图1-104所示。

02 单击“编辑”|“变换”|“缩放”命令，调出变换控制框，如图1-105所示。

03 将鼠标指针移至变换控制框右上方的控制柄上，当鼠标指针呈双向箭形状时，单击鼠标左键的同时向右上方拖曳，缩放并移至合适位置，如图1-106所示。

04 将指针移至变换控制框内，单击鼠标右键，在弹出的快捷菜单中，选择“旋转”选项，如图1-107所示。

05 将鼠标指针移至变换控制框右上方的控制框外，当鼠标指针呈形状时，单击鼠标左键的同时向逆时针方向旋转，并移动图像至合适位置，如图1-108所示。

06 执行上述操作后，按【Enter】键确认，即可旋转图像，效果如图1-109所示。

2．斜切图像

素材文件 素材\第1章\为梦奔跑．psd

效果文件 效果\第1章\为梦奔跑．psd

实例要点 通过“斜切”命令，斜切图像。

思路分析 在Photoshop CC软件中，用户可以运用“自由变换”命令斜切图像，制作出斜切效果。下面向读者详细介绍斜切图像的操作方法。

操作步骤

01 打开本书配套光盘中的“素材\第1章\为梦奔跑．psd”素材图像，如图1-110所示。

02 展开“图层”面板，选择“图层2”图层，如图1-111所示。

03 单击“编辑”|“变换”|“斜切”命令，即可调出变换控制框，如图1-112所示。

04 将图像移至合适位置，将鼠标指针移至变换控制框右侧下方的控制柄上，指针呈白色三角形状时，单击鼠标左键并向右拖曳，如图1-113所示。

05 用与上述同样的方法，将鼠标指针移至其他控制柄上，单击鼠标左键，依次拖曳其他3个控制柄至合适位置，如图1-114所示。

06 执行上述操作后，按【Enter】键确认，斜切图像，效果如图1-115所示。

3．扭曲图像

素材文件 素材\第1章\手机图片．psd

效果文件 效果\第1章\手机图片．psd

实例要点 通过“扭曲”命令，扭曲图像。

思路分析 在Photoshop CC软件中，用户可以根据需要对某一些图像进行扭曲操作，运用“扭曲”命令，通过变换控制框上的任意控制柄，对图像进行扭曲变形操作，以达到所需要的效果。下面向读者详细介绍扭曲图像的操作方法。

操作步骤

01 打开本书配套光盘中的“素材\第1章\手机图片．psd”素材图像，如图1-116所示。

02 在“图层”面板中，选择“图层1”图层，单击“编辑”|“变换”|“扭曲”命令，调出变换控制框，如图1-117所示。

03 将鼠标指针移至变换控制框的控制柄上，鼠标指针呈白色三角形状时，单击鼠标左键的同时拖曳至合适位置后，释放鼠标左键，依次拖曳其他控制柄，如图1-118所示。

04 执行上述操作后，按【Enter】键确认，即可扭曲图像，效果如图1-119所示。

提示

与斜切不同的是，执行扭曲操作时，控制点可以随意拖动，不受调整边框方向的限制，在拖曳鼠标的同时按住【Alt】键，则可以制作出对称扭曲效果，而斜切则会受到调整边框的限制。

4．透视图像

素材文件 素材\第1章\手机图片01.psd

效果文件 效果\第1章\手机图片01.psd、手机图片01.jpg

实例要点 通过“透视”命令，处理图像文件。

思路分析 在Photoshop CC软件中进行图像处理时，如果需要将平面图变换为透视效果，可以运用透视功能进行调节。单击“透视”命令，即显示变换控制框，此时单击鼠标左键并拖动可以进行透视变换，使图像在视觉效果上产出一种透视图像效果。下面向读者详细介绍透视图像的操作方法。

操作步骤

01 打开本书配套光盘中的“素材\第1章\手机图片01.psd”文件，如图1-120所示。

02 在“图层”面板中，选择“图层1”图层，如图1-121所示。

03 单击“编辑”|“变换”|“透视”命令，调出变换控制框，如图1-122所示。

04 将鼠标指针移至变换控制框右上方的控制柄上，鼠标指针呈白色三角形状时，单击鼠标左键并拖曳，如图1-123所示。

05 执行上述操作后，再一次对图像进行微调，如图1-124所示。

06 按【Enter】键确认，即可透视图像，效果如图1-125所示。

5．变形图像

素材文件 素材\第1章\手机界面．psd

效果文件 效果\第1章\手机界面．psd、手机界面．jpg

实例要点 通过“变形”命令，变形图像。

思路分析 在Photoshop CC软件中，用户在执行“变形”命令时，图像上会出现变形网格和锚点，拖曳这些锚点或调整锚点的方向线可以对图像进行更加自由和灵活的变形处理。下面向读者详细介绍变形图像的操作方法。

操作步骤

01 打开本书配套光盘中的“素材\第1章\手机界面． psd”文件，如图1-126所示。

02 在“图层”面板中，选择“图层3”图层，如图1-127所示。

03 单击“编辑”|“变换”|“变形”命令，显示变形网格，如图1-128所示。

04 将鼠标指针移至变形网格的锚点上，单击鼠标左键并拖曳描点，依次调整中间的十字交叉点，如图1-129所示。

05 执行上述操作后，按【Enter】键确认，即可变形图像，效果如图1-130所示。

提示

除了上述方法执行变形操作外，还可以按【Ctrl+T】组合键，调出变化控制框，然后单击鼠标右键，在弹出的快捷菜单中选择“变形”选项，执行变形操作。

实例 028 选取颜色

在绘制图像的过程中，通常会根据整幅图像的设计效果，对每一个图像元素填充不同颜色。通过“拾色器”对话框、“颜色”调板、吸管工具等，都可以对颜色进行设置。

1．使用前景色和背景色工具选取颜色

素材文件 素材\第1章\真功夫．psd

效果文件 效果\第1章\真功夫2.psd

实例要点 通过前景色和背景色工具来填充图像选区。

思路分析 在编辑图像时，图像的最终效果与前景色和背景色有着非常密切的关系，系统默认前景色为黑色，背景色为白色。前景色主要用于绘画、填充和描边选区；背景色主要用于生成单色、渐变填充，并在图像的涂抹区域中填充。

操作步骤

01 打开本书配套光盘中的“素材\第1章\真功夫．psd”素材，如图1-131所示。

02 单击“窗口”|“图层”命令，调出“图层”面板，选中“背景”图层，单击工具箱下方的“设置前景色”色块，弹出“拾色器（前景色）”对话框，设置RGB的参数值分别为0、0、0，如图1-132所示。

03 单击“确定”按钮，按【Alt+Delete】组合键，即可填充前景色，如图1-133所示。

04 选取工具箱中的椭圆选框工具，在图像窗口中创建一个大小合适的椭圆选区，单击“选择”|“修改”|“羽化”命令，弹出“羽化选区”对话框，设置“羽化半径”为50，单击“确定”按钮，效果如图1-134所示。

05 单击工具箱下方的“设置背景色”色块，弹出“拾色器（背景色）”对话框，设置RGB参数值分别为212、185和35，如图1-135所示。

06 单击“确定”按钮，按【Ctrl+Delete】组合键，即可在选区内填充背景色，单击“选择”|“取消选择”命令，取消选区，效果如图1-136所示。

提示

2．使用“颜色”调板选取颜色

素材文件 素材\第1章\品牌．jpg

效果文件 效果\第1章\品牌．jpg

实例要点 通过“颜色”调板可以更加快速地选取需要的颜色。

思路分析 使用“颜色”调板，可以通过设置不同参数值来调整前景色和背景色。

操作步骤

01 打开本书配套光盘中的“素材\第1章\品牌．jpg”素材，如图1-137所示。

02 选取工具箱中的魔棒工具，在工具属性栏上单击“添加到选区”按钮，再在图像窗口中数字主体的白色区域上单击鼠标左键，创建选区，如图1-138所示。

03 单击“窗口”|“颜色”命令，弹出“颜色”调板，设置RGB的参数值分别为0、124、65，如图1-139所示，执行操作的同时，工具箱中的前景色色块随之改变。

04 按【Alt+Delete】组合键，即可在选区内填充前景色，效果如图1-140所示，按【Ctrl+D】取消选区。

提示

3．使用吸管工具选取颜色

素材文件 素材\第1章\手机图标01.psd

效果文件 效果\第1章\手机图标01.psd、手机图标01.jpg

实例要点 利用“吸管”工具吸取需要的颜色。

思路分析 在绘制图像的过程中，经常会有某两片区域的图像颜色相同，此时，用户可以通过吸取颜色的方法，使两个图像区域的颜色完全一致。

操作步骤

01 打开本书配套光盘中的“素材\第1章\手机图标01.psd”素材，如图1-141所示。

02 选取工具箱中的魔棒工具，在相应的素材图像上多次单击鼠标左键，创建选区，如图1-142所示。

03 选取工具箱中的吸管工具，将鼠标指针移至图像编辑窗口中的玫红色图标上，如图1-143所示，单击鼠标左键，即可吸取颜色，执行操作后，前景色的颜色随之改变。

04 按【Alt+Delete】组合键，即可在选区内填充前景色，取消选区，效果如图1-44所示。

实例 029 填充颜色与图案

使用填充工具可以快速、便捷地对选中的图像区域进行填充，填充工具都集中在渐变工具组中。渐变工具常用来对图像进行多种渐变色的填充，油漆桶工具则是对图像进行纯色和图案的填充。

1．使用油漆桶工具填充颜色

使用油漆桶工具可快速、便捷地为图像填充颜色，填充的颜色以前景色为准。

在Photoshop软件中，打开本书配套光盘中的“素材\第1章\登录．psd”素材，如图1-145所示。单击“窗口”|“工作区”|“绘画”命令，展开与绘画相关的面板，在“色板”面板中单击“RGB黄”色块，选取工具箱中的油漆桶工具，将鼠标指针移至登录图像上的白色区域，单击鼠标左键，即可填充黄色，效果如图1-146所示。

提示

油漆桶工具主要根据颜色相似程度来进行填充，它可以通过选区对图像进行填充，也可以直接对图像进行填充。

2．使用渐变工具填充颜色

素材文件 素材\第1章\手机图标02.psd

效果文件 效果\第1章\手机图标02.psd

实例要点 通过“渐变”工具来填充背景或者选区。

思路分析 使用渐变工具可以进行多种颜色间的混合填充，增强图像的视觉效果。下面主要介绍渐变工具的使用方法。

操作步骤

01 打开本书配套光盘中的“素材\第1章\手机图标02.psd”素材，如图1-147所示。

02 选取工具箱中的魔棒工具，在图像编辑窗口中的白色区域单击鼠标左键，建立选区，选取工具箱中的渐变工具，在工具属性栏中单击“点按可编辑渐变”按钮，在弹出的“渐变编辑器”对话框中的渐变色条上设置两个色标为绿色（RGB参数值为34、187、71）和深绿色（RGB参数值为12、129、45），单击“确定”按钮，如图1-148所示。

03 将鼠标指针移至图像编辑窗口中图像的上方，单击鼠标左键并向下拖曳，如图1-149所示。

04 至合适位置后，释放鼠标，即可填充渐变色，并取消选区，效果如图1-150所示。

提示

在“渐变编辑器”对话框的“预设”选项区中，前两个渐变色块是系统根据前景色和背景色自动设置的，若用户对当前的渐变色不满意，也可以在该对话框中，通过渐变滑块对渐变色进行调整。