Photoshop 网站UI设计PDF|Epub|txt|kindle电子书版本网盘下载

Photoshop 网站UI设计PDF格式电子书版下载

注意：本站所有压缩包均有解压码： 点击下载压缩包解压工具

第1章 网站UI概述1

1.1 初识网站UI2

1.1.1 什么是网页界面2

1.1.2 网页界面的分类2

1.1.3 网页界面的设计特点4

1.2 网站UI设计原则7

1.2.1 视觉美观7

1.2.2 主题突出8

1.2.3 整体性8

1.2.4 为用户考虑9

1.2.5 快速加载10

1.3 网页的构成元素10

1.3.1 文字11

1.3.2 图像11

1.3.3 超链接12

1.3.4 多媒体12

1.4 网页UI中的扁平化13

1.4.1 图标14

1.4.2 折角14

1.4.3 圆角15

1.4.4 徽章15

1.4.5 条纹16

1.4.6 标签16

1.4.7 装饰元素17

1.4.8 装饰背景17

1.5 移动端与PC端网页UI的区别17

1.5.1 精确度不同17

1.5.2 位置不同18

1.5.3 操作习惯不同18

1.5.4 按钮状态不同18

1.6 网页设计命名规范18

1.7 专家支招20

1.7.1 网站建设流程20

1.7.2 什么是虚拟主机20

1.8 总结扩展21

1.8.1 本章小结21

1.8.2 举一反三——排列网页小图标21

第2章 Photoshop基本操作23

2.1 什么是Photoshop24

2.2 Photoshop的安装和启动界面24

实例：Photoshop的安装和启动24

2.3 Photoshop中的基本操作26

2.3.1 新建文档26

2.3.2 打开文件27

2.3.3 保存文件29

实例：制作精美的网页图标30

2.3.4 文件的置入和导入33

2.3.5 修改图像大小34

2.3.6 修改画布大小35

实例：调整网页尺寸35

2.4 图像的复制与粘贴37

2.4.1 图像的复制37

实例：制作精美网页38

2.4.2 图像的拷贝与粘贴40

实例：制作网页插图40

2.4.3 选择性粘贴41

实例：制作网页展板42

2.5 图像的裁剪43

2.5.1 固定尺寸裁剪43

2.5.2 利用辅助线裁剪44

2.5.3 透视裁剪44

2.6 图像的变换45

2.6.1 移动图像45

2.6.2 缩放图像46

2.6.3 旋转图像46

2.6.4 变形和透视46

2.6.5 自由变换47

实例：为网页制作广告插图47

2.7 还原与恢复操作49

2.7.1 还原与重做49

2.7.2 前进一步与后退一步49

2.7.3 恢复文件49

2.8 专家支招50

2.8.1 什么是矢量图像和位图图像50

2.8.2 分辨率50

2.9 总结扩展51

2.9.1 本章小结51

2.9.2 举一反三——制作简单的网页按钮51

第3章 网站页面UI配色52

3.1 色彩的基础知识53

3.1.1 三原色53

3.1.2 色彩视觉54

3.1.3 色彩三要素55

3.1.4 色彩的种类57

3.1.5 色系58

3.2 色彩在网页视觉设计中的作用59

3.2.1 突出网页主题59

3.2.2 划分视觉区域60

3.2.3 吸引浏览者目光60

3.2.4 增强网页艺术性61

3.3 色彩的联想作用与心理效果61

3.3.1 色彩的冷暖62

3.3.2 色彩的软硬63

3.3.3 色彩的大小63

3.3.4 色彩的轻重63

3.3.5 色彩的活泼和端庄64

3.3.6 色彩的兴奋和沉稳感64

3.3.7 色彩的华丽和朴素感65

3.4 网页配色标准65

3.4.1 Web安全色65

3.4.2 使用Web安全色调色板66

3.5 色彩中的功能角色67

3.5.1 主色67

3.5.2 背景色67

3.5.3 辅助色67

3.5.4 点缀色68

3.6 网页配色技巧68

3.6.1 配色原则69

实例：制作简约网站主页71

3.6.2 确定网页主题色75

3.6.3 确定网页文本配色75

实例：制作公司宣传主页76

3.7 网页风格影响配色83

3.7.1 冷暖配色83

3.7.2 白色的应用84

3.7.3 饱和度影响配色84

