|
相信很多正在阅读这篇文章的设计师在过往的工作当中都或多或少的接触过渐变色，渐变色看似没有规律但其中又有着不容忽视的细节，渐变色运用的好坏往往也是一步之差，那么我们究竟该怎样去正确理解渐变色？渐变色的使用在数量和形式上是否有着独特的奥秘？渐变色到底该如何使用才能发挥其最大优势？本期文章，我们就一起来探究变化之美———渐变色。 不可否认的是现如今渐变色的兴起与扁平化设计有着密不可分的关系，也因此造成大量的渐变色与扁平化元素配合使用的情况。然而渐变色的使用范围不仅仅局限于此，渐变色越来越适合如今网站的现代风格趋势，同时也适合版面设计等领域，渐变色的使用范围是非常之广的，并且最重要的一点是设计师可以轻松掌握渐变色的使用技巧，同时渐变色会为画面带来视觉变化和效果，因此性价比如此之高的渐变色是每个设计师不可或缺的必备技能，但是想要掌握好还是需要一定技巧的。  渐变色是指色彩按照一定的规律做阶段性变化，这个规律可以是从明到暗，或由深转浅，或是从一个色彩过渡到另一个色彩。也有另外一种没有分段的色彩变化也属于渐变色，而这种没有分段的渐变形式恰恰转变成了我们设计中常用的渐变色。  了解渐变色需要从以下三个角度分析：  颜色的选择 色相渐变、明度渐变、饱和度渐变... 使用的数量 单色渐变、双色渐变、三色渐变、多色渐变 使用的形式 线性渐变、径向渐变、混合渐变  无论是渐变的颜色还是数量或者形式其实原则上并没有具体的使用规范,而我们之所以总结这些规律其目的就是为了更方便更深刻的理解渐变色的使用。首先我们来看渐变色在颜色上的使用，这里我们并不是指具体使用什么颜色，而是从色彩本身的角度出发将渐变大致分为色相之间的渐变、明度之间的渐变、饱和度之间渐变，这些只需要了解即可，因为毕竟我们在使用渐变色时最常使用的都是第四种类型——综合型渐变。    渐变色在数量上的使用也没有一定的规范，可以是单色、双色、三色以及三色以上统称的多色。单色渐变即是上方演示的明度渐变或饱和度渐变，双色渐变是最常见的渐变，同时它也是一把双刃剑，因为常见所以用起来不会造成太大的错误，也因为常见所以常常不会给人视觉上的震撼，三色渐变是除了双色渐变之外另一种常见的渐变，而多色渐变比较少运用，因为把握不好就会给设计造成花俏轻浮的感觉，特定情况下除外。    渐变的形式有很多种，虽然在不同软件当中的名称各不相同，但是基本形式并没有太大差异。这里我们只列举在设计中常见的四种渐变形式，那就是线性渐变、径向渐变、对称渐变和混合渐变。在上方渐变的颜色和渐变的数量当中我们的演示均属于线性渐变。  渐变色的使用也有很多种形式，而应用在版式设计中最常见的我们大致总结了三条规律，分别是用于背景和叠加图片以及置入元素。 用于背景是渐变色最常见的应用形式之一，无论是交互设计还是版式设计或者其他领域，将渐变色用于背景都会为设计带来不错的视觉效果。虽然渐变色在交互设计中非常常见，但是有一点不可否认的就是渐变色通常在面积较大的元素中会有更出色的视觉效果。用于背景的渐变色没有固定的模式限制，最常见的就是纯渐变背景和混合渐变背景，下面我们通过两个案例分别做具体演示： 注：本文所有案例均为模拟设计，不具备任何商业用途和实际效应。 首先将标题和活动信息进行整理，这里将活动内容转化为英文，因为这个版面的要求是以文字内容为主，所以将三者进行编排然后放在页面中央位置作为主体。 将其余内容分别添加到版面当中，拉出网格对版面元素进行约束，通过不断调整大小和位置使版面平衡即可。 最后为背景填充颜色，由于文案要求是简洁的风格，所以颜色不能使用过多，而为了规避单色的呆板所以渐变色是不错的选择，为了体现夏日清凉畅快的感受因此选择淡蓝色调的双色线性渐变。 注：本文所有案例均为模拟设计，不具备任何商业用途和实际效应。 这个案例在设计顺序上稍微改动一下，这里我们先大致画出网格，将提供的模特图片去底后置入到版面当中，放在版面靠左大约六栏的位置，然后调出曲线对图片进行略微的调整。 接下来将文字内容依次编排到版面当中，通过调整达到版面平衡。 接下来需要考虑为画面背景填充颜色，为了让画面有一些灵动和变化，这里我们使用混合渐变的形式来填充背景。 最后为人物下方添加阴影，使画面更加真实且更有层次，这个案例就完成了。 相信在渐变色背景上叠加图片的设计大家都见过，而将图片与渐变色叠加在一起的重点在于平衡色彩和图片之间的关系，需要注意渐变色、图片、主题内容三者之间的高度匹配。直接将图片与渐变色融合叠加和将图片弱化是叠加图片常见的两种形式，前者主要侧重于图片与渐变色的统一，后者主要侧重于将图片当做底纹或背景处理。叠加图片的优势在于可以协调图片与渐变色之间的关系，弱化图片凸显文字的同时又不失灵动，需要注意的是这种方法并不是十分适合需要突出图片或产品等主体的情况下。 注：本文所有案例均为模拟设计，不具备任何商业用途和实际效应。 首先我们来分析文案，了解到需要设计的是一款关于美妆的网页，根据所提供图片的局限性（竖版尺寸并且人物不完整），因此我们第一步是将人物去底处理然后置入到画布当中，然后根据网格调整人物所占的位置。 如果将人物放置到版面中央位置，那么人物就自然而然的充当了画面的主体，由于人物四周面积不多并且需要保证文字内容的识别性，所以即使图片本身还是不错的（美女还是蛮漂亮的）我们也要进行取舍，将人物处理成黑白，吸取人物颜色对背景进行渐变填充。 接下来将人物图片与背景渐变色融合，这个案例中选择的模式是叠加，然后通过色彩平衡和曲线的调整达到自己想要的效果。 然后将文字依次编排到版面中来，根据网格调整位置,这个案例就完成了。 注：本文所有案例均为模拟设计，不具备任何商业用途和实际效应。 首先我们选择一张与商务写字楼相关的图片然后处理成灰色，由于图片的原因在其之上添加文字内容会显得很乱，所以我们为背景填充能够体现出商务和稳重的暗色调然后叠加图片。 然后调整图片使图片叠加到背景的渐变色中并适当进行弱化，这个案例使用的混合模式为柔光，不透明度为20%。 最后拉出网格编排文字内容，整个案例到此就完成了。 还有一种渐变色的使用方式是将渐变色置入到版面中的元素内，最常见的两种形式就是置入到几何元素当中和置入到文字当中。这两种形式都会为画面带来一些变化性，同时又能够缓冲色彩与色彩之间的冲突，但需要注意渐变色之间的统一与协调，建议一个版面当中不要置入数量过多的渐变色，以免造成设计的最终效果显得混乱。 注：本文所有案例均为模拟设计，不具备任何商业用途和实际效应。 首先我们还是先来分析文案并找到相应素材图片，然后将人物抠出放置在网格的居中位置。 然后为背景添加颜色，这里选择的是能体现年轻、运动的黄色，由于图片的色调与背景色显得不协调，所以还需要调整人物图片的颜色。 因为文案要求以人物形象为主，因此将文字部分弱化编排。 版面中间部分有些空，所以我们在背景层上添加一些几何元素，然后通过置入蓝色渐变色与背景黄色形成对比同时又为版面添加了变化。 注：本文所有案例均为模拟设计，不具备任何商业用途和实际效应。 首先在需要体现出高级感和商务属性时我们可以使用黑色填充背景，然后置入符合主题的模特图片并对其进行调色和弱化处理。 然后依据网格的位置对文字内容进行编排。 最后为主标题添加一个对称渐变，色彩选择与黑色形成很好对比效果的金色，同时再添加一层具有质感的材质，整个案例就制作完成了。 |
|
|
