版式设计课件 项目6 版式设计中的色彩

项目6版式设计中的色彩版式设计CONTENTS6.1色彩概述6.2色彩搭配6.3色彩对比6.4任务实践6.1.1色彩的三要素色彩是通过眼睛、大脑和日常生活经验所产生的一种对光的视觉效应，可分为有彩色和无彩色，其中有彩色是指带有某一种标准色倾向的色彩，也就是带有冷暖倾向的色彩，光谱中的全部色都属于有彩色，有彩色都具有色相、明度和纯度三种属性，即色彩三要素。无彩色指不具备光谱上的某种或某些色相的色彩，即黑白灰，无彩色只具备明度属性。6.1.1色彩的三要素1．色相色相是色彩的第一要素，能够准确表述色彩倾向的色别称谓，也就是色彩的名称，如玫瑰红、湖蓝和土黄等。各种色相都是由射入人眼的光线的光谱成分决定，当我们称呼某一色彩的名称时，就会有一个特定的色彩倾向，如称柠檬黄时，人们便能判断出其对应的色相，即黄色。2．明度明度是色彩的第二要素，指色彩的明暗程度，也称为“亮度”。任意一个色彩与白色混合，其明亮程度会提高；但混入黑色，则色彩会变暗，明度会有所降低。例如，在蓝色中不断加入白色，蓝色会越来越亮；相反，不断加入黑色，蓝色会越变越暗。6.1.1色彩的三要素3．纯度纯度也称为饱和度，是指色彩的鲜艳程度，色彩中含有的本色（组成自身颜色的色光）越多，纯度就越高，反之，则纯度越低。如大红和深红都是红色，但深红中所含的本色要比大红中所含的本色少，因此深红的纯度要低于大红的纯度。高纯度的色相加入白色或黑色，会降低该色相的纯度。6.1.2色相环和色立体1．色相环德国物理学家、化学家威廉·奥斯特瓦尔德首创了24色色相环，该色相环以黄、橙、红、紫、蓝紫、蓝、绿、黄绿8个色相为基本色相，然后每一基本色相再分为3个色相，从而构成了24色色相环。24色色相环的产生，不仅使色相之间的色阶过渡得更加细腻，而且还使色相之间的色彩关系变得更加直观和易于把握。6.1.2色相环和色立体2．色立体由于色相环仅能直观地查看色相与色相之间的关系，不能同时体现色彩三属性之间的变化关系。因此，为了改变这种状况，借助三维空间表达色彩三属性之间关系的色立体产生。色立体是一个假设的立体色彩模型，理想状态的色立体类似于一个地球仪，两极可以表示明度，赤道是色相环的体现，而地核——地幔——地壳则象征着纯度。目前，应用最广泛的是孟塞尔色立体，图像编辑软件中的色彩处理大多源自孟塞尔色立体的标准建立。6.1.3色彩的视觉感受1．冷与暖色彩的冷暖并不属于色彩属性，而是色彩给人带来的一种心理感觉。这里的“冷”是指色彩让人联想到寒冷、清新、宁静和深远等感觉，这样的色彩叫做冷色，如蓝色、紫色和绿色等。在色彩关系中，以冷色为主导构成画面的主要色调，并适当搭配辅助色就形成冷色调，冷色调常常给人理智、孤独等感觉。“暖”是指色彩让人联想到温暖、活力、热情和光明等感觉，这样的色彩叫做暖色，如红色、黄色等。在色彩关系中，以暖色为主导构成画面的主要色调，并适当搭配辅助色就形成暖色调，暖色调常常给人温馨、喜庆等感觉。6.1.3色彩的视觉感受2．轻与重色彩的轻重感主要与色彩的明度有关，明度高的色彩显得轻快，明度低的色彩显得沉重。其次，纯度也与色彩的轻重感有关，在相同的明度、色相之下，纯度高的色彩让人感觉轻盈，纯度低的色彩让人感觉沉重。在所有色彩中，白色给人的感觉最轻，黑色给人的感觉最重。从色相上看，黄、橙和红等暖色给人的感觉轻，蓝、蓝绿和蓝紫等冷色给人的感觉重。6.1.3色彩的视觉感受3．膨胀与收缩色彩的膨胀或收缩之感，通常与色彩的明度有关。在同一平面内，明度高的色块比明度低的色块略微显得大一些。此时，明度高的色彩称为膨胀色，明度低的色彩则称为收缩色。一般，暖色、纯色和高明度色会给人前进、扩张和膨胀的感觉；反之，冷色、浊色（灰色占色彩成分较高的颜色会带来浑浊的视觉感受，因此被称为浊色）和低明度色会给人后退、收缩的感觉。6.1.3色彩的视觉感受4．华丽与朴素色彩的华丽与朴素很大程度上取决于色彩的丰富性，以及色相、纯度和冷暖的对比强弱。明度低、纯度低的色彩往往显得朴实、稳重，如褐色、黑色等；明度高、纯度高的色彩往往显得鲜艳、华丽，如朱红色、黄橙色等。6.1.4色彩在版式中的应用A色彩影响版面率B突出设计主题C表现版面的空间感D突出版面的对比效果CONTENTS6.1色彩概述6.2色彩搭配6.3色彩对比6.4任务实践6.2.1色彩的搭配比例在搭配色彩时，用色较多、面积较大的色彩称为主色，使用面积次于主色、补充主色的色彩为辅助色，提亮整体的色彩为点缀色。一般情况下，主色占使用面积的60%较为合理，过多使用主色会造成层级不清晰；辅助色占使用面积的比例不超过30%，有助于丰富视觉效果；点缀色占使用面积的比例不超过10%，并且用在关键位置，有助于集中受众视线。6.2.2基色搭配在色相环中的每一种颜色都是基色，选择任意一种基色，然后改变该基色的明度、纯度，就可以得到视觉感受不同的色彩，此时选择原基色和新得的色彩进行搭配，就可以实现配色。这种方法又称为单一色相搭配。单一色相搭配可以让整个版面的颜色呈现出高度的统一性，让人们在视觉上感受到和谐一致。6.2.3同类色搭配在24色相环中，两个色相之间相邻的角度为15°。而同类色搭配便是指在24色相环中选择距离角度在15°以内的色相进行搭配。同类色搭配主要通过明度和饱和度来表现层次变化，适合那些注重形式、造型和光影的版式设计作品。同类色可以在保持版面色彩的高度统一性的同时，在视觉上又具有一丝的变化，相对于基色搭配更具有色彩的丰富之美。6.2.4类似色搭配类似色搭配是指在24色相环中选择距离角度在30°以内的色相进行搭配。类似色搭配同样适合那些需要注重光影和造型的版式设计作品。由于选择的色相互为“邻居”，因此在视觉感官上也具有较强的视觉统一性，也可以很好地凸现视觉层次感。6.2.5邻近色搭配邻近色搭配是指在24色相环中选择距离角度在60°以内的色相进行搭配。邻近色搭配具有较高的色彩关联性，视觉感官往往非常柔和、协调，同时色彩也比较丰富。这种特性能给人一种活泼不单调的感觉，适合那些需要增加视觉活力的版式设计作品。6.2.6中差色搭配中差色搭配是指在24色相环中选择距离角度在90°以内的色相进行搭配。中差色在色相环上的距离为直角，色相差异大，开始出现冷暖色分割，因此在视觉感受上具有相对强的视觉冲击性。这种配色方式可以让画面更加生动，适合那些需要突出层次的版式设计作品，可以在保持鲜明的同时，又不失层次感。6.2.7对比色搭配对比色搭配是指在24色相环中选择距离角度在120°以内的色相进行搭配。由于所选择的两色在色相环上隔得较远，因此色彩之间的对比较大。整体视觉效果明快活泼，相较中差色搭配也更加强烈，适合需要急需让受众一眼就注意的版式设计作品。不过强烈的色彩冲突也容易让人产生视觉疲劳，所以要注意搭配比例。6.2.8互补色搭配互补色也叫撞色，互补色搭配是指在24色相环中选择距离角度在180°以内的色相进行搭配。互补色搭配是一种视觉对比最为强烈的色彩搭配，也可以宽泛地将其理解为可以明显区分的两种颜色，如任何色彩与黑、白、灰，深色和浅色，冷色和暖色，亮色和暗色等都可以看作是互补色。这种配色方式非常适合那些需要表现活力、年轻感的版式设计作品，可以让版式作品在保持强烈视觉冲击力的同时又不失活力。6.2.9三原色搭配在绘画与色彩理论中，三原色是一个核心概念。三原色，即红、黄、蓝，是色彩的基础，它们是无法通过其他颜色混合得出的基本色，但是通过以不同比例混合这些原色，可以创造出丰富多样的新颜色。在色相环中连接这3种颜色，恰好可以形成一个等边三角形，各个夹角呈60°。由于三原色之间的色相差异非常大，三个颜色各不相同，使用这3个颜色进行搭配可以很好地表现个性化的视觉感受，适合那些需要突出个人风格的版式设计作品。【案例】

