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

彩插

内容提要

前言

PART 01 设计基础篇

01 移动UI设计快速入门

001 新手入门：了解UI名词的由来

002 多点本事：精通APP应用设计

003 分门别类：了解APP主要类别

004 移动UI：连接用户和手机的界面

005 设计规范：统一的尺寸和色彩

006 设计特点：小巧轻便，通信便捷

007 移动特性：个性化的界面特色

008 设计基础：熟悉手机界面特色

009 APP平台：了解手机操作系统

010 安卓系统：品类繁多，界面各异

011 iOS系统：操作便捷，结构清晰

012 微软系统：整洁干净的Metro UI

013 平板界面：操作方便，性能优越

014 阶段分析：移动UI设计的流程

015 随身携带：移动设备的高便携性

016 收集信息：用户的反馈非常重要

017 提升交互：加强移动UI定制性

018 直击需求：UI就是为用户服务

019 登录分享：彰显移动社交特性

020 黏住用户：增加离线浏览功能

021 加入游戏：提升APP的乐趣

022 独具一格：拥有自己的UI特色

02 移动UI设计的布局原则

023 竖排列表布局

024 横排方块布局

025 九宫格布局

026 弹出框布局

027 热门标签布局

028 抽屉式布局

029 陈列馆式布局

030 分段菜单式布局

031 点聚式布局

032 走马灯式布局

033 底部导航栏式布局

034 磁贴设计式布局

035 超级菜单式布局

036 选项卡式布局

037 图示式布局

038 幻灯片式布局

039 图表信息布局

040 完善细节设计

041 移动UI的布局原则

03 移动UI视觉交互设计法则

042 简约明快的视觉特色

043 趣味型的视觉特色

044 华丽型的视觉特色

045 色彩的使用要点

046 图案的使用要点

047 文字要易于识别

048 文字的层次感要强

049 清晰地表达文字信息

050 把握文字的间距

051 适当设置文字的色彩

052 更具美观性和观赏性

053 具备较好的实用性

054 注重图片的品质美感

055 不要随意拉伸图片

056 让图片更好地美化界面

057 了解手势交互动作特性

058 用循环动作增加真实感

059 重复运用透析事物关系

060 关键动作展现复杂效果

061 连续动作展现简单动画

062 用夸张实现“天马行空”

04 移动UI中的基本元素

063 常规按钮组件

064 编辑输入框组件

065 开关按钮组件

066 网格式浏览模式

067 文本标签组件

068 警告框组件

069 导航栏组件

070 页面切换组件

071 进度条组件

072 重视ico图标设计

073 隐藏与删除多余元素

074 对元素进行分区和分组

075 帮用户做决策

076 添加视觉反馈

077 在UI中加入感情

078 内容也需要做“装修”

079 登录界面的设计要点

080 基本元素的设计技巧

PART 02 软件功能篇

05 Photoshop移动UI设计入门

081 安装Photoshop CC软件

082 卸载Photoshop CC软件

083 启动Photoshop CC软件

084 退出Photoshop CC软件

085 最大化/最小化移动UI图像窗口

086 还原移动UI图像窗口

087 移动与调整移动UI图像窗口大小

088 调整移动UI图像窗口排列

089 切换当前移动UI图像窗口

090 管理Photoshop CC工具箱

091 使用复合工具

092 设置预设工具

093 如何展开面板

094 移动面板

095 组合面板

096 隐藏面板

097 调整面板大小

098 创建自定义工作区

099 设置自定义快捷键

100 设置彩色菜单命令

101 优化界面选项

102 优化文件处理选项

103 优化暂存盘选项

104 优化内存与图像高速缓存选项

105 显示/隐藏移动UI图像中的网格

106 对移动UI图像进行自动对齐网格操作

107 调整网格属性

108 显示/隐藏移动UI图像中的标尺

109 更改移动UI图像中的标尺原点位置

110 还原移动UI图像中的标尺原点位置

111 更改移动UI图像中的标尺单位

112 测量移动UI图像的长度

113 拉直移动UI图像的图层

114 拖曳创建移动UI图像参考线

115 精确创建移动UI图像参考线

116 显示/隐藏移动UI图像中的参考线

117 更改移动UI图像中的参考线颜色

118 更改移动UI图像中的参考线样式

119 调整移动UI图像中的参考线位置

120 清除移动UI图像中的参考线

121 为移动UI图像创建注释

122 更改移动UI图像中的注释颜色

123 运用对齐工具对齐移动UI图像

