Вводная
Большинство моих друзей знает, что я сейчас работаю над одним сайтом, который спасет мир (ну как всегда).
Так же мои друзья помнят о том, что я неровно дышу к дизайну и всяким рисовальным штучкам. Я, конечно, не претендую на роль дизайнера, но все-таки пытаюсь устранить айтишную безграмотность в этом вопросе.
Большинство из нашего брата-айтишника обладает на редкость мерзким чувством прекрасного и рисовать вообще не умеют. Я собственно не далеко ушел :-) Однако, опять же, большинству из нас часто необходимо сделать чего-то, и чтобы это нормально выглядело. Например, сделать какой-то сайт.
Дизайнерам надо платить не охота, а сайт выкладывать надо. Вот и проводят наши горе-дизайнеры-айтишники сутками, выбирая шрифт.
В это посте учимся быстро выбирать цвета для вашего программного детища.
Жалобы
Когда смотришь на палитру цветов, используемую в большинстве айтишных программ, впадаешь в уныние:
Даже кнопка «Custom» не помогает:
Сразу видно, что этот инструмент делал айтишник. Этот инструмент просто неудобен. Однако, наш брат айтишник честно им пользуется (ну не ставить же иллюстратор ради этого!). В результате при всем желании цвета нормально подобрать не удается.
Так исторически сложилось, что айтишники не умеют подбирать нормально цвета, а дизайнеры считают их лохами.
В действительности же, большинство современных дизайнеров пользуются средствами автоматизации, написанными для них айтишниками. Поэтому современный «дизайн» на 90% состоит из возможностей тех средств, которые дизайнер использует («ой, какой градиентик»).
Итак, как же нужно подбирать цвета?
Анамнез
Во-первых, забудьте ваш дурацкий RGB! Надо мыслить в HSL. Есть цвет (Hue). Зеленый, красный, синий, оранжевый. Нет его составляющих.
Чистый цвет можно увидеть в верхней части палитры (второй рисунок, пир этом Lum (яркость) должна быть посередине).
Вот это чистый желтый цвет. Ничего не примешано. Он насыщен на 100%.
Можно эту насыщенность уменьшить. Например, сделать 50%.
Если будет 0% — будет серый цвет. Это S — saturation. По сути S — это разбавление нашего цвета серой краской.
Дальше. Вот вы выбрали цвет и насыщенность. Это ваша лампочка. Вы находитесь в темной комнате (стены, однако, там белые). И вы эту лампочку включаете. Что в результате получится? Правильно, зависит от того, на сколько лампочка яркая.
К примеру, из нашего замечательного желтого (первый) может получиться почти белый.
Это последнее измерение, L — Luminance. По сути это разбавление белым.
1 рецепт.
Сначала выберите основной цвет. Это может быть любой цвет из радуги, разбавленные серой и белой краской на сколько вам нравится.
Выберите шаг, например 5% и добавьте в свой любимый цвет теней и света. Причем как раз с этим шагом. У вас получится 2 цвета, немного отстоящих от основного.
Обычно любят добавить еще один шаг, чтобы получить 5 и 10% отступы.
Мы получили монохромную палитру (H == const), которую уже можно использовать.
От этого алгоритма можно попрыгать в стороны:
— сделать разный масштаб для засветок и теней;
— сделать инверсные ходы: –засветка, –тень;
— подвинуться одновременно по двум осям (засветка + тень), это еще 4 цвета.
Однако, дизайнеры обычно не заморачиваются, а хавают то, что им дали :-)
Ок, скажете вы, «но меня тошнит от желтого». Или «а можно хотя бы два цвета использовать»?
С осями S и L все просто: шаг вправо, шаг влево — вот тебе еще 4 цвета. А вот с осью H все чуть сложнее. Во-первых, она замкнутая:
А во-вторых, тут есть больше паттернов.
Во-первых, это полюбившийся нам «вправо-влево». Выбирая шаг, можно делать отступы больше или меньше.
Во-вторых, это экстремальный «комплементарный цвет»:
В-третьих, это различные вариации на тему многоугольников: «треугольник», «квадрат». У этих обычно можно выбирать сдвиги.
Ну и различные комбинации, хотя дизайнеры опять же, не заморачиваются.
2 Рецепт.
Чтобы подобрать палитру цветов, выполните рецепт 1, затем добавьте другие цвета, пользуясь описанными паттернами.
Заключение
Вот так легко и просто. Тулзу, скриншоты с которой вы видели можно использовать он-лайн и бесплатно.
Если приглядеться к большинству дизайнов, то можно увидеть что они сделаны с этой техникой.
К примеру, сравните:
Вот выдранный из шаблонов ASP.NET MVC сайт.
А это я подобрал, пользуясь тулзой:
Обратите внимание на светлые варианты голубого (в таблице) и бледнозеленый (активная вкладка).
ЗЫ. Ежу понятно, что использование тулзы не освобождает от адекватного взгляда на цвета и отсечение лишних (см. последний пример).
