Для чего вам может понадобиться бесшовная текстура? Всё просто что бы замостить фон.... Особенно это необходимо там где интерфейс может отображаться на различных по размеру типах дисплеев.
Теперь к делу. Нам понадобятся некоторые из программ.
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 иконок теперь сделаем их тем же цветом с помощью покраски...
Теперь порядок и наша текстура готова к сохранению.....
Давайте же теперь проверим как работает её бесшовность?
Всё прекрасно стыкуется, без видимых границ, а это значит что наша текстура получилась! Дерзайте и у вас всё получится!
Mannavard Shi 2 года назад
Такую текстуру можете даже поставить на рабочий стол выбрав параметр замостить.... и вы увидите магию в действии )))