请留下您的手机号
我们即刻安排课程老师为您回电!
您好
请留下您的联系方式,我们将主动给您回电!
第一时间为您安排就近试听!
培训首页 > 网页设计师培训头条 > 设计师必须懂得的一些配色技巧
网页设计培训综合班美工

设计师必须懂得的一些配色技巧

南京天琥教育 / 发表时间:2017-08-30 895人浏览 平面设计师培训   南京平面设计师培训

  不同的人对于颜色的喜好各不相同,如果这篇文章能在阅读完之后给于你在配色方面提供一些经验和帮助对于我来说便是非常荣幸的事情了。

  一、需求做完了总感觉哪里不对

  不管是设计师做需求还是运营为公众号新写了一篇推送文章,又或者是是自己需要做一份ppt来向合作商展示产品。花了大半天时间终于折腾完了。大呼一口气,正打算交付的时候,仔细一看,总感觉哪里不对。

  配色一般发生在需求制作之前的思考,或者是作品完成之后的检查,也就是“页面做完之后总觉得哪里不对”。当然出现这样的事情自然是在颜色方案上出现了一些问题,那么我们可以从哪些方面着手来进行修正呢?

  从这张图中我们可以感觉到确实有很多的违和感,那么我们分开来讨论,到底是哪些部分出现了问题,如何改善才会合适些。我们把页面的内容分为:背景(底色),图片(形状),文字。来分别描述在颜色上的问题。

  1.背景,背景颜色过于重了,在体现宁静、稳重风格的版面时,利用白色去表现写真是表达主题的一条基本原则。在背景选择时往往需要同时考虑角版图片的背景,不至于在完成时出现较大的颜色反差。

  2.图片(图形),其实是较为统一的木色,但是上下两部分的“圆形”却使用了比较亮眼的橙色,抹杀了写真本身的颜色,虽然达到了吸引人的亮眼氛围,却给人一种轻率不稳重的印象。

  3.文字,如果仔细看的话,文字的颜色似乎过于多了,在写真介绍中分别使用了三种颜色。同时,在深色背景上使用的标题产生了让文字不容易阅读的感觉。

  下面就针对这个简单的例子,我们进行一些修改:

  修改后:

  1.简单地利用白底,在简约风格的作品中,一般会运用白底表现效果。白色底色是版面设计的基本色,是可以衬托出任何写真的万 能色。

  2.修正了图形的颜色和文字的颜色,让画面更为统一和谐的同时增加了可读性。

  二、基础配色理论

  说到这里,其实关于怎么选择颜色真的有很多很多的方法和理论,同时也会因为设计师的性格和喜好,对同一个作品又不同的见解,真正拥有丰富色彩感的人只占极小的一部分。我们能做的只是在可以使用理论方法等情况下,减少不必要的错误和正确的使用颜色,仅此而已。接下来的部分是基础的配色理论,可能会相对枯燥和乏味,但对于每一位需要和颜色打交道的设计师,这也是必须要交手的对象。

  色彩是什么?

  其实硬要说色彩是什么,它是人脑对于光的强弱和不同波长所产出生的差异的感觉,与形状同为基本的视觉反应之一。物体被光线照射并反射光线被人脑接受,形成了对“色彩”的认识。当然还有些物体是直接发光的,比如说我们的屏幕。光波是电磁波的一种,其中人类可以看到的称之为“可见光”根据可见光波长的由短到长,我们可以识别紫色,蓝色,青绿色,绿色,黄绿色,黄 色,橙色,红色等色彩。

  色彩的三属性

  我们把颜色分为“色相”、“明度(亮度)”、“纯度(饱和度)”三个属性,色彩可以根据三属性进行体系化的归类。为了能够掌握无数的色彩并运用自如,必须充分理解这三个属性。

  色相:色相是指物理学或心理学上区别红、蓝、黄等色感的要素之一,同时也指颜色本身,将色相按照波谱上顺序进行排列, 位相连,形成的环状图形,称之为“色相环”。在色相环上确定了色相之间的关系后,配色实践就变的简单点多了。

  明度(亮度):明度是指色彩的明亮程度,在任何颜色中添加白色,明度上升,添加,明度下降。因此,色彩中明度 高的是白色,明度 低的。白色-的灰度色标示明度差异的表现。同时明度也是决定文字可读性和物体外观的重要元素。两种色彩之间的差别,明度方面的对比越强烈,色彩之间的交界部分越明显。

  纯度(饱和度):纯度是指色彩的鲜艳程度。新鲜水果的那种鲜艳、颜色的色彩代表的是“高纯度”,树汁和泥土等天然染料那种朴素、淡雅的色彩代表“低纯度”。纯度越低,颜色浑浊,纯度 低的是灰色(无彩色)。纯度的高低容易形成不同的气质,一般来讲,纯度越高,越有活力,充满朝气,纯度越低,则容易给人成熟稳重的印象。

  色彩三属性的模式图(色立体)

  其实可以简单的理解为一个以色相环为基础变化成的一个圆柱体,圆柱体的侧面分布了整个色相环;圆柱体的底面到顶面,色相环的亮度发生变化;圆柱体的轴心到侧扁表层,纯度发生变化。

  当然,现实中的纯度变化会根据色相的不同而不同,并不是规律的几何变化,因此,实际上的这个“圆柱体模型”应该要复杂的多。

  关于色调

  大家应该经常听人提起过色调这个词语,在颜色三属性中并没有给出“色调”的定义,那么色调到底是什么呢?色调是指色彩的浓淡和强弱程度,是通过色彩的明度和纯度综合表现色彩状态的概念。也就是大家平时感觉的“这几个颜色放在一起好像是一个色调的”这样的感觉,虽然色相,不统一,但是如果调整好“纯度”和“明度”也能让画面展现统一的配色效果。

  其实色调是日常生活中人们对于色彩认识非常重要的一环,很多时候我们觉得某个画面非常协调统一时,往往是色调一致给人的效果。在实际配色过程中,如果需要选择使用多种颜色或者使用到彩色的写真的时候,使用色相调和的方法就比较容易达到效果。

  色相差与色调调和

  在使用色调调和的配色方案时,可以使用各种各样的色调,但颜色的深浅(纯度/明度)需要控制在一个幅度之内。

  三、利用例子来描述基础的配色方法

  下面会以一个范例来作为模板,展示基本的配色类型。分为“由色相差而形成的配色”和“由色调调和而形成的配色”。

  a:由色相差而形成的配色

  1.有主导色彩的配色:

  这是由一种色相构成的统一性配色,体现整体统一性,强烈的色相的印象。如果不是同一种色相,色相环上相邻的类似色也可以形成相近的配色效果,这就是“同色系”配色和“类似色”配色的效果。这种配色展现自然与和谐的印象,但同时也容易形成单调、乏味的印象。

  上图更多的想表现的是同色系的方式

  类似色搭配比同色系稍微丰富

  2.对比色构成的配色:

  由对比色相互相对比构成的配色。可以分为:由“互补色”或“对比色”搭配构成的色相对比效果;由白色、等明度差构成的明度对比效果;以及由纯度差异构成的纯度对比效果。由于色彩之间的互相衬托,运用高明度、高纯度的色彩,可以营造强烈的视觉冲击效果。

  上图是色相对比的方式

  b:由色调调和而形成的配色

  这是有统一色调构成的统一性配色。深色调和暗色调等类似色调搭配也可以形成同样的效果,即使出现多种色相,只要保 证色调i 址,画面就能够体现出整体的统一性。

  在营造气氛或情感时,可以通过色调调和的灵活运用来达到目的,不同的色调可以表达出“柔软”,“明亮”,“朴素”,“稳重”,“华丽”等印象。在确定使用色相前,构思好使用的色调也是配色的基础理论之一。

  1.浅色调调和

  这张图想表达的是冬日的风景,冬天清澈,干净的印象使我选择了浅色调调和,同时利用了明度的变化来表现层次感。

  2.深色调调和

  利用低明度,中高纯度的颜色调和而成的夜晚景象。画面表现出安静,祥和的气氛。

  3.柔和(明亮)调和

  虽然使用了多种色彩,但是由于控制好了色调的波动,使画面的色彩依旧在一个相对和谐的区域内。

  四、“知道了理论方法,关于实践这件事”

  这一个章节,我讲讲述一些我自己平时使用的配色方法和工具。希望能对读者您的日常工作提供一些简单的帮助。

  1.adobe color cc

  它的原名更为,也就是kuler ,不知道什么时候开始改了名字,不过功能没有发生太大的变化。这是一个由设计师分享配色方案的一个平台,已经保存了成千上万的预制配色方案。在photoshop上自带了一个插件,你可以直接调用上面的色彩方案,并且非常方便的应用到你的设计稿中去。

  2.colorhexa

  我经常使用这个网站用于,我只确定了一个主色的情况下,它能帮助我扩展这个色彩,搭配出数种方案,甚至还有色盲修正方案。如果你只能确定一个必须使用的颜色,选择这个工具或许能获得一些灵感。

  3.color scheme designer

  这是一个在线的配色工具,相比于adobe color ,它拥有详细的色彩修改方法,和简单的颜色演示工具。国内有个旧版本的汉化版,不过还是建议去官网使用 新的。

  4.有趣的日本传统色

  这个网站专门列举了250种日本传统色,且拥有了不错的动画过度效果。如果你对日式的色彩感兴趣,这里或许能得道一些灵感。

  五、城里面的配色套路

  懂得那么多道理,依然配不好颜色(捂脸)。如果你实在是对配色苦手,没办法得心应手的获取想到的色彩,那么或许,是时候借助一下巧妙的办法了。

  1.从写真中获取色彩

  你总能看到一些非常美丽的图片,当然你的手机里或许也有一些,那么何不从中吸取一些颜色用到你的设计中去呢?色彩收集是一个伟大的灵感源泉,你可以在通过自己的素材库或者互联网渠道,去寻找你想要的色彩,提高你的设计效率。

  2.手动保存的颜色(渐变色)

  如果你实在没办法从色环中提取出你想要的颜色,那么在日常的阅图过程中,收集的配色方案,吸取并保存这也是一个很讨巧的方法。

  3.正确的颜色设计步骤

  一个正确的设计步骤必须从开始的时候就选择正确的道路,为了避免“页面做完之后总觉得哪里不对”的情况出现,我们需要在每一个步骤都提前为设计做好准备。

  设计开始时的问题:

  你要制作的是一个什么样的内容?

  你想要传达什么样的情感?

  颜色在这个内容中的作用和定位。

  你设计的对象是谁,或者说,你为谁设计?

  这将很大程度的帮助你去选择一个合适的设计,颜色设计有时很难确定这个就是正确的颜色,或者你调出来的这个颜色就是合适的,所以这时候你就的在产品目标,用户群图,使用场景等等做出筛选分析。从而确定颜色选择。

  设计进行时的方法:

  我们通常把一个作品(这里指移动端或者web端页面设计,当然插画其实也是适用的)的颜色拆分为几个部分分别进行色彩的选择。背景色、主色调、辅助色、高亮色(提醒色)

  在正确的地方使用正确的颜色想必在这个时候,你应该有了一个大致的颜色方案,那么注意不要犯一些常见的错误。比如在正确与错误的选项上使用了错误的色彩,就像是在通行过道上使用了红色背景的指示牌。

  其实我本身也对于配色也相当的苦手,像大多数人一样,在色彩上根本没有什么称得上的特长,写完这篇文章,反而对自己的配色能力更加担心了。希望大家能在文章中得到一些收获。



