Photoshop UI设计案例教程

本书是专门为用户界面设计（UI设计）初学者量身打造的一本UI设计学习用书。本书立足于实践，从实际工作任务出发，讲解Photoshop常用工具及命令的使用方法，旨在帮助读者掌握Photoshop的基本操作，同时掌握UI设计中常用的理论知识与设计技巧。 本书共9章，主要内容包括Photoshop UI设计快速入门、选区在UI设计中的应用、图层在UI设计中的应用、调整图层及混合模式在UI设计中的应用、绘图工具及文字工具在UI设计中的应用、蒙版与通道在UI设计中的应用、矢量工具在UI设计中的应用、滤镜在UI设计中的应用以及一个综合项目—私厨手机App项目。 本书适合作为院校UI设计相关课程的教材，也适合UI设计爱好者和App界面设计从业者阅读参考。

肖睿，课工场创始人，北京大学教育学博士，北京大学软件学院特约讲师，北京大学学习科学实验室特约顾问。作为北大青鸟 Aptech 的联合创始人，历任学术总监、研究院院长、公司副总裁等核心岗位，拥有20多年的IT职业教育产品管理和企业管理经验。于2015年创办课工场，兼任总经理，旨在为大学生提供更可靠的 IT 就业教育及服务。

第 1章　Photoshop UI设计快速入门　1

1.1　初识UI设计　2

1.1.1　UI设计行业概述　2

1.1.2　Photoshop在UI设计中的应用　4

1.2　Photoshop的基本操作　5

1.2.1　Photoshop的工作界面　5

1.2.2　Photoshop的文件操作　9

1.2.3　Photoshop的图像编辑　13

1.2.4　演示案例：手机App页面适配　16

1.3　UI设计的相关概念　18

1.3.1　UI设计的常用单位　18

1.3.2　UI设计的常用分辨率　19

1.3.3　UI设计的颜色模式　21

1.3.4　UI设计的常见配色技巧　22

1.3.5　演示案例：水果图标背景配色　25

课堂练习：制作水果App引导页　28

本章小结　29

课后练习：制作抽奖App页面　29

第 2章　选区在UI设计中的应用　31

2.1　选区　32

2.1.1　选区概述　32

2.1.2　选区的基本操作　33

2.1.3　选区的布尔运算　37

2.1.4　演示案例：绘制天气App图标　39

2.2　抠图工具　42

2.2.1　魔棒工具的应用　42

2.2.2　快速选择工具的应用　44

2.2.3　套索工具的应用　46

2.2.4　演示案例：制作电商网页女装新品Banner　48

课堂练习：制作汽车网页Banner　51

本章小结　52

课后练习：制作化妆品直通车广告图　52

第3章　图层在UI设计中的应用　53

3.1　图层的基本操作　54

3.1.1　图层的选择与复制　54

3.1.2　图层的不透明度与填充　57

3.1.3　图层的分类管理　58

3.1.4　图层的变换操作　62

3.1.5　图层的合并与盖印　65

3.1.6　图层的对齐与分布　66

3.1.7　演示案例：制作企业官网首页界面　69

3.2　图层的类型　72

3.2.1　像素图层与智能对象　72

3.2.2　形状图层与文字图层　74

3.2.3　演示案例：制作UI设计作品效果展示图　75

3.3　图层样式的应用　78

3.3.1　光影类图层样式的应用　79

3.3.2　色彩类图层样式的应用　82

3.3.3　演示案例：制作拟物风格手机App启动图标　86

课堂练习:制作红黄蓝拟物图标　89

本章小结　90

课后练习：制作拟物启动图标　90

第4章　调整图层及混合模式在UI设计中的应用　91

4.1　Photoshop明度类调整图层　92

4.1.1　“亮度/对比度”调整图层的应用　93

4.1.2　“色阶”调整图层的应用　95

4.1.3　“曲线”调整图层的应用　97

4.1.4　“曝光度”调整图层的应用　99

4.1.5　演示案例：制作摄影App启动页　99

4.2　Photoshop色相及饱和度类调整图层　102

4.2.1　“自然饱和度”调整图层的应用　102

4.2.2　“色相/饱和度”调整图层的应用　103

4.2.3　“色彩平衡”调整图层的应用　105

4.2.4　“黑白”调整图层的应用　106

4.2.5　“照片滤镜”调整图层的应用　107

4.2.6　演示案例：制作服装网页类目入口　108

4.3　Photoshop图层混合模式　113

4.3.1　组合模式组与色彩模式组的应用　113

4.3.2　加深模式组与减淡模式组的应用　115

4.3.3　对比模式组与比较模式组的应用　118

