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

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