网页美工设计基础教程

1 网页设计理论 001
1.1　网页设计概念 003
1.2　网页的设计标准 004
1.2.1　网页尺寸 004
1.2.2　网页字体 005
1.2.3　网页色彩 005
1.3　网页设计的八大法则 009
1.3.1　比例法则 010
1.3.2　对称法则 010
1.3.3　不对称法则 011
1.3.4　和谐法则 011
1.3.5　统一法则 011
1.3.6　平衡法则 012
1.3.7　反复法则 012
1.3.8　渐变法则 013
1.4　网页设计的四大原则 013
1.4.1　目的性原则 014
1.4.2　内涵性原则 015
1.4.3　个性化原则 015
1.4.4　艺术性原则 016
1.5　网页设计的点线面 016
1.5.1　点 017
1.5.2　线 018
1.5.3　面 019

2 网页设计的基础知识 021
2.1　网页色彩 023
2.1.1　色相、明度、纯度 023
2.1.2　主色、辅助色、点缀色 024
2.1.3　邻近色、对比色 026
2.1.4　色彩与面积 027
2.1.5　色彩混合 027
2.1.6　色彩与网页设计的关系 029
2.2　网页设计的元素 030
2.2.1　网页的规格 030
2.2.2　网页的LOGO 031
2.2.3　顶部通栏 032
2.2.4　网页文本 032
2.2.5　图像 033

3 网页设计基础色 035
3.1　红 037
3.1.1　浅谈红色 037
3.1.2　应用实例 038
3.1.3　常见色分析 038
3.1.4　优秀作品赏析 039
3.2　橙 039
3.2.1　浅谈橙色 039
3.2.2　应用实例 040
3.2.3　常见色分析 040
3.2.4　优秀作品赏析 041
3.3　黄 042
3.3.1　浅谈黄色 042
3.3.2　应用实例 043
3.3.3　常见色分析 043
3.3.4　优秀作品赏析 044
3.4　绿 044
3.4.1　浅谈绿色 044
3.4.2　应用实例 045
3.4.3　常见色分析 045
3.4.4　优秀作品赏析 046
3.5　青 046
3.5.1　浅谈青色 046
3.5.2　应用实例 047
3.5.3　常见色分析 048
3.5.4　优秀作品赏析 048
3.6　蓝 049
3.6.1　浅谈蓝色 049
3.6.2　应用实例 050
3.6.3　常见色分析 050
3.6.4　优秀作品赏析 051
3.7　紫 052
3.7.1　浅谈紫色 052
3.7.2　应用实例 053
3.7.3　常见色分析 053
3.7.4　优秀作品赏析 054
3.8　黑 054
3.8.1　浅谈黑色 054
3.8.2　应用实例 055
3.8.3　优秀作品赏析 055
3.9　白 056
3.9.1　浅谈白色 056
3.9.2　应用实例 057
3.9.3　优秀作品赏析 057
3.10　灰 058
3.10.1　浅谈灰色 058
3.10.2　应用实例 059
3.10.3　优秀作品赏析 059

