Fireworks网页元素与网页效果图设计

第1章　网页效果图设计的一般流程　1
1.1　网页效果图设计流程概述　3
1.1.1　创建辅助线　3
1.1.2　绘制结构底图　4
1.1.3　添加内容　5
1.1.4　切片　5
1.1.5　优化　6
1.1.6　导出　7
1.1.7　布局　9
1.2　网站策划　10
1.2.1　收集客户资料　10
1.2.2　分析网站类型　10
1.2.3　确定网站风格　11
1.3　各类网站的布局特点分析　12
1.3.1　资讯类网站　13
1.3.2　电子商务类网站　16
1.3.3　互动游戏类网站　18
1.3.4　教育类网站　23
1.3.5　功能型网站　25
1.3.6　综合类网站　26

第2章　网页的布局　29
2.1　网页布局基础　30
2.1.1　网页中的基本元素　30
2.1.2　网页的构成　33
2.1.3　网页的空间与页面尺寸　36
2.1.4　页面元素的分布情况　38
2.2　网页的布局设计　39
2.2.1　布局方法　39
2.2.2　确定版面率　40
2.2.3　网格设计　43
2.3　网页布局的分类　45
2.3.1　满版布局形式　45
2.3.2　十字布局形式　45
2.3.3　九宫格布局形式　46
2.3.4　米字布局形式　47
2.4　网页布局技巧　49
2.4.1　黄金分割式布局(完美的比例给人视觉上的享受)　49
2.4.2　左右对齐式布局(没有浪费的空间，表现商业性形象)　52
2.4.3　全景式布局(用趣味性吸引浏览者)　53
2.4.4　卫星式布局(以太阳为中心的卫星环绕型)　55
2.4.5　照片组合式布局(新世界以全景式自由的展现出来)　57
2.4.6　包围式布局(限定范围的效果)　59
2.4.7　散开式布局(山水画般的自由和优雅)　62
2.4.8　单侧齐行式布局(理性与自由共存的版式设计)　64
2.4.9　对称式布局(以中心为基线，左右对称)　66

第3章　网页的色彩设计　69
3.1　网页设计要素——色彩　70
3.1.1　色彩决定印象　70
3.1.2　色彩印象无法更改　71
3.1.3　色彩无处不在，具有多重效果　72
3.2　色彩的原理　73
3.2.1　光与色彩　73
3.2.2　物体色　74
3.2.3　色彩类型　75
3.2.4　色彩三要素　76
3.3　色相环的作用　79
3.3.1　色相环的构成　79
3.3.2　色相环中的颜色特点　80
3.3.3　色彩之间的关系 　81
3.4　网页中的色彩　88
3.4.1　RGB色彩模式　89
3.4.2　HTML语言对颜色的描述　90
3.4.3　216网页安全色　91
3.5　色彩索引　91
3.5.1　红色　91
3.5.2　橙色　93
3.5.3　黄色　94
3.5.4　绿色　96
3.5.5　蓝色　97
3.5.6　紫色　99
3.5.7　黑色　101
3.5.8　白色　102
3.5.9　灰色　103
3.5.10　色彩索引配色法　104
3.6　色调的变化效果　104
3.6.1　鲜艳的色调　105
3.6.2　亮色调　105
3.6.3　淡色调　106
3.6.4　中间色调　106
3.6.5　浅浊色调　107
3.6.6　暗色调　107
3.6.7　深色调　108
3.7　色彩的四种功能　108
3.7.1　主色　108
3.7.2　背景色　109
3.7.3　融合色　112
3.7.4　强调色　113
3.8　实用配色网站推荐　114

第4章　Fireworks图像处理关键技术精讲　117
4.1　Fireworks基本操作技巧集锦　118
4.2　矢量绘制关键技术　120
4.2.1　两种方法绘制圆角矩形　120
4.2.2　防止对圆角矩形变形的时候圆角改变　121
4.2.3　巧妙消除路径边缘的锯齿　122
4.2.4　多种方法绘制虚线　123
4.2.5　制作网页效果图中的清晰小字　124
4.2.6　使文字按照路径排列　125
4.2.7　制作电视扫描线的效果　126
4.2.8　自定义纹理　127
4.2.9　添加和修改渐变色填充　128
4.2.10　巧妙制作渐隐的线条　130
4.2.11　解决图标缩小后变形的问题　132
4.3　图像处理关键技术　134
4.3.1　蒙版的3种用途　134
4.3.2　选区和路径的转换　143
4.3.3　制作图像条形码效果　146
4.3.4　Fireworks中的外挂滤镜　148
4.3.5　制作淡彩钢笔画效果　151
4.3.6　制作特殊的渐变色效果　153
4.3.7　制作网格化图像效果　154
4.3.8　制作老照片效果　157
4.3.9　使用【曲线】命令校正图像的色彩　158
4.3.10　使用【色阶】命令调整图像的色彩　165

