Photoshop移动UI设计完全实例教程 全彩超值版PDF电子书下载

PART 01 设计基础篇 12

01移动UI设计快速入门 12

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设计的布局原则 28

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视觉交互设计法则 39

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中的基本元素 52

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 软件功能篇 69

05 Photoshop移动UI设计入门 69

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设计的文件操作 96

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图像的元素位置 112

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

153缩放/旋转移动UI图像 114

154水平翻转移动UI图像 115

155垂直翻转移动UI图像 116

156斜切移动UI图像素材 116

157扭曲移动UI图像素材 117

158透视移动UI图像素材 118

159变形移动UI图像素材 119

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

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

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

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的色彩设计 170

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图像的颜色分布 181

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的图形图像设计 199

253选择设计移动UI的纸张 199

254选择设计移动UI的画笔 199

255选择设计移动UI的颜色 200

256使用“画笔”面板 200

257使用“画笔预设”面板 201

258设置画笔笔尖形状 201

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的文字编排设计 245

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的特效质感设计 263

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图像添加动感模糊效果 281

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图像抠取与合成 290

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

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

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通过矩形选框抠图 301

389通过椭圆选框抠图 301

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通过“应用图像”命令抠图 320

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

424运用外部动作抠图 321

PART 03 实战应用篇 323

13移动UI图标图形设计 323

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按钮控件设计 335

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功能界面设计 346

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设计 357

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设计 374

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设计 389

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设计 411

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设计 425

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设计 441

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