Photoshop CC移动UI设计实用教程

　　本书是一本全面介绍如何使用Photoshop进行UI设计的实用教程，针对零基础读者本书是一本全面介绍如何使用Photoshop进行UI设计的实用教程，针对零基础读者开发，是入门级读者快速全面掌握使用Photoshop进行UI设计的参考书。本书由具有多年丰富UI设计经验的一线设计师精心编写，通过全实例、图文并茂的详细阐述，将UI设计过程再现，从UI设计基础到精致按钮及旋钮设计，从扁平风格到写实风格等，全面展示UI设计精髓。本书对UI设计中的各种流行设计风格做了全面剖析，每个案例都有详细的制作流程详解，并且为读者安排了相关的课后练习题，读者在学完案例后可通过习题进行深入练习，拓展自己的创意思维，提高UI设计水平。本书附赠教学资源，包括书中所有实例的素材文件及效果源文件，还有所有实例及课后习题的多媒体高清有声教学视频，帮助读者提高学习效率。另外，为方便老师教学，本书还提供了PPT教学课件，以供参考。本书适合作为UI设计初学者、平面设计师和手机App开发人员的参考用书，也可作为培训机构、大中专院校相关专业的教学参考书或上机实践指导用书。

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

第 1章 初识UI设计 9
1．1 认识UI设计 10
1．2 常用UI设计单位解析 10
1．3 UI设计常用图像格式 11
1．4 UI设计准则 11
1．5 UI设计与团队合作关系 12
1．6 智能手机操作系统简介 12
1．7 UI设计常用的软件 13
1．8 UI色彩学知识 15
1．9 UI设计常见配色方案 17
1．10 UI设计配色技巧 18
1．11 UI设计色彩学 20
1．12 精彩UI设计赏析 22
1．13 本章小结 23
第 2章 精致按钮及旋钮设计 24
2．1 理论知识——移动APP按钮尺寸分析 25
2．2 课堂案例——下载按钮 25
2．2．1 打开素材 26
2．2．2 添加质感 26
2．3 课堂案例——简洁按键开关 27
2．3．1 制作背景并添加文字 27
2．3．2 绘制按键 27
2．4 课堂案例——音量滑动条 28
2．4．1 打开素材 28
2．4．2 绘制图形 28
2．5 课堂案例——立体多边形按钮 29
2．5．1 制作渐变背景 29
2．5．2 绘制图形 30
2．6 课堂案例——滑动按钮 32
2．6．1 制作背景绘制图形 32
2．6．2 绘制控件 34
2．7 课堂案例——滑动调节按钮 36
2．7．1 制作背景绘制图形 37
2．7．2 绘制控件 38
2．7．3 添加质感 39
2．7．4 绘制刻度 40
2．8 课堂案例——功能旋钮 41
2．8．1 制作背景绘制图形 41
2．8．2 绘制功能图像 43
2．8．3 制作立体质感 45
2．8．4 绘制指示图形 47
2．8．5 添加文字 48
2．9 课堂案例——品质音量控件 49
2．9．1 制作背景 49
2．9．2 制作控件 50
2．9．3 制作细节 59
2．10 本章小结 61
2．11 课后习题 61
2．11．1 课后习题1——下单按钮 61
2．11．2 课后习题2——圆形开关按钮 62
2．11．3 课后习题3——金属旋钮 62
2．11．4 课后习题4——音频调节控件 63
第3章 趋势流行扁平风 64
3．1 理论知识——扁平化设计 65
3．1．1 什么是扁平化设计 65
3．1．2 扁平化设计的优点和缺点 65
3．1．3 扁平化设计的四大原则 65
3．2 课堂案例——盾牌图标 67
3．2．1 制作渐变背景 67
3．2．2 添加投影 68
3．3 课堂案例——扁平分享图标 69
3．3．1 绘制圆形 69
3．3．2 绘制装饰图形 70
3．3．3 制作投影 71
3．4 课堂案例——加速图标 72
3．4．1 制作背景及轮廓 72
3．4．2 绘制图标元素 73
3．4．3 制作阴影 74
3．5 课堂案例——企业管理登录界面 75
3．5．1 绘制主图形 75
3．5．2 添加素材及文字 77
3．6 课堂案例——社交应用登录框 77
3．6．1 制作背景 77
3．6．2 绘制界面 78
3．7 课堂案例——美食APP界面 81
3．7．1 绘制图形并添加素材 81
3．7．2 绘制界面元素 82
3．8 课堂案例——扁平化邮箱界面 84
3．8．1 制作背景及状态栏 84
3．8．2 添加文字 85
3．9 课堂案例——个人应用APP界面 87
3．9．1 制作背景 87
3．9．2 绘制界面图形 88
3．9．3 添加文字并制作细节 89
3．9．4 绘制二级功能页面 90
3．10 本章小结 93
3．11 课后习题 93
3．11．1 课后习题1——扁平铅笔图标 93
3．11．2 课后习题2——扁平相机图标 94
3．11．3 课后习题3——简约风天气APP 94
第4章 超强表现写实风 96
4．1 理论知识——写实风格详解 97
4．1．1 写实的艺术表现形式 97
4．1．2 UI设计的写实表现 97
4．2 课堂案例--——写实SIM卡 98
4．2．1 制作背景绘制轮廓 98
4．2．2 绘制细节图形 99
4．3 课堂案例——写实专辑包装 100
4．3．1 制作背景 101
4．3．2 制作封面 102
4．3．3 绘制光盘 103
4．3．4 制作质感 105
4．3．5 制作封口细节 107
4．4 课堂案例——写实闹钟图标 110
4．4．1 制作背景 110
4．4．2 绘制闹钟轮廓 110
4．4．3 绘制扬声器孔 115
4．4．4 绘制灯开关 117
4．4．5 绘制表盘图形 119
4．4．6 制作表盘细节 120
4．5 课堂案例——写实电视机图标 123
4．5．1 制作背景并绘制电视轮廓 123
4．5．2 绘制屏幕图形 126
4．5．3 绘制电视细节 128
4．6 课堂案例——写实小票图标 131
4．6．1 制作背景并绘制图形 132
4．6．2 制作锯齿效果 134
4．6．3 添加文字并制作阴影 135
4．7 本章小结 137
4．8 课后习题 137
4．8．1 课后习题1——写实计算器图标 137
4．8．2 课后习题2——写实钢琴图标 137
4．8．3 课后习题3——写实开关图标 138
第5章 iOS风格界面设计 139
5．1 理论知识——认识iOS风格 140
5．1．1 iOS的发展及界面分布 140
5．1．2 认识iOS的控件 140
5．2 课堂案例——苹果风格登录界面 141
5．2．1 制作背景 141
5．2．2 绘制图形 142
5．2．3 添加素材 144
5．2．4 绘制文本框 145
5．3 课堂案例——会员登录页 147
5．3．1 制作背景 147
5．3．2 绘制主界面 149
5．3．3 制作细节 151
5．3．4 绘制文本框 152
5．4 课堂案例——通信应用界面 154
5．4．1 制作背景 155
5．4．2 添加元素 158
5．5 课堂案例——音乐电台界面设计 160
5．5．1 制作背景 160
5．5．2 绘制界面 161
5．5．3 添加图形元素 165
5．5．4 添加素材图像 167
5．5．5 绘制功能控件 168
5．6 课堂案例——iPod应用登录界面 169
5．6．1 制作背景及绘制状态栏 169
5．6．2 添加界面元素 170
5．7 课堂案例——iOS风格音乐播放器界面 173
5．7．1 制作应用界面 174
5．7．2 展示页面 181
5．8 本章小结 182
5．9 课后习题 182
5．9．1 课后习题1——会员登录框界面 182
5．9．2 课后习题2——用户界面 182
5．9．3 课后习题3——翻页登录界面 183
第6章 精品图标制作 184
6．1 理论知识——了解图标 185
6．1．1 图标的分类 185
6．1．2 图标的作用 185
6．1．3 图标的格式 185
6．1．4 图标和图像大小 186
6．1．5 精美APP图标欣赏 188
6．2 课堂案例——简洁罗盘图标 188
6．2．1 制作背景绘制图形 188
6．2．2 绘制表座 191
6．2．3 绘制指针 191
6．3 课堂案例——简洁进程图标 193
6．3．1 制作背景添加图像 193
6．3．2 绘制图形 193
6．4 课堂案例——美丽拍图标 195
6．4．1 绘制矩形并添加阴影 195
6．4．2 绘制标志图形 197
6．4．3 制作细节部分 198
6．5 课堂案例——下载图标 200
6．5．1 制作背景并绘制图形 201
6．5．2 制作图标元素 203
6．6 课堂案例——相机和计算器图标 205
6．6．1 制作背景并绘制图标 206
6．6．2 制作细节 208
6．6．3 绘制镜头 210
6．6．4 绘制计算器图标 211
6．6．5 制作图标元素 212
6．6．6 制作细节 214
6．7 课堂案例——日历和天气图标 217
6．7．1 制作背景 217
6．7．2 绘制日历图标 218
6．7．3 制作图标细节 222
6．7．4 制作翻页 223
6．7．5 绘制天气图标 224
6．8 本章小结 228
6．9 课后习题 228
6．9．1 课后习题1——唱片机图标 228
6．9．2 课后习题2——进度图标 229
6．9．3 课后习题3——湿度计图标 229
6．9．4 课后习题4——小黄人图标 230
第7章 流行界面设计荟萃 231
7．1 理论知识——UI设计尺寸 232
7．1．1 iPhone和Android设计尺寸 232
7．1．2 Android 系统换算及主流手机设置 234
7．2 课堂案例——存储数据界面 236
7．2．1 制作背景绘制图形 236
7．2．2 添加细节图像 239
7．3 课堂案例——自然协会应用界面 240
7．3．1 制作主题背景 240
7．3．2 绘制界面图形 241
7．3．3 添加图像 242
7．3．4 绘制图形 243
7．4 课堂案例——点餐APP界面 245
7．4．1 制作背景 245
7．4．2 添加素材及文字 246
7．4．3 添加界面元素 247
7．4．4 绘制功能图形及添加素材 252
7．5 课堂案例——锁屏界面 254
7．5．1 制作背景 255
7．5．2 绘制界面图形 258
7．5．3 添加文字信息 261
7．5．4 添加素材功能图标 265
7．6 课堂案例——票券APP界面 266
7．6．1 制作背景并绘制状态栏 266
7．6．2 添加素材 267
7．6．3 添加文字 268
7．6．4 绘制按键图形 269
7．6．5 添加文字及素材 271
7．7 本章小结 272
7．8 课后习题 272
7．8．1 课后习题1——经典音乐播放器界面 272
7．8．2 课后习题2——下载数据界面 273
7．8．3 课后习题3——APP游戏个人界面 273
第8章 综合设计实战 275
8．1 课堂案例——信息接收控件 276
8．1．1 制作背景并绘制图形 276
8．1．2 制作控件元素 277
8．1．3 添加文字 279
8．2 课堂案例——Sense Widget 280
8．2．1 制作背景并绘制界面图形 280
8．2．2 添加文字信息及素材 285
8．3 课堂案例——简洁视频播放界面 286
8．3．1 制作主题背景 286
8．3．2 添加控件素材 289
8．3．3 添加投影 290
8．4 课堂案例——怡人秋景主题天气界面 291
8．4．1 制作背景 291
8．4．2 绘制界面 294
8．4．3 添加文字 306
8．5 课堂案例——概念手机界面 306
8．5．1 制作背景及绘制图形 307
8．5．2 添加素材 308
8．5．3 添加文字 310
8．5．4 绘制手机元素图形 311
8．6 本章小结 318
8．7 课后习题 318
8．7．1 课后习题1——精致CD控件 318
8．7．2 课后习题2——APP游戏安装页 319