Теперь вы можете с легкостью рисовать в Sketch красивые спирали

Кратко о главном

  • 6Spiral – бесплатный плагин для Sketch, с легкостью рисующий спиральные фигуры.
  • Вы также можете рисовать спиральные фигуры под определенным углом в параллельной проекции, чтобы использовать их во все более популярных трехмерных изометрических иллюстрациях.
  • Вы можете скачать плагин здесь.  Также есть отдельный Sketch-файл с руководством и примерами.
  • Сочетание клавиш для плагина – Control + Shift + 6. Начальная точка спирали расположена в центре текущей фигуры.

6Spiral – бесплатный плагин для Sketch

Как использовать ?6Spiral

Как использовать ?6SpiralКак использовать 6Spiral - создание спирали

  1. Скачайте последнюю версию плагина.
  2. Распакуйте архив и дважды кликните по 6Spiral.sketchplugin, чтобы установить плагин.
  3. Нарисуйте прямоугольник, выделите его и перейдитеPlugins -> 6Spiral – Make Spiral или используйте сочетание клавиш Control + Shift + 6.
  4. Измените параметры, чтобы получить форму спирали / пружины, как в приведенных выше GIF-файлах.
    (Помимо изменения ширины линии, при создании фигуры вы не можете применять параметры стиля).
  5. Вы можете сделать некоторые предлагаемые общие шаги постобработки перед тем, как применить свой собственный стиль. (Больше информации в следующем разделе).

Убедитесь, что вы выбрали только одну простую фигуру, когда запускаете 6Spiral. Плагин не будет работать, если вы выберете группу, артборд, текстовый слой или любой слой с фигурой, который вы не создали сами.

Постобработка после создания спирали

6Spiral всегда будет создавать точку начала координат, которая затем может быть удалена.

(Если внутренний радиус установлен на ноль, в точке начала координат будет две точки, и вы должны удалить одну из них).

Постобработка после создания спирали

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

Хорошим способом создания полностью гладкой спирали является установка большого радиуса угла во всех точках (кроме последней и первой точек).

Пример использует очень малое количество точек, чтобы лучше проиллюстрировать эффект углового радиуса. Используйте большее количество точек, если ваша цель – создать гладкую спираль.

Где использовать спирали

Вот несколько концептов интерфейса использования спиралей в качестве индикаторов состояния:

Пример использования спиралей -1Пример использования спиралей -2Пример использования спиралей -3

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

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

На больших экранах есть возможность использовать их в игровом HUD-дизайне.

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

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

Теперь вы можете с легкостью рисовать в Sketch красивые спиралиТеперь вы можете с легкостью рисовать в Sketch красивые спиралиТеперь вы можете с легкостью рисовать в Sketch красивые спирали

Примеры некоторых существующих спиральных иконок, которые можно найти на thenounproject.com.

Кроме того, вы можете также комбинировать 6Spiral с другими плагинами Sketch, такими как Looper и Sketch Isometric, чтобы добиться интересных эффектов:

6Spiral + Looper
6Spiral + Looper
6Spiral + Sketch Isometric
6Spiral + Sketch Isometric

Как использовать спирали

Для веб-приложений и браузеров вы можете экспортировать их как SVG-файл, а затем анимировать / управлять параметрами stroke-dasharray и stroke-dashoffset с CSS и Javascript. Целесообразно работать с SVG-файлом для прототипирования, даже если для конечного продукта вам нужно будет экспортировать файл и работать с разными форматами.

Анимация, выполненная только с помощью CSS.

GIF-файл, указанной выше CSS-анимации.
GIF-файл, указанной выше CSS-анимации.

Теперь настала ваша очередь создавать великолепные спирали?

Было бы здорово увидеть, что люди сделают при помощи этого плагина.
Оставляйте работы, сделанные с помощью этого плагина в комментариях к оригиналу статьи. ?
Не стесняйтесь оставлять ссылку, если вы разместили свой дизайн на Behance / Dribbble / UpLabs и т.д.

Заключение

Автор плагина с радостью выслушает предложения по функциям, которые вы хотели бы увидеть в плагине в будущем. Вы можете написать ему на почту [email protected] или @MatejMarjanovic в Twitter. О багах лучше всего сообщать на Github ?.

Надеюсь, вам понравится плагин.

0 Комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Подробнее

State Machine – плагин для переключения страниц, табов, пунктов меню

State Machine – это плагин для Sketch, который позволяет использовать кнопки ⌃⌘S для переключения активной вкладки на таб-баре, активный пункт в меню навигации или номер страницы в пагинаторе.
Sort Layers - сортировкиа слоев или артбордов в Sketch
Подробнее

Sort Layers, плагин для сортировки слоев или артбордов в Sketch

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

Лучшие статьи, раз в неделю, с доставкой на почту

Total
6
Share