3.8 影响配色的元素85

3.8.1 根据行业特征选择网页配色85

3.8.2 根据色彩联想选择网页配色86

3.8.3 根据受众的色彩偏好选择网页配色87

3.8.4 根据生命周期选择网页配色89

3.9 专家支招91

3.9.1 怎样提高对色彩的敏感度91

3.9.2 什么是色立体91

3.10 总结扩展92

3.10.1 本章小结92

3.10.2 举一反三——制作水族馆网站主页92

第4章 网站页面布局与版式设计94

4.1 了解网页布局95

4.1.1 网页布局的目的95

4.1.2 网页布局的操作顺序95

4.2 PC端常见的网页布局方式96

4.2.1 “国”字型96

4.2.2 T字型97

4.2.3 标题正文型97

4.2.4 左右分割型98

4.2.5 上下分割型98

4.2.6 POP型98

4.2.7 封面型99

实例：制作画展网站首页99

4.2.8 Flash型106

4.3 移动端网页布局方式107

4.3.1 布局的类型107

4.3.2 布局的实现方式108

4.3.3 响应式布局109

4.3.4 响应式布局的优缺点112

4.4 网页布局方法112

4.4.1 网页布局设计112

4.4.2 网页布局特征113

4.4.3 网页布局原则114

实例：制作蛋糕店主页——顶部115

实例：制作蛋糕店主页——主体121

4.5 根据整体内容决定网页布局127

4.5.1 左侧的页面布局127

4.5.2 水平居中的页面布局128

4.5.3 水平和垂直居中的页面布局128

4.5.4 满屏的页面布局129

4.6 页面分割方式129

4.6.1 横向分割129

4.6.2 纵向分割130

4.6.3 复合分割130

4.7 运用固定区域的设置131

4.8 网页布局设计的连贯性和多样性132

4.9 专家支招132

4.9.1 网页界面设计的设计误区132

4.9.2 网页界面设计的设计理念133

4.10 总结扩展133

4.10.1 本章小结133

4.10.2 举一反三——制作简洁网页登录界面133

第5章 网站页面图像的优化与调整135

5.1 网站中的图像136

5.1.1 网站中使用的图片格式136

5.1.2 网站中的颜色模式138

5.2 图章工具的使用138

5.2.1 仿制图章工具的应用138

实例：去除网页中的水印效果139

5.2.2 图案图章工具的应用141

5.3 修复网页中的图像141

5.3.1 污点修复画笔工具141

实例：修复图像瑕疵142

5.3.2 修复画笔工具144

5.3.3 修补工具144

5.3.4 内容感知移动工具145

5.3.5 红眼工具145

5.4 自动调整图像色彩146

5.4.1 自动色调146

5.4.2 自动对比度146

5.4.3 自动颜色147

5.5 手动调整图像色彩147

5.5.1 亮度／对比度147

实例：调整网页中图像亮度148

5.5.2 色阶150

5.5.3 曲线151

实例：执行“曲线”命令调整图像152

5.5.4 自然饱和度155

实例：制作炫彩展示图155

5.5.5 色相／饱和度159

5.5.6 阴影／高光159

实例：调整网页中逆光图片160

5.6 填充和调整图层163

5.6.1 纯色填充图层164

5.6.2 渐变填充图层164

5.6.3 图案填充图层164

5.7 批处理165

5.7.1 动作166

5.7.2 自定义动作166

5.8 专家支招166

5.8.1 如何提高图像清晰度166

5.8.2 如何处理扫描图像167

5.9 总结扩展167

5.9.1 本章小结167

5.9.2 举一反三——批处理图像167

第6章 网站基本元素设计169

6.1 图标概述170

6.1.1 什么是图标170

6.1.2 图标在网页中的作用171

6.1.3 网页图标的应用171

6.2 使用形状工具绘制图标172

6.2.1 矩形工具172

实例：绘制时钟图标173

6.2.2 多边形工具176

6.2.3 形状的路径操作177

实例：制作常用网页小图标177

6.2.4 自定义形状工具179

实例：绘制天气图标179

6.3 按钮概述181

6.3.1 网页中按钮的常见类型182

6.3.2 网页中按钮的特点183

6.3.3 按钮的设计要点185

实例：绘制质感网页图标186

6.4 图层样式的应用189

6.4.1 添加图层样式的方法189