124 为移动UI图像添加计数

06 移动UI设计的文件操作

125 新建移动UI图像文件

126 打开移动UI图像文件

127 保存移动UI图像文件

128 关闭移动UI图像文件

129 置入移动UI图像文件

130 导出移动UI图像文件

131 通过菜单撤销移动UI图像操作

132 通过面板撤销移动UI图像操作

133 编辑移动UI图像时创建历史记录

134 快照还原移动UI图像的编辑操作

135 恢复移动UI图像初始状态

136 调整移动UI图像的画布大小

137 调整移动UI图像的尺寸

138 调整移动UI图像的分辨率

139 放大/缩小显示移动UI图像

140 按适合屏幕显示移动UI图像

141 按区域放大显示移动UI图像

142 切换移动UI图像的显示模式

143 移动图像编辑窗口显示区域

144 使用导航器移动图像显示区域

145 运用工具裁剪移动UI图像

146 运用命令裁切移动UI图像

147 精确裁剪移动UI图像素材

148 旋转移动UI图像的画布

149 水平翻转移动UI图像画布

150 垂直翻转移动UI图像画布

151 调整UI图像的元素位置

152 删除移动UI图像中的元素

153 缩放/旋转移动UI图像

154 水平翻转移动UI图像

155 垂直翻转移动UI图像

156 斜切移动UI图像素材

157 扭曲移动UI图像素材

158 透视移动UI图像素材

159 变形移动UI图像素材

160 在移动UI图像中重复变换

161 操控变形移动UI图像素材

07 移动UI图像的编辑与修复

162 选择移动UI图像中的图层

163 在移动UI图像中创建普通图层

164 在移动UI图像中创建调整图层

165 在移动UI图像中创建填充图层

166 在移动UI图像中创建图层组

167 移动UI图像的图层基本操作

168 合并移动UI图像中的图层

169 使用混合模式编辑移动UI图像

170 为移动UI图像应用图层样式

171 隐藏移动UI图像的图层样式

172 复制移动UI图像的图层样式

173 编辑移动UI图像的图层样式

174 清除移动UI图像的图层样式

175 将图层样式转换为图层

176 使用矩形选框工具创建矩形选区

177 使用椭圆选框工具创建椭圆选区

178 运用套索工具创建不规则选区

179 运用多边形套索工具创建选区

180 运用磁性套索工具创建选区

181 运用魔棒工具创建颜色相近选区

182 运用快速选择工具创建选区

183 运用“色彩范围”命令自定选区

184 运用“扩大选取”命令扩大选区

185 运用“选取相似”命令创建选区

186 运用按钮创建移动UI图像选区

187 调整移动UI图像中的选区位置

188 存储移动UI图像中的选区

189 变换移动UI图像中的选区

190 剪切移动UI图像中的选区内容

191 复制和粘贴移动UI选区图像

192 在移动UI图像选区内贴入图像

193 为移动UI图像选区添加边界

194 平滑移动UI图像中的选区

195 扩展与收缩移动UI图像中的选区

196 羽化移动UI中的选区图像

197 调整移动UI图像中的选区边缘

198 填充移动UI图像中的选区

199 使用选区定义移动UI图案

200 描边移动UI图像中的选区

201 清除移动UI图像选区内容

202 运用污点修复画笔工具修复移动UI图像

203 运用修复画笔工具修复移动UI图像

204 运用修补工具修复移动UI图像

205 使用颜色替换工具替换移动UI图像颜色

206 运用橡皮擦工具清除移动UI图像内容

207 运用背景橡皮擦工具清除移动UI图像内容

208 运用魔术橡皮擦工具清除移动UI图像内容

209 运用加深工具调整移动UI图像色调

210 运用海绵工具加深移动UI图像色彩浓度

211 运用仿制图章工具复制移动UI元素

212 运用图案图章工具绘制移动UI元素

213 运用模糊工具模糊移动UI图像

214 运用锐化工具锐化移动UI图像

215 运用历史记录画笔工具恢复移动UI图像

08 移动UI的色彩设计

216 设置移动UI图像的前景色与背景色

217 使用吸管工具设置移动UI图像颜色

218 使用“颜色”面板设置移动UI图像颜色

219 使用“色板”面板设置移动UI图像颜色

220 使用“填充”命令填充移动UI图像颜色

221 快捷菜单选项填充移动UI图像颜色

222 使用油漆桶工具填充移动UI图像颜色

223 使用渐变工具为移动UI图像填充双色

224 使用渐变工具为移动UI图像填充多色

