Photoshop UI设计案例教程

第 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