1 1067x620 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета

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

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

Сегодня я собираюсь показать, как с нулевыми навыками рисования, вы можете создавать невероятные иллюстрации для ваших проектов, баннеров и фонов всего за 20 секунд или даже меньше.

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

Почему Looper?

Я занимаюсь исследованиями различных плагинов и приложений, которые могут помочь мне создавать оригинальные изображения. И я обнаружил, что Looper работает лучше всех, поскольку он позволяет мне создавать сложные иллюстрации за считанные секунды. Иллюстрации, которые я только мечтал нарисовать самостоятельно. Вы можете создавать множество типов изображений: обычные или созданные случайным образом паттерны, фоны и даже логотипы.

1 80x57 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета

Учебное руководство

Общий процесс работы с Looper и советы

Во время работы с Looper вам всегда нужно начинать с одной простой фигуры. Чтобы запустить “петлю”, вы можете использовать CMD + L, или вы можете перейти через меню плагинов, щелкнув: PLUGIN> LOOPER> LOOP. Вы можете использовать Looper на одном слое или группе слоев.

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

2 1 80x52 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета

Абстрактные фигуры

3 5 80x57 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета

Лучший способ понять, как работает Looper – создать нечто совершенно абстрактное. Начните с векторного инструмента и нарисуйте любую фигуру, которая вам нравится. Затем нажмите CMD + L и поиграйте с настройками, как вам угодно.

4 5 80x143 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета5 5 80x143 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета

Таким же образом вы также можете создавать фоны. Добавив немного градиента в слой, вы получите действительно классные эффекты:

6 6 80x57 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета7 4 80x143 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета8 2 80x143 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета

Простые паттерны

9 80x57 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета

Looper не только идеально подходит для создания абстрактных фигур, но и для создания простых, креативных паттернов. В приведенном выше примере я использовал один прямоугольник для формирования всего узора. Чтобы создать равномерно распределенные паттерны, используйте раздел “Form a Grid” в Looper. Я наугад задал параметры вращения и непрозрачности своему рисунку, что дало мне фантастический эффект менее чем за 10 секунд:

10 80x55 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета11 1 80x143 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета12 2 80x143 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета

Орнаменты

13 1 80x57 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета

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

14 80x55 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета

Обратите внимание, что я использую только функцию вращения по умолчанию и начинаю с двух копий:

15 80x143 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета16 80x143 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета

3D эффект

17 1 80x57 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета

Я заметил, что, играя со слоями Sketch, вы можете создавать впечатляющие 3D-эффекты. Ключом к созданию 3D-изображения является добавление небольшого количества градиентов и теней к вашей исходной фигуре и дублирование этой фигуры в разделе “Move”. Также здесь помогут вращение и масштабирование:

18 1 80x143 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета19 1 80x143 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета

Сфера из частиц

20 1 80x57 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета

Что вы можете создать, дублируя одну точку? Ну, с одной стороны, вы можете создать сферу из частиц. После создания большого количества точек с произвольным масштабом и непрозрачностью просто замаскируйте их овальной фигурой в Sketch:

21 80x143 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета22 1 80x143 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета

Эффект волны

Что мы можем сделать с одной прямой? Перемещая линию на пару пикселей вдоль одной оси и очень осторожно вращая ее, вы можете создать крутую волну, как в примере ниже:

23 1 80x57 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета24 1 80x143 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета25 1 80x143 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета

Фильм Tron (1982) – Строительные сетки

26 1 80x57 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета

И последнее, но не менее важное: давайте воссоздадим картинку из фильма Tron. Путем дублирования двух простых фигур – линии и прямоугольника – вы можете построить перспективную сетку:

27 1 80x143 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета

Все, что вам нужно сделать, это дважды использовать Looper на этих фигурах. Сперва, продублируйте прямоугольник с масштабом, увеличенным в процентах. Вы можете увеличить непрозрачность всех экземпляров в разделе “Opacity”. На втором этапе дублируйте линию с вращением (с настройками по умолчанию).

28 80x55 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета

И вуаля! Перспективная сетка в стиле фильма Tron, сделана всего за 20 секунд!

29 1 80x143 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета30 80x143 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета

Вы можете использовать перспективную сетку для создания других 3D-иллюстраций, как в приведенном ниже примере:

31 80x53 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета32 80x56 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета

Другие примеры – Sydney

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

33 80x57 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета34 80x143 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета35 80x143 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета

Почти Звезда смерти

36 80x57 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета37 80x143 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета38 80x143 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета

Глубокое море

39 80x57 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета40 80x143 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета41 80x143 - Создавая потрясающие иллюстрации с помощью Sketch и Looper в два счета

Оригинал: Wojciech Dobry

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи
1 3 80x42 - Подборка Sketch плагинов для наведения порядка в вашем дизайне

Подборка Sketch плагинов для наведения порядка в вашем дизайне

Список плагинов, которые я использую, чтобы навести порядок в своих Sketch файлах
8px grid 80x42 - Контролируйте отступы и размеры с помощью Sketch плагина Method

Контролируйте отступы и размеры с помощью Sketch плагина Method

Бесплатный плагин для реализации системных процессов 🤓 Скачать плагин 1. Правило 8px…
1 10 80x42 - Незаменимые Sketch плагины для управления дизайн-системой

Незаменимые Sketch плагины для управления дизайн-системой

Эта статья посвящена методам, которые я открыл для себя в процессе создания…