第三章 美工知识

1. 第三章 美工知识 主讲：刘清梅

2. 目录 美工基础——网页配色 • 色彩对网页的影响 • 网页配色常见问题 • 网页色彩基础 • 网页色彩的构成

3. 色彩对网页的影响 • 网页配色是网页设计中的关键 • 不同的色彩搭配会给人不同的心理感受 • 好的色彩搭配能够在瞬间吸引浏览者的目光，给浏览者美感和愉悦感，从而轻松阅览网页

4. 网页配色常见的问题 • 色彩杂乱，没有规律 • 色彩明度和纯度单一，没有层次 • 色彩的面积比例不协调

5. 色彩的基础知识 料 光 光的折射产生色彩 原色、间色、复色

6. 色彩的基础知识 • HSB • H：色相，色彩的相貌 • S：纯度 • B：明度 • RGB • CMYK 彩色 无彩色

7. 色彩的基础知识 • 网页制作用彩色好呢？还是非彩色好呢？ 经研究表明 彩色的记忆效果是黑白的3.5倍 也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人

8. 色彩的基础知识

9. 色彩的基础知识 基本色相及色相推移 明度与纯度的变换

10. 色彩的心里感受

11. 色彩的心里感受 • 红色 • 暖色调，是一种激奋的色彩 • 能使人产生冲动，愤怒，热情，活力

12. 色彩的心里感受 • 绿色 • 介于冷暖两种色彩的中间，是中性色调 • 显得和睦，宁静，健康，安全的感觉

13. 色彩的心里感受 • 蓝色 • 冷色调，是最具凉爽，清新，专业的色彩 • 和白色混合，能体现柔顺，淡雅，浪漫气氛(象天空） • 和黑色混合，能体现出专业、严肃、庄重、正规

14. 色彩的心里感受 白色---具有洁白，明快，纯真，清洁的感受。 黑色---具有深沉，神秘，寂静，悲哀，压抑的感受。

15. 色彩的心里感受 • 灰色 • 具有中庸，平凡，温和，谦让，中立和高雅的感觉

16. 色彩的心里感受 同一色相不同饱和度或明度也会产生不同的心里感受 黄绿色——青春、旺盛 蓝绿——幽宁，阴深

17. 网页色彩构成 色相环及其中的同类色、类似色、互补色

18. 网页色彩构成 • 同类色相构成 • 在色相环上的距离角度在5度以内的色相 • 如红色与橙红色、黄色与黄绿色、蓝色与蓝紫色。

19. 网页色彩构成 • 类似色相构成 • 60度以内，和谐、安详、耐看可通过变化明度、纯度加强对比。如红色与橙色、蓝色与绿色、蓝色与紫色

20. 网页色彩构成 • 对比色相构成 • 120度左右，对比强烈、鲜明、饱满、华丽、活跃

21. 网页色彩构成 • 互补色相构成 • 180度左右，为最强色相对比。

22. 网页色彩构成 • 无彩色构成 • (1)黑白：对比强烈、分明、眩目、刺激，具有阴阳互补效果 • (2)黑灰：深沉、模糊，具有神秘感 • (3)灰白：轻飘、软弱，具有暧昧感 • (4)黑灰白：如果等级间隔适当，最具层次感和明快感

23. 网页色彩构成 无彩色为主、点缀有彩色构成 无彩色与任何有彩色搭配都能取得调和感很强的。

25. 网页色彩使用中面的对比 面积对比 指各种色彩在画面中所占的面积比例变化和差别引起的色相、明度、纯度、冷暖等方面的对比。

26. 网页色彩使用中面的对比 相同色彩的面积对比： 面积相同，对比效果弱

27. 网页色彩使用中面的对比 相同色彩的面积对比： 面积差别越大，对比效果越强

28. 网页色彩使用中面的对比 不同色彩的面积对比： 两色面积相差不多，对比相对强烈

29. 网页色彩使用中面的对比 不同色彩的面积对比： 面积差别越大，对比效果越弱，大面积会对面积较小的起到烘托或者融合的作用。

30. 网页色彩使用中面的对比 • 补色面积的对比与平衡 • 色彩的力量均衡取决于两种因素：明度和面积 • 为了保持均衡，补色的面积比应与明度比成反比关系

31. 网页色彩使用中面的对比 橙：蓝=4：8=1：2=1/3：2/3

32. 网页中色彩的调和 对比——寻求差别 调和——寻求关联 认识色彩变化的手段 解决色彩问题的关键 通过明度、纯度、面积的对比，在不同颜色间寻求调和点 调和 • 色彩搭配在一起，既不过分刺激，也不过分平板。 • 看起来“舒服不舒服？”

33. 谢 谢