Photoshop UI设计实战案例教程(移动端+Web端)(全彩微课版)电子书

内容提要

前言 Preface

微课视频清单

第1章 Photoshop基础操作

1.1 Photoshop工作界面与基础功能全览

1.1.1 Photoshop工作界面

1.1.2 菜单栏

1.1.3 工具栏与工具属性栏

1.1.4 画布

1.1.5 图层面板和路径面板

1.1.6 颜色和色板面板

1.1.7 文字字符相关面板

1.1.8 历史记录面板

1.1.9 属性面板与调整面板

1.2 矢量绘画工具的基础操作

1.2.1 钢笔工具

1.2.2 矩形工具及圆角矩形工具

1.2.3 多边形工具

1.2.4 直线工具

1.2.5 自定形状工具

1.3 文字工具的基础操作

1.3.1 输入并编辑文字

1.3.2 文字变形

1.3.3 创建路径文字

1.4 图层的基础操作

1.4.1 新建图层

1.4.2 智能对象图层

1.4.3 调整图层

1.4.4 图层的编组、合并、导出与其他操作

1.4.5 设置图层不透明度与填充

1.4.6 图层蒙版的使用

1.4.7 图层的叠加模式

1.4.8 图层样式简介

1.5 滤镜的基础操作

1.5.1 “滤镜”菜单

1.5.2 滤镜库的使用

1.5.3 智能滤镜

第2章 移动端App的UI设计

2.1 移动端UI设计的视觉风格

2.1.1 早期视觉风格的演进——从拟物到扁平

2.1.2 视觉审美的某种归途——“轻拟物”风格

2.2 实例1：磨砂玻璃质感的音乐播放器设计

2.2.1 制作页面背景

2.2.2 设计制作专辑封面

2.2.3 设计制作按钮组件

2.3 实例2：“石膏”质感的计时器表盘设计

2.3.1 绘制页面背景和主体时间拨盘

2.3.2 绘制下方的按钮组

2.4 实例3：清新轻拟物风格的日历组件

2.4.1 绘制组件主体背景和编排日历数字

2.4.2 绘制已选择日期范围的效果样式

2.4.3 绘制底部的两个按钮

2.5 拓展训练：融合不同轻拟物质感的界面设计

第3章 移动端App的卡片设计

3.1 移动端App界面中的卡片设计

3.1.1 UI中的卡片是什么

3.1.2 卡片的常见应用场景

3.2 实例1：2.5D风格的天气卡片设计

3.2.1 绘制第一张卡片

3.2.2 绘制多云天气卡片

3.2.3 绘制雷雨天气卡片

3.3 实例2：音乐卡片设计

3.3.1 新建文档并创建第一张音乐主卡片

3.3.2 绘制第二张音乐小卡片

3.3.3 创建第三张音乐小卡片

3.4 实例3：日程卡片设计

3.4.1 新建文档并绘制日程界面背景

3.4.2 绘制第一张日程卡片

3.4.3 复制出其他日程卡片并调整

3.5 拓展训练：数据可视化卡片设计

第4章 移动端App的创意组件设计

4.1 移动端App界面的常见组件

4.1.1 切换标签组件

4.1.2 开关组件

4.1.3 复选框/单选按钮组件

4.1.4 进度条组件

4.1.5 表盘类组件

4.2 实例1：创意进度条组件设计

4.2.1 制作进度条背景

4.2.2 绘制创意进度组件

4.2.3 绘制进度条刻度

4.3 实例2：创意切换标签组设计

4.3.1 绘制标签组背景

4.3.2 创建标签底座的照亮效果和未选中标签的文字图标

4.3.3 绘制选中样式的标签

4.4 拓展训练：创意时钟表盘设计

第5章 Web UI的基本框架与创意设计

5.1 Web UI基本框架类型

5.1.1 Web页面基本组成部分

5.1.2 Web首页设计

5.1.3 内容展示主页的类型

5.2 实例1：多边形拓扑结构风格的Web首页设计

5.2.1 绘制背景和基础UI组件

5.2.2 绘制多边形拓扑结构阵列背景图

5.2.3 创建景深效果

5.2.4 复制景深效果图层

5.2.5 绘制一个内核带发光效果的多边形立体物

5.3 实例2：数码电子风格的网络安全产品网站UI设计

5.3.1 绘制基础背景框架

5.3.2 设计页面的主体视觉元素1：盾牌元素

5.3.3 设计页面的主体视觉元素2：病毒模型元素

5.4 拓展训练：制作磨砂玻璃质感网页

第6章 Web UI导航组件创意设计

6.1 Web UI的主要导航组件

6.1.1 顶部导航

6.1.2 侧边导航

6.1.3 面包屑导航

6.2 实例1：用灯光照亮侧边导航栏

6.2.1 绘制菜单底板背景和灯光照亮效果

6.2.2 绘制被选中照亮的“设置”菜单项图标

6.2.3 绘制未被选中的日历图标

6.3 实例2：顶部导航栏展开菜单设计

6.3.1 绘制展开菜单

6.3.2 绘制被选中的双层菜单图标的前层

6.3.3 绘制被选中的菜单图标的后层

6.4 拓展训练：制作圆形导航菜单

第7章 综合案例：设计网站欢迎页

7.1 添加文字并转换为形状

7.1.1 新建文档

7.1.2 添加并编辑文字

7.1.3 将文字转换为形状

7.1.4 转换矢量形状图层

7.2 创建文字立体效果

7.2.1 添加图层样式

7.2.2 为文字添加噪点效果

7.2.3 为“杂色”图层创建蒙版

7.2.4 添加投影

7.3 绘制立体字母上的高光

7.3.1 使用钢笔工具绘制高光形状

7.3.2 转换为智能对象图层并添加“高斯模糊”滤镜

7.4 绘制阴影

7.4.1 转换为智能对象图层

7.4.2 添加“投影”图层样式

7.4.3 设置阴影显示范围

7.5 添加辅助文字和按钮

7.5.1 添加副标题文字

7.5.2 添加跳转按钮

7.5.3 添加分割线