Skip to content

Выбираем свою цветовую схему

К этому моменту вы должны иметь хорошее представление о значении каждого цвета и различных типах цветовых схем. Однако, все это не поможет, если вы понятия не имеете, как начать действовать.

Влияние цвета в ваших проектах

Выбрать цвета — что может быть проще, но это только кажется. Это может быть очень трудной задачей. От того, как вы выберите цвет для проекта, будет зависеть, как примут вашу продукт пользователи. Из-за этого, когда вы выбираете цветовую схему, вы должны знать о влиянии, которое может иметь цвет в вашем дизайне, как хорошее, так и плохое.

Выбор подходящих цветовых схем

Прежде всего рассмотрим, как вы можете начать подбор подходящей цветовой схемы для вашего проекта.

choosing-a-colour-scheme

Вы должны думать о том, какие цвета подходят для вашего бренда, компании или отрасли в целом. Взгляните на фантастическую инфографику от Column Five Media в котором говорится о цветах, используемых в лучшими 100 брендами по всему миру.

color-scheme-info

Мало того, что это действительно интересно, так как мы получаем взгляд на какие цвета используют ведущие мировые бренды и компаний во всем мире, но это дает нам увлекательное представление, какие цвета работают лучше или чаще используются в конкретных отраслях.

Как вы можете видеть в инфографике, все основные цвета доступны для вас и подходят для разных отраслей. Остается выбрать цвета, которые подойдут по значению для вашего дизайна, уже обсужденным нами ранее в предыдущих статьях.

Сколько цветов использовать?

Иногда этот вопрос на самом деле входит в круг предпочтений. Однако, если обратится к предыдущей инфографике, из 100 компаний лишь 5 решили использовать более двух цветов в своих основных цветовых схемах.

Тем не менее, используйте столько цветов, сколько необходимо, как вы чувствуете. В некоторых случаях, можно использовать несколько различных цветов, чтобы разделить разделы на сайте. Например, у вас может быть четыре раздела сайта, тогда можно включить в цветовую схему еще четыре цвета для каждого из них.

Хотя окончательный выбор зависит от вас, я рекомендовал бы вам работать с двумя или тремя цветами в основной цветовой гамме — не включая нейтральный светлый или темный цвет текста и фона. Наличие двух или трех цветов в цветовой схеме просто дает вам возможность экспериментировать и предлагать больший контраст.

Получаем цветовые схемы из фотографий

Вы когда-нибудь замечали на фотографии захватывающие цвета? Эти красивые цвета можно перенести на цветовую схему, которую вы можете использовать в дальнейшем. Все, что нужно — выбрать удачные фото, немного практики и терпения — ибо, если вы перфекционист как я, то вы будете тратить время на настройки цветов, пока они не подойдут вам.

Выбор фото

Ключ к выбору хорошей фотографии для работы — это найти ту самую фотографию, которая вас завораживает и обладает разнообразием. И здесь не важно в каком стиле ваше изображение, в однотонном и винтажном или со множеством ярких цветов, вы все еще можете найти полезную цветовую схему где-то внутри него.

Если у вас есть фото или несколько, и вы хотите попробовать создать несколько схем сразу — откройте их в вашем любимом графическом редакторе и просто оторвитесь по полной! У меня для этого есть шаблон Photoshop, в котором есть несколько прямоугольников под выбранные мной цвета. Вот, что может из этого выйти.

Когда я подбираю цветовую схему из фото, я стараюсь придерживаться одного типа цветовой схемы (как монохромная или дополняющая), и затем стараюсь выбирать цвета, соответствующие стили фотографии. Ну например, я буду смотреть на фото и стараться найти цвет максимально выделяющийся, это еще не значит, что он яркий, он так же может быть приглушенным. И таким образом я выделю несколько цветов, которыми можно выразить то, как я вижу эту фотографию.

На этой фотографии, за счет всех аналогичных фиолетовых тонов, мы смогли довольно легко выделить монохромную цветовую схему.
На этой фотографии, за счет всех аналогичных фиолетовых тонов, мы смогли довольно легко выделить монохромную цветовую схему.
Эта фотография довольно оживленна, и поэтому мы могли тратить время на создание нескольких цветовых схем, которые соблюдают несколько правил, но также подходят вместе хорошо.
Эта фотография довольно оживленна, и поэтому мы могли тратить время на создание нескольких цветовых схем, которые соблюдают несколько правил, но также подходят друг другу.

Как только я начал смотреть на фото внимательнее, я стал больше понимать стиль фото. Остается только поиграться с инструментом выбора цвета, чтобы увидеть, какие цвета работают вместе лучше.

Затем надо начать «складывать» эти цвета в шаблон (как на предыдущих фото), пробовать их перетасовывать, пока вы не будете довольны позиционированием и иерархией цветов. Также я часто стараюсь работать с получением как темных (практически черный) и светлых (ближе к белому) цветов наряду с основными цветами. Это может помочь с балансированием цвета и структуры на странице, а также дает несколько возможных цветов для текста, если ни один из основных цветов в вашей схеме не подходит.

Честно говоря, основная цель на данном этапе — просто поиграться. Иногда цвета, которые вы нашли, не будут пригодны и иногда вы не сможете найти достойную цветовую схему на фото. Экспериментируете с цветом пока вы не создадите цветовую схему, которая выглядит однородно и создает хорошую гармонию в вашем дизайне.

Adobe Kuler

Если вам сложно самостоятельно создать цветовую схему из фотографий, то Adobe недавно выпустила приложение Adobe Kuler для iPhone и браузера. Это приложение предлагает супераккуратный способ выбора цветовых схем по фотографиям. Вы можете выбрать один из существующих снимков или сфотографировать что-либо там, где вы сейас находитесь.

adobe-kuler-1

Что замечательно в Adobe Kuler, так это то, что он предлагает вам действительно инновационный способ выбора цвета. Приложение находится в постоянном поиске и выбирает то, что по его мнению, самое ценное в цвете в фотографии в его нынешнем виде, и собирает их вместе в небольшой цветовой схеме для вас.

adobe-kuler-2

Если вы не уверены, что сможете самостоятельно подобрать цветовую схему из фотографии, то приложение Kuler поможет вам понять, как выбрать хорошую цветовую схему с фото. Не стесняйтесь брать много фотографий и использовать приложение Kuler, чтобы проанализировать, почему эти цветовые схемы работают и почему приложение выбрало их.

Затем со временем вы можете начать работать над созданием собственных цветовых схем из фотографий и быть более уверенными в своем выборе.

Источник: WebDesign Tuts+

Данная запись является частью серии "Школа дизайна для разработчиков".

Качества и характеристики цветов

Работа с брендбуком компании