本书是专门为用户界面设计(UI设计)初学者量身打造的一本UI设计学习用书。本书立足于实践,从实际工作任务出发,讲解Photoshop常用工具及命令的使用方法,旨在帮助读者掌握Photoshop的基本操作,同时掌握UI设计中常用的理论知识与设计技巧。
本书共9章,主要内容包括Photoshop UI设计快速入门、选区在UI设计中的应用、图层在UI设计中的应用、调整图层及混合模式在UI设计中的应用、绘图工具及文字工具在UI设计中的应用、蒙版与通道在UI设计中的应用、矢量工具在UI设计中的应用、滤镜在UI设计中的应用以及一个综合项目—私厨手机App项目。
本书适合作为院校UI设计相关课程的教材,也适合UI设计爱好者和App界面设计从业者阅读参考。
(1)零基础入门级讲解
本书从零开始,深入浅出地讲解 Photoshop 软件中常用工具及命令的基本操作,并结合实际案例展示工具及命令的应用场景,达到“学以致用,用以促学”的学习目的。
(2)实用精美的 UI 设计案例
本书以图标设计、网页界面设计、手机 App 界面设计、字体设计作为范例,帮助读者快速熟悉软件的操作,巩固 UI 设计的理论基础。
(3)海量资源轻松拥有
本书提供了演示案例中使用的素材文件及效果图、配套的教学 PPT 和对应的教学视频。
(4)在线视频高效学习
本书提供了便捷的学习体验,读者可以直接访问课工场官网教材专区下载书中所需的案例素材,也可扫描二维码观看书中配套的视频
肖睿,课工场创始人,北京大学教育学博士,北京大学软件学院特约讲师,北京大学学习科学实验室特约顾问。作为北大青鸟 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