今天咱来聊聊网页美工设计这事儿，作为一个老网虫，我可是踩过不少坑，也攒点经验，今天就来跟大家分享分享我的实践过程。

摸索阶段

我对网页设计一窍不通，就知道瞎捣鼓。那时候，我连 HTML 是啥都不知道，更别提什么 CSS、JavaScript 。我就记得我当时找个免费的网页模板，然后就开始往里面填内容，改颜色，换图片。那叫一个乱，各种颜色乱飞，字体大小不一，图片变形，简直惨不忍睹。

开始学习

后来我意识到这样不行，得学点真本事。于是我就开始在网上找教程，看视频，啃书本。我得把 HTML 这玩意儿弄明白，这可是网页的骨架！

学 HTML 的过程，就是学各种标签，比如：

• <p> 标签用来分段。
• <strong> 标签用来加粗字体。
• <ul> 和 <li> 标签用来做列表。

等等......

掌握 HTML 之后，我发现光有骨架不行，还得有皮囊！于是我又开始学习 CSS。CSS 这东西，就是给网页化妆的，可以让网页变得漂亮起来。我学着给文字换颜色，调整字体大小，设置背景图片，等等。

图片处理

网页设计，图片是少不的。刚开始，我直接把网上的图片拿来就用，结果发现，要么图片太大，网页加载慢；要么图片太小，显示不清楚；要么图片颜色和网页风格不搭，看着别扭。没办法，我只好硬着头皮学起图片处理。

我用的最多的就是 Photoshop（简称 PS），这玩意儿功能强大，但也真够复杂的。我从最基本的抠图、调整大小、修改颜色开始学起。 后来接触到矢量图，才明白这玩意的强大，怎么放都不会失真！

当时也解常见的图片格式：

• BMP: 这家伙不压缩，文件老大，我基本不用。
• PNG: fireworks的格式，现在也不怎么用。
• GIF: 适合做小动画，颜色少的图片用它不错。
• JPG: 色彩丰富的照片，用它准没错，压缩后文件小，加载快。

然后又发现，作图有很多种，AI，CDR等等。后来才知道，这些都是矢量图，放大缩小都不会失真，用来做 LOGO、图标啥的，再合适不过！

色彩搭配

图片处理得差不多，我又发现，网页的颜色搭配也是个大问题。红配绿，赛狗屁，这话可不是白说的。我开始研究各种配色方案，什么红黄蓝，黑白灰，冷色调，暖色调，对比色，互补色……

刚开始学的时候，解到颜色模式有两种， RGB和CMYK。RGB用在显示器，CMYK用在印刷。我那时候主要是做网页，就只管RGB。

我发现，网页配色，最重要的是对比度。对比度要足够大，才能让文字清晰可见，不然用户看起来多费劲！

字体选择

我还研究一下字体。不同的字体，给人的感觉是不一样的。宋体庄重，黑体醒目，微软雅黑时尚……我试着在不同的网页上使用不同的字体，看看效果如何。

刚开始设计的时候，我比较保守，不知道用啥字体的时候，就用微软雅黑，基本不会出错！

实践出真知

学这么多，最终还是得靠实践。我开始尝试自己设计一些简单的网页，从模仿别人的作品开始，逐渐加入自己的想法。在这个过程中，我不断地遇到问题，解决问题，然后再遇到新的问题……

网页美工设计这事儿，不是一朝一夕就能学会的。它需要不断地学习，不断地实践，不断地希望我今天的分享，能给大家带来一点帮助。当然也希望大家少走一些弯路，少踩一些坑！