網(wǎng)頁美工設(shè)計基礎(chǔ)教程

1 網(wǎng)頁設(shè)計理論 001
1．1　網(wǎng)頁設(shè)計概念 003
1．2　網(wǎng)頁的設(shè)計標準 004
1．2．1　網(wǎng)頁尺寸 004
1．2．2　網(wǎng)頁字體 005
1．2．3　網(wǎng)頁色彩 005
1．3　網(wǎng)頁設(shè)計的八大法則 009
1．3．1　比例法則 010
1．3．2　對稱法則 010
1．3．3　不對稱法則 011
1．3．4　和諧法則 011
1．3．5　統(tǒng)一法則 011
1．3．6　平衡法則 012
1．3．7　反復(fù)法則 012
1．3．8　漸變法則 013
1．4　網(wǎng)頁設(shè)計的四大原則 013
1．4．1　目的性原則 014
1．4．2　內(nèi)涵性原則 015
1．4．3　個性化原則 015
1．4．4　藝術(shù)性原則 016
1．5　網(wǎng)頁設(shè)計的點線面 016
1．5．1　點 017
1．5．2　線 018
1．5．3　面 019
2 網(wǎng)頁設(shè)計的基礎(chǔ)知識 021
2．1　網(wǎng)頁色彩 023
2．1．1　色相、明度、純度 023
2．1．2　主色、輔助色、點綴色 024
2．1．3　鄰近色、對比色 026
2．1．4　色彩與面積 027
2．1．5　色彩混合 027
2．1．6　色彩與網(wǎng)頁設(shè)計的關(guān)系 029
2．2　網(wǎng)頁設(shè)計的元素 030
2．2．1　網(wǎng)頁的規(guī)格 030
2．2．2　網(wǎng)頁的LOGO 031
2．2．3　頂部通欄 032
2．2．4　網(wǎng)頁文本 032
2．2．5　圖像 033
3 網(wǎng)頁設(shè)計基礎(chǔ)色 035
3．1　紅 037
3．1．1　淺談紅色 037
3．1．2　應(yīng)用實例 038
3．1．3　常見色分析 038
3．1．4　優(yōu)秀作品賞析 039
3．2　橙 039
3．2．1　淺談橙色 039
3．2．2　應(yīng)用實例 040
3．2．3　常見色分析 040
3．2．4　優(yōu)秀作品賞析 041
3．3　黃 042
3．3．1　淺談黃色 042
3．3．2　應(yīng)用實例 043
3．3．3　常見色分析 043
3．3．4　優(yōu)秀作品賞析 044
3．4　綠 044
3．4．1　淺談綠色 044
3．4．2　應(yīng)用實例 045
3．4．3　常見色分析 045
3．4．4　優(yōu)秀作品賞析 046
3．5　青 046
3．5．1　淺談青色 046
3．5．2　應(yīng)用實例 047
3．5．3　常見色分析 048
3．5．4　優(yōu)秀作品賞析 048
3．6　藍 049
3．6．1　淺談藍色 049
3．6．2　應(yīng)用實例 050
3．6．3　常見色分析 050
3．6．4　優(yōu)秀作品賞析 051
3．7　紫 052
3．7．1　淺談紫色 052
3．7．2　應(yīng)用實例 053
3．7．3　常見色分析 053
3．7．4　優(yōu)秀作品賞析 054
3．8　黑 054
3．8．1　淺談黑色 054
3．8．2　應(yīng)用實例 055
3．8．3　優(yōu)秀作品賞析 055
3．9　白 056
3．9．1　淺談白色 056
3．9．2　應(yīng)用實例 057
3．9．3　優(yōu)秀作品賞析 057
3．10　灰 058
3．10．1　淺談灰色 058
3．10．2　應(yīng)用實例 059
3．10．3　優(yōu)秀作品賞析 059
4 網(wǎng)頁設(shè)計的界面布局方法 063
4．1　骨骼型 065
4．1．1　手把手教你——骨骼型網(wǎng)頁設(shè)計方法 065
4．1．2　骨骼型網(wǎng)頁設(shè)計方案 066
4．1．3　骨骼型網(wǎng)頁設(shè)計 067
4．1．4　骨骼型網(wǎng)頁設(shè)計小妙招——稍顯錯落的排版打破呆板 068
4．1．5　優(yōu)秀作品賞析 068
4．2　滿版型 069
4．2．1　手把手教你——滿版型網(wǎng)頁設(shè)計方法 069
4．2．2　滿版型網(wǎng)頁設(shè)計方案 070
4．2．3　滿版型網(wǎng)頁設(shè)計 071
4．2．4　滿版型網(wǎng)頁設(shè)計小妙招——實物與虛景的不同妙處 072
4．2．5　優(yōu)秀作品賞析 072
4．3　分割型 073
4．3．1　手把手教你——分割型網(wǎng)頁設(shè)計方法 073
4．3．2　分割型網(wǎng)頁設(shè)計方案 074
4．3．3　分割型網(wǎng)頁設(shè)計 075
4．3．4　分割型網(wǎng)頁設(shè)計小妙招——縱向分割 076
4．3．5　優(yōu)秀作品賞析 076
4．4　中軸型 077
4．4．1　手把手教你——中軸型網(wǎng)頁設(shè)計方法 077
4．4．2　中軸型網(wǎng)頁設(shè)計方案 078
4．4．3　中軸型網(wǎng)頁設(shè)計 079
4．4．4　中軸型網(wǎng)頁設(shè)計小妙招——色彩的沉著感 080
4．4．5　優(yōu)秀作品賞析 080
4．5　曲線型 081
4．5．1　手把手教你——曲線型網(wǎng)頁設(shè)計方法 081
4．5．2　曲線型網(wǎng)頁設(shè)計方案 082
4．5．3　曲線型網(wǎng)頁設(shè)計 083
4．5．4　曲線型網(wǎng)頁設(shè)計小妙招——不同的線條與色彩 084
4．5．5　優(yōu)秀作品賞析 084
4．6　傾斜型 085
4．6．1　手把手教你——傾斜型網(wǎng)頁設(shè)計方法 085
4．6．2　傾斜型網(wǎng)頁設(shè)計方案 086
4．6．3　傾斜型網(wǎng)頁設(shè)計 087
4．6．4　傾斜型網(wǎng)頁設(shè)計小妙招——高明度與低明度的色彩 088
4．6．5　優(yōu)秀作品賞析 088
4．7　對稱型 089
4．7．1　手把手教你——對稱型網(wǎng)頁設(shè)計方法 089
4．7．2　對稱型網(wǎng)頁設(shè)計方案 090
4．7．3　對稱型網(wǎng)頁設(shè)計 091
4．7．4　對稱型網(wǎng)頁設(shè)計小妙招——同對稱的形式 092
4．7．5　優(yōu)秀作品賞析 092
4．8　焦點型 093
4．8．1　手把手教你——焦點型網(wǎng)頁設(shè)計方法 093
4．8．2　焦點型網(wǎng)頁設(shè)計方案 094
4．8．3　焦點型網(wǎng)頁設(shè)計 095
4．8．4　焦點型網(wǎng)頁設(shè)計小妙招——圓形的焦點設(shè)計 096
4．8．5　優(yōu)秀作品賞析 096
4．9　三角型 097
4．9．1　手把手教你——三角型網(wǎng)頁設(shè)計方法 097
4．9．2　三角型網(wǎng)頁設(shè)計方案 098
4．9．3　三角型網(wǎng)頁設(shè)計 099
4．9．4　三角型網(wǎng)頁設(shè)計小妙招——綠色的清爽感 100
4．9．5　優(yōu)秀作品賞析 100
4．10　自由型 101
4．10．1　手把手教你——自由型網(wǎng)頁設(shè)計方法 101
4．10．2　自由型網(wǎng)頁設(shè)計方案 102
4．10．3　自由型網(wǎng)頁設(shè)計 103
4．10．4　自由型網(wǎng)頁設(shè)計小妙招——耐人尋味的色彩 104
4．10．5　優(yōu)秀作品賞析 105
5 網(wǎng)頁設(shè)計的構(gòu)成元素 107
5．1　導(dǎo)航 109
5．1．1　手把手教你——網(wǎng)頁導(dǎo)航設(shè)計方法 109
5．1．2　網(wǎng)頁導(dǎo)航設(shè)計方案 110
5．1．3　網(wǎng)頁導(dǎo)航設(shè)計 111
5．1．4　網(wǎng)頁導(dǎo)航設(shè)計小妙招——垂直導(dǎo)航 112
5．1．5　優(yōu)秀作品賞析 112
5．2　banner 113
5．2．1　手把手教你——網(wǎng)頁banner設(shè)計方法 113
5．2．2　網(wǎng)頁banner設(shè)計方案 114
5．2．3　網(wǎng)頁banner設(shè)計 115
5．2．4　網(wǎng)頁banner設(shè)計小妙招——動感時尚的灰色圖片 116
5．2．5　優(yōu)秀作品賞析 116
5．3　模塊 117
5．3．1　手把手教你——網(wǎng)頁模塊設(shè)計方法 117
5．3．2　網(wǎng)頁模塊設(shè)計方案 118
5．3．3　網(wǎng)頁模塊設(shè)計 119
5．3．4　網(wǎng)頁模塊設(shè)計小妙招——幾何形狀 120
5．3．5　優(yōu)秀作品賞析 120
5．4　文字 121
5．4．1　手把手教你——網(wǎng)頁文字設(shè)計方法 121
5．4．2　網(wǎng)頁文字設(shè)計方案 122
5．4．3　網(wǎng)頁文字設(shè)計 123
5．4．4　網(wǎng)頁文字設(shè)計小妙招——增加標題文字字號，增加文字對比 124
5．4．5　優(yōu)秀作品賞析 125
6 不同行業(yè)的網(wǎng)頁色彩搭配 127
6．1　食品類 129
6．1．1　手把手教你——食品類網(wǎng)頁設(shè)計方法 129
6．1．2　食品類網(wǎng)頁設(shè)計方案 130
6．1．3　食品類網(wǎng)頁設(shè)計 131
6．1．4　食品類網(wǎng)頁設(shè)計小妙招——通過顏色讓畫面變得“更好吃” 132
6．1．5　優(yōu)秀作品賞析 132
6．2　服裝類 133
6．2．1　手把手教你——服裝類網(wǎng)頁設(shè)計方法 133
6．2．2　服裝類網(wǎng)頁設(shè)計方案 134
6．2．3　服裝類網(wǎng)頁設(shè)計 135
6．2．4　服裝類網(wǎng)頁設(shè)計小妙招——網(wǎng)頁的版式設(shè)計 136
6．2．5　優(yōu)秀作品賞析 136
6．3　企業(yè)類 137
6．3．1　手把手教你——企業(yè)類網(wǎng)頁設(shè)計方法 137
6．3．2　企業(yè)類網(wǎng)頁設(shè)計方案 138
6．3．3　企業(yè)類網(wǎng)頁設(shè)計 139
6．3．4　企業(yè)類網(wǎng)頁設(shè)計小妙招——富饒與簡易的對比 140
6．3．5　優(yōu)秀作品賞析 140
6．4　美妝類 141
6．4．1　手把手教你——美妝類網(wǎng)頁設(shè)計方法 141
6．4．2　美妝類網(wǎng)頁設(shè)計方案 142
6．4．3　美妝類網(wǎng)頁設(shè)計 143
6．4．4　美妝類網(wǎng)頁設(shè)計小妙招——黑色對稱版式 144
6．4．5　優(yōu)秀作品賞析 144
6．5　數(shù)碼類 145
6．5．1　手把手教你——數(shù)碼類網(wǎng)頁設(shè)計方法 145
6．5．2　數(shù)碼類網(wǎng)頁設(shè)計方案 146
6．5．3　數(shù)碼類網(wǎng)頁設(shè)計 147
6．5．4　數(shù)碼類網(wǎng)頁設(shè)計小妙招——繪畫的插入 148
6．5．5　優(yōu)秀作品賞析 148
6．6　文娛類 149
6．6．1　手把手教你——文娛類網(wǎng)頁設(shè)計方法 149
6．6．2　文娛類網(wǎng)頁設(shè)計方案 150
6．6．3　文娛類網(wǎng)頁設(shè)計 151
6．6．4　文娛類網(wǎng)頁設(shè)計小妙招——簡潔的分割手法 152
6．6．5　優(yōu)秀作品賞析 152
6．7　家居類 153
6．7．1　手把手教你——家居類網(wǎng)頁設(shè)計方法 153
6．7．2　家居類網(wǎng)頁設(shè)計方案 154
6．7．3　家居類網(wǎng)頁設(shè)計 155
6．7．4　家居類網(wǎng)頁設(shè)計小妙招——清爽的視覺 156
6．7．5　優(yōu)秀作品賞析 156
6．8　汽車類 157
6．8．1　手把手教你——汽車類網(wǎng)頁設(shè)計方法 157
6．8．2　汽車類網(wǎng)頁設(shè)計方案 158
6．8．3　汽車類網(wǎng)頁設(shè)計 159
6．8．4　汽車類網(wǎng)頁設(shè)計小妙招——深色調(diào)體現(xiàn)高端定位 160
6．8．5　優(yōu)秀作品賞析 160
6．9　旅游類 161
6．9．1　手把手教你——旅游類網(wǎng)頁設(shè)計方法 161
6．9．2　旅游類網(wǎng)頁設(shè)計方案 162
6．9．3　旅游類網(wǎng)頁設(shè)計 163
6．9．4　旅游類網(wǎng)頁設(shè)計小妙招——通過高清大圖吸引訪客 164
6．9．5　優(yōu)秀作品賞析 164
6．10　創(chuàng)意類 165
6．10．1　手把手教你——創(chuàng)意類網(wǎng)頁設(shè)計方法 165
6．10．2　創(chuàng)意類網(wǎng)頁設(shè)計方案 166
6．10．3　創(chuàng)意類網(wǎng)頁設(shè)計 167
6．10．4　創(chuàng)意類網(wǎng)頁設(shè)計小妙招——動畫的趣味性 168
6．10．5　優(yōu)秀作品賞析 169
7 網(wǎng)頁色彩的情感 171
7．1　美味 173
7．1．1　手把手教你——美味網(wǎng)頁設(shè)計方法 173
7．1．2　美味網(wǎng)頁設(shè)計方案 174
7．1．3　美味網(wǎng)頁設(shè)計 175
7．1．4　美味網(wǎng)頁設(shè)計小妙招——暗色背景的使用 176
7．1．5　優(yōu)秀作品賞析 176
7．2　清新 177
7．2．1　手把手教你——清新網(wǎng)頁設(shè)計方法 177
7．2．2　清新網(wǎng)頁設(shè)計方案 178
7．2．3　清新網(wǎng)頁設(shè)計 179
7．2．4　清新網(wǎng)頁設(shè)計小妙招——帶有灰度的顏色 180
7．2．5　優(yōu)秀作品賞析 180
7．3　溫暖 181
7．3．1　手把手教你——溫暖網(wǎng)頁設(shè)計方法 181
7．3．2　溫暖網(wǎng)頁設(shè)計方案 182
7．3．3　溫暖網(wǎng)頁設(shè)計 183
7．3．4　溫暖網(wǎng)頁設(shè)計小妙招——暖系燈光 184
7．3．5　優(yōu)秀作品賞析 184
7．4　涼爽 185
7．4．1　手把手教你——涼爽網(wǎng)頁設(shè)計方法 185
7．4．2　涼爽網(wǎng)頁設(shè)計方案 186
7．4．3　涼爽網(wǎng)頁設(shè)計 187
7．4．4　涼爽網(wǎng)頁設(shè)計小妙招——巧用藍色背景 188
7．4．5　優(yōu)秀作品賞析 188
7．5　飽滿 189
7．5．1　手把手教你——飽滿網(wǎng)頁設(shè)計方法 189
7．5．2　飽滿網(wǎng)頁設(shè)計方案 190
7．5．3　飽滿網(wǎng)頁設(shè)計 191
7．5．4　飽滿網(wǎng)頁設(shè)計小妙招——運用飽和度較高的色彩 192
7．5．5　優(yōu)秀作品賞析 192
7．6　時尚 193
7．6．1　手把手教你——時尚網(wǎng)頁設(shè)計方法 193
7．6．2　時尚網(wǎng)頁設(shè)計方案 194
7．6．3　時尚網(wǎng)頁設(shè)計 195
7．6．4　時尚網(wǎng)頁設(shè)計小妙招——用黃色點綴暗系背景 196
7．6．5　優(yōu)秀作品賞析 196
7．7　神秘 197
7．7．1　手把手教你——神秘網(wǎng)頁設(shè)計方法 197
7．7．2　神秘網(wǎng)頁設(shè)計方案 198
7．7．3　神秘網(wǎng)頁設(shè)計 199
7．7．4　神秘網(wǎng)頁設(shè)計小妙招——合理運用黑色背景 200
7．7．5　優(yōu)秀作品賞析 200
7．8　喧鬧 201
7．8．1　手把手教你——喧鬧網(wǎng)頁設(shè)計方法 201
7．8．2　喧鬧網(wǎng)頁設(shè)計方案 202
7．8．3　喧鬧網(wǎng)頁設(shè)計 203
7．8．4　喧鬧網(wǎng)頁設(shè)計小妙招——多種顏色的搭配 204
7．8．5　優(yōu)秀作品賞析 204
7．9　科技 205
7．9．1　科技感網(wǎng)頁設(shè)計的搭配特征 205
7．9．2　科技感網(wǎng)頁設(shè)計方案，舉一反三 206
7．9．3　神秘悠揚的科技感色彩搭配 207
7．9．4　設(shè)計巧妙的科技感色彩搭配 208
7．9．5　科技感網(wǎng)頁設(shè)計小妙招 208
7．9．6　優(yōu)秀作品賞析 210
7．10　專業(yè) 210
7．10．1　專業(yè)感網(wǎng)頁設(shè)計的搭配特征 210
7．10．2　專業(yè)感網(wǎng)頁設(shè)計方案，舉一反三 211
7．10．3　清爽簡潔的專業(yè)感色彩搭配 212
7．10．4　現(xiàn)代化的專業(yè)感色彩搭配 213
7．10．5　專業(yè)感網(wǎng)頁設(shè)計小妙招 213
7．10．6　優(yōu)秀作品賞析 215
8 網(wǎng)頁配色實戰(zhàn) 217
8．1　簡約風格網(wǎng)頁設(shè)計 218
8．2　矢量風格圖像裝飾 222