文中图片素材来源网络,如有侵权请联系删除
相关课程
网页设计培训综合班美工

网页设计培训综合班美工

南京网页设计培训,课程由专门课程研发团队自主研发,将前沿的设计融入课程中。
课程级别初级 培训周期3个月
培训时间全日制
咨询电话 400-656-3385
课程说明
课程级别 初级
培训周期 3个月
上课时间 全日制
上课地址 秦淮区新街口国际贸易中心10楼C5(地铁新街口站24号出口)
课程简介

  

南京网页设计培训

  南京网页设计培训,随着电子商务大潮的风生水起,网页的美工人员也随之成为紧俏和热门职业。网页的美工和平面设计美工不同,除 了要有的平面设计能力和美术功底外,还需要熟悉和网页的技术特点,还需要使用网页设计的各种工具和手段将平面静态的设计稿变成的网络页面。网页美 工是门面设计师,需要的素质和技术往往比平面设计更加复合。

  ☆★南京网页设计培训

  1.N多互联网热门职位等你来选:平面设计师、包装设计师、VI设计师、广告设计师、视觉设计师、网页设计师、美工……

  2.毕业薪水:城市月薪轻易过4500元,5年后,大部分设计师能达到8000元,二、三线城市薪资达到5000元。

  ☆★掌握网页设计三大核心

  1.熟练运用PS、AI、CDR、ID四大平面软件

  2.掌握常规设计技能,打下扎实基础

  3.能够制作动态flash、制作各类高端页面

