好不容易找了一堆免费素材，往个人网页上一放，却像堆杂货铺 —— 颜色乱、风格杂，看着特别别扭？小编第一次做个人博客时就这样，图片、图标堆了一堆，朋友说 “像拼贴画”。其实素材搭配有技巧，处理工具也不用复杂的，今天就教新手怎么搭素材、用什么工具处理，看完就能让网页变清爽，一起往下看吧！
一、先搞懂：素材搭得好，网页才好看
为啥有的网页素材多却不乱？因为有 “统一感”。就像穿衣服，全身颜色不超过 3 种才协调，素材搭配也是一个道理。
有新手问：“我就想多用点喜欢的素材，不行吗？” 也不是不行，但容易让访客找不到重点。小编后来把素材减到原来的一半，只留和内容相关的，网页反而看着舒服多了。
二、不同场景素材搭配方法（附案例）
| 网页类型 | 核心素材 | 搭配原则 | 例子 |
|---|---|---|---|
| 个人博客 | 简约图片、小图标 | 清新为主，颜色不超过 2 种 | 浅灰背景 + 蓝色图标 |
| 作品集网页 | 作品截图、简约文字 | 突出作品，少用装饰素材 | 白色背景 + 作品图 |
| 个人简历网页 | 头像、技能图标 | 简洁明了，不用复杂模板 | 浅棕背景 + 黑色文字 |
- 个人博客：清新风格
选浅色系背景（米白、浅灰），配图用插画或简约摄影图，图标用线条款。小编的博客用了浅灰背景，配绿色小图标，朋友说 “看着很舒服，想继续往下翻”。
别用太鲜艳的颜色，比如大红色、亮黄色，容易让人视觉疲劳。之前试过亮黄色背景，自己看着都眼花，赶紧换了。
—— 分割线 ——
- 作品集网页：突出作品
背景用纯白或浅灰，别用花纹多的图，不然会抢作品的风头。作品截图周围留空白，像给画装画框，看着更专业。
小编帮学设计的朋友做网页时，把作品图统一调成 “圆角”，再配黑色文字说明，比原来方方正正的看着协调多了。
三、素材处理工具：新手用这 3 个就够了
不用学 PS，这几个工具简单到打开就会用：
- 美图秀秀（处理图片）
裁剪图片、调亮度都能用。想让图片风格统一，就用 “滤镜”—— 选一个滤镜，把所有图片都套一遍，颜色马上协调。小编给博客配图都用 “小清晰” 滤镜，看着很统一。
- 压缩图（减小图片大小）
素材太大，网页加载会慢。把图片拖进这个网站，点 “压缩”，能变小一半还不模糊。之前传 3MB 的图要加载 5 秒，压缩后 1MB，2 秒就出来了。 - 阿里图标库（改图标样式）
下载的图标颜色不搭？在库里找到图标后，点 “编辑”，改成和网页一致的颜色。小编把所有图标都改成浅蓝色，和背景很配。
有新手问：“这些工具要下载吗？” 不用，网页版就能用，打开直接操作，特别方便。
四、搭配时最容易踩的坑，这样避开
- 素材风格不统一
比如用了卡通图标，又搭写实照片，看着像两个网页拼的。解决办法：选同一风格的素材 —— 要么都用插画，要么都用摄影图。
小编之前混用了卡通和写实素材，后来全换成插画，风格马上统一了。
—— 分割线 ——
- 素材太多太满
有的新手觉得 “空着不好看”，到处都塞素材。其实留白很重要，比如图片周围留空白，文字和图片之间隔开一点。
有个朋友的网页，文字旁边全是小图标，看着乱，删掉一半后，反而清楚多了。
—— 分割线 ——
- 颜色对比太强
红配绿、黄配紫这种高对比颜色，看着刺眼。选颜色时，用 “邻近色”（比如蓝和绿、黄和橙），或者 “黑白灰 + 一种彩色”。
小编的网页用了 “白 + 浅灰 + 浅蓝”，朋友说 “看着不费劲”。
五、小编的一点小经验
刚开始不用追求完美，先搭出基本框架，再慢慢调。素材不用找太多，每种类型找 3-5 个够用就行。处理图片时，记得先保存原图，万一改坏了还能重来。
其实素材搭配就像整理房间，不是东西越多越好，摆得整齐、用着方便才重要。新手不用怕出错，多试几次就有感觉了 —— 小编也是改了 3 次，才找到自己喜欢的风格。希望这些方法能帮你做出好看的个人网页！
