Hi-Tech

Фреймворк для создания цветовой палитры

Перевод подготовил Николай Геллар, автор блога о дизайне Sketchapp.me.

Как определить основы цветов при создании цветовой палитры бренда

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

Цвета — это подмножество DLS (языка дизайн-системы) бренда, и это одна из основных областей, в которой дизайнеры не сформировали точный набор правил использования цветов. Создание определённого набора систем или правил важно в начале разработки.

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

Крис Мессина

экс-сотрудник Uber

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

Ниже — список нескольких свойств цвета, которые мы будем использовать в полном объёме для создания цветовых вариаций.

  • Оттенок (Hue) — это цвет (синий, зелёный, красный и так далее).
  • Цветность (Chroma) — это чистота цвета (высокая цветность не добавляет чёрный, белый или серый цвета).
  • Насыщенность (Saturation) — как много представлено данного оттенка (чем меньше насыщенность, тем меньше цвета и ближе к белому).
  • Яркость или значение цвета (Brightness, Value) указывает на то, насколько светлый или тёмный цвет (у тёмного цвета низкая яркость и значение цвета).
  • Непрозрачность (Opacity) указывает, насколько прозрачный или непрозрачный цвет.
  • Тона (Tones) создаются путём добавления серого к цвету, что делает его более скучным, чем оригинал.
  • Тени (Shades) создаются путём добавления к цвету чёрного, делая его темнее оригинала.
  • Ненасыщенные тона (Tints) создаются путём добавления белого к цвету, делая его светлее оригинала.

Мы будем использовать комбинацию этих свойств для генерации цветовых вариаций. Сводка свойств цвета.

Фреймворк сетки в масштабе 10 pt для понимания свойств цвета

Сетка для фреймворка

Этот график был построен с использованием масштаба 10 pt. На приведённом выше графике показана зависимость между яркостью, непрозрачностью, тонами, тенями и цветностью для определённого оттенка. Это означает, что непрозрачность цвета изменяется на 10% по оси X, а яркость изменяется на 10% по оси Y.

Эта сетка будет служить нашей игровой площадкой со множеством возможностей для генерации цветов. Мы будем использовать упрощённую версию вышеприведённого графика, используя масштаб 25 pt для создания нашего базового фреймворка сетки.

Мы будем использовать популярную цветовую систему HSB. Я использовал Sketch App для создания сетки фреймов, но можно создать то же самое в других инструментах проектирования, таких как Photoshop, Illustrator, Figma, Gimp и так далее.

Вы получите изображение, аналогичное тому, что представлено ниже, когда выполните следующие шаги.

  1. Выберите базовый оттенок. Создайте квадрат 50×50 px с этим оттенком. Например, я выбрал синий оттенок (H 212, S 67, B 89).
  2. Создайте квадратную плитку размером 10×10 px (H 0, S 0, B 100).

  3. Продублируйте эти белые плитки (пять строк, пять столбцов), чтобы покрыть весь базовый квадрат из первого шага.

  4. Уменьшите непрозрачность каждого столбца белых плиток на 25% слева направо.

  5. Уменьшите яркость каждой строки белой плитки на 25% сверху вниз.

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

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

1. Метод тонов и теней

С его помощью мы и создали базовую сетку фреймворка. Этот метод является наиболее часто используемым из-за его простоты. Непрозрачность и яркость белых плиток выше базового оттенка составляет от 100% до 0% (слева направо) и от 0% до 100% (снизу вверх) соответственно.

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

2. Метод наложения

Это создаёт красивую разницу оттенков по всей сетке. В этом методе мы используем тот же базовый фреймворк и меняем Blendingmode белых плиток на Overlay.

3. Метод наложения Soft Light

Это создаёт красивую разницу насыщенности по всей сетке. Как и во втором методе, мы меняем режим наложения белых плиток на Soft Light. Это создаёт более сильную разницу насыщения и, следовательно, лучшую цветовую яркость. Затем мы выбираем все эти белые плитки и дублируем их дважды.

4. Метод наложения холодных цветов

Затем мы выбираем любой холодный цвет (синий, например). В этом методе используется фреймворк сетки, которую мы создали во втором методе. Измените Blendingmode на Overlay. Создаём прямоугольник этого цвета и помещаем его на всю сетку. Полученная цветовая сетка будет ярче исходной.

5. Метод наложения тёплых цветов

Создаём прямоугольник этого цвета и помещаем его на всю сетку. Похоже на четвёртый метод, но здесь мы выбираем любой тёплый цвет(например, оранжевый). Полученная цветовая сетка будет иметь сильный тёплый оттенок. Измените Blending mode на Overlay.

6. Метод настройки яркости

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

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

7. Метод одновременной настройки яркости и насыщенности

Здесь мы настраиваем значение насыщенности вместе со значением яркости. Этот метод использует ту же сетку, что и шестой метод. Мы создаём диапазон цвета от тёмного к светлому, увеличивая и уменьшая значение его яркости, одновременно уменьшая и увеличивая значения насыщенности.

Правила

  • Более светлый оттенок цвета — низкая насыщенность и высокая яркость.
  • Более тёмный оттенок цвета — высокая насыщенность и низкая яркость.

Гибридный пример

На это меня вдохновила одна из статей на Sketch Tricks о быстром способе создания системы цветов в Sketch.

Сочетание различных элементов или методов часто открывает бесконечные возможности. Всё дело в использовании инструментов и освоении основ элементов дизайна.

Как вы видите, создание Base Framework Grid было самой важной частью. Есть ещё множество способов генерации цветовых тем. Вы можете комбинировать несколько методов для создания нового набора цветов из вашего базового оттенка. Сетка служит игровой площадкой для вашего воображения при создании цветовых систем. Попробуйте градиенты вместо однотонного цвета.

Вы также можете использовать метод корректирующих слоёв Justin Mezzell для создания винтажного набора цветов.

#дизайн

Показать больше

Похожие публикации

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»