正版 Photoshop CC移动UI图标设计实用教程 水木居士 人民邮电出

第 1章 图标设计轻松入门 9
1.1 图标的基本概念 10
1.1.1 图标的起源 10
1.1.2 什么是图标 10
1.1.3 图标与LOGO有什么区别 11
1.1.4 什么是App图标 12
1.1.5 常见移动设备图标 13
1.1.6 常见计算机应用图标 13
1.2 图标的分类 14
1.2.1 图标 14
1.2.2 功能图标 14
1.2.3 装饰图标 15
1.3 移动智能操作系统简介 15
1.3.1 Android系统 15
1.3.2 iOS系统 15
1.4 图标设计色彩学 16
1.4.1 颜色的概念 16
1.4.2 色彩三要素 16
1.5 图标设计常用配色方案 17
1.5.1 单色搭配 17
1.5.2 近似色搭配 18
1.5.3 补色搭配 18
1.5.4 分裂补色搭配 18
1.5.5 原色的搭配 18
1.6 图标设计配色技巧 19
1.6.1 百搭黑白灰 19
1.6.2 甜美温暖橙 19
1.6.3 气质冷艳蓝 19
1.6.4 清新自然绿 20
1.6.5 热情狂热红 20
1.6.6 靓丽醒目黄 21
1.7 本章小结 21
第 2章 图标设计规范及设计原则 22
2.1 图标和图像尺寸规范 23
2.1.1 iOS系统图标设计规范 23
2.1.2 Android屏幕图标尺寸规范 24
2.2 移动App图标尺寸分析 25
2.2.1 一般规范标准 25
2.2.2 手指与尺寸大小 25
2.2.3 理想状态和特殊情况 25
2.3 图标的设计原则 25
2.3.1 表意性原则 25
2.3.2 美观性原则 27
2.3.3 差异性原则 28
2.3.4 适合的精细度原则 29
2.3.5 风格统一性原则 29
2.3.6 与场景协调原则 31
2.3.7 原创性原则 32
2.4 图标的设计流程 33
2.4.1 产品定位 33
2.4.2 产品风格 33
2.4.3 寻找隐喻 36
2.4.4 绘制草图 37
2.4.5 绘制图标 38
2.4.6 细节美化 39
2.5 本章小结 40
第3章 Photoshop在图标设计中的基本应用 41
3.1 图标设计常用软件分析 42
3.1.1 Photoshop 42
3.1.2 Illustrator 42
3.1.3 CorelDRAW 42
3.2 常见图标的格式 43
3.2.1 PNG格式 43
3.2.2 JPEG格式 44
3.2.3 GIF格式 44
3.2.4 ICO格式 45
3.2.5 ICL格式 45
3.2.6 IP格式图标 46
3.3 图标设计常用单位解析 46
3.3.1 英寸 46
3.3.2 分辨率 46
3.3.3 像素 47
3.3.4 屏幕密度 47
3.4 App启动图标的制作 48
3.4.1 iOS启动图标制作 49
3.4.2 Android启动图标制作 51
3.5 具有代表性的图标制作 53
3.5.1 常见开关式图标设计 53
3.5.2 常见旋钮式图标设计 57
3.5.3 常见导航式图标设计 62
3.6 本章小结 64
第4章 扁平化风格图标设计 65
4.1 扁平化风格及设计解析 66
4.2 系统调整图标 67
4.3 通信信息图标 69
4.4 雷达扫描图标 69
4.5 录像摄像图标 71
4.6 小雨伞图标 72
4.7 邮箱通信图标 75
4.7.1 制作轮廓 75
4.7.2 制作细节图形 76
4.8 资讯图标 77
4.8.1 制作纯色背景 77
4.8.2 添加投影 79
4.9 辅助手电图标 80
4.9.1 绘制主图形 80
4.9.2 处理光效 81
4.10 天气启动图标及界面 82
4.10.1 启动图标制作 83
4.10.2 绘制界面背景 84
4.10.3 制作界面细节 86
4.11 本章小结 89
4.12 课后习题 89
4.12.1 课后习题1——便签图标设计 89
4.12.2 课后习题2——扁平相机图标 89
第5章 写实风格图标设计 91
5.1 写实风格及设计解析 92
5.2 音娱电器图标 92
5.2.1 绘制主体轮廓 93
5.2.2 制作图标细节 95
5.2.3 处理扬声器图像 97
5.3 写实广播图标 98
5.3.1 绘制主体轮廓 99
5.3.2 制作屏幕图像 101
5.3.3 制作旋钮效果 104
5.4 电器配件图标 106
5.4.1 制作主图标 106
5.4.2 处理插孔效果 109
5.5 复古放映盘图标 111
5.5.1 制作放映盘轮廓 111
5.5.2 处理质感效果 112
5.6 典雅钟表图标 116
5.6.1 绘制钟表轮廓 116
5.6.2 制作指针细节 118
5.7 影像器材图标 120
5.7.1 制作相机主体 120
5.7.2 处理镜头图像 122
5.8 写实遥控图标及应用界面 127
5.8.1 制作遥控图标 128
5.8.2 处理应用界面 133
5.8.3 添加界面细节 135
5.8.4 制作调节条 139
5.9 本章小结 142
5.10 课后习题 142
5.10.1 课后习题1——写实计算器 142
5.10.2 课后习题2——写实开关图标 143
5.10.3 课后习题3——写实钢琴图标 143
第6章 卡通涂鸦风格图标设计 144
6.1 卡通涂鸦风格及设计解析 145
6.2 手绘趣味旅行图标 145
6.2.1 图标轮廓制作 146
6.2.2 绘制主视觉图形 148
6.3 可爱场景化图标 149
6.3.1 绘制图标轮廓 150
6.3.2 处理高光细节 151
6.3.3 绘制冰块图形 153
6.3.4 绘制主视觉动物 156
6.4 卡通猪头像图标 158
6.4.1 制作放射轮廓 158
6.4.2 绘制主视觉图像 159
6.5 英雄动物图标 161
6.5.1 制作质感轮廓 162
6.5.2 添加主体视觉图像 163
6.6 绿巨人头像图标 164
6.6.1 制作立体边框 164
6.6.2 处理图像特效 165
6.7 大嘴启动图标及主题界面 167
6.7.1 绘制启动图标 167
6.7.2 制作主题界面背景 170
6.7.3 绘制主视觉图像 172
6.7.4 制作球体图像 174
6.8 本章小结 178
6.9 课后习题 178
6.9.1 课后习题1——小黄人图标 178
6.9.2 课后习题2——涂鸦应用图标 179
第7章 应用风格图标设计 180
7.1 应用风格及设计解析 181
7.2 精致Web图标 181
7.2.1 绘制图标轮廓 181
7.2.2 制作质感图形 183
7.3 互联网播客图标 185
7.3.1 绘制主轮廓图形 186
7.3.2 处理特征图像 186
7.4 运动应用图标 188
7.4.1 绘制图标主轮廓 189
7.4.2 处理标识图形 190
7.5 生活应用图标 191
7.5.1 制作图标主轮廓 192
7.5.2 处理细节图像 194
7.6 搜索图标 196
7.6.1 制作主体轮廓 196
7.6.2 处理主视觉图像 197
7.7 辅助工具图标 199
7.7.1 制作图标主图形 200
7.7.2 绘制细节图像 202
7.8 相机和计算器图标 205
7.8.1 制作背景并绘制图标 205
7.8.2 绘制镜头 209
7.8.3 绘制计算器图标 210
7.8.4 制作图标元素 211
7.9 本章小结 216
7.10 课后习题 216
7.10.1 课后习题1——清新日历图标 216
7.10.2 课后习题2——进度图标 217
7.10.3 课后习题3——品质音量旋钮 217
第8章 立体风格图标设计 218
8.1 立体风格及设计解析 219
8.2 粉色系进度指示图标 220
8.2.1 制作图标轮廓 220
8.2.2 处理主视觉图形 222
8.3 立体下载图标 223
8.3.1 绘制立体轮廓 223
8.3.2 制作下载图示 225
8.4 立体导航图标 227
8.4.1 处理主图像 227
8.4.2 制作立体图形 228
8.5 原生桌球立体图标 230
8.5.1 绘制木盒 230
8.5.2 制作球体 232
8.6 柔和视觉定位图标 234
8.6.1 绘制主轮廓 234
8.6.2 制作定位图像 236
8.7 防护启动图标及应用界面 240
8.7.1 制作启动图标 240
8.7.2 处理条纹效果 243
8.7.3 处理主界面背景 245
8.7.4 绘制主视觉图形 246
8.8 本章小结 251
8.9 课后习题 251
8.9.1 课后习题1——唱片机图标 251
8.9.2 课后习题2——湿度计图标 251
8.9.3 课后习题3——圆形开关按钮 252
第9章 游戏风格图标设计 253
9.1 游戏风格及设计解析 254
9.2 彩色进度条制作 254
9.2.1 制作进度主图形 255
9.2.2 绘制进度细节 257
9.2.3 处理质感效果 258
9.3 简洁返回图标 259
9.3.1 绘制图标轮廓 260
9.3.2 绘制标识图形 261
9.4 游戏开始图标 262
9.4.1 绘制主图形 262
9.4.2 处理图标细节图文 265
9.5 矢量金币图标 266
9.5.1 金币主轮廓制作 266
9.5.2 细节元素处理 267
9.6 手绘小鸟图标 268
9.6.1 大体轮廓制作 268
9.6.2 手绘小鸟图像 269
9.7 魔法屋图标 271
9.7.1 制作魔法边框 272
9.7.2 处理魔法主图像 273
9.8 泡泡堂启动图标及应用界面 274
9.8.1 启动图标轮廓制作 275
9.8.2 绘制主图像 276
9.8.3 制作应用界面 282
9.8.4 制作应用界面主题字 284
9.8.5 按钮效果制作 285
9.9 本章小结 287
9.10 课后习题 287
9.10.1 课后习题1——运行进度标示 287
9.10.2 课后习题2——宠物乐园图标 288
第 10章 质感风格图标设计 289
10.1 质感风格及设计解析 290
10.2 金属质感图标 290
10.2.1 绘制金属盒 290
10.2.2 制作图标细节图像 293
10.3 亲肤材质图标 295
10.3.1 处理图标主轮廓 296
10.3.2 处理细节图像 298
10.4 钢制乐器图标 300
10.4.1 绘制主题轮廓 300
10.4.2 制作乐器质感 302
10.4.3 绘制主题图像 305
10.5 透明质感图标 307
10.5.1 绘制主轮廓图形 308
10.5.2 处理细节图像 310
10.6 原生纸质感图标 312
10.6.1 制作图标轮廓 313
10.6.2 添加细节图像 314
10.7 糖果质感启动图标及主题界面 317
10.7.1 质感启动图标制作 318
10.7.2 完善质感效果 320
10.7.3 处理界面背景 323
10.8 本章小结 327
10.9 课后习题 327
10.9.1 课后习题1——白金质感开关按钮 327
10.9.2 课后习题2——塑料质感插座 328

