23 июля 2013 в 22:28

Работа с цветом: полезные инструменты, книги, статьи для веб-дизайнеров

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

Инструменты




Colour Lovers — старый и функциональный инструмент для подбора цветовых схем. Аналоги — Colourcode, Color Scheme Designer и конечно Kuler. Подобных сайтов великое множество, но эти, на мой взгляд, самые удобные.



Multicolr — полезный поисковый сервис, который умеет находить по одному или нескольким цветам фотографии на Flickr (более 10 миллионов под лицензией Creative Commons).



Check My Colours — сервис, проверяющий читабельность текста на любом сайта. На скриншоте — часть результатов Хабра.



Sphere — выбор цветов в соответствии с теорией цвета, почти научный подход к выбору палитры

.

0to255 — помогает тонко выбрать нужный оттенок цвета.



CSS Color Names — наглядно демонстрирует все 147 названий цветов на английском.



Color Hexa — небольшая интерактивная энциклопедия цвета с полезными функциями.



Color Blender — «смешивает» два цвета, находя промежуточный



Таблица «безопасных» цветов, которые можно использовать в веб-дизайне, от Студии Артемия Лебедева. Штука несколько устаревшая, полезна скорее для общего развития, чем практического применения.



Color Palette Generator — составляет цветовую палитру любого изображения.



color.hailpixel.com — полноэкранный выбор цветов, удобно.



Flat UI Colors — простой сервис для выбора цветов из набора Flat UI от Designmodo.

Статьи


В качестве введения полезны статьи из Википедии: Цвет и Список цветов.

Статья о теории цвета на Хабре.

Серия статей о цвете от Smashing Magazine с упором на веб-дизайн, теория и практика, обязательна к прочтению:
  1. Color Theory For Designers, Part 1: The Meaning of Color
  2. Color Theory For Designers, Part 2: Understanding Concepts And Terminology
  3. Color Theory For Designers, Part 3: Creating Your Own Color Palettes


Colors in Web Design: An Exploration — статья на Six Revisions, где на практических примерах объясняется правильное использование цветов в веб-дизайне.

An Introduction to Color Theory for Web Designers — статья от Tutsplus для веб-дизайнеров об использовании цветов на сайтах, в том числе в типографике.

How to Calibrate Color for the Web — подробно описывается калибровка цветов в изображениях, предназначенных для интернета.

Colors in Web Design: Choosing a right combination for your Website — статья от 1stwebdesigner, рассказывающая о пользовательском восприятии цветов в веб-дизайне.

20 colour tips for website design — лаконичные советы по правильному использованию цветов в веб-дизайне.

Книги и другое полезное чтиво




Искусство Цвета, автор Иоханнес Иттен (1888-1967) — одна из самых популярных книг по теории цвета во всем мире. Есть на Озоне.



Color Design Workbook: A Real World Guide to Using Color in Graphic Design — хорошая книга об использовании цветов в дизайне.



The Ultimate Guide to Fantastic Color Usage — не совсем книга от Smashing Magazine, просто так называется, очень практично и структурированно рассказывается о цвете, применительно к веб-дизайну.



The Psychology of Color — удобная памятка о восприятии цветов.

UPD

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

Автор: @rutm
TemplateMonster Russia
рейтинг 55,02
Компания прекратила активность на сайте

Комментарии (8)

  • 0
    Color Schemer Studio 2 — симпатичная утилита для подбора цветовых тем. Минус в довольно высокой её стоимости.
  • +2
    Вот, Камиль, еще классный скрипт сделал blog.kam88.com/ru/lighten-darken-color-script.html
  • 0
    для drupal даже инструмент есть позволяющий сразу примерять подобранные цвета — youtu.be/_oqzor6cQpw?t=3m47s
  • +1
    И как всегда все забывают, что цвет в вакууме не бывает. Он заключен в какую то форму. Потому говорить о цвете без формы это дилетантство. Об этом говорят даже на первых курсах по дизайну еще советские преподаватели. Потому все эти цветомешалки хороши только пока на них любуешься в спроектированном интерфейсе. (некой форме) Перенести его на свой интерфейс с таким же «Вау.» не получится.

    Я не про то что пост плохой, про то что цветомешалки не волшебная палочка выручалочка.
  • +2
    Спасибо за подборку, теперь брату-начинающему дизайнеру будет чем заняться, прежде чем спрашивать в очередной раз «а так нравится?» :)
    «Color Scheme Designer» в свое время хорошо помог, для тех кто предпочитает работать с русским интерфейсом тут его «аналог» colorscheme.ru/
  • +2
    Для пользователей Photoshop хотел бы предложить добавить в свои палитры наборы свотчей гармонизированных цветов.
    Первый набор: bit.ly/19snEah
    Второй набор: bit.ly/11g1gfu
    Они совершенно бесплатные и облегчают подбор цветовых сочетаний.
  • +1
    Недавно написал расширение для Chrome, которое ищет ближайшие оттенки цветов по их именам и не только: chrome.google.com/webstore/detail/color-space/ifmbfjgnachickfhchheghlmannlgcma. В базе около 1000 цветовых оттенков на русском и английском.
  • 0
    Когда давно я писал пару статей о легком определении основных тонов на изображении.
    habrahabr.ru/post/136530/
    habrahabr.ru/post/137868/

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