225 使用“填充”命令为移动UI图像填充图案

226 运用“填充”命令修复移动UI图像

227 使用油漆桶工具填充移动UI图像颜色

228 使用“自动色调”命令调整移动UI色调

229 使用“自动对比度”命令调整移动UI对比度

230 使用“自动颜色”命令调整移动UI颜色

231 查看移动UI图像的颜色分布

232 转换移动UI图像的颜色模式

233 识别移动UI图像色域范围外的颜色

234 使用“色阶”命令调整移动UI图像亮度范围

235 使用“亮度/对比度”命令调整移动UI图像色彩

236 使用“曲线”命令调整移动UI图像整体色调

237 使用“曝光度”命令调整移动UI图像曝光

238 使用“自然饱和度”命令调整移动UI饱和度

239 使用“色相/饱和度”命令调整移动UI色相

240 使用“色彩平衡”命令调整移动UI图像偏色

241 使用“匹配颜色”命令匹配移动UI图像色调

242 使用“替换颜色”命令替换移动UI图像色调

243 使用“阴影/高光”命令调整移动UI图像明暗

244 使用“照片滤镜”命令过滤移动UI图像色调

245 使用“可选颜色”命令校正移动UI图像色彩

246 使用“通道混合器”命令调整移动UI图像色彩

247 使用“黑白”命令制作单色移动UI图像效果

248 使用“去色”命令制作灰度移动UI图像效果

249 使用“阈值”命令制作黑白移动UI图像效果

250 使用“变化”命令制作彩色移动UI图像效果

251 使用“HDR色调”命令调整移动UI图像色调

252 使用“渐变映射”命令制作渐变移动UI图像效果

09 移动UI的图形图像设计

253 选择设计移动UI的纸张

254 选择设计移动UI的画笔

255 选择设计移动UI的颜色

256 使用“画笔”面板

257 使用“画笔预设”面板

258 设置画笔笔尖形状

259 设置随机变化的画笔效果

260 创建自定义的画笔笔刷

261 设置画笔笔触的散射效果

262 在移动UI图像中创建图案纹理效果

263 使用双重画笔绘制移动UI图像

264 恢复到系统默认的画笔设置

265 存储当前使用的画笔设置

266 对多余的画笔进行删除操作

267 新建移动UI图像路径

268 选择移动UI图像中的路径

269 重命名移动UI图像中的路径

270 保存移动UI图像中的工作路径

271 复制移动UI图像中的路径

272 调整移动UI图像中的路径位置

273 删除移动UI图像中的路径

274 运用钢笔工具绘制闭合移动UI路径

275 运用钢笔工具绘制开放移动UI路径

276 运用自由钢笔工具绘制移动UI路径

277 运用选区创建移动UI图像路径

278 在移动UI图像中绘制矩形路径形状

279 在移动UI图像中绘制圆角矩形路径形状

280 在移动UI图像中绘制多边形路径形状

281 在移动UI图像中绘制椭圆路径形状

282 在移动UI图像中绘制直线路径形状

283 在移动UI图像中绘制自定路径形状

284 在移动UI路径中添加或删除锚点

285 平滑移动UI图像中的路径锚点

286 将圆滑型锚点转换为直线型锚点

287 断开移动UI图像中的路径

288 连接移动UI图像中的路径

289 填充移动UI图像中的路径

290 描边移动UI图像中的路径

291 创建通道辅助移动UI制图

292 在移动UI图像中创建复合通道

293 在移动UI图像中创建单色通道

294 在移动UI图像中创建专色通道

295 复制与删除移动UI图像中的通道

296 在移动UI图像中创建剪贴蒙版

297 设置移动UI剪贴蒙版的混合模式

298 设置移动UI剪贴蒙版的不透明度

299 在移动UI图像中创建快速蒙版

300 在移动UI图像中创建矢量蒙版

301 删除移动UI图像中的矢量蒙版

302 通过选区创建移动UI图层蒙版

303 在移动UI图像中直接创建图层蒙版

304 编辑移动UI图像中的图层蒙版

305 管理移动UI图像中的图层蒙版

306 移动UI图像中的蒙版链接操作

307 图层蒙版与选区的相互转换操作

308 将矢量蒙版转换为图层蒙版

10 移动UI的文字编排设计

309 移动UI的文字类型

310 了解文字工具属性栏

311 输入横排移动UI图像文字

312 输入直排移动UI图像文字

313 输入段落移动UI图像文字

314 输入选区移动UI图像文字

