初心者の色のための実践ガイド

色は非常に重要です。色は、異なる色が商品に変更することができ、表現の設計の一つである印象を与えます。自然の中で私たちの視覚の饗宴を与えるために毎日楽しむことが私たちは、色の使用時に私たち自身のターン、このカラフルな世界に住んでいるが、それはまたそれを圧倒し、無力感を覚えるされていませんか?

本当に専門家の視覚的なインパクトを作成するための色の限られた使用のほんの一部は非常に少数である色の豊かな人々の感覚を持っています。色苦い手のほとんどの人として、重大なミスを避けるために、色のカラー機能を改善する方法はありますか?

この記事では、基本的な色の理論と実践的なカラーツールをご紹介します、色は新参者のハードハンドのためのいくつかの助けとなることがあり、比較的基本的で簡単です。この記事では、色の面でオファーのいくつかを読んだ後、あなたに与えることができます場合はもちろん、また、独自の色の好みが含まれ、色は責任を負いません、岡本は、たとえば、色の異なる人々に異なる嗜好を宣言しました私には経験とヘルプは素晴らしい名誉なことです。我々は彼の空き時間に読むことをお勧め書籍の一部2:この記事では、「カラーデザイン」と「古典的な日本のデザイン透析設計の詳細」を組み合わせたものです。以下は、テキストコンテンツです。

まず、需要は常に行われていないところを感じました

設計者やオペレータは、公共のために新しい番号を行う必要があるかどうかは、プッシュ記事を書いたか、それは彼らがパートナーに製品を展示するためにPPTを行う必要があるということです。半日は多くの時間を費やし、最終的に仕上がっトス。いつもどこではないと感じ、よく見ると、納期に計画している、1人の息を叫びました。

思考の色は通常、需要が行わ前に発生した、またはされた点検作業の完了後に「ページが何も悪いことをした後、常に感じました。」もちろん、そのようなことは、当然、我々はそれを修正することができるものから進むことができ、カラースキームにおけるいくつかの問題があったのですか?

この図から、我々はそこ違反の多くの感覚は確かにあるし、我々は最終的には問題の一部で議論を、分離感じることができ、どのように改善することが適切であろう。バックグラウンド(背景)、画像(形状)、テキスト:私たちは、ページの内容が分かれている置きます。それぞれの色の問題を説明しました。

1.背景には、背景色が表現のパフォーマンスに白の写真を使用したとき、静かで安定したスタイルのレイアウトに反映さ、重すぎる基本原理テーマです。背景を選択すると、多くの場合、画像の背景の角度バージョンを考慮する必要があり、完了時に大きな色のコントラストが表示されません。

2.写真(グラフィック)、実際にはより均一な木の色ですが、雰囲気は10-魅力に達したものの、「ラウンド」の上部と下部には、カラー写真は、それ自体を消し去る、比較的活発なオレンジを使用しましたそれは発疹が安定した印象ではない人々を与えます。

あなたは慎重に見ている場合3.テキストは、テキストの色があまりにも多く、三色を使用していた絵のプレゼンテーション内にあるように見えます。同時に、暗い背景の上に黒で使用されるタイトルは意味がありませんテキストを読みやすく作成されます。

ここでは、この単純な例のために、我々はいくつかの変更を行います。

更新:

1.は、単に一般的に白のパフォーマンスの結果を使用し、作品に白、ミニマリストスタイルを使用しています。ホワイトは、それがどんな写真の普遍的な色を引き出すことができ、基本的な色の背景レイアウト設計です。

2.カラーテキストとカラーグラフィックスを修正するので、画像が同時に読みやすさを増大させ、より統一と調和です。

第二に、基本的な色彩理論

ここでは、実際には、色を選択する方法については本当に方法や理論の多くを持っているだけでなく、ために設計者の個性や好みの、同じ作業と異なる意見のために、実際には非常に小さな色の豊かな人々の感覚を持っていますその一部。私たちは、不要なエラーや色、何よりもの正しい使用を減らすために、理論的な方法を用いた場合に行うことができます。次の部分は、色理論の基礎は、比較的鈍いと退屈であってもよいが、すべての設計者のニーズやオブジェクトを把持する必要がある色を扱います。

色は何ですか?

何色は、それが人間の脳と出産によって生成された光の異なる波長の差のために気持ちの強さであり、最も基本的な視覚応答の1と同じ形状で、言うこと実際には困難です。物体は、光を照射し、その反射光は、人間の脳を受け入れにおける「色」の理解が形成されています。もちろん、いくつかのオブジェクトが、直接、例えば、私たちの画面が点灯しています。光波は、電磁波、人間が短いから長い可視光の「可視」波長と見なすことができ、我々は紫色を識別することができ、青色、シアン、緑色、黄緑色、×××、オレンジ赤と他の色。

色の3つの属性

我々は「色相」、「明度(明るさ)」、「純度(飽和)に色を入れて、」表色系の3つの属性は、3つの属性に応じて分類することができます。色の無数を把握し、それを自由に使用できるようにするには、我々は完全にこれらの3つの属性を理解する必要があります。

色相:色相は、赤、青、黄色、および他の色感覚要素のうちの1つとの間の物理的または心理的な差を指すだけでなく、色そのものを指し、スペクトルに色相の順に配置され、最初に接続され、環状のパターンで形成され、前記「色相円。」など 色相環における色相との関係を決定した後、カラーポイントの練習がより簡単になります。

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

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

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

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

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

关于色调

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

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

色相差与色调调和

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

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

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

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

1. 有主导色彩的配色:

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

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

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

2.对比色构成的配色:

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

上图是色相对比的方式

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

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

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

1. 浅色调调和

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

△ 浅色调调和

2. 深色调调和

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

△ 深色调调和

3. 柔和(明亮)调和

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

△ 明亮色调调和

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

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

1. Adobe color CC

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

2. Colorgg.com

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

3. Color Scheme Designer

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

4. 有趣的日本传统色

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

五、城里面的配色套路

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

1. 从写真中获取色彩

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

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

如果你实在没办法从色环中提取出你想要的颜色,那么在日常的阅图过程中,收集优秀的配色方案,吸取并保存这也是一个很讨巧的方法。如果你每天都能保存2份色彩方案,或者仅仅是两个渐变色,一个月后,你就能导出一份《我最喜欢的渐变色选集》

3. 正确的颜色设计步骤

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

设计开始时的问题:

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

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

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

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

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

设计进行时的方法

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

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

结语:

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


おすすめ

転載: blog.51cto.com/2010376/2422056
おすすめ