10 сервисов с паттернами: скачать, нарисовать и закодить

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

Показываем:

• где скачать паттерн бесплатно;
• как сделать собственный паттерн онлайн;
• где получить код для встраиваемого CSS-паттерна.

Библиотеки бесплатных паттернов

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

Единственный нюанс при поиске паттерна на фотостоке заключается в значении английского слова pattern ― оно означает как сам паттерн, так и просто узор. Поэтому не все найденные на фотостоке паттерны будут образовывать бесшовные текстуры ― то есть соединяться в единую плоскость без заметных стыков. Прежде чем скачать выбранный образец, оцените на глаз, совпадают ли края изображений по границам картинки. А если нет ― насколько легко это будет исправить в графическом редакторе.

Freepik

Вопреки названию Freepik ― «бесплатная картинка», ― часть изображений на этом стоке нужно покупать. Чтобы получить только бесплатные образцы паттернов, введите слово pattern в поиск и отметьте галочкой параметр Free в настройках на странице с результатами выдачи.

Что удобно, система распознаёт запрос и вместе с отдельными паттернами показывает подборки коллекций ― например, паттернов в стиле бохо, новогодних паттернов, паттернов с радугой. Параметр фильтра Free в коллекциях не работает ― бесплатен ли образец, станет понятно после нажатия на картинку.

Кроме растровых паттернов, некоторые авторы выкладывают на Freepik исходные файлы в формате Photoshop ― PSD ― или Adobe Illustrator ― AI. Такие паттерны разрешено модифицировать ― убрать какие-то элементы, добавить, что-то передвинуть или покрасить в другой цвет. Ну а можно просто сохранить картинку в растровом формате и использовать «как есть».

Vecteezy

Главная особенность Vecteezy в том, что в основе его коллекции лежат не фотографии, как обычно, а рисованные изображения ― их также можно использовать в дизайне.

Чтобы найти здесь бесплатный паттерн, нужно ввести слово pattern в поиск и отметить Free License в фильтрах слева. Коллекция разделена на четыре категории изображений:

• иллюстрации (Images);
• векторные изображения (Vectors);
• фотографии (Photos);
• с поддержкой прозрачности (PNGs);
• анимация (Video).

К паттернам применимы практически все из них, кроме фото и видео. К сожалению, искать сразу по нескольким категориям нельзя ― каждую придётся просмотреть отдельно. Если хочется скачать редактируемый паттерн, то начать лучше с категории Vectors, а если вы хотите управлять фоном своего паттерна ― то PNGs, эти картинки можно класть на любую подложку.

Отдельного внимания заслуживает цветовой круг в настройках поиска: с его помощью можно ограничить палитру паттерна, выбрав, например, только темно-зелёные или жёлтые светлых тонов. Если хочется сбросить эту настройку, достаточно нажать на крестик в строке Hex Color Code под кругом.

Flickr

Flickr ― это огромный архив изображений, где каждый может завести себе страницу. Многие авторы выкладывают рисунки и снимки по лицензии Creative Commons ― то есть доступными для бесплатного использования.

В основном на этом сайте пользователи делятся фотографиями. Чтобы найти здесь бесплатный паттерн, нужно ввести слово pattern в поиск и в выпадающем списке Any License слева выбрать All Creative Commons. Раскрыв дополнительные настройки Advanced, в выпадающем списке Content отметьте Illustration/Art.

Паттерны здесь доступны только в растровом формате ― то есть менять рисунок в них не получится, как максимум ― сделать коррекцию цвета в графическом редакторе.

В верхнем меню Advanced находятся удобные фильтры: можно выбрать картинки только определённой тональности ― от красного до фиолетового ― или задать стиль изображения ― например, минималистичный или чёрно-белый. Среди стилей есть и Pattern, но для поиска паттернов его лучше не использовать, поскольку не все авторы заносят свои рисунки в эту категорию и есть шанс что-то пропустить.

WowPatterns

На сайте WowPatterns нет ни фотографий, ни рисунков ― он целиком посвящён только паттернам и поэтому не столь популярен, как Freepik или Flickr. И в этом его большое преимущество. Второй его ощутимый плюс ― все паттерны здесь относятся к бесшовным текстурам. То есть их не нужно редактировать или внимательно рассматривать, точно ли образцы соединятся без стыков.

Коллекция разделена на 27 тематических категорий, некоторые из них имеют подкатегории. Можно скачать паттерны с музыкальными инструментами, акварельные паттерны или ко Дню святого Валентина. Всего в коллекции более трёх тысяч образцов, большая часть из которых выложена в векторном формате EPS.

Кроме коллекции паттернов на сайте есть отдельный инструмент для создания бесшовных текстур Pattern maker ― о нём мы расскажем ниже.

Интернет-сервисы для создания паттернов

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

Pattern Maker от WowPatterns

Как мы уже сказали выше, библиотека WowPatterns располагает не только коллекцией готовых образов, но и имеет собственный сервис по созданию авторских паттернов ― Pattern maker.

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

Настроек у сервиса всего несколько:

• размер фрагмента паттерна: маленький, средний и большой (к сожалению, использовать можно три фиксированных размера);
• алгоритм размножения фрагмента;
• угол наклона паттерна;
• настройки цветокоррекции.

Чтобы сохранить получившийся образец в формате PNG или JPG, нужно нажать на кнопку Export в левой части экрана. Максимальный размер сохраняемого образца ― 500 px или чуть более 13 см.

Seamless Pattern Maker

Сервис Seamless Pattern Maker создаёт паттерны на основе готовых изображений. У него есть собственная библиотека иконок, но если её не хватит ― можно загрузить практически любые картинки в формате SVG или PNG.

У каждого элемента будущего паттерна можно менять:

• размер;
• угол наклона;
• у элементов из библиотеки сервиса можно менять цвет.

Также есть возможность задать цвет фона или заменить его изображением, которое будет размножено.

После нажатия на кнопку Download получившийся паттерн будет сохранён в PNG-формате.

GeoPattern

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

Чтобы сохранить понравившийся результат в формате PNG, нужно нажать кнопку Save Pattern внизу страницы.

Repper App

Repper App ― инструмент для создания растровых паттернов. Хотя он и платный, его цена оправдана большими возможностями настроек и алгоритмов, а бесплатная демоверсия позволяет их испробовать.

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

Программа сама анализирует загруженное изображение и предлагает различные интересные варианты паттернов. При этом в сервисе есть множество ручных настроек. Среди них возможности изменить:

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

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

Стоимость использования сервиса для некоммерческих проектов ― 5 долларов в месяц, опробовать все возможности Repper App можно в течение 14 дней бесплатно.

CSS-сервисы

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

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

Предложенные интернет-сервисы генерируют как CSS-код, так и графические файлы, которые можно использовать в дизайне для офлайн-носителей.

Doodad Pattern Generator

На странице Doodad Pattern Generator предложено 70 образцов, разбитых на девять категорий. Для каждого из них можно менять такие параметры, как:

• цвета;
• угол наклона элементов;
• размер элементов;
• наклон образца.

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

Разработчики могут получить паттерн в виде строчки CSS-кода, встраиваемой на сайт.

Hero Patterns

Сервис Hero Patterns позволяет выбрать один из готовых 99 паттернов и настроить для него:

• цвет узора;
• степень прозрачности узора;
• цвет подложки.

Паттерн можно сохранить как в формате SVG, так и в виде CSS. Впоследствии вы и разработчик сможете редактировать паттерн, не прибегая к сервису: для этого нужно менять значения Background-color и Fill прямо в коде, там же можно регулировать и степень прозрачности.