设计小红书笔记封面1．案例背景某博主准备在小红书发布一篇关于“DeepSeek使用攻略”的笔记，因此需要制作笔记封面，要求封面能体现笔记的主题。2．设计思路小红书笔记封面的组成元素通常较少，一般将笔记主旨放置在封面中，再适当搭配一些装饰素材。本案例将从版面和色彩等方面进行设计构思。【案例】

设计小红书笔记封面3．操作提示（1）设置版面。（2）分割版面。（3）输入与设置文字。（4）置入手指图片。（5）绘制装饰。（6）完成制作。6.2.10分割补色搭配分割补色搭配建立在互补色搭配基础上，需要先选择一种基色作为基础色，再选择该基色互补色两边的邻近色进行搭配，在视觉上形成一个等腰三角形。这种搭配方式既保留了互补色搭配的视觉冲击力，又通过邻近色的加入，增加了色彩的和谐性，适合那些需要增加视觉层次的版式设计作品。CONTENTS6.1色彩概述6.2色彩搭配6.3色彩对比6.4任务实践6.3.1明度对比明度对比是指将两个或两个以上不同明度的色彩并置在一起，所产生的色彩明暗程度的对比。色彩对比中的光感、清晰度和空间感等都是依靠明度对比产生的，如果版面中运用的色彩只有色相和纯度的差别，而明度非常接近，那么色彩的视觉效果容易显得含混不清，各色彩元素的轮廓将难以识别。因此，明度对比的运用就是要在色彩的深浅方面适当拉开差距，让色彩在明度方面处于不同层面。按照蒙塞尔色立体的明度色阶表示法，明度在黑色至白色之间分为9个等级，标号分别为1~9号，外加0号的黑色和10号的白色，共11个色阶，其中1~3号为低调色，4~6号为中调色，7~9号为高调色。6.3.2纯度对比纯度对比是指将两个或两个以上不同纯度的色彩并置在一起，从而产生色彩鲜艳或混浊的对比，纯度对比是三属性对比中表现力最弱的。一般来说，高纯度的色彩表现出强烈、乐观和活力等视觉效果；中纯度的色彩表现出温和、沉静和中庸等视觉效果；低纯度的色彩则表现出自然、简朴和安静等视觉效果。在色立体中，纯度序列横向排列，纯度从里到外分为9级，1、2、3号色为低纯度色，也称灰色；4、5、6号色为中纯度色，也称中色；7、8、9号色为高纯度色，也称鲜色。6.3.3冷暖对比将暖色和冷色进行对比就称为色彩的冷暖对比。在色彩冷暖对比中，既有不同色相之间的对比，如红色与蓝色相比，红色暖、蓝色冷。也有同为冷色或同为暖色之间的对比，如选择艳红与品红进行对比，品红在视觉上会有温暖的感觉，艳红在视觉上会有冷冽的感觉；选择星蓝与尼罗蓝进行对比，星蓝在视觉上会有温暖的感觉，尼罗蓝在视觉上会有冷冽的感觉。这是因为色彩除了自身既定的冷暖感受外，由于自身明度与纯度的不同，在于其他色彩进行对比时，也会产生一定程度上的冷暖视觉偏差。即色彩的冷暖感觉，常常会受到明度和纯度这两种色彩属性的影响。6.3.4面积对比面积对比是指各种色彩在同一画面中占据量的多与少、大与小的对比。一个色彩的强度与面积因素有很大关系，在色彩不变的情况下，扩大色彩在画面中的面积，则该色彩给人的视觉刺激也会增强。在同一配色下，面积越大的图形易见度越高；反之，面积越小，易见度越低，甚至被同化。在应用互补色搭配作对比时，可遵守这些面积公式：“红：绿=1：1”“橙：蓝=1：2”“黄：紫=1：3”。【案例】

设计横版视频封面1．案例背景某带货博主准备在双十一来临之前，发布一个内容为“预售商品点评”的视频，分享一些性价比高的商品给受众。为了提升视频的播放量，需要制作一个精美的视频封面来吸引受众，并在封面中运用以自己为原型绘制的卡通风格插图。2．设计思路视频封面的主要内容为视频名称文字和背景图片。因此，本案例的设计思路可从版面、内容和色彩3个方面展开构思。【案例】

设计横版视频封面3．操作提示（1）生成装饰图片。（2）抠取图片。（3）设置构图。（4）输入与设置文字。（5）完成制作。CONTENTS6.1色彩概述6.2色彩搭配6.3色彩对比6.4任务实践任务

设计电商Banner1．案例背景某专注于销售小家电的网店近期计划推出一款桌面小风扇，这款小风扇的特色在于强风力、3档控制及静音降噪等。为了宣传这款桌面小风扇，网店需要制作一张放置在首页的Banner图。该Banner的设计