網(wǎng)頁美工設計基礎教程

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