南京网页设计培训

色彩在任何一种设计中都起着很重要的作用,相差不多的色彩却能渲染出截然不同的情感效果。好好利用色彩与生俱来的魅力,就能让你的网页设计更特别。

  •       蓝色是网站的基本款
    • 蓝色在网页设计中属于不会出错的颜色,当你举棋不定时,可以尝试一下蓝色,也许能顺利化解你的问题。搜狐快站也正是以蓝色为色彩基调。
    了解详情
  • 单色系网页



    • 单色系页面似乎不存在配色的问题。然而要打造一个层次多样、色彩统一的网页,设计师可以以一个基本色调来扩张色相、饱和度和亮度等条件。



    了解详情

☆★南京网页设计培训目标

  系统学习使用网页设计三剑客 Dreamweaver、Flash、Fireworks三大软件以及平面软件Photoshop的基本操作。针对网页设计的从业人员,培训网页设计 中实战的软件和技术以及相关知识、流程,掌握专业设计师的常用工具软件.学习完毕后,能胜任基本网页美工的工作要求。能独立建设中小企业(套用修改模板)

  ☆★南京网页设计培训课程大纲

  1、互联网基本应用知识、网页概念

  2、网页美工版面设计和图片加工:Photoshop

  3、网页排版制作多媒体三剑客:Dreamweaver、Flash、Fireworks

  4、 HTML网页排版语言,Css 样式表的格式排版

  5、的综合规划制作、上传发布、维护更新

  6、织梦CMS建站(基础操作),实战中小企业静态构建

