Цветовая палитра в Sketch

Предлагаю познакомиться с цветовой палитрой в Sketch. Делимся с вами интересным способом.
Для начала необходимо создать три одинаковых квадрата, такого размера, чтобы они могли с легкостью поделиться на три равные части. Например возьмем каждый размером 240*240pt.

Слои называем одноименно, так и выбранные цвета для заливки. То есть Blue, Red, Green. Меняем заливку слоя Red на #FF6161, Green — #4F953B, Blue – to#0076FF. Затем выделяем все слои и нажимаем горячую клавишу «А», для того, чтобы создать артборд.
Выбираем функцию ‘Around Selection’ (вокруг выделенных объектов) в инспекторе справа. Переименуем этот артборд на ‘Color Palette’.

SketchТеперь мы добавим тени на объекты, разделив их на три равные части каждый. Создайте два прямоугольника такой же ширины, как артборд. Высота должна составить одну треть квадрата — в нашем случае, это 80pt. Верхний прямоугольник выровняйте по верхнему краю, нижний – по нижнему. Для первого выберите белую заливку, с матовостью 20%, нижний аналогично только черным цветом. Таким образом мы получаем 3 оттенка каждого цвета. Переименуем созданные слои, для удобства в дальнейшей работе. Выровняйте прямоугольник горизонтально по центру красного квадрата, затем повторите манипуляцию и выровняйте по правому краю.

Sketch

Теперь самое интересное. Поменяйте заливку этих двух новых слоев на что-то яркое. Для примера мы возьмем желтый цвет. Задаем среднему прозрачность в размере 40%, правому – 80%. В конце, измените режим смешивания (blending) этих двух прямоугольников на overlay.

Sketch

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

SketchКак применять цвета в Sketch

Программа располагает возможностью отслеживания часто используемых цветов. Их можно посмотреть на панели инспектора, при выборе цвета для заливки. Он находится справа над показателем alpha. Нажимаем на этот значок, панель расширяется, мы видим цвета, которые находятся у вас в приоритете.

Sketch

Фиксация цвета в Sketch происходит очень быстро. После того, как вы выделяете цвет, в инспекторе появляются две панели Global Colors (для всех документов) и Document Colors (в текущем документе).
Чтобы сохранить цвет нажимаем Ctrl+C и щелкаем мышкой на нужный цвет.

Sketch

Плагин Sketch Palettes

При работе над большим проектом с огромным количеством файлов, создание цвета вручную отнимет у вас много драгоценного времени. В этом случае вас выручит плагин Sketch Palettes. С помощью него вы сможете сохранять палитры отдельным файлом, которые сможете применить к любому документу.
Для создания собственной палитры цветов, нажимаем в меню:
Plugins > Sketch Palettes и сохраняем палитру.

Обсуждение закрыто.