Робота з кольором 2 частина Основи веб-дизайну

1. Кольорові моделі HSB і HLS В основі цього колірного простору лежить вже знайоме нам райдужне кільце...
2. У чому ж відмінність HSB від HSL?
3. Колірна модель LAB
4. Установки кольору
5. У чому відмінність 8 біт, 16 біт і 32 біт?
6. Кольоровий профіль
7. Як створити колірну схему для сайту?
8. монохроматична палітра
9. Спліт компліментарна палітра
10. більше контрастів
11. Порада:
12. Кольори в матеріальному дизайні
13. Створюємо колірну палітру по зображенню
14. Синхронізація кольору в проекті
15. Корисні інструменти
16. Colors CO
17. Сolorhunt
18. Adobe Color CC
19. Colorschemedesigner
20. RealHex App
21. Webgradients
22. Корисні книги

Кольорові моделі HSB і HLS

В основі цього колірного простору лежить вже знайоме нам райдужне кільце RGB.

До речі, колірна модель HSB була створена Елві Реєм Смітом, одним із засновників Pixar. Вперше була формально описана їм у виданні Computer Graphics в серпні 1978 року. Саме його можна подякувати за це зручність.

Ця модель найбільш зручна у використанні, коли мова йде про творчу роботу з кольором. Дизайнеру інтуїтивно зрозумілі функції шкал Hue (тон або довжина хвилі світла), Saturation (насиченість або інтенсивність хвилі) і Brightness (яскравість або кількість світла), що дозволяє отримати передбачувані результати.

Управління кольором відбувається через такі параметри як:

Hue - відтінок або тон;
Saturation - насиченість кольору;
Brightness - яскравість.

Їм ми будемо користуватися як основними в Affinity Designer, тільки використовувати будемо HSL, а не HSB.

Параметр hue - це колір. Визначається градусами від 0 до 360 виходячи з квітів райдужного кільця.

Параметр saturation - відсоток додавання до цього кольору білої фарби має значення від 0% до 100%.

Параметр Brightness (Lighten) - відсоток додавання чорної фарби так само змінюється від 0% до 100%.

+ Opacity (Прозорість)

Якщо говорити простими словами, то на малюнку нижче ми можемо побачити, що колірний круг HSB складається з уже знайомих нам наборів RGB + CMY, які розташовані так, що кожен колір знаходиться навпроти доповнює (комплементарного) кольору, а сам розташований між двома, з яких був отриманий по аддитивному принципом. Тобто ми маємо вже повний колірний спектр змішаних квітів.

Тільки до цього колірному колі ми ще додамо Saturation - насиченість кольору і Brightness. І зможемо інтуїтивно зрозуміло і легко підбирати потрібний нам колір. Цей метод куди простіше і зручніше, ніж інші методи підбору кольорів.

Колірна модель HSB

Принцип схожий на одну з вистав світла з точки зору образотворчого мистецтва. Коли в уже наявні кольори додають білу або чорну фарбу.

Око людини сприймає кольори веселкового кільця, як кольори, які мають різну яскравість. Наприклад, спектральний зелений має велику яскравість, ніж спектральний синій. У колірній моделі HSB всі кольори цього кола вважаються володіють яскравістю в 100%, що, на жаль, не відповідає дійсності. Так як в її основі лежить все ж колірна модель RGB, вона, як ми розуміємо є апаратно-залежною. Те їсть, генерується математичним розрахунком і відображається на дисплеї. В реальності, за допомогою фарб, такі кольори відтворити проблематично.

Ця колірна модель конвертується для друку в CMYK і конвертується в RGB для відображення на моніторі. Так що здогадатися, яким у вас в кінцевому рахунку вийде колір буває не завжди легко.

У чому ж відмінність HSB від HSL?

Наочне відмінність шкал Brightness (вона ж Value) і Lightness.

Шкала Brightness моделі HSB змінює яскравість від чорного до найбільш яскравого. Шкала Lightness моделі HSL дозволяє змінювати яскравість (або світлість) кольору від чорного до білого, не торкаючись шкали Saturation. Точка найбільшою колірної насиченості знаходиться посередині шкали. Ось і все відмінність. Той чи інший вид зустрічається в різних редакторах, тому координати одного і того ж кольору можуть трохи відрізнятися.

Але і HSB і HSL однаково залежать від апаратної частини.