南京网页设计培训

  练习要求教学内容

  Photoshop基础工具:色彩模式、照片校色选框工具与套索工;明暗调整、色彩调整;画笔工具、路径工具;蒙板、通道;文字编辑工具、文字

  Photoshop网页应用: 图层混合模式; 图层样式;滤镜;3D模型的贴图功能; 二维动画;网页版面设计和切片输出

  Dreamweaver建立站点:认识Html等网页属性名称;掌握站点制作和操作要领;了解网页制作的流程; 熟悉表格布局;站点的建立;文字图片加入的操作; 表格及其用表格进行布局;制作超级链接;了解的链接属性;多媒体在网页中应用; 掌握通过CSS去控制整个网页的布局和样式

Flash网页动画设计:熟悉和了解Flash制作动画的原理;制作和绘制图形;了解元件动画制作; 补间动画制作,导入图片;flas:逐帧动画,形状补间动画;制作网页banner;熟悉Flash三种动画效果制作;掌握和区别元件动画中图形和影片剪辑的动画效果;熟悉按钮的制作和动画效果;导入声音、图片等多媒体发布

  Fireworks网页应用: Fireworks针对网页中位图和矢量图处理;了解PS与Fireworks操作上的差别;综合练习,充分利用已掌握的前台设计技术和后台语法; fireworks的基本操作; 位图和矢量图的处理; 添加滤镜和效果;制作动画; SE0基础及其推广基础,网页综合练习

  Web基础:web标准; 表现层技术;结构标准语言;XHTML的设置和规则; 正确嵌套所有元素; 表现标准语言; css语法

  Div+Css的应用:选择符、伪类及伪对象、选择符优先级设置及区别;css的属性值、默认值和继承值、css控制元素大小;盒模型的概念、元素背景的设置;div+css页面的制作;效果图的规划和切分;规划并建立站点

  SE0引擎优化:初探SE0、引擎工作原理、关键字策略;URL优化、代码优化、图片优化;网页结构、结构、链接策略;服务器的选择、引擎优化误区;引擎优化工具


以上就是网页设计培训课程的全部内容介绍,如需了解更多的网页设计培训班、课程、价格、试听等信息,也可以点击进入 网页设计 相关频道,定制专属课程,开始您的学习之旅。

课程内容以实际授课为准
  • 平面设计师
  • UI设计师
  • 室内设计师
  • 动漫设计师
  • 服装设计师
  • 规划设计师
  • 零基础
  • 有PS基础
  • 有AI基础
  • 有CAD基础
  • 有PR/AE基础
  • 其他软件基础
  • 周末班
  • 全日制白班
  • 随到随学

温馨提示