315 设置移动UI文字属性

316 设置移动UI段落属性

317 选择和移动APP图像文字

318 互换移动UI文字的方向

319 切换点文本和段落文本

320 拼写检查移动UI文字

321 查找与替换移动UI文字

322 输入沿路径排列的移动UI文字

323 调整移动UI文字排列的位置

324 调整移动UI文字的路径形状

325 调整移动UI文字与路径距离

326 移动UI图像的变形文字样式

327 创建移动UI变形文字效果

328 编辑移动UI变形文字效果

329 将移动UI文字转换为路径

330 将移动UI文字转换为形状

331 将移动UI文字转换为图像

11 移动UI的特效质感设计

332 在移动UI图像中创建智能滤镜

333 编辑移动UI图像中的智能滤镜

334 停用/启用移动UI图像中的智能滤镜

335 删除移动UI图像中的智能滤镜

336 为移动UI图像添加液化效果

337 为移动UI图像添加消失点效果

338 使用滤镜库编辑移动UI图像

339 使用镜头校正滤镜修复移动UI图像

340 为移动UI图像添加切变效果

341 为移动UI图像添加波浪效果

342 为移动UI图像添加波纹效果

343 为移动UI图像添加玻璃效果

344 为移动UI图像添加水波效果

345 为移动UI图像添加海洋波纹效果

346 为移动UI图像添加扩散亮光效果

347 为移动UI图像添加旋转扭曲效果

348 为移动UI图像添加马赛克效果

349 为移动UI图像添加点状化效果

350 为移动UI图像添加彩块化效果

351 为移动UI图像添加彩色半调效果

352 为移动UI图像添加晶格化效果

353 为移动UI图像添加铜版雕刻效果

354 为移动UI图像添加碎片效果

355 为移动UI图像添加杂色效果

356 为移动UI图像添加减少杂色效果

357 为移动UI图像添加蒙尘与划痕效果

358 为移动UI图像添加中间值效果

359 为移动UI图像添加径向模糊效果

360 为移动UI图像添加表面模糊效果

361 为移动UI图像添加动感模糊效果

362 为移动UI图像添加高斯模糊效果

363 为移动UI图像添加强化的边缘效果

364 为移动UI图像添加喷溅效果

365 为移动UI图像添加成角的线条效果

366 为移动UI图像添加阴影线效果

367 为移动UI图像添加水彩画纸效果

368 为移动UI图像添加壁画效果

369 为移动UI图像添加水彩效果

12 移动UI图像抠取与合成

370 使用“全部”命令合成移动UI图像

371 使用“色彩范围”命令抠图

372 使用“选取相似”命令抠图

373 使用快速选择工具抠图

374 使用对所有图层取样抠图

375 通过单一选取功能抠图

376 通过添加选区功能抠图

377 通过减选选区抠图

378 通过交叉选取功能抠图

379 通过透明图层功能抠图

380 通过取样背景色板功能抠图

381 通过取样一次功能抠图

382 通过连续取样功能抠图

383 通过“查找边缘”功能抠图

384 通过单一功能抠图

385 通过连续功能抠图

386 通过设置容差抠图

387 通过透明效果抠图

388 通过矩形选框抠图

389 通过椭圆选框抠图

390 通过套索工具抠图

391 通过多边形套索工具抠图

392 通过磁性套索工具抠图

393 运用绘制直线路径抠图

394 运用绘制曲线路径抠图

395 运用自由钢笔工具抠图

396 运用建立选区功能抠图

397 运用绘制矩形路径抠图

398 运用绘制圆角矩形路径抠图

399 运用绘制椭圆路径抠图

400 运用绘制多边形路径抠图

401 运用绘制自定形状路径抠图

402 通过“变亮”模式合成移动UI图像

403 通过“滤色”模式合成移动UI图像

404 通过“正片叠底”模式合成移动UI图像

405 通过“颜色加深”模式合成移动UI图像

406 通过矢量蒙版抠图

407 通过图层蒙版合成移动UI图像

408 通过快速蒙版抠图

409 通过编辑图层蒙版抠图

410 通过路径和蒙版合成移动UI图像

411 应用自定蒙版合成移动UI图像

412 应用剪贴蒙版合成移动UI图像

413 通过合并通道功能合成移动UI图像

414 通过调整通道抠图

415 通过利用通道差异性抠图

416 通过钢笔工具配合通道抠图

417 色阶调整配合通道抠图

418 曲线调整配合通道抠图

419 用通道对透明物体抠图

