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