Photoshop移动UI设计完全实例教程

设计基础篇 PART 01
01 移动UI设计快速入门
001 新手入门：了解UI名词的由来 12
002 多点本事：精通APP应用设计 12
003 分门别类：了解APP主要类别 13
004 移动UI：连接用户和手机的界面 13
005 设计规范：统一的尺寸和色彩 14
006 设计特点：小巧轻便，通信便捷 14
007 移动特性：个性化的界面特色 15
008 设计基础：熟悉手机界面特色 16
009 APP平台：了解手机操作系统 16
010 安卓系统：品类繁多，界面各异 17
011 iOS系统：操作便捷，结构清晰 18
012 微软系统：整洁干净的Metro UI 20
013 平板界面：操作方便，性能优越 21
014 阶段分析：移动UI设计的流程 21
015 随身携带：移动设备的高便携性 22
016 收集信息：用户的反馈非常重要 22
017 提升交互：加强移动UI定制性 23
018 直击需求：UI就是为用户服务 23
019 登录分享：彰显移动社交特性 24
020 黏住用户：增加离线浏览功能 25
021 加入游戏：提升APP的乐趣 26
022 独具一格：拥有自己的UI特色 26
02 移动UI设计的布局原则
023 竖排列表布局 28
024 横排方块布局 28
025 九宫格布局 28
026 弹出框布局 29
027 热门标签布局 29
028 抽屉式布局 29
029 陈列馆式布局 30
030 分段菜单式布局 31
031 点聚式布局 31
032 走马灯式布局 32
033 底部导航式栏布局 32
034 磁贴设计式布局 32
035 超级菜单式布局 32
036 选项卡式布局 33
037 图示式布局 34
038 幻灯片式布局 34
039 图表信息布局 35
040 完善细节设计 35
041 移动UI的布局原则 36
03 移动UI视觉交互设计法则
042 简约明快的视觉特色 39
043 趣味型的视觉特色 39
044 华丽型的视觉特色 40
045 色彩的使用要点 40
046 图案的使用要点 40
047 文字要易于识别 40
048 文字的层次感要强 41
049 清晰地表达文字信息 42
050 把握文字的间距 43
051 适当设置文字的色彩 44
052 更具美观性和观赏性 45
053 具备较好的实用性 46
054 注重图片的品质美感 46
055 不要随意拉伸图片 47
056 让图片更好地美化界面 48
057 了解手势交互动作特性 48
058 用循环动作增加真实感 49
059 重复运用透析事物关系 49
060 关键动作展现复杂效果 50
061 连续动作展现简单动画 50
062 用夸张实现“天马行空” 50
04 移动UI中的基本元素
063 常规按钮组件 52
064 编辑输入框组件 52
065 开关按钮组件 52
066 网格式浏览模式 53
067 文本标签组件 53
068 警告框组件 53
069 导航栏组件 54
070 页面切换组件 54
071 进度条组件 55
072 重视ico图标设计 55
073 隐藏与删除多余元素 56
074 对元素进行分区和分组 56
075 帮用户做决策 57
076 添加视觉反馈 57
077 在UI中加入感情 57
078 内容也需要做“装修” 60
079 登录界面的设计要点 61
080 基本元素的设计技巧 63
软件功能篇 PART 02
05 Photoshop移动UI设计入门
081 安装Photoshop CC软件 69
082 卸载Photoshop CC软件 69
083 启动Photoshop CC软件 70
084 退出Photoshop CC软件 71
085 最*大化/最*小化移动UI图像窗口 72
086 还原移动UI图像窗口 72
087 移动与调整移动UI图像窗口大小 73
088 调整移动UI图像窗口排列 73
089 切换当前移动UI图像窗口 74
090 管理Photoshop CC工具箱 75
091 使用复合工具 76
092 设置预设工具 76
093 如何展开面板 77
094 移动面板 78
095 组合面板 78
096 隐藏面板 79
097 调整面板大小 79
098 创建自定义工作区 79
099 设置自定义快捷键 79
100 设置彩色菜单命令 81
101 优化界面选项 81
102 优化文件处理选项 81
103 优化暂存盘选项 82
104 优化内存与图像高速缓存选项 82
105 显示/隐藏移动UI图像中的网格 83
106 对移动UI图像进行自动对齐网格操作 83
107 调整网格属性 84
108 显示/隐藏移动UI图像中的标尺 85
109 更改移动UI图像中的标尺原点位置 85
110 还原移动UI图像中的标尺原点位置 86
111 更改移动UI图像中的标尺单位 86
112 测量移动UI图像的长度 87
113 拉直移动UI图像的图层 87
114 拖曳创建移动UI图像参考线 87
115 准确创建移动UI图像参考线 88
116 显示/隐藏移动UI图像中的参考线 89
117 更改移动UI图像中的参考线颜色 89
118 更改移动UI图像中的参考线样式 90
119 调整移动UI图像中的参考线位置 91
120 清除移动UI图像中的参考线 91
121 为移动UI图像创建注释 92
122 更改移动UI图像中的注释颜色 93
123 运用对齐工具对齐移动UI图像 93
124 为移动UI图像添加计数 94
06 移动UI设计的文件操作
125 新建移动UI图像文件 96
126 打开移动UI图像文件 96
127 保存移动UI图像文件 97
128 关闭移动UI图像文件 98
129 置入移动UI图像文件 99
130 导出移动UI图像文件 100
131 通过菜单撤销移动UI图像操作 101
132 通过面板撤销移动UI图像操作 101
133 编辑移动UI图像时创建历史记录 102
134 快照还原移动UI图像的编辑操作 103
135 恢复移动UI图像初始状态 103
136 调整移动UI图像的画布大小 104
137 调整移动UI图像的尺寸 104
138 调整移动UI图像的分辨率 105
139 放大/缩小显示移动UI图像 105
140 按适合屏幕显示移动UI图像 106
141 按区域放大显示移动UI图像 106
142 切换移动UI图像的显示模式 107
143 移动图像编辑窗口显示区域 107
144 使用导航器移动图像显示区域 108
145 运用工具裁剪移动UI图像 109
146 运用命令裁切移动UI图像 110
147 准确裁剪移动UI图像素材 110
148 旋转移动UI图像的画布 111
149 水平翻转移动UI图像画布 112
150 垂直翻转移动UI图像画布 112
151 调整UI图像的元素位置 113
152 删除移动UI图像中的元素 114
153 缩放/旋转移动UI图像 114
154 水平翻转移动UI图像 115
155 垂直翻转移动UI图像 116
156 斜切移动UI图像素材 116
157 扭曲移动UI图像素材 117
158 透视移动UI图像素材 119
159 变形移动UI图像素材 120
160 在移动UI图像中重复变换 121
161 操控变形移动UI图像素材 122
07 移动UI图像的编辑与修复
162 选择移动UI图像中的图层 124
163 在移动UI图像中创建普通图层 125
164 在移动UI图像中创建调整图层 127
165 在移动UI图像中创建填充图层 127
166 在移动UI图像中创建图层组 128
167 移动UI图像的图层基本操作 129
168 合并移动UI图像中的图层 132
169 使用混合模式编辑移动UI图像 133
170 为移动UI图像应用图层样式 134
171 隐藏移动UI图像的图层样式 135
172 复制移动UI图像的图层样式 136
173 编辑移动UI图像的图层样式 137
174 清除移动UI图像的图层样式 138
175 将图层样式转换为图层 138
176 使用矩形选框工具创建矩形选区 138
177 使用椭圆选框工具创建椭圆选区 140
178 运用套索工具创建不规则选区 142
179 运用多边形套索工具创建选区 143
180 运用磁性套索工具创建选区 144
181 运用魔棒工具创建颜色相近选区 145
182 运用快速选择工具创建选区 146
183 运用“色彩范围”命令自定选区 147
184 运用“扩大选取”命令扩大选区 148
185 运用“选取相似”命令创建选区 149
186 运用按钮创建移动UI图像选区 149
187 调整移动UI图像中的选区位置 151
188 存储移动UI图像中的选区 151
189 变换移动UI图像中的选区 152
190 剪切移动UI图像中的选区内容 153
191 复制和粘贴移动UI选区图像 153
192 在移动UI图像选区内贴入图像 154
193 为移动UI图像选区添加边界 155
194 平滑移动UI图像中的选区 155
195 扩展与收缩移动UI图像中的选区 155
196 羽化移动UI中的选区图像 156
197 调整移动UI图像中的选区边缘 156
198 填充移动UI图像中的选区 157
199 使用选区定义移动UI图案 157
200 描边移动UI图像中的选区 158
201 清除移动UI图像选区内容 158
202 运用污点修复画笔工具修复移动UI图像 159
203 运用修复画笔工具修复移动UI图像 159
204 运用修补工具修复移动UI图像 160
205 使用颜色替换工具替换移动UI图像颜色 161
206 运用橡皮擦工具清除移动UI图像内容 161
207 运用背景橡皮擦工具清除移动UI图像内容 162
208 运用魔术橡皮擦工具清除移动UI图像内容 163
209 运用加深工具调整移动UI图像色调 164
210 运用海绵工具加深移动UI图像色彩浓度 165
211 运用仿制图章工具复制移动UI元素 165
212 运用图案图章工具绘制移动UI元素 166
213 运用模糊工具模糊移动UI图像 167
214 运用锐化工具锐化移动UI图像 167
215 运用历史记录画笔工具恢复移动UI图像 168
08 移动UI的色彩设计
216 设置移动UI图像的前景色与背景色 170
217 使用吸管工具设置移动UI图像颜色 170
218 使用“颜色”面板设置移动UI图像颜色 171
219 使用“色板”面板设置移动UI图像颜色 171
220 使用“填充”命令填充移动UI图像颜色 172
221 快捷菜单选项填充移动UI图像颜色 173
222 使用油漆桶工具填充移动UI图像颜色 174
223 使用渐变工具为移动UI图像填充双色 174
224 使用渐变工具为移动UI图像填充多色 175
225 使用“填充”命令为移动UI图像填充图案 176
226 运用“填充”命令修复移动UI图像 178
227 使用油漆桶工具填充移动UI图像颜色 179
228 使用“自动色调”命令调整移动UI色调 179
229 使用“自动对比度”命令调整移动UI对比度 180
230 使用“自动颜色”命令调整移动UI颜色 180
231 查看移动UI图像的颜色分布 18
232 转换移动UI图像的颜色模式 182
233 识别移动UI图像色域范围外的颜色 184
234 使用“色阶”命令调整移动UI图像亮度范围 185
235 使用“亮度/对比度”命令调整移动UI图像色彩 186
236 使用“曲线”命令调整移动UI图像整体色调 187
237 使用“曝光度”命令调整移动UI图像曝光 187
238 使用“自然饱和度”命令调整移动UI饱和度 188
239 使用“色相/饱和度”命令调整移动UI色相 189
240 使用“色彩平衡”命令调整移动UI图像偏色 190
241 使用“匹配颜色”命令匹配移动UI图像色调 190
242 使用“替换颜色”命令替换移动UI图像色调 191
243 使用“阴影/高光”命令调整移动UI图像明暗 192
244 使用“照片滤镜”命令过滤移动UI图像色调 192
245 使用“可选颜色”命令校正移动UI图像色彩 193
246 使用“通道混合器”命令调整移动UI图像色彩 193
247 使用“黑白”命令制作单色移动UI图像效果 194
248 使用“去色”命令制作灰度移动UI图像效果 194
249 使用“阈值”命令制作黑白移动UI图像效果 195
250 使用“变化”命令制作彩色移动UI图像效果 195
251 使用“HDR色调”命令调整移动UI图像色调 196
252 使用“渐变映射”命令制作渐变移动UI图像效果 197
09 移动UI的图形图像设计
253 选择设计移动UI的纸张 199
254 选择设计移动UI的画笔 199
255 选择设计移动UI的颜色 200
256 使用“画笔”面板 200
257 使用“画笔预设”面板 201
258 设置画笔笔尖形状 20
259 设置随机变化的画笔效果 202
260 创建自定义的画笔笔刷 204
261 设置画笔笔触的散射效果 205
262 在移动UI图像中创建图案纹理效果 206
263 使用双重画笔绘制移动UI图像 207
264 恢复到系统默认的画笔设置 208
265 存储当前使用的画笔设置 208
266 对多余的画笔进行删除操作 209
267 新建移动UI图像路径 209
268 选择移动UI图像中的路径 212
269 重命名移动UI图像中的路径 212
270 保存移动UI图像中的工作路径 212
271 复制移动UI图像中的路径 213
272 调整移动UI图像中的路径位置 213
273 删除移动UI图像中的路径 214
274 运用钢笔工具绘制闭合移动UI路径 214
275 运用钢笔工具绘制开放移动UI路径 216
276 运用自由钢笔工具绘制移动UI路径 216
277 运用选区创建移动UI图像路径 218
278 在移动UI图像中绘制矩形路径形状 219
279 在移动UI图像中绘制圆角矩形路径形状 220
280 在移动UI图像中绘制多边形路径形状 220
281 在移动UI图像中绘制椭圆路径形状 221
282 在移动UI图像中绘制直线路径形状 222
283 在移动UI图像中绘制自定路径形状 223
284 在移动UI路径中添加或删除锚点 224
285 平滑移动UI图像中的路径锚点 224
286 将圆滑型锚点转换为直线型锚点 225
287 断开移动UI图像中的路径 225
288 连接移动UI图像中的路径 225
289 填充移动UI图像中的路径 226
290 描边移动UI图像中的路径 227
291 创建通道辅助移动UI制图 228
292 在移动UI图像中创建复合通道 230
293 在移动UI图像中创建单色通道 231
294 在移动UI图像中创建专色通道 231
295 复制与删除移动UI图像中的通道 232
296 在移动UI图像中创建剪贴蒙版 232
297 设置移动UI剪贴蒙版的混合模式 234
298 设置移动UI剪贴蒙版的不透明度 235
299 在移动UI图像中创建快速蒙版 235
300 在移动UI图像中创建矢量蒙版 236
301 删除移动UI图像中的矢量蒙版 237
302 通过选区创建移动UI图层蒙版 237
303 在移动UI图像中直接创建图层蒙版 238
304 编辑移动UI图像中的图层蒙版 239
305 管理移动UI图像中的图层蒙版 240
306 移动UI图像中的蒙版链接操作 241
307 图层蒙版与选区的相互转换操作 241
308 将矢量蒙版转换为图层蒙版 242
10 移动UI的文字编排设计
309 移动UI的文字类型 245
310 了解文字工具属性栏 245
311 输入横排移动UI图像文字 246
312 输入直排移动UI图像文字 247
313 输入段落移动UI图像文字 249
314 输入选区移动UI图像文字 250
315 设置移动UI文字属性 251
316 设置移动UI段落属性 252
317 选择和移动APP图像文字 252
318 互换移动UI文字的方向 253
319 切换点文本和段落文本 253
320 拼写检查移动UI文字 254
321 查找与替换移动UI文字 255
322 输入沿路径排列的移动UI文字 256
323 调整移动UI文字排列的位置 257
324 调整移动UI文字的路径形状 257
325 调整移动UI文字与路径距离 258
326 移动UI图像的变形文字样式 258
327 创建移动UI变形文字效果 259
328 编辑移动UI变形文字效果 260
329 将移动UI文字转换为路径 260
330 将移动UI文字转换为形状 260
331 将移动UI文字转换为图像 261
11 移动UI的特效质感设计
332 在移动UI图像中创建智能滤镜 263
333 编辑移动UI图像中的智能滤镜 264
334 停用/启用移动UI图像中的智能滤镜 264
335 删除移动UI图像中的智能滤镜 264
336 为移动UI图像添加液化效果 265
337 为移动UI图像添加消失点效果 266
338 使用滤镜库编辑移动UI图像 267
339 使用镜头校正滤镜修复移动UI图像 268
340 为移动UI图像添加切变效果 269
341 为移动UI图像添加波浪效果 269
342 为移动UI图像添加波纹效果 270
343 为移动UI图像添加玻璃效果 270
344 为移动UI图像添加水波效果 271
345 为移动UI图像添加海洋波纹效果 271
346 为移动UI图像添加扩散亮光效果 272
347 为移动UI图像添加旋转扭曲效果 273
348 为移动UI图像添加马赛克效果 273
349 为移动UI图像添加点状化效果 274
350 为移动UI图像添加彩块化效果 275
351 为移动UI图像添加彩色半调效果 275
352 为移动UI图像添加晶格化效果 276
353 为移动UI图像添加铜版雕刻效果 276
354 为移动UI图像添加碎片效果 277
355 为移动UI图像添加杂色效果 277
356 为移动UI图像添加减少杂色效果 278
357 为移动UI图像添加蒙尘与划痕效果 278
358 为移动UI图像添加中间值效果 279
359 为移动UI图像添加径向模糊效果 279
360 为移动UI图像添加表面模糊效果 280
361 为移动UI图像添加动感模糊效果 28
362 为移动UI图像添加高斯模糊效果 282
363 为移动UI图像添加强化的边缘效果 283
364 为移动UI图像添加喷溅效果 284
365 为移动UI图像添加成角的线条效果 284
366 为移动UI图像添加阴影线效果 285
367 为移动UI图像添加水彩画纸效果 285
368 为移动UI图像添加壁画效果 287
369 为移动UI图像添加水彩效果 287
12 移动UI图像抠取与合成
370 使用“全部”命令合成移动UI图像 290
371 使用“色彩范围”命令抠图 29
372 使用“选取相似”命令抠图 292
373 使用快速选择工具抠图 292
374 使用对所有图层取样抠图 293
375 通过单一选取功能抠图 294
376 通过添加选区功能抠图 294
377 通过减选选区抠图 295
378 通过交叉选取功能抠图 296
379 通过透明图层功能抠图 296
380 通过取样背景色板功能抠图 296
381 通过取样一次功能抠图 297
382 通过连续取样功能抠图 298
383 通过“查找边缘”功能抠图 298
384 通过单一功能抠图 299
385 通过连续功能抠图 299
386 通过设置容差抠图 300
387 通过透明效果抠图 300
388 通过矩形选框抠图 30
389 通过椭圆选框抠图 30
390 通过套索工具抠图 302
391 通过多边形套索工具抠图 302
392 通过磁性套索工具抠图 303
393 运用绘制直线路径抠图 304
394 运用绘制曲线路径抠图 304
395 运用自由钢笔工具抠图 305
396 运用建立选区功能抠图 305
397 运用绘制矩形路径抠图 306
398 运用绘制圆角矩形路径抠图 307
399 运用绘制椭圆路径抠图 309
400 运用绘制多边形路径抠图 310
401 运用绘制自定形状路径抠图 310
402 通过“变亮”模式合成移动UI图像 311
403 通过“滤色”模式合成移动UI图像 311
404 通过“正片叠底”模式合成移动UI图像 312
405 通过“颜色加深”模式合成移动UI图像 312
406 通过矢量蒙版抠图 313
407 通过图层蒙版合成移动UI图像 313
408 通过快速蒙版抠图 314
409 通过编辑图层蒙版抠图 315
410 通过路径和蒙版合成移动UI图像 315
411 应用自定蒙版合成移动UI图像 316
412 应用剪贴蒙版合成移动UI图像 316
413 通过合并通道功能合成移动UI图像 316
414 通过调整通道抠图 317
415 通过利用通道差异性抠图 317
416 通过钢笔工具配合通道抠图 317
417 色阶调整配合通道抠图 317
418 曲线调整配合通道抠图 318
419 用通道对透明物体抠图 318
420 将通道作为选区载入抠图 319
421 通过“计算”命令抠图 319
422 通过“应用图像”命令抠图 201
423 通过“调整边缘”命令抠图 321
424 运用外部动作抠图 321
实战应用篇 PART 03
13 移动UI图标图形设计
425 音乐APP图标设计1——图标背景效果 323
426 音乐APP图标设计2——图标主体效果 324
427 音乐APP图标设计3——图标细节效果 325
428 邮箱APP图标设计1——图标背景效果 327
429 邮箱APP图标设计2——图标主体效果 328
430 邮箱APP图标设计3——调整图像形状 329
431 鼠标指针形状设计1——制作主体效果 329
432 鼠标指针形状设计2——完善主体效果 330
433 鼠标指针形状设计3——制作细节效果 332
14 移动UI按钮控件设计
434 按钮设计1——制作主体效果 335
435 按钮设计2——添加立体效果 335
436 按钮设计3——制作文本效果 337
437 解锁滑块设计1——制作主体效果 338
438 解锁滑块设计2——制作按钮效果 339
439 解锁滑块设计3——制作文本效果 340
440 切换条设计1——制作背景效果 342
441 切换条设计2——制作主体效果 343
442 切换条设计3——制作细节效果 344
15 移动UI功能界面设计
443 搜索框设计1——制作主体效果 346
444 搜索框设计2——制作搜索图标 347
445 搜索框设计3——制作二维码搜索 348
446 标签栏设计1——制作标签栏背景 349
447 标签栏设计2——制作分割线 350
448 标签栏设计3——制作标签文本 351
449 选项框设计1——制作选项框主体 352
450 选项框设计2——制作细节效果 353
451 选项框设计3——制作文本效果 354
16 手机登录UI设计
452 免费WiFi应用登录界面设计1——制作背景效果 357
453 免费WiFi应用登录界面设计2——制作表单按钮 359
454 免费WiFi应用登录界面设计3——制作文本细节 364
455 云服务APP登录界面设计1——制作界面背景 366
456 云服务APP登录界面设计2——制作登录框 366
457 云服务APP登录界面设计3——制作文本效果 367
458 社交APP登录界面设计1——制作主体效果 369
459 社交APP登录界面设计2——制作表单控件 370
460 社交APP登录界面设计3——制作倒影效果 371
17 安卓系统UI设计
461 时钟界面设计1——制作背景效果 374
462 时钟界面设计2——制作分割线 375
463 时钟界面设计3——制作主体效果 377
464 锁屏界面设计1——制作背景效果 377
465 锁屏界面设计2——制作圆环效果 380
466 锁屏界面设计3——完善细节效果 382
467 系统磁盘清理界面设计1——制作背景效果 382
468 系统磁盘清理界面设计2——制作主体效果 384
469 系统磁盘清理界面设计3——制作细节效果 386
18 iOS系统UI设计
470 天气控件界面设计1——制作背景效果 389
471 天气控件界面设计2——制作主体效果 391
472 天气控件界面设计3——制作文本效果 395
473 手机来电界面设计1——添加参考线 396
474 手机来电界面设计2——制作主体效果 398
475 手机来电界面设计3——制作文本效果 400
476 日历应用界面设计1——制作背景效果 401
477 日历应用界面设计2——制作主体效果 403
478 日历应用界面设计3——制作细节效果 406
19 微软系统UI设计
479 拨号键盘设计1——制作背景效果 411
480 拨号键盘设计2——制作电话图标 412
481 拨号键盘设计3——制作主体效果 414
482 待机界面设计1——调整背景色彩 415
483 待机界面设计2——添加暗角效果 417
484 待机界面设计3——制作立体效果 419
485 照片应用界面设计1——制作背景效果 419
486 照片应用界面设计2——制作相册效果 421
487 照片应用界面设计3——制作细节与文本效果 422
20 程序软件UI设计
488 购物APP界面设计1——制作背景效果 425
489 购物APP界面设计2——制作主体效果 427
490 购物APP界面设计3——制作文本效果 428
491 视频APP界面设计1——制作主体效果 430
492 视频APP界面设计2——制作播放进度条 431
493 视频APP界面设计3——制作控制按钮 432
494 相机APP界面设计1——制作背景效果 433
495 相机APP界面设计2——制作地址标签 435
496 相机APP界面设计3——制作整体效果 437
21 游戏应用UI设计
497 桌球游戏UI设计1——制作背景效果 441
498 桌球游戏UI设计2——制作主体效果 445
499 桌球游戏UI设计3——制作文本效果 448
500 休闲游戏UI设计1——制作背景效果 449
501 休闲游戏UI设计2——制作主体效果 451
502 休闲游戏UI设计3——制作文本效果 453
503 塔防游戏UI设计1——制作背景效果 456
504 塔防游戏UI设计2——制作主体效果 457
505 塔防游戏UI设计3——制作文本效果 460