4 网页设计的界面布局方法 063
4.1　骨骼型 065
4.1.1　手把手教你——骨骼型网页设计方法 065
4.1.2　骨骼型网页设计方案 066
4.1.3　骨骼型网页设计 067
4.1.4　骨骼型网页设计小妙招——稍显错落的排版打破呆板 068
4.1.5　优秀作品赏析 068
4.2　满版型 069
4.2.1　手把手教你——满版型网页设计方法 069
4.2.2　满版型网页设计方案 070
4.2.3　满版型网页设计 071
4.2.4　满版型网页设计小妙招——实物与虚景的不同妙处 072
4.2.5　优秀作品赏析 072
4.3　分割型 073
4.3.1　手把手教你——分割型网页设计方法 073
4.3.2　分割型网页设计方案 074
4.3.3　分割型网页设计 075
4.3.4　分割型网页设计小妙招——纵向分割 076
4.3.5　优秀作品赏析 076
4.4　中轴型 077
4.4.1　手把手教你——中轴型网页设计方法 077
4.4.2　中轴型网页设计方案 078
4.4.3　中轴型网页设计 079
4.4.4　中轴型网页设计小妙招——色彩的沉着感 080
4.4.5　优秀作品赏析 080
4.5　曲线型 081
4.5.1　手把手教你——曲线型网页设计方法 081
4.5.2　曲线型网页设计方案 082
4.5.3　曲线型网页设计 083
4.5.4　曲线型网页设计小妙招——不同的线条与色彩 084
4.5.5　优秀作品赏析 084
4.6　倾斜型 085
4.6.1　手把手教你——倾斜型网页设计方法 085
4.6.2　倾斜型网页设计方案 086
4.6.3　倾斜型网页设计 087
4.6.4　倾斜型网页设计小妙招——高明度与低明度的色彩 088
4.6.5　优秀作品赏析 088
4.7　对称型 089
4.7.1　手把手教你——对称型网页设计方法 089
4.7.2　对称型网页设计方案 090
4.7.3　对称型网页设计 091
4.7.4　对称型网页设计小妙招——同对称的形式 092
4.7.5　优秀作品赏析 092
4.8　焦点型 093
4.8.1　手把手教你——焦点型网页设计方法 093
4.8.2　焦点型网页设计方案 094
4.8.3　焦点型网页设计 095
4.8.4　焦点型网页设计小妙招——圆形的焦点设计 096
4.8.5　优秀作品赏析 096
4.9　三角型 097
4.9.1　手把手教你——三角型网页设计方法 097
4.9.2　三角型网页设计方案 098
4.9.3　三角型网页设计 099
4.9.4　三角型网页设计小妙招——绿色的清爽感 100
4.9.5　优秀作品赏析 100
4.10　自由型 101
4.10.1　手把手教你——自由型网页设计方法 101
4.10.2　自由型网页设计方案 102
4.10.3　自由型网页设计 103
4.10.4　自由型网页设计小妙招——耐人寻味的色彩 104
4.10.5　优秀作品赏析 105

5 网页设计的构成元素 107
5.1　导航 109
5.1.1　手把手教你——网页导航设计方法 109
5.1.2　网页导航设计方案 110
5.1.3　网页导航设计 111
5.1.4　网页导航设计小妙招——垂直导航 112
5.1.5　优秀作品赏析 112
5.2　banner 113
5.2.1　手把手教你——网页banner设计方法 113
5.2.2　网页banner设计方案 114
5.2.3　网页banner设计 115
5.2.4　网页banner设计小妙招——动感时尚的灰色图片 116
5.2.5　优秀作品赏析 116
5.3　模块 117
5.3.1　手把手教你——网页模块设计方法 117
5.3.2　网页模块设计方案 118
5.3.3　网页模块设计 119
5.3.4　网页模块设计小妙招——几何形状 120
5.3.5　优秀作品赏析 120
5.4　文字 121
5.4.1　手把手教你——网页文字设计方法 121
5.4.2　网页文字设计方案 122
5.4.3　网页文字设计 123
5.4.4　网页文字设计小妙招——增加标题文字字号，增加文字对比 124
5.4.5　优秀作品赏析 125

6 不同行业的网页色彩搭配 127
6.1　食品类 129
6.1.1　手把手教你——食品类网页设计方法 129
6.1.2　食品类网页设计方案 130
6.1.3　食品类网页设计 131
6.1.4　食品类网页设计小妙招——通过颜色让画面变得“更好吃” 132
6.1.5　优秀作品赏析 132
6.2　服装类 133
6.2.1　手把手教你——服装类网页设计方法 133
6.2.2　服装类网页设计方案 134
6.2.3　服装类网页设计 135
6.2.4　服装类网页设计小妙招——网页的版式设计 136
6.2.5　优秀作品赏析 136
6.3　企业类 137
6.3.1　手把手教你——企业类网页设计方法 137
6.3.2　企业类网页设计方案 138
6.3.3　企业类网页设计 139
6.3.4　企业类网页设计小妙招——富饶与简易的对比 140
6.3.5　优秀作品赏析 140
6.4　美妆类 141
6.4.1　手把手教你——美妆类网页设计方法 141
6.4.2　美妆类网页设计方案 142
6.4.3　美妆类网页设计 143
6.4.4　美妆类网页设计小妙招——黑色对称版式 144
6.4.5　优秀作品赏析 144
6.5　数码类 145
6.5.1　手把手教你——数码类网页设计方法 145
6.5.2　数码类网页设计方案 146
6.5.3　数码类网页设计 147
6.5.4　数码类网页设计小妙招——绘画的插入 148
6.5.5　优秀作品赏析 148
6.6　文娱类 149
6.6.1　手把手教你——文娱类网页设计方法 149
6.6.2　文娱类网页设计方案 150
6.6.3　文娱类网页设计 151
6.6.4　文娱类网页设计小妙招——简洁的分割手法 152
6.6.5　优秀作品赏析 152
6.7　家居类 153
6.7.1　手把手教你——家居类网页设计方法 153
6.7.2　家居类网页设计方案 154
6.7.3　家居类网页设计 155
6.7.4　家居类网页设计小妙招——清爽的视觉 156
6.7.5　优秀作品赏析 156
6.8　汽车类 157
6.8.1　手把手教你——汽车类网页设计方法 157
6.8.2　汽车类网页设计方案 158
6.8.3　汽车类网页设计 159
6.8.4　汽车类网页设计小妙招——深色调体现高端定位 160
6.8.5　优秀作品赏析 160
6.9　旅游类 161
6.9.1　手把手教你——旅游类网页设计方法 161
6.9.2　旅游类网页设计方案 162
6.9.3　旅游类网页设计 163
6.9.4　旅游类网页设计小妙招——通过高清大图吸引访客 164
6.9.5　优秀作品赏析 164
6.10　创意类 165
6.10.1　手把手教你——创意类网页设计方法 165
6.10.2　创意类网页设计方案 166
6.10.3　创意类网页设计 167
6.10.4　创意类网页设计小妙招——动画的趣味性 168
6.10.5　优秀作品赏析 169

