При подготовке очередного набора иконок обнаружили в проекте Flaticon интересную функцию, позволяющую создавать паттерны онлайн из найденных там материалов. Фишка достаточно необычная, как нам показалось, и достойная небольшого обзора. Вы можете сразу зайти в сам генератор по адресу Pattern.flaticon.com либо увидите соответствующую кнопку в процессе работы.
После клика по «Create a pattern with these icons» также попадаете на страницу данного веб-инструмента. Причем по умолчанию в качестве доступных исходных картинок вам будут предложены изображения из того набора, который вы только что рассматривали. Допустим, это были иконки цветов для сайта «Flowers».
Весь алгоритм работы состоит из трех шагов, которые расположены в левой колонке страницы:
- Search — выбор иконок и непосредственно создание паттерна.
- BG — установка фона, если нужно.
- Download — скачивание результата.
Находить картинки можете с помощью блока поиска или просто пролистывая весь список доступных наборов — «Packs». При выборе одного из них вы автоматически переключитесь в закладку «Icons», откуда будете непосредственно добавлять изображения для своего паттерна.
Иконки вставляются простым кликом, причем после их размещения на поле в правом крайнем окне, вы сможете мышкой перетаскивать их в нужное место. Кнопки сверху Random и Clear позволяют создать паттерн случайным образом и очистить холст. Разрешается совмещать материалы из разных наборов «Packs».
Не менее крутая штука — редактирование конкретных элементов.
Кроме изменения размера объектов, при клике по нему появится всплывающее меню, где можно:
- изменить все цвета в иконке;
- сделать зеркальное преобразование изображения;
- выбрать прозрачность;
- дублировать элемент;
- удалить лишние материалы.
Когда наиграетесь с этими настройками, переходите к фону (BG).
На этой странице генератора паттернов от Flaticon расположен инструмент с выбором цветовой палитры для фона. Определитесь с цветом, яркостью и прозрачностью.
Последний шаг «Download» позволяет указать формат картинки (PNG, SVG, JPG, B64) и ее размеры. После задания всех параметров жмете «Download Pattern», и работа на этом закончена. Далее просто подключаете изображение на сайт через свойство background-image в CSS. Пример реализации для SVG найдете в статье про архив SVG фонов Hero Patterns.
Если знаете еще интересные сервисы создания паттернов онлайн, присылайте названия ниже в комментах.
