Как определить основы цветов, при создании цветовой палитры вашего бренда.
Цвет является одним из важнейших элементов в дизайн системе бренда или продукта. Наш мозг запрограммирован фильтровать стимулирующую информацию. Поэтому очень важно создать цветовую палитру, которая обеспечивает как визуальный интерес, так и ощущение порядка. ?
Я считаю, что создание определенного набора систем или правил важно, когда вы начинаете что-то разрабатывать. Цвета – это подмножество DLS (языка дизайн-системы) бренда, и это одна из основных областей, в которой дизайнеры не сформировали определенный набор правил использования цветов.
«Дизайн системы обеспечивают удобную, централизованную карту территорий развития известных товаров бренда с указателями, которые помогут вам исследовать новые регионы». ~ Крис Мессина, экс-сотрудник Uber
В этой статье мы обсудим методы определения набора правил для генерации цветовых вариаций, которые могут широко использоваться в палитре бренда в будущем. Вы можете выбрать любой из этих методов или объединить их, чтобы создать свой собственный.
Начнем
Вот список нескольких свойств цвета, которые мы будем использовать в полном объеме для создания цветовых вариаций:
- Оттенок (Hue)– это цвет (синий, зелёный, красный и т.д.).
- Цветность (Chroma) –это чистота цвета (высокая цветность не добавляет черный, белый или серый цвета).
- Насыщенность (Saturation) – это то, как много представлено данного оттенка (чем меньше насыщенность, тем меньше цвета и соответственно ближе к белому).
- Яркость / Значение цвета (Brightness/Value) указывает на то, насколько светлый или темный цвет (у темного цвета низкая яркость / значение цвета).
- Непрозрачность (Opacity) указывает насколько прозрачный или непрозрачный цвет.
- Тона (Tones) создаются путем добавления серого к цвету, что делает его более скучным, чем оригинал.
- Тени (Shades) создаются путем добавления к цвету черного, делая его темнее оригинала.
- Ненасыщенные тона (Tints) создаются путем добавления белого к цвету, делая его светлее оригинала.
Сводка свойств цвета. Мы будем использовать комбинацию этих свойств для генерации цветовых вариаций. Скачать версию для печати
Сетка для фреймворка
На приведенном выше графике показана зависимость между яркостью, непрозрачностью, тонами, тенями и цветностью для определенного оттенка. Этот график был построен с использованием масштаба 10-pt. Это означает, что непрозрачность цвета изменяется на 10% по оси X, а яркость изменяется на 10% по оси Y.
Мы будем использовать упрощенную версию вышеприведенного графика, используя масштаб 25-pt, для создания нашего базового фреймворка сетки. Эта сетка будет служить нашей игровой площадкой со множеством возможностей для генерации цветов.
Я использовал Sketch App ? для создания сетки фреймов, но можно создать то же самое в других инструментах проектирования, таких как Photoshop, Illustrator, Figma, Gimp и т.д. Мы будем использовать популярную цветовую систему HSB.
⚓ Вы получите изображение, аналогичное тому, что представлено ниже, когда выполните следующие шаги:
Шаг 1. Выберите базовый оттенок. Создайте квадрат 50 x 50 px с этим оттенком. Например, здесь я выбрал синий оттенок (H 212, S 67, B 89).
Шаг 2. Создайте квадратную плитку размером 10 x 10 px (H 0, S 0, B 100).
Шаг 3. Продублируйте эти белые плитки (5 строк, 5 столбцов), чтобы покрыть весь базовый квадрат из шага 1.
Шаг 4. Уменьшите непрозрачность каждого столбца белых плиток на 25% слева направо.
Шаг 5. Уменьшите яркость каждой строки белой плитки на 25% сверху вниз.
Вот Sketch-файл указанных выше шагов
Итак, теперь у нас есть базовая сетка фрейморка. Если вы правильно следовали указаниям, вы получили цветовую сетку аналогичную той, что показана выше в шаге 5. Мы будем использовать ее, чтобы изучить некоторые методы генерации новых цветов. ??
Чтобы лучше визуализировать цветовые вариации, я использовал еще 3 базовых оттенка в качестве примеров в приведенных ниже методах. Вы можете выбрать свои собственные цвета.
1. Метод тонов и теней
Этот метод является наиболее часто используемым из-за его простоты. С помощью этого метода мы и создали базовую сетку фреймворка. Непрозрачность и яркость белых плиток выше базового оттенка составляет от 100% до 0% (слева направо) и от 0% до 100% (снизу вверх) соответственно.
Цветовая тема на изображении справа была создана с использованием наших 3 базовых оттенков (смотрите выше) и выбора значений непрозрачности и яркости из центрального столбца слева (обозначено стрелкой).
2. Метод наложения
В этом методе мы используем тот же базовый фреймворк и меняем Blending mode белых плиток на Overlay. Это создает красивую разницу оттенков по всей сетке.
3. Метод наложения Soft Light
Как и в методе №2 мы меняем режим наложения белых плиток на Soft-Light. Это создает красивую разницу насыщенности по всей сетке. Затем мы выбираем все эти белые плитки и дублируем их дважды. Это создает более сильную разницу насыщения и, следовательно, лучшую цветовую яркость.
4. Метод наложения холодных цветов
В этом методе используется фреймворк сетки, которую мы создали в методе №2. Затем мы выбираем любой холодный цвет (синий, например). Создаем прямоугольник этого цвета и помещаем его на всю сетку. Измените Blending mode на Overlay. Полученная цветовая сетка будет ярче исходной.
5. Метод наложения теплых цветов
Очень похоже на метод №4, но вместо этого мы выбираем любой теплый цвет (например, оранжевый). Создаем прямоугольник этого цвета и помещаем его на всю сетку. Измените Blending mode на Overlay. Полученная цветовая сетка будет иметь сильный теплый оттенок.
6. Метод настройки яркости
Этот метод немного отличается (он легче) от описанных выше методов. Белые плитки над базовым оттенком отсутствуют в этой сетке. Вместо этого мы создаем плитки базового цвета (как показано на рисунке ниже) и создаем диапазон цвета от светлого к темному, увеличивая и уменьшая его значение яркости соответственно.
Цветовая тема справа была создана с использованием наших 3 базовых оттенков, а затем просто увеличено и уменьшено значения яркости, чтобы соответственно создать светлые и темные варианты.
7. Метод одновременной настройки яркости и насыщенности
Этот метод использует ту же сетку, что и метод №6 Настройка яркости. Здесь мы настраиваем значение насыщенности вместе со значением яркости. Мы создаем диапазон цвета от темного к светлому, увеличивая и уменьшая значение его яркости и соответственно одновременно уменьшая, и увеличивая значения насыщенности.
Правило 1: Более светлый оттенок цвета = более низкая насыщенность + более высокая яркость.
Правило 2: Более темный оттенок цвета = более высокая насыщенность + более низкая яркость.
Гибридный пример
Вот гибридный пример, который объединяет методы №1, №3, №4 и №5. На это меня вдохновила одна из статей на Sketch Tricks о быстром способе создания системы цветов в Sketch.
Вывод
Все дело в использовании инструментов и освоении основ элементов дизайна. Сочетание различных элементов / методов часто открывает бесконечные возможности.
Есть еще множество способов генерации цветовых тем. Как вы видите, создание Base Framework Grid было самой важной частью. Сетка служит игровой площадкой для вашего воображения при создании цветовых систем. Вы можете комбинировать несколько методов для создания совершенно нового набора цветов из вашего базового оттенка. (попробуйте градиенты вместо однотонного цвета ?).
Вы также можете использовать метод корректирующих слоев Justin Mezzell для создания винтажного набора цветов.
Вскоре я напишу о другом интересном (и сложном) методе создания набора цветовых тем, используя Gaussian Distribution function. Спасибо Nishant за твит, вдохновивший меня на изучение этого метода. Вы можете подписаться на меня, чтобы быть в курсе новых публикаций. ?
Об авторе
Привет, я Rahul Chakraborty, создаю опыт и разрабатываю решения на крупнейшей в Индии платформе электронной коммерции – Flipkart. ?
Я регулярно публикую твиты на тему дизайна и технологий, а также текущие проекты на Dribbble. Кроме того вы можете найти меня на Instagram.
✏ Наконец, это моя первая статья на Medium после длительного простоя. Фидбек приветствуется. Если вам понравилась статья или вы узнали что-то новое, порекомендуйте ее другим. Ставьте лайки.
Спасибо за прочтение! ❤️
Перевод статьи Rahul Chakraborty
Найновіші коментарі (0)