Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#подборки</a>

2 <ul><li>4 янв 2023</li>

3 <li>0</li>

4 </ul><h2>Генеративные паттерны</h2>

5 Рассказываем, где нарисовать и скачать паттерны, узор которых никогда не повторяется.

6 Знает всё о дизайне, фотографии и современном искусстве. Постоянный посетитель московских музеев и галерей.

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

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

9 Генеративный паттерн от команды NonformИзображение: Nonform / ShutterstockНарисовать генеративный паттерн самостоятельно можно, но очень трудоёмко. Поэтому существуют программы, в которых указывают набор элементов и правил, а алгоритм за доли секунды генерирует узор. Запускать процесс можно бесчисленное количество раз, но даже при одинаковых настройках паттерн всегда будет получаться новым.

10 Рассказываем, как получить генеративный паттерн онлайн:

11 <ul><li>сервис<a>PatternPad</a>с большим количеством управляемых настроек;</li>

12 <li>сервис<a>Tabbied</a>с одиннадцатью шаблонами рисунка;</li>

13 <li>комьюнити разработчиков<a>OpenProcessing</a>;</li>

14 <li>четыре инструмента<a>Components AI</a>.</li>

15 </ul>Скриншот: сайт PatternPad / Skillbox MediaСервис<a>PatternPad</a>создаёт генеративные паттерны на основе 21 подготовленного узора или 17 фигур. Паттерн может использовать несколько цветов поверх фона, но благодаря тому, что элементы поддерживают полупрозрачность, палитра получается гораздо шире.

16 Настройки генератора очень просты. На правой панели можно:

17 <ul><li>Выбрать цвета, которые будут использованы в паттерне: параметрFrontна панелиColors. При открытии программа предлагает только два оттенка, чтобы добавить ещё, нужно нажать на кнопку "+". Кнопка "-" удаляет последний добавленный цвет.</li>

18 <li>Выбрать цвет фона: параметрBackна панелиColors.</li>

19 <li>Задать количество строк и ячеек сетки: панельSize- параметрыColumnsи Rows. Что интересно, их можно сделать даже несколько тысяч (учитывайте возможности своего компьютера).</li>

20 <li>Выбор или создание узора:Style.</li>

21 </ul>Вкладка Preset предлагает уже подготовленные узоры. Для внесения собственных изменений нужно перейти во вкладку Customize. Здесь можно:

22 <ul><li>задать расстояние между элементами - параметрSpace;</li>

23 <li>изменить плотность - частоту их использования - параметрDensity;</li>

24 <li>разделить элементы на фрагменты - параметрSplit;</li>

25 <li>задать форму элементам: квадратные с рисунком или же использовать рисунок элемента без оформления в квадрат - параметрBackground per Block;</li>

26 <li>включить или выключить вариативную полупрозрачность - параметрFade Colors;</li>

27 <li>добавить в паттерн дополнительные элементы или, наоборот, удалить лишние - наборShapes.</li>

28 </ul>После того как все настройки сделаны, остаётся только нажимать на кнопку Refresh вверху экрана, чтобы получить вариант паттерна, который понравится больше всего.

29 Для сохранения образца нужно нажать на кнопку Download. Программа предложит на выбор три формата - PNG, JPG и SVG. Причём, что немаловажно, хотя сервис и бесплатный, для растрового формата можно задавать полиграфические разрешения.

30 Скриншот: сайт Tabbied / Skillbox MediaВеб-сервис для создания генеративных паттернов<a>Tabbied</a>появился как небольшое ответвление разработки<a>< css-doodle /></a> - мощного инструмента для рисования веб‑паттернов возможностями CSS.

31 Tabbied создаёт растровые изображения, которые затем сохраняет в формате PNG в разрешении 4860×3240 px. К плюсам этого сервиса можно отнести то, что он предлагает 11 непохожих шаблонов рисунка, которые можно использовать бесплатно даже в коммерческих проектах. Минус же только один - ограниченное количество настроек.

32 Скриншот: сайт Tabbied / Skillbox MediaВ каждом из шаблонов можно:

33 <ul><li>изменить цветовую палитру (Palette). При этом доступна вся палитра цветов;</li>

34 <li>выбрать один из пяти вариантов сетки (Columns and rows);</li>

35 <li>частоту использования элементов (Frequency).</li>

36 </ul>Чтобы сгенерировать образец заново, нужно нажать кнопкуRedraw, чтобы сохранить на компьютер -Export.

37 К сожалению, самая большая сетка генератора имеет размер всего 10×15 ячеек, поэтому заполнить таким паттерном большую плоскость не получится. Но поскольку элементы рисунка друг на друга не накладываются, можно создать бесчисленное количество образцов в одном стиле, соединив их в графическом редакторе.

38 Скриншот: сайт<a>OpenProcessing</a>/ Skillbox Media<a>Openprocessing.org</a> - это платформа для художников, соединяющих искусство и программирование. Пользователи со всего мира выкладывают здесь графику, небольшие компьютерные игры, светящиеся следы от курсора, созданные при помощи кода. Есть здесь и паттерны - найти их можно<a>по запросу pattern</a>в строке поиска.

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

40 Скриншот: сайт<a>OpenProcessing</a>/<a>Trrrrrr</a>/ Skillbox MediaВажное условие при работе с платформой - допускается только некоммерческое использование изображений. Сохранить образец можно, кликнув по нему правой кнопкой мыши.

41 На сайте<a>Components AI</a>представлено достаточно много инструментов - полный список можно посмотреть в выпадающем менюComponentsв левом верхнем углу. К генеративным паттернам можно отнести четыре из них:

42 <ul><li><a>SVG Grid;</a></li>

