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



ОТТЕНОК

Оттенок - базовое понятие теории цвета, и основывается на цвете самого обьекта. Когда мы говорим "синий","зелёный","красный" - мы говорим об оттенках .Оттенки используются в дизайне для ПЕРЕДАЧИ ВАЖНОГО ПОСЛАНИЯ посетителю. Но об оттенках я писал в предыдущей статье цикла.

Примеры



У этого сайта перекликаются красный фон и цвета части текста.



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



Простой чистый красный очень популярен в дизайне



Здесь используется микс цветов, который играет и в шапке и в логотипе



А вот зелёный в чистом виде используется редко, выделяясь из других цветов.

ХРОМАТИЧНОСТЬ

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

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

Примеры



Голубой очень цветной, и он хорошо противостоит чёрному и белому



Ещё один сайт с "цветастый", хотя тут присутствуют и его оттенки



Сочетание сильно- и слабо-насыщенных оттенков создают интересный и элегантный дизайн



Яркий цветной дизайн выглядят здесь сдержанно



Сочетание разных по насыщенности цветов дают визуально приятный градиент

НАСЫЩЕННОСТЬ

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

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

Примеры



Насыщенность разных оттенков схожа, что даёт эффект единства в общем виде страницы



Сочетание ненасыщенных цветов образует мягкий дизайн, что подчёркивается добавление изображений с водой



Цвета с низкой насыщенностью не обязательно должны быть светлыми , что здесь и показано



Отличный пример, как можно выделить форму за счёт разной насыщенности её и фона



А это другой пример того, как соседствуют цвета с низкой и высокой насыщенностью


ЯРКОСТЬ

Яркость можно по-другом назвать "освещённостью", т.е. этот параметр показывает насколько светлый или тёмный цвет. Тёплые цвета имеют бОльшую яркость, нежели тёмные. Например, оранжевый и красный много ярче, чем синий и фиолетовый. Соответственно, самый яркий цвет - белый, а самый не яркий - чёрный

В дизайне как используются цвета с высокой яркостью, особенно если они с цветные. Контрасты дают нам эстетически приятные дизайны

Примеры



Яркий жёлтый действительно противостоит неярким чёрному и серому



В этом дизайне применены 2 разных голубых, различной яркости. И этот контраст выглядит привлекательно



Сочетание ярких цветов даёт нам энергичный и живой фон



Красный менее яркий, чем голубой, а голубой, в свою очередь, менее яркий, чем белый



Человеческий взгляд сам выбирает акценты в ярких цветах


ТОН

Тон цвета образуется, когда серый добавляется в него . Тона обычно более тусклые и унылые, чем чистые цвета.

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

Примеры



Тона придают сайту изящный вид, внося винтажность и старинность



На этом сайте используется синий разной затемненности, тонов и оттенков



Тонированный цвет можно усилить , если вокруг него расположить серый



В этом дизайне тона панели навигации и фона создают винтажный, "хенд-мейд" образ



Отличный пример, как чистый яркий цвет может сочетаться с тонированным



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


ТЕНИ

Тени получаются от добавление в оттенок чёрного, за счёт чего он становится темнее. Это часто порой неправильно используют для описания осветления или тона, но тени могут быть применимы только к оттенку, делая его темнее

В дизайне тени иногда заменяют чёрный, и играют роль нейтрализатора. Сочетание тонов и теней отличный способ создать красивый изящный сайт.

Примеры



Сайт Джонатана Мура содердит в фоне большое количество теней от фиолетового, а также более светлую раскраску в других частях



Использование различных теней вместе работает отлично, пока между ними поддерживается достаточный контраст.



Эффективная комбинация теней в расцветке, особенно в шапк



В этом дизайне для передачи теней используется градиент



Тени внутри текста придают дополнительный интерес сайту


ОСВЕТЛЕНИЕ


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

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

Примеры

/media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/fernandosilanes1.jpg" alt="" />

Осветлённый синий используется здесь для получения мягкого и изощрённого образа



Голубой очень популярен для передачи неба в "природных" дизайнах



Осветление очень популярно в "размытых" дизайнах



Осветления сочетаются между собой, обазуя изящный градиент


ИТОГИ

Чтобы ещё раз всё закрепить, В двух словах о каждом из вышеописанных понятий


* Оттенок это цвет (синий, зелёный, красный и тп.)
* Хроматичность (цветность) это чистота цвета (Высоко-хроматичные цвета не имеют в себе примесей черного, белого и серого)
* Насыщенность обозначает насколько силён или слаб цвет (насыщнный - сильный)
* Яркость обозначает насколько светлый или тёмный цвет (яркий - светлый)
* Тон образуется за счёт добавления серого, придавая унылости
* Тени образуються за счёт добавления черного, затемняя оттенок
* Осветление образуется за счёт добавления белого, делая оттенок светлее