Топик

Lenald (») 17 авг 00:59

ЦВЕТА И ИХ СОЧЕТАНИЕ

    Для начала поговорим о цветах. Они бывают разными: светлые и темные, яркие и тусклые, насыщенные и ненасыщенные - и о них нужно знать, чтобы уметь их правильно использовать (или правильно не использовать). И если со всеми этими категориями цветов все понятно, то есть еще одна, о которой я обещал рассказать позже: "вырвиглазные".

    Вырвиглазные цвета - это цвета с предельной насыщенностью одного, двух или трех компонентов и нулевой - оставшихся: #f00, #ff0, #0f0, #0ff, #00f, #f0f и #fff.
    В качестве цвета текста на черном или белом фоне их использовать вообще нельзя, потому что на черном фоне они слишком яркие и концентрированные - как ножом по глазам; а на белом - у вас будет очень низкая контрастность цветов при высокой яркости, и в глазах будет рябить. В любом случае запомните: вырвиглазные цвета засчёт своей насыщенности темный фон словно прорезают, а на светлом - горят.
    У нас здесь ситуация немножко более щадящая засчёт того, что фон контента - темно-синий. Не черный и не белый, а темно-синий. Поэтому, осторожно, но мы можем их использовать.

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

Эти цвета очень хорошо выглядят в градиентных переходах. Это просто что доктор прописал!

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

Дизайн сайта в синих тонах дополнительно смягчает нам условия для использования вырвиглазного синего. Хотя его все равно лучше разбелить.

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

Lenald (») 19 авг 00:42

Теперь поговорим о сочетании цветов. У дизайнеров есть несколько базовых схем, которые могут помочь. Но нам понадобится иметь перед глазами цветовой круг. Если еще не знакомы с цветовой моделью HSV (оттенок, яркость, насыщенность) - как раз сейчас и познакомитесь, потому что именно её мы и будем использовать. Итак, схемы:

Монохром. Вы берете основной цвет (допустим, синий), а все остальные получаете путем изменения яркости или насыщенности основного цвета. Таким образом вы получаете монохромную палитру, где все цвета хорошо сочетаются друг с другом.
Например, основным возьмем #99f. Яркость - это переход цвета в черный и обратно. Сделаем менее яркий: #99c. Насыщенность - это переход цвета в белый и обратно. Сделаем менее насыщенный #ccf и более насыщенный #66f. Таким образом мы получили, не считая фона, уже 4 цвета: ████.
Яркость и насыщенность тоже можно комбинировать, но следите, чтобы не изменился оттенок. В смысле, чтобы синий вдруг не стал коричневым.

Контраст (оно же - Комплементарная схема). Вы берете основной цвет, а потом берете его противоположный. Например, #fc0 и #03f. Не самый популярный способ, потому что выглядит немного топорно. Чем дальше цвета друг от друга на цветовом круге - тем топорнее.

Аналог. Берете основной цвет и его соседей. Например, #9f9 и его соседи - #cf9 и #9fc.

Триада. Вы берете основной цвет и строите от него треугольник (обычно не равносторонний, а равнобедренный - иначе топорно). Например, #fc0 - основной, от которого мы строим треугольник: #0fc и #c0f.

Тетрада. Как и в триаде берём основной цвет, а потом строим от него квадрат или прямоугольник. То есть контраст + то же самое, повёрнутое на 90° или около того.

Отредактировал(а) Lenald, 19 авг 22:10

Lenald (») 19 авг 01:14

Комбинирование. Вы берете, например, аналог и контраст (такая комбинация, кстати, имеет даже собственное название - Аналого-комплементарная схема). Особенно изысканно смотрится комбинация монохромом-контраст.

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

Готовые наборы. Здесь ничего сложного - находите любую готовую цветовую палитру и используете, если понравилось.

Свободная палитра. Если вы в себе уверены, или хотите просто поэксперементировать - то вам никто не запрещает брать из головы какие угодно сочетания цветов. Практика - ваш самый лучший учитель!
Например, для клана Бесстрашные дьяволы я использовал свободную палитру. За основу я взял огонь с дымом, откуда получились #f04 (это, конечно, не огненно-красный, но просто мне нравится карминовый) #fc0 и #ссс. В довесок я взял еще стандартный цвет текста #bce4f4 и белый цвет ссылок #fff. Мои работы для этого клана вы можете посмотреть здесь.

Отредактировал(а) Lenаld, 22 сен 15:45

Lenald (») 19 авг 01:34

Некоторые советы по смешению:

Не переусердствуйте. Одна из очень распространенных ошибок – слишком пёстро.
    Много разных цветов или их частое чередование приводит к перенасыщению.
    В мире моды есть такая рекомендация при подборе гардероба: не больше трех цветов. То есть, что бы вы ни надели – желательно, чтобы в сумме у вас было не больше трех различных цветов. Градаций одного цвета может быть несколько, но кардинально разных оттенков должно быть около трех. Естественно, если умеешь, можно сочетать сколь угодно оттенков. Но если не умеешь – этот принцип очень помогает.
    Так вот: к дизайну эта рекомендация тоже применима. Конечно, мы используем не 3, а, обычно, около 5-6 оттенков, но перебирать не стóит.

Нет необходимости использовать 16 миллионов цветов на мониторе только потому, что это технически осуществимо. © Артемий Лебедев

Следите за средним цветом. Важно учитывать такой момент: как бы цвета хорошо не выглядели сами по себе, рядом с другими они могут плохо смотреться. А всё из-за того, что когда 2 и более цвета находятся рядом в поле зрения, возникает некоторая область "среднего цвета" – место, где цвета как бы смешиваются. При том, чаще всего результат получается не по принципу наложения света (красный и зеленый дают желтый), а по принципу красок – красный и зеленый дают какашечный коричневый (судите сами: ██).

Не увлекайтесь контрастными сочетаниями, иначе может получиться, как до недавнего времени было в теме поиска кланов на общем форуме:

Вот таким вот вырвиглазным красным жирным текстом, подчеркнутым вырвиглазным синим, было написано про запрет оффтопить. Пока читаешь, в глазах настолько рябит, что возникает эффект стерео-картинки – будто подчеркивание и текст на разных слоях, и они... плавают...

Отредактировал(а) Lenald, 8 окт 01:38

Lenald (») 19 авг 01:57

Глава 5

Глава 7

Оглавление

Отредактировал(а) Lenald, 19 сен 08:05

Lenald закрыл(а) топик