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

UI设计实战案例教程(移动端+Web端)
分享 推荐 0 收藏 15 阅读 742
张鼎 (作者) 978-7-115-64630-9

关于本书的内容有任何问题,请联系 许金霞

1.本书讲解软件的功能与操作方法,再结合案例进行实操,讲练结合。
2.配备足量的演示案例及课堂案例,满足院校以机房实操授课的教学方式。
3.本书通过典型案例,解析案例的设计思路,详细介绍软件的实际操作方法,从而达到培养设计思维,提高实际操作能力的目的。
4.本书附有微课视频,通过扫描二维码观看案例操作视频、课堂案例操作视频、课后练习操作视频,提高读者的实操能力。
¥79.80 ¥67.83 (8.5 折)

内容摘要

本书是一本使用 Photoshop 进行 UI 设计的案例教程,包含移动 UI 设计和 Web UI 设计两方面。本书共 7 章,第 1 章讲解 Photoshop 基础操作,包括工作界面、矢量绘画工具、文字工具、图层及滤镜等内容;第 2~6 章分别讲解移动端App的 UI 设计、卡片设计、创意组件设计,以及 Web UI 的基本框架与创意设计、导航组件创意设计等相关知识与实操方法;第 7 章以一个综合商业网站欢迎页的制作为案例进行讲解,帮助读者了解完整的 UI 设计流程,巩固所学知识。

目录

第 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.4 调整图层
1.3.5 图层的编组、拷贝、合并与导出
1.3.6 设置图层不透明度与填充
1.3.7 图层蒙版的使用
1.3.8 图层的叠加模式
1.3.9 图层样式简介
1.4 文字工具基础操作
1.4.1 输入并编辑文字
1.4.2 文字变形
1.4.3 创建路径文字
1.5 滤镜
1.5.1 滤镜菜单
1.5.2 滤镜库的使用
1.5.3 智能滤镜

第 2章 移动端APP的“轻拟物”风格UI设计
2.1 什么是“轻拟物”风格设计
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移动端UI设计中的卡片设计
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 Web UI中的顶部导航
6.1.2 Web UI中的侧边导航
6.1.3 Web UI中的面包屑导航
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 添加一根分割线

读者评论

赶紧抢沙发哦!

我要评论

作者介绍

张鼎,字节跳动飞书UX设计专家。2012年毕业于同济大学艺术学硕士研究生。毕业期间专研动效设计,毕业后曾在华为、阿里斑马网络、小鹏汽车等工作多年,担任动效设计师、交互设计师、视觉设计师,深度参与多款公司战略级产品的设计工作,尤其是为华为智能手机当年的高端化里程碑产品Mate7主导EMUI3.0的动效设计,以及担任如今国产智能汽车标杆、电动轿跑小鹏P7的动效主设计师,同时也担任小鹏智能汽车位置服务体验设计负责人。 作者在动效设计领域深耕十年,主导设计的产品涉及几乎所有当前的软硬件平台与设备形态,从智能手机到智能汽车,从触屏交互到语音交互到再到增强现实,对不同平台设备的用户体验和动效设计有着丰富的经验和独到、深刻的思考,对于多种2D、3D设计软件工具也有着非常实战化的丰富经验。

相关图书

人邮微信
本地服务
人邮微信
教师服务
二维码
读者服务
读者服务
返回顶部
返回顶部