43 <li><a>Voronoi</a>;</li>

44 <li><a>Delaunay</a>;</li>

45 <li><a>Circle Packing</a>.</li>

46 </ul>Каждый инструмент открывается с уже готовым паттерном, который сгенерировал алгоритм. Чтобы получить новый образец, нужно нажать на кнопкуRegenerateв левой верхней части экрана.

47 Скриншот: сайт<a>Components AI</a>/ Skillbox MediaГенератор паттернов<a>SVG Grid</a>создаёт узоры с использованием заранее подготовленного набора из 54 фигур.

48 Узор можно собрать из элементов самому, но удобнее воспользоваться одним из предложенных. Для этого нужно нажимать кнопкуRegenerate, пока не появится тот вариант, с которым захочется работать далее, приняв без изменений или доделав с помощью ручных настроек.

49 Верхнее поле отвечает за размер будущего паттерна. В нём может быть до 64 ячеек (параметрыWidthи Height), размер ячейки регулируется параметромGrid Cell Size. Также можно задать:

50 <ul><li>толщину линии обводки:Stroke Width;</li>

51 <li>цвет фона:Background Color;</li>

52 <li>ключ, по которому генерируется паттерн:Seed. Ключ - это набор текстовых символов, которые задают новый алгоритм. Можно довериться системе, а можно добавлять символы по одному, чтобы, стерев последний, вернуться к предыдущей версии.</li>

53 </ul>Скриншот: сайт<a>Components AI</a>/ Skillbox MediaДобавлять новые элементы можно, нажав на большую серую кнопку + Add icon. Удалять - нажав на крестик в правом верхнем углу панели настроек конкретного элемента (он появляется, если подвести к этому углу мышь). Менять положение слоя элемента - поднимать его выше или ниже - нужно стрелочками "вверх" и "вниз" в правой части панели элемента.

54 Для каждого объекта можно настроить:

55 <ul><li>Частоту использования:Odds.</li>

56 <li>Расположение - по центру решётки или по углам:Offset.</li>

57 <li>Размер - меняющийся или фиксированный:Scale.</li>

58 <li>Угол поворота - хаотичный или в фиксированном положении:Rotate.</li>

59 <li>Цветность - любая или в рамках фиксированной палитры:Palette.</li>

60 </ul>После того как паттерн готов, его нужно экспортировать. В отличие от остальных инструментов Components AI, генератор SVG Grid пока что не поддерживает экспорт в графическом формате. Поэтому можно просто сделать скриншот или же получить код, скопировав его из кода страницы.

61 Как импортировать SVG-паттерн в Figma

62 Показываем, как перенести паттерн в Figma через Google Chrome.

63 Скриншот: сайт<a>Components AI</a>/ Skillbox Media<ul><li>Откройте инструменты разработчика через горячие Ctrl + Shift + I или F12.</li>

64 <li>Кликните по инструменту Select element в верхнем левом углу открывшейся панели (или нажмите сочетание Ctrl + Shift + C).</li>

65 <li>Наведите курсор мыши на паттерн так, чтобы он полностью был закрыт голубым полем - в коде таким же голубым цветом станет подсвечена строка с кодом паттерна. Если вы используете другой редактор кода, то найдите строчку, начинающуюся с "<svg viewBox=".</li>

66 <li>Скопируйте строчку кода через Ctrl + C.</li>

67 <li>Вставьте содержимое буфера обмена в Figma через Ctrl (⌘) + V. Это может занять несколько минут, поскольку сильно нагружает компьютер - паттерн состоит из множества мелких элементов.</li>

68 <li>Теперь паттерн можно экспортировать в PNG или SVG в разделе Export.</li>

69 </ul>В следующих трёх приложениях работает функция экспорта, поэтому готовый паттерн можно легко получить в разделе Export в виде готового кода SVG, не обращаясь к коду страницы.

70 Скриншот: сайт<a>Components AI</a>/ Skillbox Media<a>Voronoi</a>рисует сетки по принципу диаграмм Вороного. Суть этих диаграмм: на плоскости находятся соприкасающиеся объекты, пространство каждого из которых заполнено множеством точек, наименее удалённых от центра объекта. В месте стыка таких объектов проведены границы-линии.

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

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

73 Получить новую комбинацию с имеющимися настройками можно, как и в предыдущем случае, меняя значение в поле Seed или же нажав на две перекрещённые стрелочки справа от него.

74 Сохранять паттерн нужно через кнопку Export, перенеся полученный в окошке код паттерна в Figma.

75 Скриншот: сайт<a>Components AI</a>/ Skillbox MediaГенератор<a>Delaunay</a>создаёт паттерны по принципу триангуляции Делоне. Эта математическая модель имеет некоторые общие принципы с диаграммами Вороного, поэтому результат будет также иметь некоторое сходство. Только здесь точки, на основе которых строится структура, находятся не в центре фрагментов, а в их углах.

76 Возможности настроек и управление ими здесь такое же, как в генераторе Voronoi. Точно так же работает и сохранение.

77 Скриншот: сайт<a>Components AI</a>/ Skillbox Media<a>Circle Packing</a>создаёт паттерны из кругов. В настройках можно регулировать их количество - от 10 до 800, цвет фона и заливки. По умолчанию обводка каждого круга чёрная, но этот цвет также можно изменить.

78 Меняя параметр Max Radius, можно получать разное настроение паттерна за счёт контраста в размерах кругов. Очень жаль, что нельзя зафиксировать и самый малый радиус, получая круги одного или близкого размера, - это дало бы больше возможностей.

79 Чтобы сохранить код паттерна, нужно нажать кнопку Export и перенести его в Figma.

80 <a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>