4.3.4　演示案例：制作美妆App波普风格广告页　120

课堂练习： 制作餐饮网页加盟模块　122

本章小结　123

课后练习：制作时尚女郎杂志封面　123

第5章　绘图工具及文字工具在UI设计中的应用　125

5.1　常用绘图工具的应用　126

5.1.1　渐变工具的应用　126

5.1.2　填充的设置　127

5.1.3　画笔工具的应用　130

5.1.4　铅笔工具的应用　132

5.1.5　擦除工具的应用　134

5.1.6　演示案例：制作水晶质感图标　136

5.2　文字工具的应用　138

5.2.1　“字符”面板的应用　138

5.2.2　“段落”面板的应用　143

5.2.3　文字图层的类型　145

5.2.4　演示案例：制作怀旧风格海报　146

课堂练习：制作美容服饰杂志封面　149

本章小结　150

课后练习：制作波普风格女装Banner　150

第6章　蒙版与通道在UI设计中的应用　151

6.1　图层蒙版的应用　152

6.1.1　图层蒙版的基本原理　152

6.1.2　图层蒙版的基本操作　153

6.1.3　演示案例：制作双重曝光电影海报　155

6.2　矢量蒙版的应用　158

6.2.1　矢量蒙版的基本原理　158

6.2.2　矢量蒙版的基本操作　159

6.2.3　演示案例：制作剪纸风格圣诞广告页　161

6.3　剪贴蒙版的应用　166

6.3.1　剪贴蒙版的基本原理　166

6.3.2　剪贴蒙版的基本操作　167

6.3.3　演示案例：制作圣诞晚宴电子邀请函　169

6.4　通道的应用　171

6.4.1　通道的基本原理　171

6.4.2　通道的基本操作　173

6.4.3　演示案例：制作故障艺术风格弹窗广告　175

课堂练习：制作粉笔字Banner　177

本章小结　177

课后练习：制作阴影透叠文字Banner　178

第7章　矢量工具在UI设计中的应用　179

7.1 形状工具组的应用　180

7.1.1　形状工具的绘图模式　180

7.1.2　形状工具的基本操作　181

7.1.3　演示案例：制作微立体风格指南针图标　184

7.2　路径的编辑　187

7.2.1　路径的基本操作　187

7.2.2　路径的运算方法　189

7.2.3　演示案例：制作轻质感风格猫爪铃铛启动图标　191

7.3　钢笔工具的应用　193

7.3.1　钢笔工具的基本操作　193

7.3.2　锚点的处理原则　196

7.3.3　演示案例：制作游戏App商城界面　197

课堂练习: 制作扁平风格信封图标　199

本章小结　200

课后练习：制作艺术殿堂引导页　200

第8章　滤镜在UI设计中的应用　201

8.1　滤镜概述　202

8.1.1　滤镜的基本原理　202

8.1.2　滤镜的基本操作　205

8.1.3　演示案例：制作运动类广告页　206

8.2　滤镜库的应用　209

8.2.1　画笔描边与素描　210

8.2.2　纹理与艺术效果　216

8.2.3　演示案例：制作牛奶类Banner　221

8.3　滤镜组的应用　223

8.3.1　风格化与扭曲滤镜组　223

8.3.2　模糊与锐化滤镜组　227

8.3.3　其他常用滤镜组　229

8.3.4　演示案例：制作亚洲杯足球赛海报　231

课堂练习：制作游戏技能图标　235

本章小结　235

课后练习：制作舞蹈培训班招生海报　235

第9章　综合项目：私厨手机App项目　237

9.1　制作私厨手机App图标　238

9.1.1　演示案例：制作启动图标　238

9.1.2　演示案例：制作功能图标　242

9.2　制作私厨手机App内容页　248

9.2.1　演示案例：制作私厨首页　248

9.2.2　演示案例：制作提交订单页面　253

9.2.3　演示案例：制作服务保障页面　257

本章小结　259

（1）零基础入门级讲解 本书从零开始，深入浅出地讲解 Photoshop 软件中常用工具及命令的基本操作，并结合实际案例展示工具及命令的应用场景，达到“学以致用，用以促学”的学习目的。 （2）实用精美的 UI 设计案例 本书以图标设计、网页界面设计、手机 App 界面设计、字体设计作为范例，帮助读者快速熟悉软件的操作，巩固 UI 设计的理论基础。 （3）海量资源轻松拥有 本书提供了演示案例中使用的素材文件及效果图、配套的教学 PPT 和对应的教学视频。 （4）在线视频高效学习 本书提供了便捷的学习体验，读者可以直接访问课工场官网教材专区下载书中所需的案例素材，也可扫描二维码观看书中配套的视频