王红卫，毕业于郑州大学计算机专业。在北京理工大学百事特电脑教育部做讲师6年。创立水木风云工作室，以教材及店销书籍编写为主，从事编辑与广告、企业系列海报等设计工作。

贴心基础：在前几章贴心安排了极富含金量的基础知识，在面对设计工作之初就打下扎实的基础，从而在后期的设计工作中更加自信。
真实案例：本书在编写过程中，以真正的商业设计案例作为依据进行讲解，让读者在学习过程中，可以与商业设计思路同步进行，学到的是真实的设计技能。
多种风格：在所有的实例中安排了不同风格下的图标设计思路，从扁平化、卡通涂鸦风格、立体风格到质感风格等，在有限的页数之内囊括了几乎所有风格的图标设计实例。
详细精致：在实例的讲解过程中，以对应的步骤和图像相结合，在阅读文字的同时，还可以对照着图像进行操作，从整体风格的把控到细节的刻画，本例以详细的讲解形式打造出精致的图标。
重点提示：在学习的过程中，遇到相对较难理解的知识点，以重点提示对知识点进行强化，有了提示的辅助，在学习过程中将会更加容易理解。
语音教学：本书附赠教学资源，包括所有章节中有关的调用素材及源文件，以及高清语音教学视频。假如在书中有不理解的知识点，结合重点提示的同时再观看教学视频，相信对所有的知识点能迎刃而解。

