Photoshop 网站UI设计(第2版)

前言
第1章网站UI概论
1.1初识网站UI
1.1.1什么是网页界面
1.1.2网页界面的分类
1.1.3网页界面的设计特点
1.2网站UI设计原则
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.3.4多媒体
1.4网页UI中的扁平化
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移动端与计算机端网页UI区别
1.5.1界面不同
1.5.2位置不同
1.5.3操作习惯不同
1.5.4按钮状态不同
1.5.5信息布局不同
1.6网页设计命名规范
1.7专家支招
1.7.1网站建设流程
1.7.2什么是虚拟主机
1.8总结扩展
1.8.1本章小结
1.8.2举一反三——查看手机UI界面
第2章Photoshop基本操作
2.1什么是Photoshop
2.2Photoshop的安装和启动界面
实例Photoshop的安装和启动
2.3Photoshop的基本操作
2.3.1新建文档
2.3.2打开文件
2.3.3保存文件
实例制作精美的网页图标
2.3.4文件的置入和导入
2.3.5修改图像大小
2.3.6修改画布大小
实例调整网页尺寸
2.4图像的复制与粘贴
2.4.1图像的复制
实例制作精美的网页界面
2.4.2图像的拷贝与粘贴
实例制作网页插图
2.4.3选择性粘贴
实例制作网页展板
2.5图像的裁剪
2.5.1固定尺寸裁剪
2.5.2利用辅助线裁剪
2.5.3透视裁剪
2.6图像的变换
2.6.1移动图像
2.6.2缩放图像
2.6.3旋转图像
2.6.4变形和透视
2.6.5自由变换
实例为网页制作广告插图
2.7还原与恢复操作
2.7.1还原与重做
2.7.2前进一步与后退一步
2.7.3恢复文件
2.8专家支招
2.8.1什么是矢量图像和位图图像
2.8.2分辨率
2.9总结扩展
2.9.1本章小结
2.9.2举一反三——制作简单的网页按钮
第3章网站页面UI配色
3.1色彩的基础知识
3.1.1三原色
3.1.2色彩视觉
3.1.3色彩三要素
3.1.4色彩的种类
3.1.5色系
3.2色彩在网页视觉设计中的作用
3.2.1突出网页主题
3.2.2划分视觉区域
3.2.3吸引浏览者目光
3.2.4增强网页艺术性
3.3色彩的联想作用与心理效果
3.3.1色彩的冷暖
3.3.2色彩的软硬
3.3.3色彩的大小
3.3.4色彩的轻重
3.3.5色彩的活泼和端庄
3.3.6色彩的兴奋和沉稳感
3.3.7色彩的华丽和朴素感
3.4网页配色标准
3.4.1Web安全色
3.4.2使用Web安全色调色板
3.5色彩中的功能角色
3.5.1主色
3.5.2背景色
3.5.3辅助色
3.5.4点缀色
3.6网页配色技巧
3.6.1配色原则
实例制作简约网站主页
3.6.2确定网页主题色
3.6.3确定网页文本配色
实例制作公司宣传主页
3.7网页风格影响配色
3.7.1冷暖配色
3.7.2白色的应用
3.7.3饱和度影响配色
3.8影响配色的元素
3.8.1根据行业特征选择网页配色
3.8.2根据色彩联想选择网页配色
3.8.3根据受众色彩偏好选择网页配色
3.8.4根据生命周期选择网页配色
3.9专家支招
3.9.1怎样提高对色彩的敏感度
3.9.2什么是色立体
3.10总结扩展
3.10.1本章小结
3.10.2举一反三——制作水族馆网站主页
第4章网站页面布局与版式设计
4.1了解网页布局
4.1.1网页布局的目的
4.1.2网页布局的操作顺序
4.2计算机端常见的网页布局方式
4.2.1“国”字形
4.2.2“T”字形
4.2.3标题正文型
4.2.4左右分割型
4.2.5上下分割型
4.2.6POP型
4.2.7封面型
实例制作完整竖屏网页
4.2.8Flash型
4.3移动端网页布局方式
4.3.1布局的类型
4.3.2布局的实现方式
4.3.3响应式布局
4.3.4响应式布局优缺点
4.4网页布局方法
4.4.1网页布局设计
4.4.2网页布局特征
4.4.3网页布局原则
实例制作蛋糕店主页——顶部
实例制作蛋糕店主页——主体
4.5根据整体内容决定网页布局
4.5.1左侧的网页布局
4.5.2水平居中的页面布局
4.5.3水平和居中的页面布局
4.5.4满屏的网页布局
4.6页面分割方式
4.6.1横向分割
4.6.2纵向分割
4.6.3复合分割
4.7运用固定区域的设置
4.8网页布局设计的连贯性和多样性
4.9专家支招
4.9.1网页界面设计的设计误区
4.9.2网页界面设计的设计理念
4.10总结扩展
4.10.1本章小结
4.10.2举一反三——制作简洁网页登陆界面
第5章网站页面图像的优化与调整
5.1网站中的图像
5.1.1网站中使用的图片格式
5.1.2网站中的颜色模式
5.2图章工具的使用
5.2.1仿制图章的应用
实例去除网页中的水印效果
5.2.2图案图章工具的应用
5.3修复网页中的图像
5.3.1污点修复画笔工具
实例修复图像瑕疵
5.3.2修复画笔工具
5.3.3修补工具
5.3.4内容感知移动工具
5.3.5红眼工具
5.4自动调整图像色彩
5.4.1自动色调
5.4.2自动对比度
5.4.3自动颜色
5.5手动调整图像色彩
5.5.1亮度/对比度
实例调整网页中的图像亮度
5.5.2色阶
5.5.3曲线
实例执行“曲线”命令调整图像
5.5.4自然饱和度
实例制作炫彩展示图
5.5.5色相/饱和度
5.5.6阴影/高光
实例调整网页中的逆光图片
5.6填充和调整图层
5.6.1纯色填充图层
5.6.2渐变填充图层
5.6.3图案填充图层
5.7批处理
5.7.1动作
5.7.2自定义动作
5.8专家支招
5.8.1如何提高图像清晰度
5.8.2如何处理扫描图像
5.9总结扩展
5.9.1本章小结
5.9.2举一反三——批处理图像
第6章网站页基本元素设计
6.1图标概述
6.1.1什么是图标
6.1.2图标在网页中的作用
6.1.3网页图标应用
6.2使用形状工具绘制图标
6.2.1矩形工具
实例绘制时钟图标
6.2.2多边形工具
6.2.3形状的路径操作
实例制作常用网页小图标
6.2.4自定义形状工具
实例绘制天气图标
6.3按钮概述
6.3.1网页中按钮的常见类型
6.3.2网页中按钮的特点
6.3.3按钮的设计要点
实例绘制质感网页图标
6.4图层样式的应用
6.4.1添加图层样式的方法
6.4.2斜面和浮雕
实例绘制网页下载图标
6.4.3描边
6.4.4内阴影和投影
6.4.5内发光和外发光
6.4.6光泽
6.4.7颜色叠加、渐变叠加和图案叠加
实例制作手游开始按钮
6.5LOGO概述
6.5.1LOGO作用
6.5.2LOGO特性
6.5.3网站LOGO表现形式
实例绘制影视网站LOGO
6.6专家支招
6.6.1图标的文件格式是什么
6.6.2LOGO的设计流程是什么
6.7总结扩展
6.7.1本章小结
6.7.2举一反三——简约网页按钮
第7章网站导航设计
7.1网站导航概述
7.2网站导航的作用
7.3网站导航的设计标准
7.4网站导航形式
7.4.1标签形式
7.4.2按钮形式
7.4.3弹出菜单形式
7.4.4无边框形式
7.4.5Flash形式
7.4.6多导航系统形式
实例绘制汉堡包网站导航条
7.5网站导航位置
7.5.1顶部导航
7.5.2底部导航
7.5.3左侧导航
实例绘制网站左侧导航
7.5.4右侧导航
7.5.5中心导航
7.6网站设计的辅助操作
7.6.1标尺的使用
7.6.2创建精确参考线
实例绘制精致导航条
7.7专家支招
7.7.1导航条的设计原则是什么
7.7.2交互式导航的优势和劣势
7.8总结扩展
7.8.1本章小结
7.8.2举一反三——制作游戏网站导航栏
第8章网站广告设计
8.1网页广告条概述
8.1.1计算机端网页广告种类
8.1.2移动端网页广告种类
8.1.3广告条常见尺寸
8.1.4网站广告特点
实例招聘网站广告条制作
8.2使用抠图工具合成广告条
8.2.1磁性套索工具
实例制作万圣节广告
8.2.2快速选择工具
8.2.3魔棒工具
8.2.4钢笔工具
8.2.5快速蒙版工具
8.2.6调整边缘和精确选区
8.3修边
8.3.1移除白边和黑边
8.3.2“去边”命令
8.4画笔工具
8.5图层蒙版
8.5.1使用图层蒙版替换局部图像
8.5.2使用图层蒙版融合图像
8.5.3使用剪贴蒙版
8.6专家支招
8.6.1如何设计好广告条
8.6.2网站广告的表现形式有哪些
8.7总结扩展
8.7.1本章小结
8.7.2举一反三——制作面膜网站广告条
第9章移动端网站UI设计
9.1移动端城市App界面
9.1.1界面分析
9.1.2色彩分析
实例移动端城市App——广告条
实例移动端城市App——主体
实例移动端城市App——底部
9.2移动端企业网站界面
9.2.1界面分析
9.2.2色彩分析
实例移动端企业网站界面——广告条
实例移动端企业网站界面——主体
9.3专家支招
9.3.1响应式设计是否适合于专题设计
9.3.2先做计算机端页面还是手机端页面
9.4总结扩展
9.4.1本章小结
9.4.2举一反三——移动端网页宣传窗
第10章计算机端网站UI设计
10.1计算机端视频类网站界面
10.1.1界面分析
10.1.2色彩分析
实例计算机端设计类网站界面——顶部
实例计算机端设计类网站界面——主体
实例计算机端设计类网站界面——底部
10.2计算机端帅气游戏网站
10.2.1界面分析
10.2.2色彩分析
实例计算机端帅气游戏网站——顶部
实例计算机端帅气游戏网站——底部
10.3专家支招
10.3.1设计网页之前需要做什么
10.3.2网页设计的发展趋势是什么
10.4总结扩展
10.4.1本章小结
10.4.2举一反三——制作电脑端网页宣传栏