Mesh Gradient Sketch plugin
Инструменты

Mesh Gradient Sketch plugin

Egor Komarov
Egor Komarov

Mesh Gradient - это плагин для Sketch, который позволяет легко создавать сложные и красивые градиенты.

Скачать: https://www.meshgradients.com

Как работать с плагином?

  1. Определите цвет для каждого угла. Градиенты сетки вычисляют промежуточные цвета от одного угла до другого.
  2. Установите разделение сетки (по умолчанию 2x2, что означает 9 вершин).
  3. Как только вы будете довольны общим видом, начните играть с цветом и двигайте точки.

Несколько советов

  • Наличие большого количества разделений сетки дает больший контроль над градиентом, но также усложняет обработку всех точек и получение гладкой интерполяции. Обычно 2x2, 3x3 и 4x4 будет более чем достаточно для ваших творений.
  • Вы можете изменить цвета углов и деления по своему желанию, и градиенты сетки будут сброшены и пересчитают сетку в реальном времени. Если вы выполнили редактирование самой сетки (перемещение точки, изменение ее цвета,…), он спросит вас, действительно ли вы хотите сбросить ее (отменить сделанные изменения) или сохранить текущее состояние редактирования.

Используйте коллекцию для начальной загрузки вашего градиента

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

Готовые коллекции градиентов для Sketch 

Несколько советов

  • Разделение сетки нельзя изменить в градиентах коллекции, так как это повлияет на характер заданного градиента. Тем не менее, вы можете использовать их как вдохновение («как они построены?») И создавать свои собственные.

Что генерирует сетка-градиент?

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

И, как любую заливку изображения, ее можно настроить на «Заливку», «По размеру», «Плитка» или «Растянуть». И, как любой слой, его можно экспортировать как угодно.

Определение градиента надежно хранится в файле Sketch . Таким образом, вы (или любой, у кого установлены градиенты сетки) сможете настроить его по мере необходимости. Просто выберите фигуру и снова запустите градиенты сетки, чтобы отредактировать градиент.

Настоящая сетка. Настоящий градиент.

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

На самом деле, нажав клавишу M, вы можете переключать представления градиента и сетки, что (помимо крутого) довольно полезно, поскольку вы можете видеть, как работает сетка, и если ваши точки или касательные вызывают странные перекрытия, что может привести к в странных (или потрясающих!) градиентах.

Источник

Стоимость плагина

Есть бесплатная версия плагина для Sketch и платная. Платная обойдется в 9.99$