这是一本全面介绍如何使用Photoshop进行UI图标设计的实用教程。本书采用新颖的编写形式，精选当下流行的商业图标设计案例，将实用的设计思路授受给读者。同时在讲解过程中，以文字讲解与图像结合的形式，很好的展示设计过程，无论是简洁的扁平化图标实例讲解，还是相对复杂的写实或者质感图标实例讲解，都可以通过本书提供的设计思路进行设计，真正学到专业的设计技能，从而全面提升自己的设计能力。
本书附赠学习资源，包括书中所有实例的素材文件和效果源文件，以及本书所有实例及课后习题的高清有声教学视频，帮助读者提高学习效率。同时，为方便老师教学，本书还提供了PPT教学课件，以供参考。
本书不但适用于喜爱UI图标设计的读者，还能让有一定基础的读者快速提升自己的设计能力，同时可作为社会培训学校、大中专院校相关专业的教学参考书或上机实践指导用书。

贴心基础：在前几章贴心安排了极富含金量的基础知识，在面对设计工作之初就打下扎实的基础，从而在后期的设计工作中更加自信。 真实案例：本书在编写过程中，以真正的商业设计案例作为依据进行讲解，让读者在学习过程中，可以与商业设计思路同步进行，学到的是真实的设计技能。 多种风格：在所有的实例中安排了不同风格下的图标设计思路，从扁平化、卡通涂鸦风格、立体风格到质感风格等，在有限的页数之内囊括了几乎所有风格的图标设计实例。 详细精致：在实例的讲解过程中，以对应的步骤和图像相结合，在阅读文字的同时，还可以对照着图像进行操作，从整体风格的把控到细节的刻画，本例以详细的讲解形式打造出精致的图标。 重点提示：在学习的过程中，遇到相对较难理解的知识点，以重点提示对知识点进行强化，有了提示的辅助，在学习过程中将会更加容易理解。 语音教学：本书附，包括所有章节中有关的调用素材及源文件，以及高清语音教学视频。假如在书中有不理解的知识点，结合重点提示的同时再观看教学视频，相信对所有的知识点能迎刃而解。 

...