本书根据高职学生的特点,结合Photoshop CS6的基本工具和基础操作,以案例教学为主线,采用图文并茂的方式,精选若干综合实例,对Web设计的概念和方法进行了全面的讲解。
全书共11章,包括网页设计的概念、Photoshop入门基础、网页图片的处理、导航栏的设计与制作、网页按钮与图标的设计与制作、网页特效文字的设计与制作、网页Banner的设计与制作、网页布局设计、网页布局实例解析、网站首页设计与制作实例、网站的发布与推广。本书内容丰富,图文并茂,配套资源丰富,教材、资源、课件三合一,具有较强的实用性。
本书可作为高职或中职计算机网络技术专业或其他相关专业的教材,也可供广大网页设计爱好者和网站管理与维护人员作为参考书或培训教材。
“Web设计基础”是计算机网络技术及相关专业的一门专业课程。编写本书的目的是帮助有志于从事Web设计开发的读者熟悉和掌握网站建设的基本流程及Web页面设计与制作的方法。
本书根据Web开发实际工作要求,将主要内容聚焦在Web美工设计工作岗位所必需的素质和技能上,循序渐进地从网页设计的基本概念、Photoshop CS6的使用方法、页面元素的设计与制作及网页布局设计几个方面展开讲解。
本书中的实例大部分来自实际工作场景,全书分为11章,通过若干综合实例,完整详细地介绍了Web设计的工作流程和实施步骤,主要内容包括网页设计的概念、Photoshop入门基础、网页图片的处理、导航栏的设计与制作、网页按钮与图标的设计与制作、网页特效文字的设计与制作、网页Banner的设计与制作、网页布局设计、网页布局实例解析、网站首页设计与制作实例、网站的发布与推广。本书全面讲解网站界面设计所涉及的内容,叙述生动,由浅入深,通过大量实例具体说明如何将设计概念融入到实际操作中。通过学习,学生不仅可以掌握网页布局设计思想和最新趋势,以及使用Photoshop CS6进行网页布局设计和网页元素设计制作的方法和技能,还能够了解网站建设的整个工作流程。
本书由长沙民政职业技术学院付朝晖、王华兵任主编,宫蓉蓉、刘立任副主编。其中第1、8、9、10章由付朝晖编写,第6、7、11章由宫蓉蓉编写,第2、4章由张丽编写,第5章由何晶编写,第3章由陈丹编写,全书由付朝晖统稿,王华兵、宫蓉蓉与刘立参与校对。本书的编写得益于众多同类教材的启发,并得到了长沙民政职业技术学院软件学院邓文达教授的精心指导和兄弟学校同仁们的真诚关怀,以及湖南厚溥教育科技有限公司陈棵、管仕华两位工程师的大力协助。此外,西安电子科技大学出版社也为本书的顺利出版提供了鼎力帮助和支持,在此一并表示感谢。
由于编者水平有限,编写时间仓促,书中难免有不足之处,敬请读者不吝赐教。
第1章 网页设计的概念 1
1.1 网站的定位与规划 1
1.1.1 什么是网站定位 1
1.1.2 网站定位的依据 2
1.1.3 网站定位的创意与策划 3
1.1.4 树立网站整体风格 3
1.2 网页的构成要素 4
1.2.1 文字 4
1.2.2 图片 5
1.2.3 交互 5
1.2.4 视频和动画 6
1.2.5 优秀案例赏析 6
1.3 网页配色 7
1.3.1 色彩的基本知识 8
1.3.2 色彩的搭配 9
1.4 网页设计常用工具 12
1.5 课后实践练习 14
第2章 Photoshop入门基础 15
2.1 Photoshop CS6工作界面 15
2.1.1 菜单栏 15
2.1.2 工具箱 17
2.1.3 选项栏 18
2.1.4 控制面板 18
2.1.5 图像编辑区 19
2.2 设置前景色和背景色 19
2.2.1 设置前景色 19
2.2.2 设置背景色 21
2.3 创建选择区域 21
2.3.1 选框工具 21
2.3.2 套索工具 23
2.3.3 选区的布尔运算 25
2.4 基本绘图工具 26
2.4.1 形状工具 26
2.4.2 钢笔工具 28
2.5 创建文字 29
2.5.1 文字工具选项栏 29
2.5.2 创建文字 31
2.6 图层和图层样式 32
2.6.1 图层的基本操作 33
2.6.2 图层样式 34
2.7 应用滤镜 37
2.7.1 滤镜库 37
2.7.2 “风格化”滤镜 38
2.7.3 “液化”滤镜 39
2.7.4 “模糊”滤镜 40
2.8 实战——?制作蓝色光束 41
2.9 课后实践练习 48
第3章 网页图片的处理 49
3.1 几种常见的抠图工具 49
3.1.1 魔棒工具 49
3.1.2 钢笔工具 51
3.1.3 通道抠图 53
3.2 图像的合成 57
3.2.1 合成建筑与草地图像 57
3.2.2 合成车和草地图像 62
3.3 图像的输出格式 66
3.4 快速制作Web文件 69
3.5 创建与编辑切片 72
3.6 课后实践练习 77
第4章 导航栏的设计与制作 79
4.1 实例1:横向导航栏的设计与制作 79
4.2 实例2:纵向导航栏的设计与制作 93
4.3 实例3:水晶导航栏的设计与制作 102
4.4 拓展实例:HTML + CSS构建网站导航栏 109
4.5 课后实践练习 113
第5章 网页按钮与图标的设计与制作 114
5.1 水晶设计风格与扁平设计风格 114
5.2 实例1:制作水晶风格按钮 115
5.3 实例2:制作扁平风格按钮 118
5.4 实例3:网站LOGO的设计与制作 125
5.5 实例4:像素小图标的设计与制作 129
5.6 课后实践练习 134
第6章 网页特效文字的设计与制作 135
6.1 特效文字在网页中的应用 135
6.2 实例1:玻璃特效文字 136
6.3 实例2:射线特效文字 144
6.4 实例3:石材特效文字 149
6.5 实例4:火焰特效文字 157
6.6 实例5:金属特效文字 162
6.7 课后实践练习 168
第7章 网页Banner的设计与制作 169
7.1 实例1:学校网站Banner设计与制作 169
7.2 实例2:科技公司Banner制作 177
7.3 实例3:政府部门Banner制作 182
7.4 实例4:公益网页Banner设计 185
7.5 实例5:动态Banner设计与制作 190
7.6 Banner设计与制作注意事项 199
7.7 课后实践练习 200
第8章 网页布局设计 201
8.1 网页布局的概念 201
8.1.1 网页布局的要素 201
8.1.2 网页布局设计的原则 203
8.2 网页布局形式 206
8.2.1 传统的网页版式布局设计 206
8.2.2 网页设计布局的流行趋势 214
8.3 网页版面设计常用方法 216
8.4 Photoshop在网页布局中的作用 218
8.4.1 用Photoshop设计网页布局的优点 218
8.4.2 用Photoshop设计网页布局应注意的几个问题 219
8.5 网页栅格系统 219
8.5.1 网页栅格系统的定义 219
8.5.2 栅格系统的设计原理及应用 219
8.5.3 栅格化设计的参数 222
8.6 课后实践练习 223
第9章 网页布局实例解析 225
9.1 实例1:企业类网站布局设计 225
9.2 实例2:学校网站布局设计 236
9.3 网页布局注意事项 245
9.4 课后实践练习 245
第10章 网站首页设计与制作实例 247
10.1 概述 247
10.2 网站首页效果图设计与制作 249
10.3 网页效果图切图 257
10.4 课后实践练习 259
第11章 网站的发布与推广 261
11.1 网站发布 261
11.2 网站测试 263
11.3 网站推广 265
参考文献 268