美工神話：Fireworks網(wǎng)頁元素與網(wǎng)頁效果圖設(shè)計

第1章　網(wǎng)頁效果圖設(shè)計的一般流程　1
1.1　網(wǎng)頁效果圖設(shè)計流程概述　3
1.1.1　創(chuàng)建輔助線　3
1.1.2　繪制結(jié)構(gòu)底圖　4
1.1.3　添加內(nèi)容　5
1.1.4　切片　5
1.1.5　優(yōu)化　6
1.1.6　導出　7
1.1.7　布局　9
1.2　網(wǎng)站策劃　10
1.2.1　收集客戶資料　10
1.2.2　分析網(wǎng)站類型　10
1.2.3　確定網(wǎng)站風格　11
1.3　各類網(wǎng)站的布局特點分析　12
1.3.1　資訊類網(wǎng)站　13
1.3.2　電子商務類網(wǎng)站　16
1.3.3　互動游戲類網(wǎng)站　18
1.3.4　教育類網(wǎng)站　23
1.3.5　功能型網(wǎng)站　25
1.3.6　綜合類網(wǎng)站　26
第2章　網(wǎng)頁的布局　29
2.1　網(wǎng)頁布局基礎(chǔ)　30
2.1.1　網(wǎng)頁中的基本元素　30
2.1.2　網(wǎng)頁的構(gòu)成　33
2.1.3　網(wǎng)頁的空間與頁面尺寸　36
2.1.4　頁面元素的分布情況　38
2.2　網(wǎng)頁的布局設(shè)計　39
2.2.1　布局方法　39
2.2.2　確定版面率　40
2.2.3　網(wǎng)格設(shè)計　43
2.3　網(wǎng)頁布局的分類　45
2.3.1　滿版布局形式　45
2.3.2　十字布局形式　45
2.3.3　九宮格布局形式　46
2.3.4　米字布局形式　47
2.4　網(wǎng)頁布局技巧　49
2.4.1　黃金分割式布局(完美的比例給人視覺上的享受)　49
2.4.2　左右對齊式布局(沒有浪費的空間，表現(xiàn)商業(yè)性形象)　52
2.4.3　全景式布局(用趣味性吸引瀏覽者)　53
2.4.4　衛(wèi)星式布局(以太陽為中心的衛(wèi)星環(huán)繞型)　55
2.4.5　照片組合式布局(新世界以全景式自由的展現(xiàn)出來)　57
2.4.6　包圍式布局(限定范圍的效果)　59
2.4.7　散開式布局(山水畫般的自由和優(yōu)雅)　62
2.4.8　單側(cè)齊行式布局(理性與自由共存的版式設(shè)計)　64
2.4.9　對稱式布局(以中心為基線，左右對稱)　66
第3章　網(wǎng)頁的色彩設(shè)計　69
3.1　網(wǎng)頁設(shè)計要素——色彩　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　色相環(huán)的作用　79
3.3.1　色相環(huán)的構(gòu)成　79
3.3.2　色相環(huán)中的顏色特點　80
3.3.3　色彩之間的關(guān)系 　81
3.4　網(wǎng)頁中的色彩　88
3.4.1　RGB色彩模式　89
3.4.2　HTML語言對顏色的描述　90
3.4.3　216網(wǎng)頁安全色　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　色調(diào)的變化效果　104
3.6.1　鮮艷的色調(diào)　105
3.6.2　亮色調(diào)　105
3.6.3　淡色調(diào)　106
3.6.4　中間色調(diào)　106
3.6.5　淺濁色調(diào)　107
3.6.6　暗色調(diào)　107
3.6.7　深色調(diào)　108
3.7　色彩的四種功能　108
3.7.1　主色　108
3.7.2　背景色　109
3.7.3　融合色　112
3.7.4　強調(diào)色　113
3.8　實用配色網(wǎng)站推薦　114
第4章　Fireworks圖像處理關(guān)鍵技術(shù)精講　117
4.1　Fireworks基本操作技巧集錦　118
4.2　矢量繪制關(guān)鍵技術(shù)　120
4.2.1　兩種方法繪制圓角矩形　120
4.2.2　防止對圓角矩形變形的時候圓角改變　121
4.2.3　巧妙消除路徑邊緣的鋸齒　122
4.2.4　多種方法繪制虛線　123
4.2.5　制作網(wǎng)頁效果圖中的清晰小字　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　圖像處理關(guān)鍵技術(shù)　134
4.3.1　蒙版的3種用途　134
4.3.2　選區(qū)和路徑的轉(zhuǎn)換　143
4.3.3　制作圖像條形碼效果　146
4.3.4　Fireworks中的外掛濾鏡　148
4.3.5　制作淡彩鋼筆畫效果　151
4.3.6　制作特殊的漸變色效果　153
4.3.7　制作網(wǎng)格化圖像效果　154
4.3.8　制作老照片效果　157
4.3.9　使用【曲線】命令校正圖像的色彩　158
4.3.10　使用【色階】命令調(diào)整圖像的色彩　165
第5章　Fireworks網(wǎng)頁制作關(guān)鍵技術(shù)精講　169
5.1　GIF動畫制作關(guān)鍵技術(shù)　170
5.1.1　使用Fireworks制作補間動畫　170
5.1.2　巧用“補間”技術(shù)作圖　171
5.1.3　巧做網(wǎng)頁LOGO中的光描動畫　174
5.2　Fireworks行為相關(guān)關(guān)鍵技術(shù)　176
5.2.1　使用Fireworks制作交互按鈕　176
5.2.2　使用Fireworks的行為實現(xiàn)圖像翻轉(zhuǎn)特效　179
5.2.3　把Fireworks中的交互效果添加到網(wǎng)頁中　183
5.3　切片和優(yōu)化的關(guān)鍵技術(shù)　187
5.3.1　在Fireworks中對圖像進行優(yōu)化　187
5.3.2　選擇合適的圖像優(yōu)化格式　188
5.3.3　巧妙去除GIF圖像周圍的白邊　192
5.3.4　導出效果圖切片　192
5.4　Fireworks效率工具問題集合　198
5.4.1　巧妙執(zhí)行重復的操作　198
5.4.2　對大量的圖像素材進行批量處理　201
第6章　網(wǎng)頁的LOGO設(shè)計　205
6.1　LOGO設(shè)計的基本構(gòu)成要素　206
6.1.1　LOGO中的線條 　206
6.1.2　LOGO中的形狀　208
6.1.3　用線條和形狀構(gòu)成 LOGO 　209
6.1.4　LOGO中的英文字體　210
6.1.5　LOGO中的中文字體　212
6.2　40種常用LOGO設(shè)計技巧　217
6.3　Web 2.0風格LOGO設(shè)計要素　226
6.4　實用LOGO設(shè)計網(wǎng)站推薦　228
6.5　LOGO設(shè)計案例分析　229
第7章　網(wǎng)頁的導航設(shè)計　233
7.1　網(wǎng)站的欄目構(gòu)成　234
7.2　導航的視覺設(shè)計　236
7.3　導航的交互設(shè)計　240
7.4　沒有“導航”的導航——搜索　241
第8章　網(wǎng)頁的通欄設(shè)計　243
8.1　網(wǎng)頁通欄概述　244
8.1.1　網(wǎng)頁中的通欄　244
8.1.2　網(wǎng)頁通欄的設(shè)計形式　246
8.1.3　網(wǎng)頁通欄的尺寸　247
8.2　圖像素材的選擇　247
8.2.1　說服力的強弱　248
8.2.2　內(nèi)容的相關(guān)度　250
8.2.3　發(fā)掘圖像背后的故事　251
8.2.4　色彩的層次　252
8.2.5　與眾不同　252
8.2.6　幽默詼諧　253
8.2.7　唯美主義　253
8.2.8　戲劇化　254
8.2.9　強調(diào)臉部　254
8.3　圖像裁剪的技巧　256
8.3.1　將圖像轉(zhuǎn)化為相同的尺寸　256
8.3.2　制作不同比例的圖像 　257
8.3.3　統(tǒng)一人物肖像的尺寸　257
8.3.4　對人物肖像進行裁剪　258
8.3.5　裁剪掉無關(guān)的部分　260
8.3.6　調(diào)整圖像的角度　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　圖像設(shè)計的技巧　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　通欄廣告的設(shè)計技巧　279
8.5.1　選擇合適的素材　279
8.5.2　環(huán)境背景設(shè)計　280
8.5.3　產(chǎn)品的展示　281
8.5.4　字體的選擇和設(shè)計　282
第9章　簡單風格的小型網(wǎng)站設(shè)計　285
9.1　案例分析　286
9.1.1　頁面布局形式　286
9.1.2　添加文字和圖像　289
9.2　案例實現(xiàn)　293
9.2.1　制作效果圖　293
9.2.2　切片、優(yōu)化和導出　296
9.2.3　布局頁面　299
第10章　標準型網(wǎng)站設(shè)計　311
10.1　案例分析　313
10.1.1　頁面布局形式　313
10.1.2　頁眉的設(shè)計　314
10.1.3　通欄的設(shè)計　316
10.1.4　內(nèi)容區(qū)域的設(shè)計　318
10.1.5　頁腳的設(shè)計　319
10.1.6　字體的選擇　320
10.2　案例分析　320
10.2.1　制作結(jié)構(gòu)底圖　320
10.2.2　頁眉設(shè)計　324
10.2.3　通欄設(shè)計　325
10.2.4　制作內(nèi)容區(qū)域　327
10.2.5　制作頁腳　328
10.2.6　切片、優(yōu)化和導出　330
10.2.7　布局頁面　334