420 将通道作为选区载入抠图

421 通过“计算”命令抠图

422 通过“应用图像”命令抠图

423 通过“调整边缘”命令抠图

424 运用外部动作抠图

PART 03 实战应用篇

13 移动UI图标图形设计

425 音乐APP图标设计1——图标背景效果

426 音乐APP图标设计2——图标主体效果

427 音乐APP图标设计3——图标细节效果

428 邮箱APP图标设计1——图标背景效果

429 邮箱APP图标设计2——图标主体效果

430 邮箱APP图标设计3——调整图像形状

431 鼠标指针形状设计1——制作主体效果

432 鼠标指针形状设计2——完善主体效果

433 鼠标指针形状设计3——制作细节效果

14 移动UI按钮控件设计

434 按钮设计1——制作主体效果

435 按钮设计2——添加立体效果

436 按钮设计3——制作文本效果

437 解锁滑块设计1——制作主体效果

438 解锁滑块设计2——制作按钮效果

439 解锁滑块设计3——制作文本效果

440 切换条设计1——制作背景效果

441 切换条设计2——制作主体效果

442 切换条设计3——制作细节效果

15 移动UI功能界面设计

443 搜索框设计1——制作主体效果

444 搜索框设计2——制作搜索图标

445 搜索框设计3——制作二维码搜索

446 标签栏设计1——制作标签栏背景

447 标签栏设计2——制作分割线

448 标签栏设计3——制作标签文本

449 选项框设计1——制作选项框主体

450 选项框设计2——制作细节效果

451 选项框设计3——制作文本效果

16 手机登录UI设计

452 免费WiFi应用登录界面设计1——制作背景效果

453 免费WiFi应用登录界面设计2——制作表单按钮

454 免费WiFi应用登录界面设计3——制作文本细节

455 云服务APP登录界面设计1——制作界面背景

456 云服务APP登录界面设计2——制作登录框

457 云服务APP登录界面设计3——制作文本效果

458 社交APP登录界面设计1——制作主体效果

459 社交APP登录界面设计2——制作表单控件

460 社交APP登录界面设计3——制作倒影效果

17 安卓系统UI设计

461 时钟界面设计1——制作背景效果

462 时钟界面设计2——制作分割线

463 时钟界面设计3——制作主体效果

464 锁屏界面设计1——制作背景效果

465 锁屏界面设计2——制作圆环效果

466 锁屏界面设计3——完善细节效果

467 系统磁盘清理界面设计1——制作背景效果

468 系统磁盘清理界面设计2——制作主体效果

469 系统磁盘清理界面设计3——制作细节效果

18 iOS系统UI设计

470 天气控件界面设计1——制作背景效果

471 天气控件界面设计2——制作主体效果

472 天气控件界面设计3——制作文本效果

473 手机来电界面设计1——添加参考线

474 手机来电界面设计2——制作主体效果

475 手机来电界面设计3——制作文本效果

476 日历应用界面设计1——制作背景效果

477 日历应用界面设计2——制作主体效果

478 日历应用界面设计3——制作细节效果

19 微软系统UI设计

479 拨号键盘设计1——制作背景效果

480 拨号键盘设计2——制作电话图标

481 拨号键盘设计3——制作主体效果

482 待机界面设计1——调整背景色彩

483 待机界面设计2——添加暗角效果

484 待机界面设计3——制作立体效果

485 照片应用界面设计1——制作背景效果

486 照片应用界面设计2——制作相册效果

487 照片应用界面设计3——制作细节与文本效果

20 程序软件UI设计

488 购物APP界面设计1——制作背景效果

489 购物APP界面设计2——制作主体效果

490 购物APP界面设计3——制作文本效果

491 视频APP界面设计1——制作主体效果

492 视频APP界面设计2——制作播放进度条

493 视频APP界面设计3——制作控制按钮

494 相机APP界面设计1——制作背景效果

495 相机APP界面设计2——制作地址标签

496 相机APP界面设计3——制作整体效果

21 游戏应用UI设计

497 桌球游戏UI设计1——制作背景效果

498 桌球游戏UI设计2——制作主体效果

499 桌球游戏UI设计3——制作文本效果

500 休闲游戏UI设计1——制作背景效果

501 休闲游戏UI设计2——制作主体效果

502 休闲游戏UI设计3——制作文本效果

503 塔防游戏UI设计1——制作背景效果

504 塔防游戏UI设计2——制作主体效果

505 塔防游戏UI设计3——制作文本效果

资源下载