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

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