Таких недоліків хотіли уникнути, тому компанія CIE (Міжнародна комісія з освітлення - Commission Internationale de l'Eclairage) придумала нову модель, покликану не залежати від апаратної частини. І назвали її Lab.

Колірна модель LAB

У цій колірній моделі колір складається з:

Luminance - освітленість. Це сукупність понять яскравість (lightness) і інтенсивність (chrome)

A - це колірна гамма від зеленого до пурпурного
B - колірна гамма від блакитного до жовтого

Тобто двома показниками в сукупності визначається колір і одним показником визначається його освітленість.

LAB - Це апаратно-незалежна колірна модель, тобто вона не залежить від способу передачі нам кольору. Вона містить в собі кольори як RGB так і CMYK, і grayscale, що дозволяє їй з мінімальними втратами конвертувати зображення з однієї колірної моделі в іншу.

Ще однією перевагою є те, що вона, на відміну від колірної моделі HSB, відповідає особливостям сприйняття кольору оком людини.

Часто використовується для поліпшення якості зображення, і конвертації зображень з одного колірного простору в інший.

Яку практичну користь приносить Lab колірна модель?

В основному призначений для роботи з фотографіями.

На відміну від колірних просторів RGB або CMYK, які є, по суті, набором апаратних даних для відтворення кольору на папері або на екрані монітора (колір може залежати від типу друкарської машини, марки фарб, вологості повітря в цеху або виробника монітора і його налаштувань) , Lab однозначно визначає колір. Тому Lab знайшов широке застосування в програмному забезпеченні для обробки зображень в якості проміжного колірного простору, через яке відбувається конвертація даних між іншими колірними просторами (наприклад, з RGB сканера в CMYK друкованого процесу). При цьому особливі властивості Lab зробили редагування в цьому просторі потужним інструментом корекції.

Завдяки характеру визначення кольору в Lab з'являється можливість окремо впливати на яскравість, контраст зображення і на його колір. У багатьох випадках це дозволяє прискорити обробку зображень, наприклад, при додрукарської підготовці. Lab надає можливість виборчого впливу на окремі кольори в зображенні, посилення колірного контрасту, незамінними є і можливості, які це колірне простір надає для боротьби з шумом на цифрових фотографіях.

Установки кольору

Тепер давайте розберемося з колірними режимами.

Установки кольору - це реалізація колірної моделі в рамках конкретної програми.

RGB Color - режим RGB;

Gray (градації сірого) - півтонування, або зображення в сірій гамі

СМУК Color - режим СМУК;

Lab Color - режим Lab;

Але як ви помітили в списку є розрядність цих колірних моделей.

У чому відмінність 8 біт, 16 біт і 32 біт?

8 біт. 8 розрядів в двійковій системі (комп'ютер працює в двійковій системі числення). У 8-ми розрядах при двійковій системі можна зашифрувати максимум 256 цілих чисел (включаючи нуль) Формат JPEG (jpg) працює тільки з 8-бітними зображеннями.

16 біт. У 16 розрядів вже можна запхати 65536 значень на кожен канал (256 в квадраті). Це означає, що при збільшенні розміру файлу в два рази (8 bit -> 16 bit на канал) запас якості збільшується не в 2, а в 256 раз. Саме тому бажано зберігати і обробляти фотографії при глибині кольору 16 біт - і запас якості (інформації) набагато більше, і при кожній операції при обробці фотографії значення на кожному з каналів грубо НЕ округлюються. Перетворенням 8-бітного зображення в 16-бітове якість не збільшити, але це дозволить наявне якість надалі не втрачати. Формат TIFF підтримує 16-бітові зображення і є стандартом для фотографій з цієї глибиною кольору.

32 біт. Відповідно, 4294967296 значень яскравості на кожен з каналів. Порівняйте з 8-бітними зображеннями. Тому стандарт для обробки фотографій на сьогоднішній день - 16 біт на канал.

Простими словами, це кількість відтінків.

За замовчуванням Affinity Designer пропонує 8bit. Сучасні монітори мають глибину кольору 24 біта. Це по 8 біт на кожну компоненту R, G, B. Для створення веб-дизайну це більш ніж.

Якщо говорити простими словами, то 16bit - це для друку з високою якістю.

32bit - це для всяких супер-ультра-графік, типу в іграх на великих екранах з повним зануренням.

Для веб дизайну - потрібна перш за все швидкість і простота. Тому 8bit оптимально для проектів. Є також таблиця "безпечних" квітів (їх там всього 216, і звичайно ж в 8 біт), які гарантовано підтримуються більшістю браузерів.

Тому використовуємо 8bit.

Кольоровий профіль

Проблема з колірними профілями найчастіше виникає через відсутність розуміння у дизайнера, що ж таке колірний профіль і як його вибирати. Найбільш часто зустрічаються профілі Adobe RGB (1998) і sRGB IEC61966-2.1 (далі просто sRGB). Знайти цю вкладку можна в Document Setup в Affinity.

Буква «s» в назві RGB профілю означає «стандартний», а не "super", як ви могли подумати. Це дійсно самий часто використовується в світі профіль. Він створювався на основі аналізу цветовго охоплення середньостатистичного монітора, і в подальшому став застосовуватися повсюдно - і для фотодруку в тому числі.

Можна сказати, що його використання запобіжить ваше ізображеіе від великих спотворень при відтворенні на різних моніторах і багатьох принтерах. Але, зрозуміло, рідне середовище sRGB - це Інтернет. Тому це і є профілем за замовчуванням. Це означає, що ми бачимо зображення на екрані в кольорах, визначених стандартом sRGB IEC61966-2.1. Різниця між Adode RGB і sRGB полягає в ширині колірного спектра.

У чому ж проблема? Дизайнер, створюючи свій проект в Photoshop, не вказує колірний профіль, і, як наслідок, Photoshop залишає значення за замовчуванням - Adode RGB. Потім верстальник, отримавши макет, нарізає його, і в якийсь момент зауважує, що кольори в макеті і на зверстані сторінці відрізняються і все виглядати інакше. Після чого клієнт говорить вам: "А чому інші кольори на сайті? Зробіть як в макеті!". І потім починаються проблеми. Верстальник вам скаже, що дали, те і зверстав (і він буде прав). У слідстві чого буде зайва трата часу і сил на верстку, доведеться міняти значення кольорів, по новому зберігати картинки. У підсумку просто буде багато зайвої роботи, тільки через те, що дизайнер не простежив за колірними профілями.

А що ж за інші профілі і навіщо вони потрібні?

Всі профілі можна умовно розділити на дві групи - реальні і віртуальні.

Реальні, як можна здогадатися, є результатом вимірювання властивостей відтворення кольору конкретного пристрою в конкретних же умовах. Як приклад можна привести профіль монітора. Він буде містити інформацію про те, які кольори і яким саме чином, здатний відтворювати ваш монітор, що дозволить системі відображати їх максимально точно.

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

Віртуальні профілі використовуються в тих випадках, коли цільове пристрій невідомо чи й зовсім не передбачається, наприклад, ви готуєте файл для корекції в Photoshop. Ці профілі розраховуються математично без вимірювання властивостей конкретного пристрою. До таких профілів відносяться - sRGB, AdobeRGB і ProPhoto RGB.

AdobeRGB і ProPhoto RGB використовуються для корекції, професіонали використовують їх як робочу силу профілів для роботи в Photoshop. До слова - ProPhoto RGB ще є і робочим профілем в Adobe Camera RAW і, як наслідок, робочим профілем Lightroom.

При цьому треба розуміти, що ні монітор ні, тим більше, принтер, не можуть відтворити всі кольори, які ми бачимо. Як я говорив уже раніше в розділі. Більш того, як правило, друковані пристрої мають більш вузький колірний обхват, ніж монітори, не кажучи вже про віртуальні профілі на кшталт ProPhoto RGB, а це означає, що при друку частина квітів буде неминуче втрачена. Для того, щоб ці втрати були якомога менш помітні, використовуються спеціальні алгоритми стиснення колірних обхватів.

Тут нам приходить на допомогу процес «профілювання» при якому створюється колірної ICC-профіль, в якому враховуються не тільки особливі параметри друку (вид паперу, чорнило, тип освітлення і т.д.), але і технічні характеристики нашого друкованого пристрою. Формат колірного профілю «ICC» бере назву від англійського «International Color Consortium» (Міжнародний консорціум за кольором), яким було проголошено і затверджено стандарти даних для характеристик пристроїв кольорового введення / виведення (колірні параметри). До консорціуму входять практично всі так чи інакше пов'язані з графікою компанії: Adobe, Apple, Kodak, Microsoft, Silicon, Taligent, Canon, DuPont, Fuji, Xerox, Intel, Sony, Epson, HP і багато-багато інших.

Як ми бачимо, будь-який пристрій, яке вміє отримувати або показувати кольори, має свій певний профіль. Зазвичай виробники прагнуть забезпечити колірними профілями хоча б основні свої продукти. Користувачі можуть або скористатися фірмовими кольоровими профілями, або ж створити (налаштувати) власні за допомогою спектрофотометра, колориметра і інших спеціалізованих приладів. Хоча створення ICC-цветопрофіля і є процесом копіткою і складним, але його результатом стане отримання необхідного допоміжного файлу для принтерних драйверів який допоможе домогтися максимальної якості друку зображень і кольору.

Іншими словами - файл допоможе принтеру визначити найоптимальніше кількість чорнила і варіантів їх змішування для одержання самих натуральних чорних, червоних, жовтих і інших квітів, які будуть строго відповідати певним вимогам і спецстандартам. Друк налаштовується за допомогою настройки кольору зі зняттям колірної проби після кожної колірної корекції, що дозволяє домогтися максимальної якості профілювання і, відповідно, високої якості друку.

Отже - з принтером питання зрозуміле. Окремо було б непогано розібратися і з монітором, який проводиться за таким же принципом, як і принтер і теж має усереднені показники передачі кольору. Як і принтер, монітор теж можна піддати профілізації і налаштувати в ньому стабільну колірну гамму. Відкалібрувати цветопрофіль монітора можна на спеціальному обладнанні за аналогією з принтером. При колірному профілювання монітора і принтера ви зможете досягти максимального управління кольором - друкувати ту ж картинку, що буде на моніторі і максимально «вичавити» всі можливості вашого принтера.

Як створити колірну схему для сайту?

Після того, як ми дізналися всі основні моменти з якими ми будемо стикатися в процесі роботи з проектом, можна перейти до питання про те, як використовувати поєднання кольорів.

Давайте розглянемо різні підходи для створення колірних схем для веб-сайту.

монохроматична палітра

У такій палітрі використовується тільки один колір, але з різними значаеніямі насиченості і яскравості. Такі схеми акуратні, шляхетні і діють заспокійливо.

Давайте спробуємо створити монохроматичну палітру для нашого сайту.

Для цього виберіть один основний колір для вашого сайту. Я для прикладу візьму блакитний колір # 4EC4FF

Далі нам треба буде створити відтінки. В Affinity є дуже зручний функціонал для цього завдання.

1. Виберіть свій основний колір
2. Додайте його в Color Swatches. Для цього натисніть на іконку фарб, поруч з списком, що випадає назв ваших палітр.

Після чого, виберіть доданий нами колір і натисніть на нього правою кнопкою. Далі ви побачите різні можливості генерувати кольору щодо нашого основного кольору. Нас цікавить Tint і Shades для початку.

Таким чином генеруємо Tint і Shades.

Tint відповідає за відтінки кольору по збільшенню яскравості, змішування з білим кольором, а Shades по зменшенню яркрості, змішування з чорним. Для наочності ще генеруючи Tons (це відтінки кольору змішування з сірим, але нам це не знадобиться поки). Після того, як ми згенерували всі необхідні нам відтінки ми отримуємо наступну картину:

Далі з варіантів Tint і Shades відбираємо 3 відтінку. 1 основний у нас вже є. (Відтінки може бути і більше) Так, щоб вони були від самого яскравого до темного. Головне, щоб потім працюючи з ними можна було створювати контраст змішуючи їх. Я вибрав наприклад такі кольори:

Далі ви можете "розфарбовувати" ваш макет дотримуючись контрастність елементів. І пробувати різні варіанти.

Пам'ятайте про те, що текст повинен добре читатися. Дотримуйтесь контрастність. Якщо у нас темний фон, то беремо світлий текст, і навпаки, якщо у нас світлий фон, то беремо темний колір для тексту.

Ось це і є робота з монохроматичної палітрою. Тобто, ми працюємо з одним тільки кольором, використовуючи його різні відтінки Tint і Shades. Для новачків така схема буде найоптимальніша. У ній досить складно напортачить з квітами. Єдиний її мінус - це монотонність. Але для початку в будь-якому випадку краще практикуватися починаючи з цієї схеми. Для Лендінзі така схема більш ніж. Але ось уже там, де треба проектувати UI, без додаткових квітів ніяк не обійтися. Так як нам треба буде отримувати повідомлення про помилку, наприклад, або робити інші важливі акценти.

компліментарна палітра

Візьмемо як приклад компліментарну палітру. Як пам'ятаєте, ми вже говорили про цей спосіб підбору кольорів. У цій гармонії використовуються два контрастні кольори з кола і з них вибирається один основний колір. Інші кольори в палітрі - це похідні по насиченості і яскравості від двох Превоначально квітів. Для підбору комплиментарного кольору, повторюємо все ті ж дії як і для генерації відтінків, тільки вибираємо Complementary в списку.

Після чого додаємо до нашої основної палітри комплементарний колір.

Завдяки цьому кольору ми можемо розставити акценти. Додаємо наприклад колір кнопки в слайдер + яскравий промо блок з підпискою + Ховер на меню.

Варіантів фарбування елементів может буті Величезна Кількість. Я лише показую схематично, для того, щоб ви наочно могли зрозуміти як це працює. Як ви могли ще зауважити помаранчевий колір не сильно добре поєднується з яскраво блакитним кольором. Кнопка фонить. Не дивлячись на те, що ми вибрали програмну генерацію кольору, і все начебто має бути чітко. Але кнопку явно хочеться зробити більш контрастну. Що робити в подібних ситуаціях? Допоможуть в цьому нам відтінки, про яких ми поговоримо трохи пізніше. Давайте розглянемо ще один прийом і обговоримо як уникати проблем при нестачі контрастів.

Спліт компліментарна палітра

Це різновид попередньої палітри, з тією різницею, що один з контрастних кольорів розділений на два сусідніх кольору. Беремо наш основний колір (блакитний) і генеруємо сплати компліментарну палітру.

Після того, як ми отримуємо нові кольори, повертаємося до нашої першої блакитний палітрі і додаємо два нових кольори.

З'явилися нові кольори з якими можна експериментувати і по-різному додавати колір в наш макет. Власне і по іншим іншим методам генерації кольору діємо аналогічно. Це всього лише один з варіантів підбору кольорів.

Головне пам'ятати про те, що краще користуватися математичним розрахунком, ніж на око тикати і підбирати кольори на "відчуття".

Ось такий виходить варіант. Звичайно, дуже райдужний, але як я вже говорив, це чисто схематичний приклад. Насправді працювати з квітами треба куди більш ретельніше, з розумінням того, де потрібні акценти і яку смислове та емоційне навантаження несе той чи інший блок на сайті.

Коли кольору стоять на відстані один від одного на білому тлі, вони звичайно поєднуються і виглядають добре, але коли йдеться про тлі і кнопках, то можуть виникати проблеми.

Дивлячись на те, що вийшло, я розумію, що мені не вистачає контрастності між квітами. Щось хочеться зробити потаємні, а щось світлішими, на цей випадок в допомогу прийдуть відтінки.

більше контрастів

Р абот з різним кольором важливо обов'язково генерувати їх відтінки. Інакше кольору підібрати можна буде, а ось поєднання їх може фонить або бути недостатньо контрастним, як ми бачили в попередніх прикладах.

Давайте спробуємо згенерувати ще більше кольорів і відтінків. Скористаємося тим, що нам пропонує Affinity Designer для створення колірних акордів.

Наприклад, ми беремо за основу певний колір і хочемо згенерувати всі можливі поєднання. Візьмемо за основу наприклад: # EF382E

Далі генеруємо усіма способами кольору крім аналогових (+ відтінків теж не чіпаємо, ті, що під лінією, вони знадобляться пізніше), після чого чистимо дублікати квітів.

Отримуємо ось таку палітру. Всі ці палітри добре і гармонійно виглядають, так як у них однаковий Lighteen і Saturation. Ну нам потрібні різні відтінки. І не всі кольори відразу нам можуть стати в нагоді.

Тепер для кожного кольору генеруємо відтінки. Використовуючи Tint, Shades (при бажанні можна ще й Tons.)

Тепер у нас є значний набір. Можна сміливо працювати з проектом і брати піпеткою ці кольори або копіювати значення, кому як зручніше. Можна ще ще більше розширити цю палітру якщо додати до кожного основного кольору Tons або аналогові кольору. Мені особисто такий метод дуже підходить і подобається. Я чітко перед очима бачу всі можливі відтінки і коли в UI багато різних елементів, часто треба зробити щось яскравішою, щось потаємні, десь додати додатковий колір, мені не треба навмання тикати мишкою і створювати відтінок, у мене є чітка колірна схема і я до неї в разі потреби звертаюся.

Ми можемо компонувати всі ці кольори як нам завгодно і зручно створюючи різні палітри, використовуючи не тільки основні кольори, які ми генерували по колірних акордів, але і брати їх відтінки.

Все залежить від вашої задумки, контенту, ідеї, цілі. Наводжу яскраві приклади про те, як зовсім по різному можна використовувати поєднання різних кольорів і відтінків. Звичайно, щоб створювати таку вдалу гармонію, потрібна певна практика, смак, почуття кольору. Практикуйтеся і у вас все вийде.

Заради експерименту можете взяти останню картинку, наприклад, і згенерувати колірні акорди методом Square за основу взяти піпеткою червоний колір. Ви отримаєте саме ті кольори, які є в палітрі сайту. (+ Зелений ще, який не взяли).

І якщо подивитися уважно, то два верхніх кольору трохи приглушені і взяті з відтінків Tones.

Це зайвий раз підтверджує зручність і практичність роботи в Affinity Designer.

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

Порада:

Найчастіше використовую метод Triadic і Square при створенні кольорової палітри. Раджу в першу чергу придивитися до них. І при створенні палітри, коли наприклад беру основний колір, перед тим, як генерувати відтінки і інші кольори, на підставі його, роблю його на тон контрастніше і яскравіше, ближче до "кислотному" його варіанту. І вже від цього "кислотного варіанту" генеруючи інші кольори. Як би трохи розширюючи амплітуду кольорової палітри. Це треба для того, щоб наприклад потім, якщо нам знадобляться градієнти, ми могли їх робити більш контрастніше. Інакше не буде вистачати яскравості в градієнті. Нижче приклад:

Зліва кнопка, без створення додаткового "кислотного кольору" від нашого основного. Справа, генерація кольору на підставі "кислотного кольору". Як бачите праворуч кнопка вийшла більш приємна по градієнту.

Хоча знову ж таки, це мій особистий метод. Якщо вам не потрібні градієнти, то просто створюєте базовий колір який ви хочете взяти за основу і від нього відштовхуєтеся. Ви це краще відчуєте все, коли у вас буде перед очима вся палітра кольорів і відтінків і конкретне завдання по дизайну. Тоді ви вже точно, будите розуміти, що вам не вистачає. А використовуючи наведені вище методи, зможете створювати всі необхідні вам кольору.

Метод який я описав вище більше підходить як handmade, який змушує подумати, поекспериментувати з квітами, зрозуміти взаємодію числових значень в кольорі і в моделях. Дозволяє самостійно контролювати колір. Але є багато і готових рішень, наприклад, Material Design Colors або онлайн генератори квітів.

Кольори в матеріальному дизайні

Хоч я і не користуюся цим, але не озвучити це і розглянути не можу. Матеріальний дизайн (material design) - це дизайн-мову і стиль компанії Гугл, випущений 25 червня 2014 року. Спочатку всередині компанії його називали «квантова папір» (quantum paper). Основна метафора матеріального дизайну - плоска папір, що знаходиться в тривимірному просторі і все таке.

Некоректна посилання. Спробуйте другую.ОтменаВставіть

замініті відео

Колірна палітра

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

Дана колірна палітра починається з основних кольорів і заповнює весь спектр, створюючи повноцінну палітру, придатну для використання в Android, iOS і в Мережі. Google рекомендує в якості основних кольорів вашого застосування використовувати відтінки з насиченістю 500, а решта - в якості акцентних кольорів.

Простими словами, вони вже розробили певну схему кольорів і створили готову палітру. Знаєте, колірні палітри, мені чимось нагадують роботу з сітками. Вони теж підкоряються певним математичним розрахункам, є свої закономірності, порядок. Детальніше про колір в матеріальному дизайні можна знайти тут . Варто заглянути туди, хоча б для того, щоб розуміти як проектувати свої колірні схеми і які треба задіяти кольору і контрастності.

Але, оскільки я не є активним користувачем матеріальних квітів, детально розписувати про них в книзі не стану.

Але якщо раптом вам в роботі десь це обов'язково знадобитися (особливо часто потрібні ці знання, коли ви приходите працювати в компанію, яка займається розробкою мобільних додатків), і вам чітко треба слідувати керівництву стилю з матеріального дизайну (там величезна і ціла архітектура зі своїми правилами і законами), все можна уважно вивчити на офіційному сайті: https://material.io/guidelines/

Створюємо колірну палітру по зображенню

В Affinity Designer є ще дуже зручна функція, яка дозволяє завантажити зображення і на основі кольорів зображення згенерувати колірну палітру.

1. Для цього збережіть зображення на комп'ютер, який потрібно просканувати.
2. Відкрийте вікно swatch і натисніть на іконку в правому верхньому куті, далі в списку виберіть Create Palette from image

Далі вибираємо кількість квітів скільки нам необхідно.

Як бачите, програма вже по розумному генерує кольору і пропонує нам готову палітру з різними контрастами. Починаючи від найяскравішого та темного.

Для чого це може стати в нагоді?

Наприклад для чіткої колірної асоціації з певним продуктом (кава наприклад). Якщо зробити сайт в таких кольорах, то у людини буде чітка асоціація з цим поживним напоєм.

Або ж наприклад ми малюємо ілюстрацію і хочемо точно зрозуміти якого кольору робити вогонь.

Або нам потрібні кольори океану, якщо ми робимо сайт для дайвінгу або серфінгу, наприклад.

Синхронізація кольору в проекті

Є ще така крута фішка в Affinity Designer, як можливість синхронізувати кольору в проекті. Тобто, призначати глобальний колір у палітрі, і якщо ми міняємо цей колір, то автоматично, всюди, де він був використаний, колір також зміниться. Більш докладніше про цю функцію в відео:

Некоректна посилання. Спробуйте другую.ОтменаВставіть

замініті відео

Корисні інструменти

Ділюся підбіркою корисних інструментів для роботи з квітів.

Colors CO

https://coolors.co/

Швидкий генератор готових колірних тем. Є додаток для iOS App.

Сolorhunt

http://www.colorhunt.co

Приємний і простий в використання сайт з готовими кольоровими темами, постійно оновлюється.

Adobe Color CC

https://color.adobe.com/ru/

Adobe Color - це зручне і потужне веб-додаток, що дозволяє створювати пробні і остаточні варіанти колірних тем для використання в проекті і надавати доступ до них.

Colorschemedesigner

http://colorschemedesigner.com/csd-3.5/

Потужний онлайн і зручний онлайн генератор для створення колірних тем. Інтуїтівно зрозумілій інтерфейс. Можливість редагувати яскравість і контрастність теми. Наочний приклад використання палітри з відтінками.

RealHex App

https://itunes.apple.com/ru/app/realhex/id881474912?mt=8

Класне мобільний додаток для отримання кольору з реального середовища. Буває прийдеш в гарне місце, або побачиш класний постер з цікавим кольоровим рішенням, а зберегти кольору немає можливості. Але завдяки цьому додатку можна робити захоплення квітів через камеру і зберігати в HEX, CMYK, RGB коді. Дуже зручно, рекомендую. Відмінна практика.

Webgradients

https://webgradients.com - відмінний інструмент, який допоможе підібрати потрібний градієнт. Підходить, більше для натхнення. Бо якщо ви створюєте колірну палітру, то градієнт варто робити, відштовхуючись від кольорів вашої основної палітри. Хоча, можете піти і від зворотного. Вибрати сподобалася градієнт для вашої нової ідеї і вже на основі квітів градієнта розробити колірну схему.

Корисні книги

Так само ділюся з вами корисними книгами по роботі з кольором. Прочитавши ці книги ви зможете більш глибоко вивчити це питання.

Мистецтво кольору Йоганнес Іттен

Книга для тих, хто хоче навчитися володіти гармонією кольору.

Йоганнес Іттен з безмежною любов'ю розповідає читачеві про аспекти теорії кольору. Книга, увібравши в себе досвід досліджень і практичних занять, покликана звільнити свідомість художника і прояснити низку проблем.

Читання «Мистецтва кольору» схоже на медитацію, що дозволяє розширити межі розуміння і розвинути в собі почуття кольору.