Цветовой куллер или каждый охотник желает знать….

colors

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

Ну, я об этом например:
о ужас
#о боже, какой мужчина, #вырвиглаза :)

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

Первый — https://kuler.adobe.com
Второй — http://colorscheme.ru/

Это цветовые куллеры (миксеры) — сервисы, помогающие создавать цветовые схемы, а также анализировать сочетаемость цветов.

Сначала сервис от Adobe.

Первый экран выглядит следующим образом:
куллер адоб
У нас есть пять точек на цветовом круге, одна из которых главная (отмечена стрелкой).
Двигая их по часовой стрелочке или против — вы изменяете тон цвета.
Расположение дальше или ближе от центра круга влияет на насыщенность цвета.

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

цветовая система

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

  • Последовательная — выбираемые вами цвета разные по тону, но одинаковые по насыщенности. Если вы попробуете передвинуть основной цвет ближе к центру круга — увидите, что и остальные цвета приближаются к центру на такое же расстояние, становясь светлее.
  • Монохромная — цвета, имеющие один и то же оттенок, но разную насыщенность
  • Треугольная — три цвета, удаленные на равное расстояние друг от друга на цветовом колесе. Удачна для создания яркого контраста.
  • Комплементарная — два цвета, расположенные друг напротив друга на цветовом круге.
  • Составная, еще называется двойная комплементарная, основывается на 4-х цветах с различной насыщенностью.
  • Оттенки — добавляет черного оттенка в монохромную цветовую схему, что делает чистый цвет темнее.
  • Произвольная — ну тут все и так понятно, вы можете выставлять цвет как вам угодно. Обычно с помощью стандартных цветовых систем выстраивается нужная схема, а потом, переключившись на произвольную — точечно изменяется один из требуемых цветов.

Ниже основной цветовой схемы расположены ползунки для работы и корректировки каждого отдельного цвета из цветовой схемы.
цветовые ползунки
Так же вы можете выстроить цветовую схему на основе выбранной фотографии, для этого в правом верхнем углу нажмите на изображение фотоаппарата и загрузите фото
выбор по фотографии
С левой стороны вы видите блок «цветовое настроение», где вы можете выбрать, какие именно оттенки цветов на фотографии будут выбраны: яркие, насыщенные, темные и т. д.

Так же вы можете залогиниться и сохранить созданную цветовую схему
сохранение цветовой схемы
Если у вас нет задачи создать свою уникальную схему вы можете зайти в пункт меню «Смотреть» и ознакомится с теми палитрами, которые были сделаны до вас
варианты цветовых схем

Сервис http://colorscheme.ru/

colorscheme

Идея та же самая. Есть цветовое колесо, над ним расположены варианты основных схем, выполненных в данном случае графически


Из интересных особенностей сервиса (почему я собственно и упомянул его), это наличие ссылки на полученную палитру

Вам не нужно логиниться нигде, полученная вами палитра будет доступна по ссылке.

Здесь можно посмотреть возможный вариант страницы в выбранном вами цветовом исполнении «Пример светлой страницы» и «Пример темной страницы»

Выглядит это примерно так http://colorscheme.ru/#5td1Le6bbSMjr

В остальном все подобно адобовскому продукту и повторно я это расписывать не буду.

Подводя краткий итог: работать с подобными инструментами чистому юзабелисту вряд ли придется часто (во всяком случае, мне достаточно редко приходится). Однако иногда они бывают весьма полезны, и уметь с ними работать, на мой взгляд, будет не бесполезно

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

прорабам бригадирам скидки на новости