新書推薦：
《
何以中国·何谓唐代：东欧亚帝国的兴亡与转型
》
售價：HK$
89.7
《
一间只属于自己的房间 女性主义先锋伍尔夫代表作 女性精神独立与经济独立的象征，做自己，比任何事都更重要
》
售價：HK$
45.8
《
泉舆日志 幻想世界宝石生物图鉴
》
售價：HK$
137.8
《
养育女孩 ： 官方升级版
》
售價：HK$
51.8
《
跨界：蒂利希思想研究
》
售價：HK$
109.8
《
千万别喝南瓜汤（遵守规则绘本）
》
售價：HK$
45.9
《
大模型启示录
》
售價：HK$
115.0
《
东法西渐：19世纪前西方对中国法的记述与评价
》
售價：HK$
207.0
|
| 編輯推薦： |
|
★★详细分析各类风格的UI设计及实现过程★★从清新的扁平化风格到重金属风格一应俱全★★全方位了解图标、按钮、界面、字效、UI整体设计的制作方法
|
| 關於作者： |
曾军梅
西安工程大学副教授，陕西省动漫游戏行业协会动漫教育专业委员会委员，陕西当代水彩粉画研究院研究员、理事。发表论文及作品30余篇（其中EI 、ISTP检索5篇），获外观专利1项。参加了一项*、五项省级、三项院级科研项目，十二项横向课题。其中14项为项目负责人，十八项已结题。获教学成果一等奖（主持人）一次，传统工艺美术作品获首届全国高校美术.设计作品大奖赛入围奖，中国西部风情全国水彩作品媒体展入选，获毕业设计（论文）工作优秀指导教师奖3次，指导学生多次在国内专业比赛获奖，并获大赛优秀指导教师9次。研究方向：数字媒体艺术、动画设计理论及实践、动漫游戏美术理论与实践。现作为主导师指导学生11名，副导师指导学生2名。
|
| 目錄：
|
目
录
Chapter 01 智能手机App UI设计
1.1 App UI设计概述 2
1.1.1 UI设计的概念 2
1.1.2 App客户端 2
1.1.3 主要工具软件 3
1.2 智能手机平面设计师要掌握的技术 3
1.3 优秀App界面 4
1.3.1 优秀App界面的特点 5
1.3.2 产品团队与设计师 6
1.3.3 项目中的App设计流程 6
1.3.4 设计灵感 7
1.4 设计构图与界面布局 8
1.4.1 App界面设计构图 8
1.4.2 智能手机界面的布局构成 9
1.5 优秀App界面的要求 12
Chapter 02 App界面设计的配色意向
2.1 App UI的色彩设计意象 18
2.2 色彩的表现力和感染力 20
2.2.1 色彩的效应 20
2.2.2 色彩的反应 22
2.3 色彩研究 22
2.4 配色 24
2.4.1 色相配色 25
2.4.2 色调配色 25
2.4.3 明度配色 27
2.5 使用Photoshop进行配色 28
2.6 配色案例 31
2.7 色彩的对比组合 38
Chapter 03
Photoshop制作App UI常用的操作
3.1 Photoshop CC的工作界面 40
3.1.1 了解Photoshop CC的工作界面 40
3.1.2 工具箱 41
3.1.3 选项栏 42
3.1.4 状态栏 44
3.1.5 面板 44
3.1.6 调整面板 46
3.2 选择工具 47
3.2.1 设定选区的工具组 48
3.2.2 矩形选框工具的选项栏 48
3.2.3 选区的基本运算 49
3.3 填充工具 51
3.3.1 渐变工具的选项栏 52
3.3.2 油漆桶工具的选项栏 56
3.4 理解图层的概念 57
3.4.1 图层编组命令 59
3.4.2 排列命令 60
Chapter 04 手机UI设计平面图标制作
4.1 设计吸引眼球的图标 62
4.2 图标的设计方案 63
4.3 正确的图标设计流程 64
4.4 启动键制作 70
4.5 人像图标制作 72
4.6 记事本图标制作 74
4.7 放大镜搜索图标制作 76
4.8 麦克风图标制作 78
Chapter 05
UI的质感表现
5.1 质感图标设计的三个阶段 82
5.1.1 确定题材 82
5.1.2 确定表现风格 82
5.1.3 具体实现 83
5.2 金属质感 84
5.3 磨砂玻璃质感 90
5.4 光滑表面质感 99
5.5 皮革质感 107
Chapter 06
手机UI设计的字效表现
6.1 App UI的字号控制 114
6.1.1 字体尺寸的规则 114
6.1.2 字体规范 115
6.2 字体配色 116
6.2.1 配色规则 116
6.2.2 叠加、柔光和透明度 117
6.3 玻璃字体 118
6.4 镶钻字效 123
6.5 布料字体 133
Chapter 07 手机UI设计立体图标制作
7.1 图标的存储格式 140
7.1.1 矢量格式与位图格式 140
7.1.2
JPG压缩格式 141
7.1.3 PNG非压缩格式 142
7.1.4 图像的有损和无损压缩 143
7.2 照相机图标制作 144
7.3 循环图标制作 158
7.4 多云图标制作 164
Chapter 08 手机UI界面元素设计
8.1 App UI设计思路 172
8.2 图形设计尺寸 173
8.3 登录界面 175
8.4 设置界面开关 181
8.5 通知列表 192
Chapter 09 手机UI按钮设计
9.1 App IU中按钮的设计思路
202
9.2 启动按钮 204
9.3 音乐播放按钮 215
9.4 清新彩色按钮 221
9.5 选项按钮 230
Chapter 10 智能手机UI整体界面制作
10.1 完整App UI界面的设计流程 238
10.1.1 需求阶段 238
10.1.2 分析设计阶段 238
10.1.3 调研验证阶段 239
10.1.4 方案改进阶段 239
10.1.5 用户验证反馈阶段 240
10.2 Android界面时尚风格设计
241
10.2.1 制作锁屏界面 241
10.2.2 制作日程安排界面 246
10.2.3 制作相册界面 249
10.2.4 制作列表界面 253
10.3 iOS界面扁平化风格设计
256
10.3.1
制作登录界面 256
10.3.2
制作主界面 258
10.3.3 制作日程安排界面 262
10.3.4 制作提示栏界面 265
|
| 內容試閱：
|
前 言
随着移动互联网等新兴产业进入了高速发展的阶段，各行规模不断扩大，增速飞快，用户体验至上的时代已经来临。技术领域的逐步拓展，产品生产的人性化意识日趋增强，用户界面设计师（即UI设计师）也成为了人才市场上十分紧俏的职业。UI设计师简称UID（User Interface Designer），指从事对软件的人机交互、操作逻辑、界面美观的整体设计工作的人。UI设计师的涉及范围包括商用平面设计、高级网页设计、移动应用界面设计及部分包装设计，是目前中国信息产业中最为抢手的人才之一。App是Accelerated Parallel Processing 的缩写，随着智能手机在中国的快速发展，App这类软件被越来越多的人青睐。本书主要包含了Android和iOS软件的用户界面（UI）的设计思路和制作过程。全书分为两部分，共10章。第1部分介绍了图标设计的领域和概念，包括图标设计中材质绘制的色彩理论和图标的设计技巧；第2部分介绍用Photoshop 制作各种UI常用元素，包括常用图形、控件、启动图标以及图片特殊处理、实战练习，同时分析了各平台UI的设计思路。第1章 智能手机App UI设计，系统介绍了设计智能手机UI的基本概念。第2章 App界面设计的配色意向以及高水平的色彩设计原理，要求设计师有对色彩绝对的把控能力。第3章 利用Photoshop制作App UI常用的操作，介绍了Photoshop CC中制作图标常用的和必备的一些工具知识，然后透过UI设计高手的设计思路来学习图标设计的过程，最后介绍了文件格式对于UI设计的影响。第4章 手机UI设计平面图标的制作，介绍了使用Photoshop的矢量图形工具，通过将基本元素进行合并、剪切等操作，一个个生动的图形呈现在眼前。第5章 UI的质感表现，介绍了使用Photoshop CC表现不同的质感，包括金属、玻璃、木质、纸质、皮革、陶瓷、塑料光滑表面等。灵活掌握这些制作方法，会对今后的UI表现技法产生极大的方便。第6章 手机UI设计的字效表现，介绍了字效设计的案例。在智能手机的UI设计中字体特效的表现非常重要，美观好的字体和字效设计能够让图标如虎添翼，让界面更加吸引人。第7章 手机UI设计立体图标制作，介绍了立体效果的图标案例。立体图标就是根据平面矢量图形进行二次加工，将导角、阴影、光泽、渐变填充等特效添加到形状上，从而得到光影和质感。第8章 手机UI界面元素设计，介绍了不同的控件制作案例。第9章 手机UI按钮设计，介绍了多种效果的按钮案例。第10章 智能手机UI整体界面制作，通过综合上面章节的案例知识，系统讲解了几种Android和iOS系统的综合案例。本书赠送资源目前图书市场上，计算机图书中夹带随书光盘销售而导致光盘损坏的情况屡屡出现，鉴于此，本书特将随书赠送资源制作成网盘文件。下载网盘文件的方法如下：（1）下载并安装百度云管家客户端（如果是手机，请下载安卓版或苹果版；如果是电脑，请下载Windows版）；（2）新用户请注册一个账号，然后登录到百度云网盘客户端中；（3）利用手机扫描右侧的网盘二维码，可进入光盘文件外链地址中，将光盘文件转存或者下载到自己的百度云网盘中；（4）也可以直接输入本书配套资源文件在百度云网盘下载地址：http：pan.baidu.coms1qX9VjGw作者信息本书由西安工程大学专业老师曾军梅主编，参加编写的还包括白帆、蔡海燕、蔡晋、蔡妍丽、曹蕾、常超杰、常亮、陈慧蓉、陈英杰、范景泽、冯浩、葛银川、荆宝洁、李慧、刘晖、刘建邦、刘静、刘姝、刘正旭。本书读者对象本书适合Photoshop CC软件的使用快速掌握UI设计制作的方法，也适合广大平面设计爱好者，有一定设计经验需要进一步提高图像处理、平面设计水平的相关行业从业人员使用；还可作为各类电脑培训学校、大中专院校的教学辅导用书。感谢您选择了本书，希望我们的努力对您的工作和学习有所帮助，也希望您把对本书的意见和建议告诉我们。作者邮箱：172769660@qq.com编辑邮箱：495599950@qq.com
UI的质感表现05ChapterUI的质感表现05Chapter本章我们讲学习使用 Photoshop CC表现不同的质感，包括金属、玻璃、木质、纸质、皮革、陶瓷、塑料光滑表面等。灵活掌握这些制作方法，会对今后的 UI表现技法提供极大的方便。
5.15.1质感图标设计的三个阶段
PsVersion：CS4 CS5 CS6 CC平时看到那些大师们的icon，我们总是惊讶不已。作为初学者的我们，当被要求或自己想要做一个icon的时候，却不知道如何下手，从而导致时间在各种无意义的杂乱思考和寻找素材中被白白消耗掉了。
在这里，作者结合大师指导以及自己的经历，总结一套流程和大家一起分享：初学者怎样才能完成一个icon设计。
5.1.1 确定题材在进行icon制作之前，首先要想一些必要的问题：为什么要设计这个icon？这个设计的需求是什么？什么题材才能满足这些需求？这个题材能做到很好地表达吗？等等。这些问题有的可能暂时还没有答案，不要着急，我们可以带着问题去看一些优秀的作品，从别人的成果中得到启发，有时候灵感就是这样产生的。激发灵感还有一个方法就是随手画草图。
思考之后，在脑海中确定要画什么，还要考虑一些像做一套图标时间是不是允许，某个题材的细节是不是太复杂导致无法完成等客观条件。我们可以选择几个题材作为备选方案。若不是商业需求，则可以从感兴趣的题材入手，这样就能激发自己的创作欲望。
5.1.2 确定表现风格物体的展现形式是什么？单个物体还是物体组合？色彩如何搭配才能突出主题？趣味性如何展现？以上这些问题我们在表现风格时都要一一考虑到，同时还需要考虑：根据现在icon设计的流行趋势来选择写实风格，根据所要表达的主题选择材质等问题。
SS不同设计师给Dridddle网站设计的logo形象UI的质感表现05Chapter83通过上述问题，我们可以发现，确定题材和确定风格的过程是互相影响、相互交织着进行的。只要把握这两点，然后大量地观看优秀的icon设计作品，并打草稿，从别人的设计中吸取其作品所传达的信息，可以让我们知道什么是好的作品，好的作品是怎么组成的。或许有的人在某些情况下根本不需要问问题，直接上手就开始做icon。即便是这样，想必他也是经过了前期的思考和权衡。因为这是完成一个优质icon设计的必经过程。5.1.3 具体实现经过了确定题材和表现风格之后，就开始进入实战操作了。现在需要考虑的问题是如何实现题材和风格，选择什么技巧工具和方法。很多初学者在具体实现这个步骤的时候，不知道怎么实现某种材质，也不知道怎么制作某种高光。这里介绍几个方法。1. 临摹创造是从临摹开始的。我们在临摹的时候，要选择最好的作品来临摹。这虽然有些难度，但是临摹好作品要比临摹水平一般的作品出来的效果要好很多。需要强调的是，在临摹之前要仔细地观察分析，观察光源的位置、颜色分布以及icon的层次等。这样要比直接上手的效果好得多。2. 找到PSD学习分析优秀的PSD文件，看它们是怎么用图层样式来实现金属质感和制作高光的堆叠细节。05Chapter83通过上述问题，我们可以发现，确定题材和确定风格的过程是互相影响、相互交织着进行的。只要把握这两点，然后大量地观看优秀的icon设计作品，并打草稿，从别人的设计中吸取其作品所传达的信息，可以让我们知道什么是好的作品，好的作品是怎么组成的。或许有的人在某些情况下根本不需要问问题，直接上手就开始做icon。即便是这样，想必他也是经过了前期的思考和权衡。因为这是完成一个优质icon设计的必经过程。5.1.3 具体实现经过了确定题材和表现风格之后，就开始进入实战操作了。现在需要考虑的问题是如何实现题材和风格，选择什么技巧工具和方法。很多初学者在具体实现这个步骤的时候，不知道怎么实现某种材质，也不知道怎么制作某种高光。这里介绍几个方法。1. 临摹创造是从临摹开始的。我们在临摹的时候，要选择最好的作品来临摹。这虽然有些难度，但是临摹好作品要比临摹水平一般的作品出来的效果要好很多。需要强调的是，在临摹之前要仔细地观察分析，观察光源的位置、颜色分布以及icon的层次等。这样要比直接上手的效果好得多。2. 找到PSD学习分析优秀的PSD文件，看它们是怎么用图层样式来实现金属质感和制作高光的堆叠细节。制作icon过程中需要注意的细节有以下3点。
.越是精细的图标越要注意路径对像素的影响。.因为icon尺寸较小，所以就要求色彩饱满、对比度突出和有丰富的色阶层次。.缩放图标时，要注意相应调整。5.2金属质感
PsVersion：CS4 CS5 CS6 CCKeyword：圆角矩形工具、图层样式
在本例中，我们将学习使用椭圆选框工具绘制由中心向外的正圆，通过图层样式的描边效果为正圆添加金属光泽，通过椭圆工具和路径面板配合使用绘制金属效果的外围。
设计构思
金属材料给人的视觉效果是坚硬、冷，而白色、浅灰色为冷色调，可以带给人压迫感、距离感以及冰凉的感觉，如右图所示。
ChapterUI的质感表现05
▼
01新建文档 执行文件新建命令，或按下快捷键Ctrl N，打开新建对话框，设
置大小为1280像素1024像素，分辨率为72像素，完成后单击确定按钮，新建一个空白文档，
如图01所示。01▼
02填充背景色 单击前景色图标，在弹出的拾色器（前景色）对话框中设置参数，改变前景色，
按下快捷键Alt Delete为背景填充前景色，在背景图层上右击，在弹出的下拉列表中选择转
换为智能滤镜，得到图层0图层，如图02所示。02▼
03绘制正圆并填充 按下快捷键Ctrl R，打开标尺工具，从垂直和水平方向分别拉出辅助线，使其位于画布的中央，选择椭圆选框工具，在辅助线交接的地方单击并按住Alt Shift键拖曳鼠标绘制正圆，按下快捷键D，设置前景色和背景色默认为黑白色，新建图层1图层，为选区填充黑色，按下快捷键Ctrl D，取消选区。
Tips：用椭圆工具绘制正圆，如图03所示。按下快捷键Alt Delete填充前景色，如图04所示。按下快捷键Ctrl D，取消选区，如图05所示。030405在定位原点的过程中，按住Shift键可以使标尺原点与标尺刻度记号对齐。如果要隐藏标尺，可以执行视图标尺命令或再次按下快捷键Ctrl R。▼
04为正圆添加描边效果 双击图层1图层，打开图层样式对话框，选择描边，设
置大小54像素，位置为内部，填充类型为渐变，样式角度为42度，单击确定按钮，为正圆添
加金属描边效果，如图06所示。R：255 R：255 R：162 R：255G：255 G：255 G：162 G：255B：255 B：255 B：162 B：255
R：99 R：161 R：87 R：255 R：255 R：99G：99 G：161 G：87 G：255 G：255 G：99 B：99 B：161 B：8 B：255 B：255 B：9906SS渐变条参数设置05▼ 复制图层 按下快捷键Ctrl J，复制图层1图层，得到图层1 副本图层，选择该图层，
右击，选择清除图层样式，使正圆还原到未被描边前的效果，如图07所示。07▼
06等比例缩小正圆 按下快捷键Ctrl T，在正圆四周出现可调节的控制点，按住Alt Delete键等比例缩小正圆，完成后，按下Enter键确认操作。
执行自由变换命令，如图08所示。调整正圆大小，如图09所示。0809在这一步中出现的选区，只是为了方便读者观看等比例缩小的范围，因为复制后的椭圆也是黑色，读者很难发现到底缩小了多少。ChapterUI的质感表现05
07▼ 再次复制正圆，进行缩小 再次将正圆进行复制，然后使用同样的方法进行等比例缩小，如
图10所示。10Tips：08▼ 打开金属质感素材 按下快捷键Ctrl O，在弹出的打开对话框中选择素材，将其打开，
按住Alt键的同时双击背景素材将其解锁，如图11所示。Tips：11背景图层永远在图层面板的最底层，不能调整顺序，并且不能设置不透明度、混合模式、添加效果等。要进行这些操作，需要将背景图层进行解锁。▼
09调整大小 使用移动工具，将素材拖曳到当前绘制的文档中，按下快捷键Ctrl T，改变素材的大小，调整大小至可将黑色正圆遮挡住即可，选择图层2图层，右击，选择创建剪贴蒙版，使金属图像限制在刚才绘制的正圆中。
用椭圆工具绘制正圆，如图12所示。调整素材的大小，如图13所示。创建剪贴蒙版，如图14所示。121314▼
10打开金属质感素材 选择椭圆选框工具，在中心点的位置单击，按住Alt Shift键绘制正圆，
此次正圆绘制的范围与金属素材大小相同，按下快捷键Ctrl J，复制选区，得到图层3图层。
绘制选区，如图15所示。复制选区，如图16所示。1516▼
11添加效果 打开图层3图层样式对话框，选择描边投影选项设置参数，
为金属添加效果，使用椭圆选框工具绘制正圆，填充淡蓝色。
选择描边选项，大小16像素，位置为内部，填充类型为渐变，渐变条的设置与第04步一样，样式角度为角度42度，如图17所示。选择投影选项，距离为22像素，大小为27像素，如图18所示。设置前景色为R：43；G：233；B：222，如图19所示。171819▼
12绘制路径 选择工具箱中的椭圆工具，在选项栏中选择路径选项，绘制以中心点出
发的正圆路径。设置前景色为黑色，选择画笔工具，按下F5键，打开画笔面板，设置相
应参数，如图20、21所示。2021路径是矢量对象，它不包含像素，因此，没有进行填充或者描边处理的路径是不能被打印出来的。Tips：ChapterUI的质感表现05
▼
13描边路径 新建图层5图层，执行窗口路径命令，打开路径面板，在工
作路径图层上右击，选择描边路径，打开描边路径对话框，选择工具为画笔，单击确定
按钮，为路径进行描边，如图22～24所示。Tips：222324做到这一步也许有些读者会疑惑，为何自己绘制出来的原点是黑色或其他颜色呢？这就与前景色的颜色有关了，那么我们在执行描边路径之前，就要先确定前景色的色调。▼
14删除路径 选择橡皮擦工具，在进行描边后的路径下方进行涂抹，将下方的原点擦掉，
然后在工作路径图层上右击，选择删除路径，将路径删除。
擦掉多余原点，如图25所示。删除路径，如图26所示。2526▼
15添加外发光效果 选择图层4图层，打开该图层图层样式对话框，选择外发光，
设置混合模式为正常，不透明度设置为19%，设置颜色为
R：33；G：255；B：231，大小为29像素，为蓝色圆点添加外发光效果，完成金属的制作，如图27所示。外发光效果可以沿着图层内容的边缘向外创建发光效果，其设置面板中等高线消除锯齿范围和抖动等选项与投影样式相应选项的作用相同。Tips：27磨砂玻璃质感
5.3PsVersion：CS4 CS5 CS6 CC
Keyword：圆角矩形工具、路径转换选区、横版文字工具、图层样式
磨砂玻璃质感被广泛应用于设计中，可以说是设计领域的宠儿，这不仅是因为磨砂玻璃看上去非常朦胧，半透明的质感非常适合作背景，还因为玻璃的雾化效果会轻松地营造出清新、唯美的感觉。
设计构思
本例先使用木质底纹素材作背景，再搭配雾化磨砂的玻璃，给人传达出一种干净利落的氛围，恰到好处的高光和阴影搭配使得画面十分逼真、写实，如右图所示。
01
▼
新建文件 执行文件新建命令，或按下快捷键Ctrl O，打开新建对话框，创
建大小为1467像素 1250像素的文档，完成后单击确定按钮，如图01、02所示。0201ChapterUI的质感表现05
▼
02导入素材 执行文件打开命令，在弹出的打开对话框中选择下载的对应素材文
件并将其打开，拖入到场景中，如图03、04所示。0304▼
03绘制选区 单击工具箱中的圆角矩形工具按钮，在选项栏中设置工作模式为路径，
像素为40，在页面上绘制路径，按下快捷键Ctrl Enter将其转换为选区并新建一个阴影图层，如图
05、06所示。0506▼
04绘制阴影 按下快捷键Shift F6，在弹出的羽化选区对话框中设置羽化半径为15像素，单击工具箱中的渐变工具按钮，在选项栏中选择径向渐变，单击点按可编辑渐变按钮，
在弹出的对话框中设置渐变颜色，在选区内拖曳填充颜色，如图07～09所示。07090805▼ 添加图层蒙版 单击图层面板下方的添加图层蒙版按钮，为其添加蒙版，单击工具
箱中的画笔按钮，在选项栏中设置相应参数，在页面上进行涂抹将图像部分隐藏，如图10～12所示。
101112▼
06绘制圆角矩形 单击工具箱中的圆角矩形工具按钮，设置工作模式为形状，在页面
上绘制形状。在图层面板中设置填充为0%，并双击该图层，在弹出的图层样式对话框中
分别选择描边颜色叠加，设置相应的参数，为其添加效果，如图13～15所示。131514▼
07复制形状 复制形状1图层为形状1拷贝图层，清除该图层的图层样式，再双击图层，
在弹出的图层样式对话框中分别选择描边投影，设置相应参数，为其添加效果，如图
18161716～18所示。ChapterUI的质感表现05
08▼ 绘制椭圆 单击工具箱中的椭圆工具按钮，在选项栏中选择工具模式为形状，按住
Shift键在页面上绘制正圆，如图19、20所示。192009▼ 添加渐变叠加 双击形状2图层，在弹出的图层样式对话框中选择渐变叠加，
设置相应参数，为其添加效果，如图21～23所示。21232210▼ 添加斜面和浮雕 双击形状2图层，在弹出的图层样式对话框中分别选择斜面和
浮雕阴影投影，设置相应参数，为其添加效果，如图24～26所示。24262511▼ 复制形状 选择形状2图层，连续 3次按下快捷键 Ctrl J，将图层复制3次，如图27、28所示。
272812▼ 导入素材 执行文件打开命令，在打开的对话框中选择下载的对应素材文件并将
其打开，拖入到场景中，如图29、30所示。2930▼
13绘制圆角矩形 单击工具箱中的圆角矩形工具按钮，设置工作模式为形状，在页面
上绘制形状。在图层面板中设置填充为0%，并双击该图层，在弹出的图层样式对话框中
分别选择内阴影颜色叠加，设置相应参数，为其添加效果，如图31～33所示。313332ChapterUI的质感表现05
▼
14添加外发光 双击形状3图层，在弹出的图层样式对话框中分别选择外发光投
影，设置相应参数，为其添加效果，如图34～36所示。363435▼
15绘制形状 单击工具箱中的圆角矩形工具按钮，设置工作模式为形状，在页面上绘制形状。
在图层面板中设置填充为0%，并双击该图层，在弹出的图层样式对话框中分别选择内阴影颜
色叠加，设置相应参数，为其添加效果，如图37～39所示。383739▼
16添加图层样式 双击形状4图层，在弹出的图层样式对话框中分别选择外发光投
影，设置相应参数，为其添加效果，如图40～42所示。414042▼
17绘制圆角矩形 单击工具箱中的圆角矩形工具按钮，设置工作模式为形状，在页面
上绘制形状。在图层面板中设置填充为0%，并双击该图层，在弹出的图层样式对话框中
分别选择内阴影投影，设置相应参数，为其添加效果，如图43～45所示。44434518▼ 添加外发光 双击形状5图层，在弹出的图层样式对话框中选择外发光，设置
相应参数，为其添加效果，如图46、47所示。4647▼
19绘制圆角矩形 单击工具箱中的圆角矩形工具按钮，设置工作模式为形状，在页面
上绘制形状。在图层面板中设置填充为0%，并双击该图层，在弹出的图层样式对话框中
分别选择渐变叠加投影，设置相应参数，为其添加效果，如图48～50所示。494850ChapterUI的质感表现05
▼
20绘制矩形 单击工具箱中的矩形工具按钮，设置工作模式为形状，在页面上绘制形
状。在图层面板中设置填充为0%，并双击该图层，在弹出的图层样式对话框中分别选择颜
色叠加投影，设置相应参数，为其添加效果，如图51～53所示。53515221▼ 添加文字 单击工具箱中的文字工具在字符面板中设置字体为微软雅黑，在页
面中输入文字，如图54、55所示。545522▼ 添加投影 双击文字图层，在弹出的图层样式对话框中选择颜色叠加，设置颜色叠加
参数，为文字添加效果，如图56、57所示。565723▼ 绘制高光 单击工具箱中的钢笔工具按钮，在页面中绘制封闭路径，按下快捷键
Ctrl Enter将其转换为选区，并新建一个图层为高光1，为选区填充白色，如图58、59所示。5859▼
24 添加渐变叠加 选择高光 1图层，在图层面板中设置填充为0%，双击该图层，在弹
出的图层样式对话框中选择渐变叠加，设置相应参数，为其添加效果，如图60、61所示。606125▼ 绘制高光 单击工具箱中的钢笔工具按钮，在页面中绘制封闭路径，按下快捷键
Ctrl Enter将其转换为选区，并新建一个图层为高光2，为选区填充白色，如图62、63所示。6362▼
26添加渐变叠加 选择高光2图层，在图层面板中设置填充为0%，双击该图层，在弹
出的图层样式对话框中选择渐变叠加，设置相应参数，为其添加效果，如图64、65所示。6465ChapterUI的质感表现05
光滑表面质感
5.4PsVersion：CS4 CS5 CS6 CC
在本例中，我们将学习结合不同的工具来绘制手机的外形，大量运用图层的图层样式效果来为形状添加效果，使手机表现出完美的立体感和质感。Keyword：圆角矩形工具、图层样式设计构思
黑色给人的感觉是神秘、沉默，而深蓝色给人的感觉是幽静、深远、冷郁，如右图所示。
01
▼
新建文档 执行文件新建命令，
02
▼
绘制基本形 选择圆角矩形工具，在
或按下快捷键Ctrl N，打开新建对话框，
选项栏中设置填充为黑色，半径为40像素，在设置大小为960像素720像素，分辨率为72
图像上拖曳并绘制基本形，如图02所示。像素，完成后单击确定按钮，新建一个空白文档，如图01所示。
0102▼
03复制图层 将圆角矩形1图层进行复制，得到圆角矩形1 副本图层，按下快捷键Ctrl T，按住快捷键Alt Shift从中心向内等比缩
小形状，按下Enter键确认操作，如图03所示。03选择内阴影，设置不透明度为57%，阻塞为5%，大小为24像素，如图05所示。0505
▼
绘制开关键和复制图层 设置前景色为
▼
04绘制手机屏幕和添加内阴影效果 设置前
景色为R：116；G：116；B：116，选择矩形工具，在图像上绘制矩形，为其添加内阴影图层样式效果。
R：32；G：32；B：32；选择椭圆工具，按住Shift键绘制正圆。将该图层进行复制，将椭圆的颜色改为黑色，按住键盘上键，移动椭圆的位置。绘制手机屏幕，如图04所示。04绘制开关键，如图06所示。06
|
|
購物車/收銀台(0) | 在線留言板
| 付款方式
| 運費計算
| 聯絡我們
| 幫助中心 |
加入書簽
HOME
新書上架
