Как бесплатно получить векторную, бесшовную текстуру с сайта patterncooler.com
Автор: Артем Помельников
- Просмотров: 58923
Мне нравится сайт patterncooler.com, и совсем недавно текстуры можно было скачивать бесплатно (только растровые), а как получить векторную текстуру? При детальном осмотре внутренностей сайта оказалось что это достаточно просто. Нам понадобится векторный редактор и редактор текста.
Заходим на сайт patterncooler.com, и настраиваем текстуру, можно указать цвета, и фактуру, как применить фактуру я расскажу в конце этого материала.
Нажимаем кнопку "Download options" и в открывшемся окне переходим во вкладку "Continuous pattern area". В центре сгенерированного изображения нажимаем Правую кнопку мыши (ПКМ) и выбираем "Просмотр кода элемента".
В открывшемся окне "developer tools" нужно развернуть html блоки и найти svg элемент расположенный внутри тегов
<pattern id="areaPattern"... <g...>. На строке с svg элементом снова нажать ПКМ и скопировать код как указано на картинке.
Запускаем текстовый редактор, например блокнот или notepad++ вставляем туда скопированный код сочетанием клавиш Ctrl+V и сохраняем ваш файл в формате .svg, например textura.svg.
Далее открываем полученный файл в векторном редакторе. Как видно на картинке все цвета выбранные на сайте сохранились. Готово!
Итак мы скачали векторную текстуру она абсолютно плоская, но на сайте она имеет фактуру, для добавления фактуры нам нужно ее скачать, а затем наложить сверху, это можно сделать в редакторе CorelDraw, я предпочитаю с растровыми файлами работать в Photoshop. Для того чтоб скачать фактуру вернемся на третий этап в котором мы открывали блоки, выделим блок который начинается так <div id="patternAreaTexture"... Справа во вкладке "styles" видим ссылку (подсвечена синим) нажимаем на ней ПКМ и выбираем "Open link in new tab", откроется изображение, сохраняем его на компьютер.
Все фактуры можно скачать одним файлом в формате .pat для Photoshop.
Также выкладываю готовые текстуры в растровом формате размером 2000х2000px - 142шт.