第5章　Fireworks网页制作关键技术精讲　169
5.1　GIF动画制作关键技术　170
5.1.1　使用Fireworks制作补间动画　170
5.1.2　巧用“补间”技术作图　171
5.1.3　巧做网页LOGO中的光描动画　174
5.2　Fireworks行为相关关键技术　176
5.2.1　使用Fireworks制作交互按钮　176
5.2.2　使用Fireworks的行为实现图像翻转特效　179
5.2.3　把Fireworks中的交互效果添加到网页中　183
5.3　切片和优化的关键技术　187
5.3.1　在Fireworks中对图像进行优化　187
5.3.2　选择合适的图像优化格式　188
5.3.3　巧妙去除GIF图像周围的白边　192
5.3.4　导出效果图切片　192
5.4　Fireworks效率工具问题集合　198
5.4.1　巧妙执行重复的操作　198
5.4.2　对大量的图像素材进行批量处理　201

第6章　网页的LOGO设计　205
6.1　LOGO设计的基本构成要素　206
6.1.1　LOGO中的线条 　206
6.1.2　LOGO中的形状　208
6.1.3　用线条和形状构成 LOGO 　209
6.1.4　LOGO中的英文字体　210
6.1.5　LOGO中的中文字体　212
6.2　40种常用LOGO设计技巧　217
6.3　Web 2.0风格LOGO设计要素　226
6.4　实用LOGO设计网站推荐　228
6.5　LOGO设计案例分析　229

第7章　网页的导航设计　233
7.1　网站的栏目构成　234
7.2　导航的视觉设计　236
7.3　导航的交互设计　240
7.4　没有“导航”的导航——搜索　241

第8章　网页的通栏设计　243
8.1　网页通栏概述　244
8.1.1　网页中的通栏　244
8.1.2　网页通栏的设计形式　246
8.1.3　网页通栏的尺寸　247
8.2　图像素材的选择　247
8.2.1　说服力的强弱　248
8.2.2　内容的相关度　250
8.2.3　发掘图像背后的故事　251
8.2.4　色彩的层次　252
8.2.5　与众不同　252
8.2.6　幽默诙谐　253
8.2.7　唯美主义　253
8.2.8　戏剧化　254
8.2.9　强调脸部　254
8.3　图像裁剪的技巧　256
8.3.1　将图像转化为相同的尺寸　256
8.3.2　制作不同比例的图像 　257
8.3.3　统一人物肖像的尺寸　257
8.3.4　对人物肖像进行裁剪　258
8.3.5　裁剪掉无关的部分　260
8.3.6　调整图像的角度　260
8.3.7　放大后裁剪　261
8.3.8　只保留局部　262
8.3.9　改变图像传递的信息　263
8.3.10　一图多用　263
8.3.11　突破空间　266
8.3.12　边缘的处理　267
8.4　图像设计的技巧　269
8.4.1　添加边框　269
8.4.2　叠加效果　270
8.4.3　添加元素的效果　271
8.4.4　剪贴簿效果　272
8.4.5　卷曲效果　273
8.4.6　制作“拍立得”效果　276
8.4.7　异形边缘　276
8.4.8　小图锐化　279
8.5　通栏广告的设计技巧　279
8.5.1　选择合适的素材　279
8.5.2　环境背景设计　280
8.5.3　产品的展示　281
8.5.4　字体的选择和设计　282

第9章　简单风格的小型网站设计　285
9.1　案例分析　286
9.1.1　页面布局形式　286
9.1.2　添加文字和图像　289
9.2　案例实现　293
9.2.1　制作效果图　293
9.2.2　切片、优化和导出　296
9.2.3　布局页面　299

第10章　标准型网站设计　311
10.1　案例分析　313
10.1.1　页面布局形式　313
10.1.2　页眉的设计　314
10.1.3　通栏的设计　316
10.1.4　内容区域的设计　318
10.1.5　页脚的设计　319
10.1.6　字体的选择　320
10.2　案例分析　320
10.2.1　制作结构底图　320
10.2.2　页眉设计　324
10.2.3　通栏设计　325
10.2.4　制作内容区域　327
10.2.5　制作页脚　328
10.2.6　切片、优化和导出　330
10.2.7　布局页面　334