Photoshop UI设计基础教程（移动学习版）

图书标准信息

• 作者 黎珂位 代广红 李析
• 出版社 人民邮电出版社
• 出版时间 2023-04
• 版次 1
• ISBN 9787115610874
• 定价 59.80元
• 装帧 其他
• 开本 其他
• 纸张 胶版纸
• 页数 215页
• 字数 356千字

【内容简介】

本书以Photoshop 2022为蓝本，首先介绍UI设计基础知识和基本规范，再讲解Photoshop在UI设计中的应用 ；最后将Photoshop的操作与UI设计实战案例相结合，对全书知识进行综合应用和设计实战。
  为了便于读者更好地学习本书内容，本书提供了“疑难解答”“技巧提升”“提示”“资源链接”“设计素养”等小栏目来辅助学习，并且在操作步骤和部分案例旁附有对应的二维码，读者可通过扫描二维码观看操作步骤视频演示，以及案例的高清效果。此外，本书还融入了思政元素，落实了“立德树人”根本任务。

【作者简介】

本书的作者为资深UI设计专家团队，具有多年平面设计和UI设计的教学经验，对于使用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