Phothshop移动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 UI20
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