7 网页色彩的情感 171
7.1　美味 173
7.1.1　手把手教你——美味网页设计方法 173
7.1.2　美味网页设计方案 174
7.1.3　美味网页设计 175
7.1.4　美味网页设计小妙招——暗色背景的使用 176
7.1.5　优秀作品赏析 176
7.2　清新 177
7.2.1　手把手教你——清新网页设计方法 177
7.2.2　清新网页设计方案 178
7.2.3　清新网页设计 179
7.2.4　清新网页设计小妙招——带有灰度的颜色 180
7.2.5　优秀作品赏析 180
7.3　温暖 181
7.3.1　手把手教你——温暖网页设计方法 181
7.3.2　温暖网页设计方案 182
7.3.3　温暖网页设计 183
7.3.4　温暖网页设计小妙招——暖系灯光 184
7.3.5　优秀作品赏析 184
7.4　凉爽 185
7.4.1　手把手教你——凉爽网页设计方法 185
7.4.2　凉爽网页设计方案 186
7.4.3　凉爽网页设计 187
7.4.4　凉爽网页设计小妙招——巧用蓝色背景 188
7.4.5　优秀作品赏析 188
7.5　饱满 189
7.5.1　手把手教你——饱满网页设计方法 189
7.5.2　饱满网页设计方案 190
7.5.3　饱满网页设计 191
7.5.4　饱满网页设计小妙招——运用饱和度较高的色彩 192
7.5.5　优秀作品赏析 192
7.6　时尚 193
7.6.1　手把手教你——时尚网页设计方法 193
7.6.2　时尚网页设计方案 194
7.6.3　时尚网页设计 195
7.6.4　时尚网页设计小妙招——用黄色点缀暗系背景 196
7.6.5　优秀作品赏析 196
7.7　神秘 197
7.7.1　手把手教你——神秘网页设计方法 197
7.7.2　神秘网页设计方案 198
7.7.3　神秘网页设计 199
7.7.4　神秘网页设计小妙招——合理运用黑色背景 200
7.7.5　优秀作品赏析 200
7.8　喧闹 201
7.8.1　手把手教你——喧闹网页设计方法 201
7.8.2　喧闹网页设计方案 202
7.8.3　喧闹网页设计 203
7.8.4　喧闹网页设计小妙招——多种颜色的搭配 204
7.8.5　优秀作品赏析 204
7.9　科技 205
7.9.1　科技感网页设计的搭配特征 205
7.9.2　科技感网页设计方案，举一反三 206
7.9.3　神秘悠扬的科技感色彩搭配 207
7.9.4　设计巧妙的科技感色彩搭配 208
7.9.5　科技感网页设计小妙招 208
7.9.6　优秀作品赏析 210
7.10　专业 210
7.10.1　专业感网页设计的搭配特征 210
7.10.2　专业感网页设计方案，举一反三 211
7.10.3　清爽简洁的专业感色彩搭配 212
7.10.4　现代化的专业感色彩搭配 213
7.10.5　专业感网页设计小妙招 213
7.10.6　优秀作品赏析 215

8 网页配色实战 217
8.1　简约风格网页设计 218
8.2　矢量风格图像装饰 222