Photoshop UI设计基础教程(移动学习版)

第1章 UI 设计基础
1.1 认识UI设计 ………………………………… 2
UI设计的概念 …………………… 2?1.1.1
UI设计的常见类型 ……………… 3?1.1.2
UI设计的基本原则 …………… 10?1.1.3
1.2 UI设计要点 ……………………………… 12
构图 …………………………… 12?1.2.1
布局 …………………………… 14?1.2.2
文字 …………………………… 17?1.2.3
色彩 …………………………… 19?1.2.4
风格 …………………………… 21?1.2.5
1.3 UI设计规范 ……………………………… 23
界面元素设计规范 …………… 23?1.3.1
iOS操作系统设计规范………… 25?1.3.2
Android操作系统设计规范 …… 26?1.3.3
Windows操作系统设计规范 … 26?1.3.4
1.4 课堂实训——策划“水果淘淘”App UI设计方案 ………………………………… 27
1.5 课后练习 ………………………………… 30
练习1 分析音乐软件界面设计 ……… 30
练习2 策划“美食点餐”App界面设计方案 …………………………… 30
第2章 Photoshop 基础
2.1 了解Photoshop………………………… 32
Photoshop在UI设计中的应用 … 32?2.1.1
认识Photoshop工作界面 …… 32?2.1.2
2.2 文件和图像的基本操作 ………………… 34
课堂案例——制作招聘网站界面 …………………………… 34?2.2.1
新建和打开文件 ……………… 36?2.2.2
置入与复制图像 ……………… 36?2.2.3
?2.2.4 保存和关闭文件 ……………… 37
标尺、参考线和网格的应用 … 38?2.2.5
2.3 选区工具组的应用 ……………………… 39
课堂案例——制作多肉养殖网站聚合页 ………………………… 39?2.3.1
选区概述 ……………………… 42?2.3.2
选框工具组 …………………… 42?2.3.3
套索工具组 …………………… 42?2.3.4
快速选择工具组 ……………… 43?2.3.5
2.4 图层的应用 ……………………………… 45
课堂案例——制作益智小游戏操作界面 ……………………… 45?2.4.1
图层的常见类型 ……………… 46?2.4.2
图层的基本操作 ……………… 47?2.4.3
课堂案例——制作外卖App节日闪屏页 ………………………… 48?2.4.4
图层样式 ……………………… 51?2.4.5
图层混合模式 ………………… 51?2.4.6
2.5 文字的应用 ……………………………… 52
课堂案例——制作立体字Logo … 53?2.5.1
文字工具组 …………………… 54?2.5.2
设置文字属性 ………………… 55?2.5.3
转换文字属性 ………………… 56?2.5.4
2.6 课堂实训 ………………………………… 58
制作“星韵”软件详细信息页 … 58?2.6.1
制作社交软件聊天页 ………… 59?2.6.2
2.7 课后练习 ………………………………… 61
练习1 制作科普网站着陆页 ………… 61
练习2 制作旅游攻略App分类页 …… 61
第3章 绘制界面图形
3.1 使用矢量工具组绘制图形 ……………… 63
课堂案例——制作智能家居App活动页 ………………………… 63?3.1.1
形状工具组 …………………… 65?3.1.2
课堂案例——制作音乐软件应用图标 …………………………… 69?3.1.3
路径 …………………………… 72?3.1.4
钢笔工具组 …………………… 74?3.1.5
3.2 使用绘图工具组绘制图形 ……………… 77
课堂案例——制作健身App登录页 ………………………… 77?3.2.1
画笔工具组 …………………… 79?3.2.2
填充颜色工具组 ……………… 81?3.2.3
橡皮擦工具 …………………… 83?3.2.4
3.3 课堂实训 ………………………………… 84
制作商务系列图标 …………… 84?3.3.1
制作社交软件语音通话界面 … 86?3.3.2
3.4 课后练习 ………………………………… 88
练习1 制作播放器图标 ……………… 88
练习2 制作网页读取界面 …………… 88
第4章 调整界面色彩
4.1 调整明度 ………………………………… 90
课堂案例——优化美食App首页界面 …………………………… 90?4.1.1
亮度 对比度 …………………… 92?4.1.2
色阶 …………………………… 92?4.1.3
曲线 …………………………… 93?4.1.4
曝光度 ………………………… 94?4.1.5
阴影 高光 ……………………… 95?4.1.6
4.2 调整色相及饱和度 ……………………… 96
课堂案例——制作香水网站首页商品推荐区 …………………… 96?4.2.1
自然饱和度 …………………… 99?4.2.2
色相 饱和度 …………………… 99?4.2.3
课堂案例——制作App抽奖页 … 100?4.2.4
色彩平衡 ……………………… 102?4.2.5
照片滤镜 ……………………… 103?4.2.6
替换颜色 ……………………… 103?4.2.7
4.3 应用特殊调色命令 ……………………… 104
课堂案例——制作网页访问异常界面 …………………………… 104?4.3.1
去色 …………………………… 107?4.3.2
渐变映射 ……………………… 107?4.3.3
匹配颜色 ……………………… 108?4.3.4
色调分离 ……………………… 108?4.3.5
4.4 课堂实训 ………………………………… 109
制作房屋App信息发现页 …… 109?4.4.1
优化“新鲜花卉”网站商品详情页 ………………………… 112?4.4.2
4.5 课后练习 ………………………………… 114
练习1 制作有声读物软件三色配色界面 …………………………… 114
练习2 制作App发布信息页 ………… 114
第5章 合成界面图像
5.1 应用蒙版 ………………………………… 116
课堂案例——制作音乐App歌单推荐页 ………………………… 116?5.1.1
图层蒙版 ……………………… 119?5.1.2
剪贴蒙版 ……………………… 121?5.1.3
快速蒙版 ……………………… 122?5.1.4
矢量蒙版 ……………………… 123?5.1.5
5.2 应用通道 ………………………………… 124
课堂案例——制作家居网内页 … 124?5.2.1
认识通道 ……………………… 128?5.2.2
通道的基本操作 ……………… 128?5.2.3
5.3 课堂实训 ………………………………… 132
制作大米网首页 ……………… 132?5.3.1
制作生鲜App广告弹出页 …… 134?5.3.2
5.4 课后练习 ………………………………… 136
练习1 制作读书App启动页界面 …… 136
练习2 制作七夕节开屏界面 ………… 137
练习3 制作旅行网内页 ……………… 137
第6章 添加界面特效
6.1 应用滤镜库 ……………………………… 140
课堂案例——制作读书App引导页 ………………………… 140?6.1.1
认识滤镜库 …………………… 143?6.1.2
使用滤镜库 …………………… 144?6.1.3
6.2 应用独立滤镜 …………………………… 147
课堂案例——制作旅行App登录页 ………………………… 147?6.2.1
Camera Raw 滤镜 …………… 152?6.2.2
镜头校正 ……………………… 153?6.2.3
液化 …………………………… 154?6.2.4
消失点 ………………………… 155?6.2.5
6.3 应用滤镜组 ……………………………… 157
课堂案例——制作天气预报日签 …………………………… 157?6.3.1
风格化滤镜组 ………………… 161?6.3.2
模糊滤镜组 …………………… 162?6.3.3
扭曲滤镜组 …………………… 162?6.3.4
锐化滤镜组 …………………… 163?6.3.5
像素化滤镜组 ………………… 163?6.3.6
渲染滤镜组 …………………… 164?6.3.7
杂色滤镜组 …………………… 164?6.3.8
其他滤镜组 …………………… 165?6.3.9
6.4 课堂实训 ………………………………… 166
制作游戏开始按钮 …………… 166?6.4.1
制作水乡土特产网站首页 …… 167?6.4.2
6.5 课后练习 ………………………………… 169
练习1 制作登录按钮 ………………… 169
练习2 制作网站登录页 ……………… 170
第7章 切片与输出界面
7.1 切片基础 ………………………………… 172
切片的作用 …………………… 172?7.1.1
切片的要点 …………………… 172?7.1.2
切片的命名规则 ……………… 173?7.1.3
7.2 界面切片 ………………………………… 174
课堂案例——家居网页界面切片 …………………………… 175?7.2.1
创建切片 ……………………… 177?7.2.2
编辑切片 ……………………… 177?7.2.3
7.3 界面输出 ………………………………… 179
课堂案例——输出家居网页界面 …………………………… 180?7.3.1
存储为Web所用格式 ………… 181?7.3.2
Web图像文件格式 …………… 182?7.3.3
Web图像的输出设置 ………… 182?7.3.4
7.4 课堂实训——切片并输出大米网首页 … 183
7.5 课后练习 ………………………………… 185
练习1 家居网内页切片 ……………… 185
练习2 输出家居网内页 ……………… 185
第8章 综合案例
8.1 图标设计——“半甜”品牌标志 ……… 187
案例背景 ……………………… 187?8.1.1
案例要求 ……………………… 187?8.1.2
制作思路 ……………………… 188?8.1.3
8.2 App界面设计——“艺术家居”App界面 ……………………………………… 190
案例背景 ……………………… 190?8.2.1
案例要求 ……………………… 191?8.2.2
制作思路 ……………………… 192?8.2.3
8.3 网站界面设计——“青山新能源”企业官网界面 ………………………………… 199
案例背景 ……………………… 199?8.3.1
案例要求 ……………………… 199?8.3.2
制作思路 ……………………… 202?8.3.3
8.4 软件界面设计——数据分析软件界面 …207
案例背景 ……………………… 207?8.4.1
案例要求 ……………………… 208?8.4.2
制作思路 ……………………… 209?8.4.3
8.5 课后练习 ………………………………… 214
练习1 制作科技公司网页界面 ……… 214
练习2 制作美食App界面 …………… 214
练习3 制作办公软件登录界面 ……… 215
拓展案例………………………………………… 216