Урок по созданию бесшовных текстур.

Урок по созданию бесшовных текстур.

Самый простейший и быстрый способ создать бесшовную фоновую текстуру.

Для чего вам может понадобиться бесшовная текстура? Всё просто что бы замостить фон.... Особенно это необходимо там где интерфейс может отображаться на различных по размеру типах дисплеев.
Теперь к делу. Нам понадобятся некоторые из программ.
1. PaintNET
2. Figma (или любой аналог)
тек же нам понадобятся SVG и PNG иконки!!!

Итак, начнём:
Откроем фигма (web) https://www.figma.com или уже скачанную программу (не важно)
и создадим квадрат 200х200px
А внутрь квадрата хаотично расположим наши иконки в формате SVG!!! Так же никто не мешает использовать текст.
Настройте цвет, размеры и наклон.... вот примерно как у меня на картинке.




Примечание!
Ни в коем случае не используйте градиент на весь прямоугольный пресет, иначе получите вместо бесшовности эффект сотов.
Так же на этом этапе располагайте иконки соблюдая некий общий интервал между ними... НО НИ В КОЕМ СЛУЧАЕ НЕ В ПЛОТНУЮ К КРАЮ ПРЯМОУГОЛЬНИКА!!! Края должны оставаться пустыми, потом вы поймёте зачем.

Теперь когда имеем наш пресет, экспортируем его из фигма в PNG.
Запустим PaintNET и закинем его туда.
Там нажимаем на вкладку "Слои" и выбираем поворот и масштаб или же просто зажмём Ctrl+Shift+Z и сразу откроется инструмент.



Теперь нам надо сдвинуть содержимое нашей картинки таким образом, что бы получилась Мозаика со смещением в половину квадрата по вертикали и по горизонтали.
Для этого ставим галочку напротив "Мозаика" А в смещении выставим значения 1,00 по X и по Y И нажмём ОК как на фото ниже.



Теперь мы можем видеть что всё содержимое квадрата сдвинулось... И в центре образовались новые пустоты.....
Что бы этих пустот не было мы дополним картинку иконками, но в этот раз будем использовать PNG потому что PaintNET не поддерживает SVG без дополнительных плагинов.



Вот я добавил в новый слой ещё 5 иконок теперь сделаем их тем же цветом с помощью покраски...



Теперь порядок и наша текстура готова к сохранению.....
Давайте же теперь проверим как работает её бесшовность?



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


Debugger Aleksandr

2 Блог Материалов:

Комментарии
Debugger Aleksandr 3 недели назад

Такую текстуру можете даже поставить на рабочий стол выбрав параметр замостить.... и вы увидите магию в действии )))