美工神话-Fireworks网页元素与网页效果图设计PDF电子书下载

第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.1RGB色彩模式 89

3.4.2HTML语言对颜色的描述 90

3.4.3216网页安全色 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.1Fireworks基本操作技巧集锦 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.4Fireworks中的外挂滤镜 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.1GIF动画制作关键技术 170

5.1.1使用Fireworks制作补间动画 170

5.1.2巧用“补间”技术作图 171

5.1.3巧做网页LOGO中的光描动画 174

5.2Fireworks行为相关关键技术 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.4Fireworks效率工具问题集合 198

5.4.1巧妙执行重复的操作 198

5.4.2对大量的图像素材进行批量处理 201

第6章 网页的LOGO设计 205

6.1LOGO设计的基本构成要素 206

6.1.1LOGO中的线条 206

6.1.2LOGO中的形状 208

6.1.3用线条和形状构成LOGO 209

6.1.4LOGO中的英文字体 210

6.1.5LOGO中的中文字体 212

6.240种常用LOGO设计技巧 217

6.3Web2.0风格LOGO设计要素 226

6.4实用LOGO设计网站推荐 228

6.5LOGO设计案例分析 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