6.4.2 斜面和浮雕190

实例：绘制网页下载图标191

6.4.3 描边194

6.4.4 内阴影和投影194

6.4.5 内发光和外发光195

6.4.6 光泽196

6.4.7 颜色叠加、渐变叠加和图案叠加196

实例：制作手游开始按钮197

6.5 Logo概述200

6.5.1 Logo的作用200

6.5.2 Logo的特性201

6.5.3 网站Logo的表现形式201

实例：绘制影视网站Logo202

6.6 专家支招205

6.6.1 图标的文件格式是什么205

6.6.2 Logo的设计流程是什么205

6.7 总结扩展205

6.7.1 本章小结206

6.7.2 举一反三——制作简约网页按钮206

第7章 网站导航设计207

7.1 网站导航概述208

7.2 网站导航的作用208

7.3 网站导航的设计标准208

7.4 网站导航形式209

7.4.1 标签形式209

7.4.2 按钮形式209

7.4.3 弹出菜单形式210

7.4.4 无边框形式210

7.4.5 Flash形式210

7.4.6 多导航系统形式211

实例：绘制女装网站导航条211

7.5 网站导航位置214

7.5.1 顶部导航214

7.5.2 底部导航214

7.5.3 左侧导航215

实例：绘制网站左侧导航215

7.5.4 右侧导航218

7.5.5 中心导航218

7.6 网站设计的辅助操作218

7.6.1 标尺的使用219

7.6.2 创建精确参考线219

实例：绘制精致导航条220

7.7 专家支招223

7.7.1 导航条的设计原则是什么223

7.7.2 交互式导航的优势和劣势分别是什么224

7.8 总结扩展224

7.8.1 本章小结224

7.8.2 举一反三——制作游戏网站导航栏224

第8章 网站广告设计226

8.1 网页广告条概述227

8.1.1 计算机端网页广告的种类227

8.1.2 移动端网页广告种类229

8.1.3 广告条的常见尺寸231

8.1.4 网站广告的特点232

实例：制作招聘网站广告条233

8.2 使用抠图工具合成广告条236

8.2.1 磁性套索工具236

实例：制作圣诞节广告条237

8.2.2 快速选择工具240

8.2.3 魔棒工具240

8.2.4 钢笔工具240

8.2.5 快速蒙版工具241

8.2.6 调整边缘和精确选区241

8.3 修边241

8.3.1 移除白边和黑边241

8.3.2 “去边”命令242

8.4 画笔工具242

8.5 图层蒙版242

8.5.1 使用图层蒙版替换局部图像242

8.5.2 使用图层蒙版融合图像243

8.5.3 使用剪贴蒙版243

8.6 专家支招244

8.6.1 如何设计好广告条244

8.6.2 网站广告的表现形式有哪些244

8.7 总结扩展244

8.7.1 本章小结245

8.7.2 举一反三——制作服装网站广告条245

第9章 移动端网站UI设计246

9.1 移动端网店销售界面247

9.1.1 界面分析247

9.1.2 色彩分析247

实例：移动端网店销售界面——广告条247

实例：移动端网店销售界面——主体250

实例：移动端网店销售界面——产品推广253

9.2 移动端企业网站界面256

9.2.1 界面分析256

9.2.2 色彩分析256

实例：移动端企业网站界面——广告条256

实例：移动端企业网站界面——主体260

9.3 专家支招263

9.3.1 响应式设计是否适合于专题设计263

9.3.2 先做PC端页面还是手机端页面263

9.4 总结扩展263

9.4.1 本章小结264

9.4.2 举一反三——制作移动端网页宣传窗264

第10章 PC端网站UI设计265

10.1 PC端设计类网站界面266

10.1.1 界面分析266

10.1.2 色彩分析266

实例：PC端设计类网站界面——顶部266

实例：PC端设计类网站界面——主体269

实例：PC端设计类网站界面——底部272

10.2 PC端帅气游戏网站界面274

10.2.1 界面分析275

10.2.2 色彩分析275

实例：PC端帅气游戏网站界面——顶部275

实例：PC端帅气游戏网站界面——底部280

10.3 专家支招283

10.3.1 设计网页之前需要做什么283

10.3.2 网页设计的发展趋势是什么283

10.4 总结扩展283

10.4.1 本章小结283

10.4.2 举一反三——制作PC端网页宣传栏284