Бесшовная текстура для сайта: Бесшовные фоны для сайта и фотошопа

Как сделать бесшовный фон. Создание бесшовных фонов

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

Возьмем для примера фото цветов.

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

Если фон нашего сайта просто замостить такой картинкой получится вот так:

Получилось некрасиво и видны швы

В Photoshop»е есть такая замечательная функция как Сдвиг (Фильтр / Другое / Сдвиг). Мы могли бы воспользоваться этой функцией для получения бесшовного фона, но рисунок достаточно непростой и не хотелось бы терять качество фотографии. Потому я делю картинку на 4 равные куска (для этого наверное лучше брать изначально картинку квадратной формы или обрезать ее до квадрата).

Получается вот так:

Далее мы разрезаем эту картинку на 4 части и каждую часть помещаю на отдельный слой. Это можно сделать при помощи Прямоугольного выделения (выделяем ровно четверть, в нашем случае картинка 580 на 580 пикселей, значит четверть равна 290 на 290 пикселей), далее выделенную область копируем Ctrl+C и вставляем тут же Ctrl+V. Также этого можно добиться при помощи инструмента Раскройка , но тогда наши 4 части сохранятся в отдельную папку и потом их надо будет перенести в один документ для создания 4х слоев.

И перемещаем наши 4 куска следующим образом:

Такого же эффекта можно достичь, как я говорила ранее, используя функцию Сдвиг (Фильтр / Другое / Сдвиг), сдвигая картинку на половину ее высоты и ширины, в данном случае на 290px и 290px. Конечно же это в разы проще, но чтобы сделать качественный бесшовный фон на сайте этого будет недостаточно. Так как если взглянуть на фото выше, мы видим что эффект Размытия сделает картинку банально некрасивой, а дорисовывать цветы очень трудоемкое занятие.

Эта картинка по сути основа для нашего бесшовного фона. Если ваша текстура достаточно не сложная, то достаточно просто замаскировать швы в центре картинки, по периметру стыковка будет идеальная и бесшовная. Без такого перемещения было бы невозможно идеально угадать место стыка, а так мы видим все наши швы в центре.

Убираем стыки на будущем бесшовном фоне

Сейчас наш холст занимает 580х580px. Мы будет сдвигать каждый слой (каждую четверть) в сторону центра на 40px по очереди. Таким образом у нас слои будут накладываться друг на друга. Это можно сделать простым перетаскивание на 40px, либо использовать тот же самый Сдвиг на 40px по вертикали и горизонтали. У нас получится такая картинка, уже с размером холста 500х500px.

Далее будет самый творческий процесс. Берем инструмент Ластик , самый обычный, можно взять с мягкими краями. Выставляем непрозрачность на 50%. Нам нужно будет пройтись по тем слоям, которые расположены сверху, т.е. нетронутым останется у нас только нижний слой. Нам нужно будет пройтись по краям, где у нас наложение слоев, убирая обрезки цветов, те что полностью не поместились. На их месте будут просвечиваться целые цветы нижних слоев. Процесс творческий, потому надо будет поэксперементировать).

У меня получилось вот так:

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

Посмотрим что у нас получилось в итоге, если замостить фон на сайте:

Вот такой у нас получился бесшовный фон для нашего сайта.

Если вы занимаетесь веб-дизайном, 3D моделированием или другим творчеством, связанным с 3D max или Photoshop, то вам периодически требуются качественные бесшовные текстуры и фоны. Найти нужную текстуру или фон в сети порой бывает очень не просто, поэтому решением данной проблемы может послужить вариант сделать бесшовную текстуру (фон) самостоятельно. При этом, вы сами сможете сделать текстуру нужного вам качества и оттенка.

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

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

Для начала работы нам потребуется сам фон или текстура который(ую) мы и будем “превращать” в бесшовный(ую). Естественно, что качество нашей будущей бесшовной текстуры или фона будет напрямую зависеть от качества исходного изображения или фото. Допустим, вам необходимо сделать бесшовную текстуру асфальта, в таком случае вам потребуется фото данного асфальта и чем качественнее данное фото будет, тем качественнее получится бесшовная текстура. Вы можете найти нужное вам изображение в интернете, либо сделать фото объекта самостоятельно, но фото должно быть качественным.

Возьмем, для примера фото асфальта, найденное в сети, фото специально подберем побольше размерами, чтобы текстура получилась высокого качества. В нашем случае размер фото составляет 1300 x 864px, чего будет достаточно.

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

Принцип создания бесшовного изображения заключается в отражении краев (стыков), что в результате дает идеальное соединение изображения, тем самым создавая вид единой поверхности, а не разных кусков изображения. Для легкого и быстрого “превращения” фото (изображений) в бесшовные текстуры существует специальный плагин для фотошопа, который автоматически выполняет указанные выше функции (отражение и подгонка швов изображения).

Данный плагин разработан для фотошопа, начиная с CS3 и заканчивая последней на сегодняшний день версией CC. Плагин является бесплатным и скачать его можно с нашего сайта:

Скачайте плагин для вашей версии фотошоп и установите его. После установки плагина у вас в правой боковой панели программы фотошоп появится значок плагина:

Чтобы создать бесшовное изображение (текстуру) с помощью данного плагина необходимо открыть нужное изображение (фото) программой фотошоп и сделать данное изображение квадратным – это обязательное требование данного плагина. Т.е. открываете необходимое изображение фотошопом, выбираете инструмент “Прямоугольная область” в левой панели программы и с его помощью (удерживая левую клавишу мыши) выделяете квадратную область из любой части вашего изображения.

Для того, чтобы область выделялась правильным квадратом, а не прямоугольником, необходимо в ходе выделения нужной области, помимо левой кнопки мыши удерживать клавишу “Shift”.

После того, как нужная область выделена, выбираете в верхнем меню “Изображение” – “Кадрировать” и ваша выделенная область будет вырезана и обращена в квадратное изображение.

Теперь настало время воспользоваться “волшебным” плагином. При выделенном слое нашего квадратного изображения нажимаем на значок плагина и у нас открывается панелька.

В данной панельке мы указываем размер нашего изображения в пикселях (в нашем случае получилось 864px) и ставим галочку напротив “Difine Pattern”, после чего просто выбираем способ создания бесшовного изображения нажатием на кнопку “Tile” или “Mirror”. Если вы выберите способ “Tile”, то ваше бесшовное изображение будет создано именно из вашей картинки в полном ее размере. Если же выберите способ “Mirror”, то бесшовное изображение будет создано из 4-х ваших картинок, зеркально отраженных и уменьшенных под размер вашего квадрата. Вообщем просто попробуйте и все поймете сами.

Мы выбрали способ “Tile” и в результате получили текстуру высокого качества, размером 864 x 864 пикселя:

Бесшовную текстуру (фон) высокого качества, которою можно использовать в 3D max или фотошопе мы сделали, но давайте еще придадим ей необходимый нам оттенок. Допустим нам нужна текстура потрескавшегося асфальта не светло-серого цвета, а темно-красного. Для начала мы объединим получившиеся слои в одну картинку, а первоначальное изображение просто удалим за ненадобностью. В правой панели слоев удаляем самый нижний слой с нашим исходным изображением, чтобы оно не мешалось и преобразуем все получившиеся слои из которых состоит бесшовная текстура в одно изображение.

Для этого правой кнопкой мыши кликаем по папке “tile pattern” и выбираем в появившемся меню “Преобразовать в смарт-объект”. После данных действий все содержимое папки будет преобразовано в один слой изображения, с которым мы в дальнейшем и будем работать (менять ему цветовой тон).

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

Таким образом у вас получится бесшовная текстура с необходимым цветовым тоном. Остается сохранить данное изображение в высоком качестве, для этого в верхнем меню выбираем “Файл” – “Экспортировать” – “Сохранить для web” и в появившемся окне, в настройках качества выставляем 100%, после чего жмем кнопку “Сохранить”.

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

Непременно, что фон ваших WEB страничек в значимой мере определяет стиль и привлекательность всего WEB сайта. Фон в виде рисунка, узора либо текстуры воскрешает WEB страничку. При помощи текстур вы сможете имитировать создание изображений на разных поверхностях, таких как мрамор, брезент либо кирпичная кладка. Совместно с тем следует смотреть, чтобы фон не затруднял чтение основного текста.

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

Щелкните мышью на значке Default Foreground and Background Colors (D)

(Цвета фронтального плана и фона по умолчанию) на панели инструментов (Tools) программки Adobe Photoshop, чтобы установить цвета по умолчанию.

Поменяйте местами цвета фронтального плана и фона, щелкнув мышью на значке Switch Foreground and Background Colors (X) (Переключатель цветов фронтального плана и фона) на панели инструментов (Tools). Цвет фона на образчике станет черным.

Изберите команду меню File — New (Файл — Новый). На дисплее появится диалог New (Новый).

В полях ввода Width (Ширина) и Might (Высота) введите значения ширины и высоты документа — 100 пикселов.

В открывающемся перечне Color mode (Цветовой режим) изберите RGB Color (Цвет RGB).

В открывающемся перечне Background Contents (Содержимое фона) изберите Background Color (Цвет фона).

Нажав кнопку ОК, закройте диалог New (Новый). В рабочем окне программки Adobe Photoshop появится окно нового документа с размерами 100х100 пикселов и черным цветом фона.

При помощи фильтров Clouds (Облака) и Difference Clouds (Облака с наложением) сделаем мягенький узор в виде «облаков». Эти фильтры генерируют узор при помощи случайных величин, которые меняются в спектре от основного цвета к фоновому, в нашем случае от белоснежного к черному.

Изберите команду меню Filter — Render — Clouds (Фильтр — Рендеринг — Облака). Фильтр будет использован, и на изображении появится узор в виде «облаков».

Сейчас применим к изображению фильтр Difference Clouds (Облака с наложением).

Изберите команду меню Filter — Render — Difference Clouds (Фильтр — Рендеринг — Облака с наложением). Узор на изображении поменяется.

Повторное неоднократное применение этого фильтра делает эффект «прожилок», который припоминает текстуру мрамора. Для повторного внедрения последнего использовавшегося фильтра довольно надавить комбинацию кнопок Ctrl+F.

Нажмите пару раз комбинацию кнопок Ctrl+F. При каждом нажатии этой композиции кнопок фильтр будет применяться повторно, а изображение в окне документа — изменяться.

Дальше применим к изображению фильтр Glowing Edges (Свечение краев) из группы фильтров Stylize (Стилизация). Все фильтры этой группы делают ярко выраженные эффекты очерчивания за счет смещения пикселов и увеличения контрастности изображения и в особенности полезны при обработке черно-белых изображений. Фильтр Glowing Edges (Свечение краев) ищет границы цветовых областей и добавляет свечение, схожее неоновому.

Изберите команду меню Filter — Stylize — Glowing Edges (Фильтр — Стилизация — Свечение краев). На дисплее появится диалог Glowing Edges (Свечение краев), в каком следует найти характеристики эффекта.

Переместите ползунковый регулятор Edge Width (Ширина границ) налево так, чтобы в поле ввода над ним появилось значение 1.

Ползунковый регулятор Edge Brightness (Яркость границ) переместите к правому краю так, чтобы значение этого параметра стало равно 20.

Для параметра Smoothness (Сглаженность) установите значение 1.

Закройте диалог Glowing Edges (Свечение краев), нажав кнопку ОК.

После внедрения этого фильтра изображение будет затемнено. Потому воспользуемся

командой Brightness/Contrast (Яркость/Контраст) для роста яркости и контраста.

Изберите команду меню Image — Adjustments — Brightness/Contrast (Изображение — Корректировки — Яркость/Контраст). На дисплее появится диалог Brightness/Contrast (Яркость/Контраст).

Переместите ползунковый регулятор Brightness (Яркость) на право так, чтобы в поле ввода над ним отобразилось значение +50.

Переместив ползунковый регулятор Contrast (Контраст) на право, установите значение этого параметра +30.

Нажав кнопку ОК, закройте диалог Brightness/Contrast (Яркость/Конграст).

Сейчас наше изображение, состоящее пока из цветов сероватого, нужно тонировать либо окрасить.

Изберите команду меню Image — Adjustments — Hue/Saturation (Изображение — Корректировки — Цветовой тон/Насыщенность). На дисплее появится диалог Hue/Saturation (Цветовой тон/Насыщенность).

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

Удостоверьтесь, что установлен флаг Preview (Подготовительный просмотр), чтобы иметь возможность следить в окне документа результаты конфигурации характеристик.

Установите флаг Colorize (Тонирование). В диалоге поменяется положение ползунковых регуляторов, а в окне документа изображение будет тонировано — приобретет красноватый колер.

Чтобы лучше осознать закономерности опции цветовых компонент, следует представить для себя, что все видимые человечьим глазом цвета диапазона, размещаются на цветовом круге. Каждый цвет на этом круге характеризуется тремя базисными параметрами: цветовым тоном (Hue), насыщенностью (Saturation) и яркостью (Lightness). Такое представление соответствует уже рассмотренной нами ранее цветовой модели HSB.

Для описания цветового тона обычно употребляется заглавие цвета: красноватый, оранжевый, желтоватый, зеленоватый и так дальше Каждый цветовой тон занимает определенное положение на цветовом круге и характеризуется величиной угла от 0° до 360°.

Насыщенность — это степень чистоты цвета, которая определяется соотношением сероватого цвета и данного цветового тона. Насыщенность выражается в процентах от 0% — сероватый — до 100% — стопроцентно насыщенный. На цветовом круге насыщенность возрастает от центра к краю.

Яркость охарактеризовывает относительную освещенность либо затемненность цвета и измеряется в процентах в спектре от 0% — темный — до 100% — белоснежный.

На цветовом круге главные цвета моделей RGB и CMYK находятся в определенной зависимости: каждый цвет размещен против дополняющего его цвета и находится между цветами, из которых он получен. К примеру, сложение зеленоватого и красноватого дает желтоватый. Чтобы усилить какой-нибудь цвет, необходимо ослабить дополняющий его — расположенный напротив него на цветовом круге. Так, чтобы поменять общее цветовое решение в пользу голубых тонов, следует понизить содержание красноватого. По краю цветового круга размещаются так именуемые спектральные цвета, либо цветовые тона. Эти цвета характеризуются наибольшей насыщенностью.

Создадим насыщенность красноватого колера изображения в окне документа наибольшей.

Перемещайте ползунковый регулятор Saturation (Насыщенность) на право и наблюдайте в окне документа, как при всем этом увеличивается насыщенность красноватого цвета. Напомним, что на цветовом круге это соответствует движению от центра к краю. Установите значение этого параметра -100%.

Изменим цветовой тон изображения на голубой.

Перемещайте ползунковый регулятор Hue (Цветовой тон) на право и наблюдайте, как меняется цветовой тон изображения в окне документа. Изменяющееся при всем этом числовое значение в поле ввода над ползунковым регулятором отражает угол поворота на цветовом круге относительно начального красноватого цвета.

Установите значение параметра Hue (Цветовой тон) — 210. Такое значение отражает тот факт, что на цветовом круге голубой цвет, которым тонировано изображение, сдвинут относительно красноватого на 210°.

Нажав кнопку ОК, закройте диалог Hue/Saturation (Цветовой тон/Насыщенность). Установленные цветовые характеристики будут закреплены.

Сохраните документ в папке WEB, в файле Fon.psd в формате Adobe Photoshop.

На этом создание фоновой текстуры можно считать законченным. Но, потому что набросок

будет повторен на WEB страничке много раз, между кусками фона будут видны швы.

В Adobe ImageReady имеется особый фильтр — Tile Maker (Конструктор повторений), который позволяет удалить швы, создавая таким способом бесшовный фон.

Нажмите кнопку Edit In ImageReady (Shift+Ctrl+M) (Редактировать в ImageReady (Shift+Ctrl+M)) в нижней части панели инструментов (Tools). Будет запущена программа Adobe ImageReady, и в ее рабочем окне раскроется документ Fon.psd.

Изберите команду меню Adobe ImageReady Filter — Other — Tile Maker (Фильтр — Другие — Конструктор повторений). На дисплее появится диалог Tile Maker (Конструктор повторений).

Данный фильтр смешивает пикселы на краях изображения для сотворения бесшовного фона. При установленном переключателе Blend Edges (Размытие краев) будет производиться размытие краев рисунка для исключения швов между плитками при повторении изображения на WEB страничке.

В поле ввода Width (Ширина) следует указать ширину полосы у края изображения, в границах которой должен происходить плавный переход. Обычно употребляются значения от 5% до 15%, максимум до 20%. Воспользуемся значением этого параметра, предлагаемым по умолчанию, — 10 процентов.

При установленном флаге Resize Tile to Fill Image (Поменять размер плитки для наполнения изображения), размер плиток подгоняется под размер изображения. Если данный флаг скинуть, то плитки будут меньше размера изображения на величину, определенную параметром Width (Ширина), и на WEB страничке они не будут впритирку прилегать друг к другу.

Установка переключателя Kaleidoscope Tile (Калейдоскоп) создаст фон в виде калейдоскопа, в каком изображение отражается по горизонтали и вертикали, создавая таким способом уникальный узор.

Установите флаг Resize Tile to Fill Image (Поменять размер плитки для наполнения изображения).

Закройте диалог Tile Maker (Конструктор повторений) нажатием кнопки ОК. Установленные характеристики будут использованы.

Чтобы узреть, как будет смотреться в программке просмотра WEB страничек сделанный фон, следует поначалу указать программке, что данное изображение должно употребляться как фон.

Изберите команду меню File — Output Settings — Background (Файл — Характеристики вывода — Фон). На дисплее появится диалог Output Settings (Характеристики вывода).

Установите переключатель Background (Фон), чтобы использовать активное изображение в качестве фона WEB странички.

Закройте диалог Output Settings (Характеристики вывода), нажав кнопку ОК.

Сейчас можно просмотреть фон в .

Изберите команду меню File — Preview in (Файл — Подготовительный просмотр в) и в показавшемся подменю — программку просмотра WEB страничек. Будет запущен избранный браузер, и в его окне вы увидите сделанный бесшовный фон.

Для пуска браузера, установленного по умолчанию, вы сможете надавить кнопку Preview In Default Browser (Ctrl+Alt+P) (Подготовительный просмотр в браузере по умолчанию (Ctrl+Alt+P)) на панели инструментов (Tools).

Не считая фонового рисунка в окне программки просмотра выводится информация о формате изображения (Format), его размерах (Dimensions), размере файла (Size) и параметрах оптимизации (Settings), а ниже — HTML код автоматом сгенерированного файла.

Закройте окно браузера, нажав кнопку в правом верхнем его углу.

Чтобы сделанное изображение можно было использовать как фон WEB странички, его нужно улучшить и сохранить в WEB формате.

Щелкните мышью на ярлычке 2-Up (2 варианта) в высшей части окна документа. Будет выполнена оптимизация с последними установленными параметрами, и вы увидите оригинальное и оптимизированное изображения.

Подберите лучшие, с вашей точки зрения, характеристики оптимизации в формате GIF.

Сохраните оптимизированный документ в папке WEB под именованием Fon.gif, выбрав команду меню File — Save Optimized (Файл — Сохранить оптимизированный документ).

Закройте программку Adobe ImageReady без сохранения документа Fon.psd, нажав кнопку в правом верхнем углу ее окна.

Поглядим сейчас, как будет смотреться сделанный фон на WEB страничке other.html.

Откройте файл other.html из папки WEB в программке Блокнот (Notepad) и воткните в открывающий тег

атрибут background=Fon.gif.

Откройте в браузере файл other.html.

Видите ли, WEB страничка с сделанным фоном смотрится существенно увлекательнее, чем с однородным. Направьте внимание также, что швы между плитками фактически неприметны.

Закройте программку просмотра WEB страничек.

Удалите из HTML кода файла other.html вставленный атрибут background=Fon.gif.

Закройте программку Блокнот (Notepad).

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

Шероховатость

В программке Adobe Photoshop сделайте новый документ размером 100 x 100 пикселов с белоснежным цветом фона и черным цветом фронтального плана.

Залейте изображение черным цветом.

Примените фильтр Add Noise (Добавить шум), выбрав команду меню Filter — Noise — Add Noise (Фильтр — Шум — Добавить шум) с установленным переключателем Uniform (Равномерное), флагом Monochromatic (Сохранить цвета) и параметром Amount (Эффект) равным 400.

Примените фильтр Emboss (Рельеф), воспользовавшись командой меню Filter — Stylize — Emboss (Фильтр — Стилизация — Рельеф), с параметрами: Angle (Угол)=45, Height (Высота)=2, Amount (Эффект)=30.

Тонируйте изображение, выбрав команду меню Image — Adjustments — Hue/Saturation (Изображение — Корректировки — Цветовой тон/Насыщенность).

Шлифованная плитка

Сделайте новый документ размером 100 x 100 пикселов и с белоснежным цветом фона.

Примените фильтр Add Noise (Добавить шум) с установленным переключателем Gaussian (По Гауссу), флагом Monochromatic (Сохранить цвета) и параметром Amount (Эффект) равным 125.

Примените фильтр Motion Blur (Размытие в движении), воспользовавшись командой меню Filter — Blur — Motion Blur (Фильтр — Размытие — Размытие в движении), с параметрами: Angle (Угол)=-45, Distance (Расстояние)=100. Последний параметр должен быть не меньше размера изображения.

Примените фильтр Emboss (Рельеф) с параметрами: Angle (Угол)=45, Height (Высота)=2, Amount (Эффект)=35. Направьте внимание, что параметр Angle (Угол) должен отличаться от такого же параметра фильтра Motion Blur (Размытие в движении).

Тонируйте изображение, воспользовавшись диалогом Hue/Saturation (Цветовой тон/Насыщенность), применив последующие характеристики: флаг Colorize (Тонирование) — установлен, Hue (Цветовой тон)=180, Saturation (Насыщенность)=10, Lightness (Яркость)=+20.

Облицовочная плитка

Сделайте новый документ размером 100х 100 пикселов и с белоснежным цветом фона.

Примените фильтр Add Noise (Добавить шум) с установленным переключателем Uniform (Равномерное), флагом Monochromatic (Сохранить цвета) и параметром Amount (Эффект) равным 120.

Примените фильтр Emboss (Рельеф) с параметрами: Angle (Угол)=45, Height (Высота)=1, Amount (Эффект)=30.

В гамме Channels (Каналы) сделайте новый канал Alpha 1, нажав кнопку Create new channel (Сделать новый канал).

Выделите изображение альфа-канала в окне документа командой Select — All (Выделение — Все) и сделайте рамку выделения шириной 3 пиксела командой Select — Modify — Border (Выделение — Модификация — Граница).

Инвертируйте выделение командой Select — Inverse (Выделение — Направить выделение) и залейте выделенную область белоснежным цветом. Отмените выделение.

Примените к альфа-каналу фильтр Gaussian Blur (Размытие по Гауссу), воспользовавшись командой меню Filter — Blur — Gaussian Blur (Фильтр — Размытие — Размытие по Гауссу) с параметром Radius (Радиус)=2.0 пиксела, чтобы размыть границу.

В гамме Layers (Слои) выделите слой Background (Фон) и сделайте эффект трехмерности при помощи фильтра Lighting Effects (Эффекты освещения), воспользовавшись командой меню Filter — Render — Lighting Effects (Фильтр — Рендеринг — Эффекты освещения).

Тонируйте изображение, воспользовавшись диалогом Hue/Saturation (Цветовой тон/ Насыщенность).

Для сотворения фоновых текстур, не считая обрисованных фильтров, попытайтесь использовать фильтры Colored Pencil (Магический карандаш), Sponge (Губка), Grain (Зерно), Craquelure (Кракелюры), Chalk & Charcoal (Мел и уголь), Mezzotint (Меццотинто), Mosaic (Мозаика), Halftone Pattern (Полутоновой узор), Note Paper (Почтовая бумага), Polntillize (Пуантилизм), Reticulation (Ретикуляция), Glass (Стекло), Texturizer (Текстуризатор), Texture (Текстура), Ink Outlines (Тушь) и Mosaic Tile (Цветная плитка). Заметим, что применение неких фильтров, к примеру, Glass (Стекло), к сплошному цвету дает очень малозначительный либо нулевой эффект.

Урок №1. Зеркальный фон

Урок №2. Полосатый фон

Урок №3. Фон с сохранением изначальной текстуры

Урок №4. Фон — калейдоскоп

Урок №1 .

Зеркальный фон.

Результат:

1. Открываем нашу картинку в Photoshop:
(«File — Open…» — «Файл — Открыть…»)

2. Создаем новый чистый документ («File — New…» — «Файл — Новый документ…»)

3. Вырезаем из нашей картинке тот участок , который пойдет в основу фона. Для тех, кто не знает как это сделать, можно воспользоваться уроком » «

4. Теперь с помощью инструмента Move tool (V) переносим этот фрагмент на наш чистый лист. Для этого просто зажимаем левой кнопкой мыши нашу картинку и тащим ее на новый документ. Потом отпускаем:

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

7. Снова поворачиваем наш фрагмент , но уже по вертикали. Жмем Image — Rotate canvas — Vertical (Изображение — Повернуть — Вертикально):

8. И снова его перетаскиваем на чистый слой и ставим рядом с уже присутствующими там изображениями.

10. Снова перетаскиваем результат на чистый слой и ставим рядом с уже присутствующим там изображениями:

11. И последний раз жмем на фргменте Image -Rotate canvas- Vertical (Изображение — Повернуть — Вертикально). И снова видим что наш фрагмент перевернулся. теперь снова его перетаскиваем на чистый слой и ставим рядом с уже присутствующими там изображениями.

Теперь мы будем работать только с чистым слоем и наложенными на него фрагментами.

12. Обрезаем лишнее. Если у вас есть на слое «пустое» место — то есть то, где нет фрагментов, то давайте его обрежем, чтобы остался только наш будущий фон. Для этого пользуемся уроком » «

И получаем результат:

Урок №2 .

Полосатый фон.

Результат:

1. Для этого открываем любую понравившуюся вам картинку в Фотошопе
А делаем это так File — open… (Файл -открыть…). Я выбрала вот эту:

2. Находим на панели инструментов инструмент single row marquee tool:

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

Нажимем в центре нашей картинки и появляется вот такая горизонтальная пунктирная линия:

3. Трансформируем линию. Выбираем команду «Edit — Free transform (Редактировать — свободная трансформация) и (сочетание клавиш ctrl + T) видим, что наша пунктирная линия стала просто линией, а на концах ее образовались маленькие квадратики:

Осторожно надвигаем нашу мышку на один из квадратиков и появилась масенькая черная стрелочка и вот этой стрелочкой двигаем вниз и видим что наша картинка уже вовсе не картинка а сплошные полоски:

Я думаю что на этом можно остаовиться, нет смысла дотягивать до конца всей картикни, можно взять всего лишь часть — кусочек ведь узор линии не изменится:

4. Вырезаем наш кусочек, чтоб обрезать изображение пользуемся инструментом «Crop tool» (обрезка). У меня получилось вот так:

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

Ну вот и все, наш фон готов.

Урок №3 .

Бесшовный фон с сохранением изначальной текстуры.

Результат:

1. Открываем любую картинку (желательно с похожими краями) в ФотоШопе.

Наше изображение может быть каким угодно, правда, чем более крупные предметы на нем изображены, тем сложнее будет маскировать швы. Внимательно рассмотрите изображение, размер предметов должен быть примерно одинаковым на всех четырех сторонах картинки. Я подобрала вот такой вариант:

2. Установите направляющие линии View — Rulers (Просмотр — Направляющие), по которым вы планируете работать (они и будут границами готовой текстуры). Убедитесь, что активирована функция View > Snap to Guides (Просмотр — Вспомогательные элементы). Двигайте направляющие по рисунку так, чтобы они проходили по середине предметов (конечно, насколько это возможно). Это делается для того, чтобы вы мысленно представили свой будущий фон, наметили границы так сказать.

Я пронумеровала получившиеся части рисунка, чтобы удобнее было пояснять, с которой частью будем работать:

3. Выбираем инструмент Rectangular Marquee Tool (Прямоугольное выделение):

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

4. Копируем выделение на отдельный слой, нажимая на клавиатуре «ctrl + j»

5. Перетаскиваем инструментом Move tool (Перемещение) или стрелочками на клавиатуре скопированный кусок вверх части 2, как это показано на рисунке:

Примечание: у вас эта часть не должна светиться. Я применила ей свойства сияния, чтобы наглядно вам показать (чтобы картинка не сливалась и вы видели границы).

6. Так же копируем часть №1 и перетаскиваем копию в правый край части 2:

Левый нижний угол под номером 3 не используется.

7. Прячем слой №4, активизируем 1 , основной слой должен оставаться видимым (на примере основной слой убран для наглядности).

8. Выбираем инструмент Eraser Tool (резинка), кисть hard (жесткая). Начинаем стирать вокруг зерен так, чтобы это смотрелось наиболее естественно на фоне основного слоя.
Должно получиться так:

Без основного слоя —

С основным слоем —

9. Аналогично поступаем и с другим слоем , тем что копия части №4:

С основным —

Красная линия показывает, как правильно убирать границы в углах. В правом нижнем углу тоже надо стереть кусочек части №1 под углом примерно 45 градусов, как и в верхних углах:

10. Сливаем эти три слоя (слой с верхом, с правой частью и основной) при помощи горячих клавиш ctr+E

11. И теперь самое интересное!!! Отрезаем части 1,3,4:

И наш фон готов:

Урок №4

Фон — калейдоскоп.

1. Берем любую понравившуюся картинку. У меня такая:

И сразу же делаем из слоя Background (Задний план) обычный слой. Это важно! Для этого достаточно дважды кликнуть по нему в палитре слоев.

2. Вырезаем интересный квадратный кусочек. (Кто не умеет обрезать, тот смотрит урок » «). Если кусочек окажется великоват по размеру, то можно его уменьшить (урок » «)

Я взяла такой кусочек картинки и сделала его размером 100х100:

3. Теперь основная фишка . Поворачиваем наш рисунок на 45 градусов.

Для этого идем в Image-Rotate canvas-Arbitrary (Изображение-Повернуть холст-Произвольно):

получаем:

4. Нам весь получившийся ромбик не нужен. Наш фон мы будем формировать только из одной четвертинки этого ромбика. Поэтому опять берем инструмент Crop tool , зажимаем Shift и делаем обрезку:

Подготовительные работы закончены.

5. Начнем «склеивать» фон.

а) Увеличиваем ширину холста вдвое. Идем Image-Canvas size (Изображение-Размер холста) и устанавливаем такие настройки:

получаем:

б) Удваиваем треугольник. Дублируем слой Layer-Dublicate layer (Слой-Дублировать слой). Полученный новый слой отражаем по горизонтали Edit-Transform-Flip Horizontal (Редактирование-Трансформирование-Отразить по горизонтали) и сдвигаем стрелочкой так, чтобы получилось такое:

Объединяем эти два слоя (Ctrl+E).

в) Увеличиваем высоту холста вдвое:

г) Дублируем слой и опять отражаем копию, но теперь уже по вертикали. Получаем «бантик»:

Опять объединяем слои (Ctrl+E).

д) Снова дублируем слой. И поворачиваем копию «бантика» на 90 градусов. Для этого идем Edit-Transform-Rotate 90 (Редактирование-Трансформирование-Поворот на 90). Здесь не важно будете вы поворачивать по часовой стрелке или против неё.

Вот такая красота у меня получилась

Совсем как в детском калейдоскопе! И фон из таких кусочков получается оригинальный и совершенно бесшовный:

Приятного вам творчества !

P.S. Если у вас возникли какие-то вопросы по уроку — опишите в комментарии подробно вашу проблему, мы обязательно поможем вам разобраться! И не забудьте подписаться на комментарии к уроку, если хотите получить ответ на свой вопрос как можно скорее .

Лучшее «спасибо» за урок — ваш комментарий! 🙂

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

Итак, приготовьтесь, сейчас я буду очень подробно показывать, как я сделала такой цветочный фон. Картинки большие и их больше десяти штук, хотя по правде сказать можно было бы уложиться и в две, зафиксировав лишь основные моменты. Но раз я пообещала пошаговый процесс, то его и буду демонстрировать. Если что, я предупредила))

Создаем документ 4500х4500 пикселей, с разрешением 300.

Вставляем в наш документ заранее приготовленные элементы. В моем случае, это 3 вот таких цветочных заготовки (все они аккуратно вырезаны по контуру и размещены в разных слоях).

Дублируем наши цветочки и в произвольном порядке заполняем ими верх и левую сторону холста. Как видите элементы в разной степени выступают за край. Теперь выделяем все цветы, что пересекают левую границу холста и дублируем их. *не забываем периодически сохранять документ

Выделив наши дубли, щелкаем по маркеру трансформационной области. Теперь у нас стала активной панелька сверху под главным меню. Выбираем точку отсчета левый верхний угол в «Reference point location». Сейчас мы видим координаты нашей группы объектов относительно верхнего левого угла. Их мы и будем менять.

Поскольку мы работаем с левой стороной, то соответственно и двигать объекты будем относительно оси Х. Сейчас у меня там -1018. Итак, достаем калькулятор и додаем до этой цифры 4500 (ширину нашей рабочей области). В итоге у нас получается 3482, это число мы и вводим в графу Х. Наши цветочки переместились, готово.

Аналогично дублируем весь верхний ряд вниз, вычислив координаты нашей группы объектов по оси Y.*не забываем периодически сохранять документ

Если нужно подвигать наши элементы, то не забываем, что теперь противоположные стороны взаимосвязаны. Так что, для перемещений выделяем объект и его дубль и тогда смещаем.

Всю пустую область заполняем цветочками так, чтобы это было гармонично и красиво. Следим за тем чтобы наши объекты не пересекали границ рабочей области. Вот в принципе, наш бесшовный узор и готов. Но поскольку я параноик, которому надо все перепроверить, то у меня есть еще несколько шагов))

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

Дублируем наш слой с цветочным узором. Перемещаем его на 4500 пикселей вправо. Выделяем узор и его дубль и двигаем так чтобы было видно шов, где они соединяются. Для чего я это делаю? Проверяю все ли сошлось)) Иногда, когда слоев очень много, то можно напутать с верхними нижними дублями и какой-то листик в одной части паттерна уйдет под цветочек, а с другой стороны уже будет сверху. Но в нашем случае все замечательно. *не забываем периодически сохранять документ

Рекомендуем также

Как сделать текстуру без швов в фотошопе. Бесшовная текстура

Не всегда можно найти уже готовые текстуры нужных материалов для 3ds max. Часто дизайнерам приходится создавать их самостоятельно. Например, из фотографий, предоставленных заказчиком. В данном уроке рассмотрим, как своими руками сделать бесшовную текстуру в Photoshop.

Открываем исходное изображение в Фотошопе. У нас фотография кусочка кирпичной кладки.

Для 3d текстур нужно брать квадратное изображение. Это облегчит в будущем работу с текстурой при ее наложении на объект. Подогнать исходную картинку можно через редактирование размера холста. Изображение → Размер холста → Новый размер, Ширина, Высота.

Подгоняем края

Переходим во вкладкуФильтр → Другое → Сдвиг.В появившемся окне вводим значения, равные примерно половине размера картинки. Жмем ОК. Теперь швы находятся посередине изображения, левый и правый край текстуры автоматически сходятся.

Ретушируем стыки

Выделяем места стыков. Жмем Shift+F5. В появившемся окне выбираем «С учетом содержимого». Жмем ОК.

Дорабатываем штампом или заплаткой некрасивые участки. Мы будем работать Штампом при помощи Alt+ЛКМ.

Следует кропотливо обработать все места швов. Особое внимание обращаем на ритмично повторяющиеся объекты (пятна, сучки). Чем их больше, тем более искусственно будет выглядеть текстура при наложении. Следовательно, удаляем их по возможности.

Сохраняем нашу квадратную картинку. Проверяем, чтобы стоял правильный цветовой режим (Изображение → Режим → RGB).

Теперь вы знаете как самостоятельно сделать текстуру без швов в программе Фотошоп. Можете еще посмотреть полезный ролик на эту тему:

Должно быть, каждый сталкивался с подобной ситуацией в Photoshop: решили сделать заливку из исходного изображения – столкнулись с некачественным результатом (то картинки повторяются, то слишком контрастно переходят друг в друга). Конечно, выглядит это по меньшей мере некрасиво, но нет проблем, которые бы не имели решения.

С помощью программы Photoshop CS6 и данного руководства вы сможете не просто избавиться от всех этих недостатков, но и реализовать красивый бесшовный фон!

Итак, приступим же к делу! Поэтапно выполняйте указанную ниже инструкцию и вас обязательно все получится.

Сначала мы должны выделить на картинке участок при помощи инструмента Photoshop «Рамка» . Возьмем, к примеру, центр полотна. Заметьте, что выбор должен падать на фрагмент с более ярким и в тот же момент равномерным освещением (обязательно, чтобы на нем не было темных участков).

Но, как бы Вы не старались, края картинки будут различаться, поэтому придется их осветлять. Для этого переходим к инструменту «Осветлитель» и выбираем мягкую кисть большого размера. Обрабатываем темные края, делая участки более осветленными, чем прежде.

Однако, как Вы могли увидеть, в левом верхнем углу присутствует лист, который может дублироваться. Чтобы избавиться от этой незадачи, зальем его текстурой. Для этого выбираем инструмент «Заплатка» и обводим участок вокруг листа. Выделение переносим на любой понравившейся вам участок травы.

Теперь поработаем со стыковками и краями. Делаем копию слоя с травой и переносим его налево. Для этого используем инструмент «Перемещение» .

Получаем 2 фрагмента, которые в месте состыковки осветлены. Теперь нам нужно соединить их таким образом, чтобы от светлых участков не осталось и следа. Сливаем их в единое целое (CTRL+E ).

Здесь мы опять применяем инструмент «Заплатка» . Выделяем нужный нам участок (область, в которой будет состыковка двух слоев) и перемещаем выделенный фрагмент на соседний.

С Инструментом «Заплатка» наша задача становится значительно проще. Особенно данным инструментом удобно пользоваться с травой – фоном из разряда далеко не самых лёгких.

Теперь перейдем к вертикальной линии. Все делаем точно так же: дублируем слой и перетаскиваем его наверх, другую копию располагаем снизу; состыкуем два слоя таким образом, чтобы между ними не оставалось белых участков. Сливаем слой и с помощью инструмента «Заплатка» действуем таким же образом, как делали это ранее.

Вот мы в прицепе и сделали нашу текстуру. Согласитесь, это было довольно легко!

Убедитесь, что на вашей картинке нет затемненных участков. При данной проблеме используйте инструмент «Штамп» .

Остается сохранить наше отредактированное изображение. Для этого выделяем все изображение (CTRL+A ), далее идем в меню «Редактирование/Определить узор» , присваиваем имя этому творению и сохраняем его. Теперь его можно использовать в качестве приятного фона в ваших последующих работах.

Мы получили оригинальную зеленую картинку, которая имеет массу применений. Например, вы можете использовать её в качестве фона на вебсайте или использовать как одну из текстур в Photoshop.

В этом руководстве мы с вами научимся создавать свои собственные текстуры в программе Adobe Photoshop. Потом их можно использовать для оформления фона веб сайтов, в качестве текстур для 3D графики и т.д.

Но тут есть некоторые «подводные камни», которые делают создание текстур несколько сложным. Дело в том, когда для создания текстур используются фигуры, то тут сложно сгладить места их состыковки друг с другом. А если будет видна нестыковка, то качество текстуры будет не самое лучшее.

В этом руководстве мы попытаемся решить эту проблему.

Для начала создайте в Photoshop»е новый документ размером 100x100px. Выберите кисточку (В) на ваше усмотрение и нарисуйте подобное этому:

А сейчас нарисованную фигуру преобразуем в узор командой Edit > Define Pattern… и назовем ее «texture». Переходим к команде Image > Canvas size и задаем новый размер 400x400px.

Заполним весь наш холст новым узором, используя Edit > Fill…

Получиться должно следующее:

Как видите, узоры между собой не полностью состыковываются. Поэтому и не получается полноценная текстура. А хотелось бы:)

Эта проблема решается использованием фильтра Offset (Сдвиг). Этот фильтр перемещает изображение на указанное количество пикселей. В данном случае изображение перемещается внутри контура, в то время как сам контур остается на своем прежнем месте.

Эффект действия фильтра Offset напоминает вставку изображения в контур с последующим перемещением.

Поэтому переходим к команде Image > Canvas size и опять задаем значение 100x100px. Потом заливаем картинку нашим узором Edit > Fill…

Вызовем фильтр Offset используя Filter > Other > Offset с такими параметрами:

Как видите, горизонтальные и вертикальные пиксели переместились почти на половину рисунка:

Теперь осталось лишь соединить края «оборванных» линий, используя ту же кисточку, которой мы их рисовали. Так что выбирайте инструмент Кисточка (В) и соедините линии в одно целое:

А сейчас снова примените фильтр Offset (Ctrl+F).

Отличный урок от Designshack в котором очень просто можно самому сделать в фотошопе бесшовную текстуру для заливки фона. Сначала мы создадим новую кисть с эффектом боке, потом в новом документе создадим сам узор, а потом воспользуемся замечательным фильтром, который, собственно и создает бесшовный паттерн. И уже напоследок вручную подчистим рисунок.

Шаг 1.
Создаем в фотошопе новый документ размером 800х800 пикс.

Заливаем его цветом #80ac4b.

Шаг 2.
В новом документе создадим кисть с эффектом боке. Для этого выбираем большую жесткую кисть черного цвета. Создаем новый слой и щелкаем ей в центре документа. Задаем стилем слоя небольшое внешнее свечение тоже черного цвета. Потом отключаем задний фон и идем в меню «Редактирование» (Edit) > «Определить кисть» (Define Brush) и сохраняем нашу кисть.

Возвращаемся в наш основной документ. Нажимаем F5 и в настройках кисти устанавливаем следующие параметры: «Динамика формы» (Shape dynamics) > «Колебание размера» (Size Jitter) — 18%, «Рассеиваие» (Scatter) > «Рассеивание» (Scatter) — 789%, «Другая динамика» (Other dynamics) > «Колебание непрозрачности» (Opacity Jitter) — 100%.

Шаг 3.
Теперь выбираем инструмент «Кисть» (Brush) и белым цветом, аккуратными штрихами добавляем круги на зеленый фон. Должно получиться приблизительно так.

Шаг 4.
Теперь главное действие. В меню выбираем «Фильтр» (Filter) > «Другие» (Other) > «Сдвиг» (Offset). Выбираем значения, как на рисунке ниже.

Шаг 5.
На этом шаге выбираем жесткую кисть цвета фона #80ac4b и вручную аккуратно закрашиваем недоделанные круги. Должны остаться только целые круги. Смотрим рисунок ниже.

Шаг 6.
Теперь опять выбираем созданную нами кисть, настраиваем ее как в Шаге 2 (Динамика формы, Колебание размера и Рассеивание) и короткими, аккуратными штрихами добавляем кругов в центр документа. Следим за тем, чтобы круги не попадали на края квадрата, а добавлялись только в центре.

Шаг 7.
Наш бесшовный паттерн готов. Теперь можно уменьшить его до приемлемых размеров и в меню «Редактирование» (Edit) > «Определить узор» (Define Pattern) можно добавить новый узор и использовать его для заливки фона.

Если вы занимаетесь веб-дизайном, 3D моделированием или другим творчеством, связанным с 3D max или Photoshop, то вам периодически требуются качественные бесшовные текстуры и фоны. Найти нужную текстуру или фон в сети порой бывает очень не просто, поэтому решением данной проблемы может послужить вариант сделать бесшовную текстуру (фон) самостоятельно. При этом, вы сами сможете сделать текстуру нужного вам качества и оттенка.

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

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

Для начала работы нам потребуется сам фон или текстура который(ую) мы и будем “превращать” в бесшовный(ую). Естественно, что качество нашей будущей бесшовной текстуры или фона будет напрямую зависеть от качества исходного изображения или фото. Допустим, вам необходимо сделать бесшовную текстуру асфальта, в таком случае вам потребуется фото данного асфальта и чем качественнее данное фото будет, тем качественнее получится бесшовная текстура. Вы можете найти нужное вам изображение в интернете, либо сделать фото объекта самостоятельно, но фото должно быть качественным.

Возьмем, для примера фото асфальта, найденное в сети, фото специально подберем побольше размерами, чтобы текстура получилась высокого качества. В нашем случае размер фото составляет 1300 x 864px, чего будет достаточно.

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

Принцип создания бесшовного изображения заключается в отражении краев (стыков), что в результате дает идеальное соединение изображения, тем самым создавая вид единой поверхности, а не разных кусков изображения. Для легкого и быстрого “превращения” фото (изображений) в бесшовные текстуры существует специальный плагин для фотошопа, который автоматически выполняет указанные выше функции (отражение и подгонка швов изображения).

Данный плагин разработан для фотошопа, начиная с CS3 и заканчивая последней на сегодняшний день версией CC. Плагин является бесплатным и скачать его можно с нашего сайта:

Скачайте плагин для вашей версии фотошоп и установите его. После установки плагина у вас в правой боковой панели программы фотошоп появится значок плагина:

Чтобы создать бесшовное изображение (текстуру) с помощью данного плагина необходимо открыть нужное изображение (фото) программой фотошоп и сделать данное изображение квадратным – это обязательное требование данного плагина. Т.е. открываете необходимое изображение фотошопом, выбираете инструмент “Прямоугольная область” в левой панели программы и с его помощью (удерживая левую клавишу мыши) выделяете квадратную область из любой части вашего изображения.

Для того, чтобы область выделялась правильным квадратом, а не прямоугольником, необходимо в ходе выделения нужной области, помимо левой кнопки мыши удерживать клавишу “Shift”.

После того, как нужная область выделена, выбираете в верхнем меню “Изображение” – “Кадрировать” и ваша выделенная область будет вырезана и обращена в квадратное изображение.

Теперь настало время воспользоваться “волшебным” плагином. При выделенном слое нашего квадратного изображения нажимаем на значок плагина и у нас открывается панелька.

В данной панельке мы указываем размер нашего изображения в пикселях (в нашем случае получилось 864px) и ставим галочку напротив “Difine Pattern”, после чего просто выбираем способ создания бесшовного изображения нажатием на кнопку “Tile” или “Mirror”. Если вы выберите способ “Tile”, то ваше бесшовное изображение будет создано именно из вашей картинки в полном ее размере. Если же выберите способ “Mirror”, то бесшовное изображение будет создано из 4-х ваших картинок, зеркально отраженных и уменьшенных под размер вашего квадрата. Вообщем просто попробуйте и все поймете сами.

Мы выбрали способ “Tile” и в результате получили текстуру высокого качества, размером 864 x 864 пикселя:

Бесшовную текстуру (фон) высокого качества, которою можно использовать в 3D max или фотошопе мы сделали, но давайте еще придадим ей необходимый нам оттенок. Допустим нам нужна текстура потрескавшегося асфальта не светло-серого цвета, а темно-красного. Для начала мы объединим получившиеся слои в одну картинку, а первоначальное изображение просто удалим за ненадобностью. В правой панели слоев удаляем самый нижний слой с нашим исходным изображением, чтобы оно не мешалось и преобразуем все получившиеся слои из которых состоит бесшовная текстура в одно изображение.

Для этого правой кнопкой мыши кликаем по папке “tile pattern” и выбираем в появившемся меню “Преобразовать в смарт-объект”. После данных действий все содержимое папки будет преобразовано в один слой изображения, с которым мы в дальнейшем и будем работать (менять ему цветовой тон).

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

Таким образом у вас получится бесшовная текстура с необходимым цветовым тоном. Остается сохранить данное изображение в высоком качестве, для этого в верхнем меню выбираем “Файл” – “Экспортировать” – “Сохранить для web” и в появившемся окне, в настройках качества выставляем 100%, после чего жмем кнопку “Сохранить”.

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

Рекомендуем также

Создание бесшовной заливки Pattern для фонов. Как я делаю бесшовный узор в фотошопе

Отличный урок от Designshack в котором очень просто можно самому сделать в фотошопе бесшовную текстуру для заливки фона. Сначала мы создадим новую кисть с эффектом боке, потом в новом документе создадим сам узор, а потом воспользуемся замечательным фильтром, который, собственно и создает бесшовный паттерн. И уже напоследок вручную подчистим рисунок.

Шаг 1.
Создаем в фотошопе новый документ размером 800х800 пикс.

Заливаем его цветом #80ac4b.

Шаг 2.
В новом документе создадим кисть с эффектом боке. Для этого выбираем большую жесткую кисть черного цвета. Создаем новый слой и щелкаем ей в центре документа. Задаем стилем слоя небольшое внешнее свечение тоже черного цвета. Потом отключаем задний фон и идем в меню «Редактирование» (Edit) > «Определить кисть» (Define Brush) и сохраняем нашу кисть.

Возвращаемся в наш основной документ. Нажимаем F5 и в настройках кисти устанавливаем следующие параметры: «Динамика формы» (Shape dynamics) > «Колебание размера» (Size Jitter) — 18%, «Рассеиваие» (Scatter) > «Рассеивание» (Scatter) — 789%, «Другая динамика» (Other dynamics) > «Колебание непрозрачности» (Opacity Jitter) — 100%.

Шаг 3.
Теперь выбираем инструмент «Кисть» (Brush) и белым цветом, аккуратными штрихами добавляем круги на зеленый фон. Должно получиться приблизительно так.

Шаг 4.
Теперь главное действие. В меню выбираем «Фильтр» (Filter) > «Другие» (Other) > «Сдвиг» (Offset). Выбираем значения, как на рисунке ниже.

Шаг 5.
На этом шаге выбираем жесткую кисть цвета фона #80ac4b и вручную аккуратно закрашиваем недоделанные круги. Должны остаться только целые круги. Смотрим рисунок ниже.

Шаг 6.
Теперь опять выбираем созданную нами кисть, настраиваем ее как в Шаге 2 (Динамика формы, Колебание размера и Рассеивание) и короткими, аккуратными штрихами добавляем кругов в центр документа. Следим за тем, чтобы круги не попадали на края квадрата, а добавлялись только в центре.

Шаг 7.
Наш бесшовный паттерн готов. Теперь можно уменьшить его до приемлемых размеров и в меню «Редактирование» (Edit) > «Определить узор» (Define Pattern) можно добавить новый узор и использовать его для заливки фона.

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

Итак, приготовьтесь, сейчас я буду очень подробно показывать, как я сделала такой цветочный фон. Картинки большие и их больше десяти штук, хотя по правде сказать можно было бы уложиться и в две, зафиксировав лишь основные моменты. Но раз я пообещала пошаговый процесс, то его и буду демонстрировать. Если что, я предупредила))

Создаем документ 4500х4500 пикселей, с разрешением 300.

Вставляем в наш документ заранее приготовленные элементы. В моем случае, это 3 вот таких цветочных заготовки (все они аккуратно вырезаны по контуру и размещены в разных слоях).

Дублируем наши цветочки и в произвольном порядке заполняем ими верх и левую сторону холста. Как видите элементы в разной степени выступают за край. Теперь выделяем все цветы, что пересекают левую границу холста и дублируем их. *не забываем периодически сохранять документ

Выделив наши дубли, щелкаем по маркеру трансформационной области. Теперь у нас стала активной панелька сверху под главным меню. Выбираем точку отсчета левый верхний угол в «Reference point location». Сейчас мы видим координаты нашей группы объектов относительно верхнего левого угла. Их мы и будем менять.

Поскольку мы работаем с левой стороной, то соответственно и двигать объекты будем относительно оси Х. Сейчас у меня там -1018. Итак, достаем калькулятор и додаем до этой цифры 4500 (ширину нашей рабочей области). В итоге у нас получается 3482, это число мы и вводим в графу Х. Наши цветочки переместились, готово.

Аналогично дублируем весь верхний ряд вниз, вычислив координаты нашей группы объектов по оси Y.*не забываем периодически сохранять документ

Если нужно подвигать наши элементы, то не забываем, что теперь противоположные стороны взаимосвязаны. Так что, для перемещений выделяем объект и его дубль и тогда смещаем.

Всю пустую область заполняем цветочками так, чтобы это было гармонично и красиво. Следим за тем чтобы наши объекты не пересекали границ рабочей области. Вот в принципе, наш бесшовный узор и готов. Но поскольку я параноик, которому надо все перепроверить, то у меня есть еще несколько шагов))

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

Дублируем наш слой с цветочным узором. Перемещаем его на 4500 пикселей вправо. Выделяем узор и его дубль и двигаем так чтобы было видно шов, где они соединяются. Для чего я это делаю? Проверяю все ли сошлось)) Иногда, когда слоев очень много, то можно напутать с верхними нижними дублями и какой-то листик в одной части паттерна уйдет под цветочек, а с другой стороны уже будет сверху. Но в нашем случае все замечательно. *не забываем периодически сохранять документ

В данном уроке вы узнаете, как сделать бесшовную текстуру в Photoshop. Данный урок подойдет также тем, кто хочет узнать, как сделать бесшовный фон для сайта (паттерн для сайта, паттерн для фона) или паттерн для Фотошопа.

Что такое бесшовные текстуры? Зачем нужны бесшовные текстуры и как их использовать?

Прежде чем узнать, как сделать бесшовную текстуру в Фотошопе, давайте посмотрим, зачем они вообще нужны, эти бесшовные текстуры.

В игрострое довольно часто используется техника тайлинга текстур или затайливания текстур (от англ. tile — плитка). Тайлинг позволяет повторять текстуры на поверхности 3D модели. Очень часто затайленные текстуры применяются на ландшафте, либо для текстурирования дорог, домов и так далее. О тайлинге я уже рассказывал в уроке .
Но для того чтобы затайленная текстура хорошо смотрелась на 3D модели, необходимо чтобы она была бесшовной .

На рисунке показана затайленная далеко не бесшовная текстура, на которой видны стыки между противоположными краями текстуры.

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

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

На рисунке показана не бесшовная текстура, размноженная в Фотошопе (дважды затайленная). Рисунок на краях изображения отличается.

Как вы можете видеть на рисунке выше такую текстуру не стоит использовать для затайливания ландшафта или любого другого 3D объекта, да и просто для заливка фона сайта или холста в Фотошопе. И для создания паттерна для Фотошопа она не подойдет. Чтобы наложить текстуру на 3D модели без стыков (или залить фон сайта или холста), заметных пользователю, необходимо воспользоваться инструментами редакторов изображений.

Как сделать бесшовную текстуру в Фотошопе. Подготовка изображения в Фотошопе

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

На рисунке показана текстура кирпича, которая будет превращена в бесшовную текстуру.

Если вы не нашли текстуру размером 512 на 512 пикселей (1024 х 1024, 2048 х 2048 или 4048 х 4048 пикселей), а нашли, например, текстуру размером 1300 на 700, то обрежьте изображение в Фотошопе до размера в 512 х 512 пикселей при помощи инструмента Рамки/Crop (в панели инструментов слева) или использовав инструмент изменения размера холста «Canvas Size», который вы можете найти во вкладке «Image» главного меню.

На рисунке показаны инструменты, позволяющие обрезать изображение Canvas Size (A) и Crop (B).

Также вы можете использовать инструмент свободного трансформирования (Ctrl + T ) либо инструмент Scale , который вы найдете в меню Transform вкладки Edit главного меню.

На рисунке показан инструмент Scale для изменения масштаба изображения (в данном случае, подгонки изображения) в Photoshop.

Если вы применяли инструмент масштабирования или перемещения текстуры, необходимо выделить все видимое изображение на холсте (Ctrl + A ) и скопировать его на новый слой (Ctrl + C и затем Ctrl + V ). Если этого не сделать, то выступающее за холст изображение нам помешает. Альтернативой копипасту может послужить упоминавшийся ранее инструмент обрезки изображения Crop. Далее мы будем работать с новым созданным слоем: выделите его в панели справа, щелкнув на нем Левой Кнопкой Мыши.

Смещаем изображение в Фотошопе, используя фильтр Смещение («Offset»)

Итак, как сделать бесшовную текстуру в Фотошопе… Фотошоп предоставляет вам отличный инструмент, который подойдет для создания бесшовной текстуры. Данный инструмент представляет собой фильтр в Фотошоп и называется Смещение или «Offset «. Я уже рассказывал про смещение текстур на поверхности 3D моделей (а на самом деле в uv пространстве), в частности, использующихся в компьютерных играх, в статье . Здесь фильтр Смещения также позволяет двигать текстуру по горизонтали и вертикали.

Чтобы сместить изображение текстуры, выберите вкладку фильтров «Filter » в главном меню и в открывшемся выпадающем меню выберите вкладку «Other «, в которой, в свою очередь, выберите вкладку «Offset …».

На рисунке показано окно настроек фильтра Смещения («Offset»).

В окне фильтра «Смещение » выставьте значение для смещения по горизонтали равным 256 пикселям (Horizontal 256 pixels right ) и смещение по вертикали равным также 256 пикселям (Vertical 256 pixels down ), чтобы сместить изображение текстуры на 256 пикселей по горизонтали и вертикали. Нажмите кнопку «OK «, чтобы применить фильтр и сместить текстуру. Как вы можете видеть (и себя на холсте или на рисунке выше) в центре изображения появились швы, поскольку края изображения не совпадают друг с другом.
Для текстуры 1024 на 1024 смещение по вертикали и горизонтали можно выставить в 512 пикселей, для 2048 – 1024 пикселей, хотя и не обязательно.
Данные значения смещения служат лишь рекомендательными и могут для изображения 512 на 512 пикселей (а также для 1024х1024, 2048×2048) составлять 128 пикселей, 256 пикселей и так далее.

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

Главное, чтобы вам было удобно работать в процессе удаления швов текстуры.

Используем инструмент клонирования Штамп («Clone Stamp Tool»), чтобы скрыть швы на изображении

Чтобы удалить швы на текстуре, в Фотошопе существует несколько инструментов. Одним из таких инструментов является «Штамп » («Clone Stamp Tool «), иногда еще называемый кистью клонирования или клонирующей кистью.

На рисунке показан инструмент Штамп в Фотошопе.

Инструмент «Штамп » в Фотошопе позволяет создавать клоны участков изображения и вставлять их в указанное место холста. Чтобы указать место на изображении, с которого будет клонироваться часть изображения, удерживайте клавишу ‘Alt’ и кликните Левой Клавишей Мыши в точке изображения, которая станет точкой отсчета клонирования участка-донора.

Теперь, удерживая Левую Клавишу Мыши, проведите по участку изображения, на который хотите скопировать часть изображения относительно указанной ранее начальной точки участка-донора. Обратите внимание, что параллельно вашей кисти движется окружность, повторяя движение вашей кисти и показывая, с какого участка изображение в настоящий момент осуществляется клонирование текстуры (ее части).

На рисунке показана результирующая бесшовная текстура кирпичной кладки.

А вот так выглядит получившаяся текстура в Unity3D.

На рисунке показана затайленная бесшовная текстура кирпичной стены в Unity3D.

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

Вместо Штампа или в качестве дополнения к нему вы можете использовать инструменты «Заплатка» (Patch Tool), Healing Brush Tool, Spot Healing Brush Tool

Возвращаем текстуру на место

Теперь, когда вы удалили все швы на изображении, превратив ее в бесшовную текстуру, необходимо вернуть её на место. Конечно, вы можете не возвращать ее, а использовать в том виде, в котором она сейчас есть — со смещением. Так можно поступить для бесшовной текстуры травы или бесшовной текстуры камней, каменной или кирпичной кладки. Однако такое смещение и результирующая текстура практически неприемлемы для текстур деталей, например, sci-fi стены или sci-fi плитки пола, создание которой рассматривается в , поскольку оставляет по краям затайленной 3D модели половинки текстур.

Проверка бесшовности текстуры и коррекция швов текстуры

Чтобы проверить, насколько «бесшовной» получилась ваша текстура, вы можете, если сместить текстуру не на 256 пикселей по вертикали и горизонтали, а например на +128 и +128 пикселей, или на -128 и +128 пикселей, или на +128 и 0 пикселей и так далее. Только не забывайте (а лучше записывайте) на сколько пикселей и в какую сторону каждый раз смещали текстуру, чтобы иметь возможность вернуть ей изначальное нулевое смещение. Если подобное смещение выявило нарушение бесшовности, то подредактируйте стыки текстур, как было описано выше, чтобы избавиться от швов на текстуре (смещенной). Не забывайте, что не стоит залезать на края изображения, чтобы опять не пришлось править несовпадения краев текстур.

Повторите проверку несколько раз с разными значениями для смещения по вертикали и горизонтали, чтобы убедиться, что вы создали бесшовную текстуру.

Используем инструмент Осветлитель (Dodge Tool) и Затемнитель (Burn Tool) для осветления изображения в Фотошопе

Если текстура неоднородно освещена, то при затайливании текстуры, например, в игровом движке Unity3d, Unreal Engine, Amazon Lumberyard, Cryengine и других, или в 3D редакторах 3ds MAX, Cinema4D, Blender и т.д., такие затенения образуют повторяющийся узор. На небольших расстояниях камеры или точки наблюдения такой эффект не особо заметен. Чем больше камера будет удаляться от поверхности с такой затайленной текстурой, тем сильнее будет заметен эффект паттерна.

Чтобы избежать подобного эффекта, необходимо, чтобы все участки текстуры были одинаково осветлены/затемнены. Для осветления текстуры (отдельных ее участков) вы можете воспользоваться инструментом «Dodge Tool «, работа с которым более подробно описана в ///уроке про осветление карты высот для создания ландшафта.

На рисунке показаны инструменты осветления и затемнения изображения Dodge Tool и Burn Tool.

Как и где еще используются затайленные текстуры

После того, как вы узнали, как сделать бесшовную текстуру в Фотошопе, давайте посмотрим, где еще могут быть использованы бесшовные текстуры, созданные в Фотошопе.

Получившуюся бесшовную текстуру можно использовать для раскрашивания ландшафтов или 3D моделей в Unity3d.

На рисунке показан 3D ландшафт, созданный в Unity3D в одном из уроков по созданию террейнов в Unity3D.

Результирующую бесшовную текстуру можно также сохранить в качестве паттерна или кисти для Фотошопа.

На рисунке показан процесс создания паттерна для Фотошопа из изображения.

В следующем уроке я расскажу, как сделать бесшовную текстуру в GIMP.

[email protected]

Post Views: 31 327

Урок №1. Зеркальный фон

Урок №2. Полосатый фон

Урок №3. Фон с сохранением изначальной текстуры

Урок №4. Фон — калейдоскоп

Урок №1 .

Зеркальный фон.

Результат:

1. Открываем нашу картинку в Photoshop:
(«File — Open…» — «Файл — Открыть…»)

2. Создаем новый чистый документ («File — New…» — «Файл — Новый документ…»)

3. Вырезаем из нашей картинке тот участок , который пойдет в основу фона. Для тех, кто не знает как это сделать, можно воспользоваться уроком » «

4. Теперь с помощью инструмента Move tool (V) переносим этот фрагмент на наш чистый лист. Для этого просто зажимаем левой кнопкой мыши нашу картинку и тащим ее на новый документ. Потом отпускаем:

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

7. Снова поворачиваем наш фрагмент , но уже по вертикали. Жмем Image — Rotate canvas — Vertical (Изображение — Повернуть — Вертикально):

8. И снова его перетаскиваем на чистый слой и ставим рядом с уже присутствующими там изображениями.

10. Снова перетаскиваем результат на чистый слой и ставим рядом с уже присутствующим там изображениями:

11. И последний раз жмем на фргменте Image -Rotate canvas- Vertical (Изображение — Повернуть — Вертикально). И снова видим что наш фрагмент перевернулся. теперь снова его перетаскиваем на чистый слой и ставим рядом с уже присутствующими там изображениями.

Теперь мы будем работать только с чистым слоем и наложенными на него фрагментами.

12. Обрезаем лишнее. Если у вас есть на слое «пустое» место — то есть то, где нет фрагментов, то давайте его обрежем, чтобы остался только наш будущий фон. Для этого пользуемся уроком » «

И получаем результат:

Урок №2 .

Полосатый фон.

Результат:

1. Для этого открываем любую понравившуюся вам картинку в Фотошопе
А делаем это так File — open… (Файл -открыть…). Я выбрала вот эту:

2. Находим на панели инструментов инструмент single row marquee tool:

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

Нажимем в центре нашей картинки и появляется вот такая горизонтальная пунктирная линия:

3. Трансформируем линию. Выбираем команду «Edit — Free transform (Редактировать — свободная трансформация) и (сочетание клавиш ctrl + T) видим, что наша пунктирная линия стала просто линией, а на концах ее образовались маленькие квадратики:

Осторожно надвигаем нашу мышку на один из квадратиков и появилась масенькая черная стрелочка и вот этой стрелочкой двигаем вниз и видим что наша картинка уже вовсе не картинка а сплошные полоски:

Я думаю что на этом можно остаовиться, нет смысла дотягивать до конца всей картикни, можно взять всего лишь часть — кусочек ведь узор линии не изменится:

4. Вырезаем наш кусочек, чтоб обрезать изображение пользуемся инструментом «Crop tool» (обрезка). У меня получилось вот так:

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

Ну вот и все, наш фон готов.

Урок №3 .

Бесшовный фон с сохранением изначальной текстуры.

Результат:

1. Открываем любую картинку (желательно с похожими краями) в ФотоШопе.

Наше изображение может быть каким угодно, правда, чем более крупные предметы на нем изображены, тем сложнее будет маскировать швы. Внимательно рассмотрите изображение, размер предметов должен быть примерно одинаковым на всех четырех сторонах картинки. Я подобрала вот такой вариант:

2. Установите направляющие линии View — Rulers (Просмотр — Направляющие), по которым вы планируете работать (они и будут границами готовой текстуры). Убедитесь, что активирована функция View > Snap to Guides (Просмотр — Вспомогательные элементы). Двигайте направляющие по рисунку так, чтобы они проходили по середине предметов (конечно, насколько это возможно). Это делается для того, чтобы вы мысленно представили свой будущий фон, наметили границы так сказать.

Я пронумеровала получившиеся части рисунка, чтобы удобнее было пояснять, с которой частью будем работать:

3. Выбираем инструмент Rectangular Marquee Tool (Прямоугольное выделение):

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

4. Копируем выделение на отдельный слой, нажимая на клавиатуре «ctrl + j»

5. Перетаскиваем инструментом Move tool (Перемещение) или стрелочками на клавиатуре скопированный кусок вверх части 2, как это показано на рисунке:

Примечание: у вас эта часть не должна светиться. Я применила ей свойства сияния, чтобы наглядно вам показать (чтобы картинка не сливалась и вы видели границы).

6. Так же копируем часть №1 и перетаскиваем копию в правый край части 2:

Левый нижний угол под номером 3 не используется.

7. Прячем слой №4, активизируем 1 , основной слой должен оставаться видимым (на примере основной слой убран для наглядности).

8. Выбираем инструмент Eraser Tool (резинка), кисть hard (жесткая). Начинаем стирать вокруг зерен так, чтобы это смотрелось наиболее естественно на фоне основного слоя.
Должно получиться так:

Без основного слоя —

С основным слоем —

9. Аналогично поступаем и с другим слоем , тем что копия части №4:

С основным —

Красная линия показывает, как правильно убирать границы в углах. В правом нижнем углу тоже надо стереть кусочек части №1 под углом примерно 45 градусов, как и в верхних углах:

10. Сливаем эти три слоя (слой с верхом, с правой частью и основной) при помощи горячих клавиш ctr+E

11. И теперь самое интересное!!! Отрезаем части 1,3,4:

И наш фон готов:

Урок №4

Фон — калейдоскоп.

1. Берем любую понравившуюся картинку. У меня такая:

И сразу же делаем из слоя Background (Задний план) обычный слой. Это важно! Для этого достаточно дважды кликнуть по нему в палитре слоев.

2. Вырезаем интересный квадратный кусочек. (Кто не умеет обрезать, тот смотрит урок » «). Если кусочек окажется великоват по размеру, то можно его уменьшить (урок » «)

Я взяла такой кусочек картинки и сделала его размером 100х100:

3. Теперь основная фишка . Поворачиваем наш рисунок на 45 градусов.

Для этого идем в Image-Rotate canvas-Arbitrary (Изображение-Повернуть холст-Произвольно):

получаем:

4. Нам весь получившийся ромбик не нужен. Наш фон мы будем формировать только из одной четвертинки этого ромбика. Поэтому опять берем инструмент Crop tool , зажимаем Shift и делаем обрезку:

Подготовительные работы закончены.

5. Начнем «склеивать» фон.

а) Увеличиваем ширину холста вдвое. Идем Image-Canvas size (Изображение-Размер холста) и устанавливаем такие настройки:

получаем:

б) Удваиваем треугольник. Дублируем слой Layer-Dublicate layer (Слой-Дублировать слой). Полученный новый слой отражаем по горизонтали Edit-Transform-Flip Horizontal (Редактирование-Трансформирование-Отразить по горизонтали) и сдвигаем стрелочкой так, чтобы получилось такое:

Объединяем эти два слоя (Ctrl+E).

в) Увеличиваем высоту холста вдвое:

г) Дублируем слой и опять отражаем копию, но теперь уже по вертикали. Получаем «бантик»:

Опять объединяем слои (Ctrl+E).

д) Снова дублируем слой. И поворачиваем копию «бантика» на 90 градусов. Для этого идем Edit-Transform-Rotate 90 (Редактирование-Трансформирование-Поворот на 90). Здесь не важно будете вы поворачивать по часовой стрелке или против неё.

Вот такая красота у меня получилась

Совсем как в детском калейдоскопе! И фон из таких кусочков получается оригинальный и совершенно бесшовный:

Приятного вам творчества !

P.S. Если у вас возникли какие-то вопросы по уроку — опишите в комментарии подробно вашу проблему, мы обязательно поможем вам разобраться! И не забудьте подписаться на комментарии к уроку, если хотите получить ответ на свой вопрос как можно скорее .

Лучшее «спасибо» за урок — ваш комментарий! 🙂

На беоне заметно распространены так называемые бесшовные дизайны.
В интернете можно найти множество бесшовных фонов, а вот как сделать бесшовный фон из собственной картинки?
Это я предложу Вам сделать первым уроком.

1. открываем изображение в фотошопе. Пусть оно называется слой 1
Я выбрала вот это:
—
—
2. Нажимаем J+ctrl (создаем дубликат слоя). называем его слой 2
3. Идем: фильтр-другие-сдвиг.
Ставим свои настройки.
Для каждого изображения настройки индивидуальны, для своего я выбрала такие:
—
—
4. Находясь на слое два идем: фильтр-размытие-размытие по Гауссу.
Я поставила такие настройки:
—
—
5. Далее берем ластик (большой, ок. 300 пикс). Стираем немного по бокам слоя 2
Примерно так:
—
— .
6. Создаем копию слоя 1(слой 3). Перетаскиваем его так, чтобы он находился над слоем 2. Идем: редактирование-свободное трансформирование. Немного уменьшаем слой 3:
—
— .
7. Ластиком немного подтираем края слоя 3, что они слились с фоном.
Можно дублировать слой и добавить немного размытия в движении.
Итог:
—
—

II способ.

Бесшовный фон можно сделать также при помощи фильтра: mehdi.
С ним все значительнее проще.
Если появятся желающие, дам ссылку на скачивание этого фильтра.
Для создание бесшовного фона я выбрала вот это изображение:

—
—

Открываем фильтр. Выглядит он так:

—
—

Я поставила такие настройки.
Итог:
—
—
На этом все.
Буду рада увидеть ваши работы.

скачать фильтр здесь.

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

Найти хорошую бесшовную текстуру для визуализации в 3ds Max, ArchiCAD (или еще в чем-нибудь) бывает довольно непросто.  Иногда на самом деле гораздо проще создать ее самостоятельно, но не в ручную, конечно, а с помощью специальных программ. Сегодня речь о фирменном онлайн-приложении итальянского производителя мозаики Bisazza.

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

1. Открываем сайт Bisazza

Переходим по адресу bisazza.com, дальше клик по меню APP  вверху справа. Или сразу по адресу приложения bisazzaapp.bisazza.com.

Главная страница сайта Bisazza

2. Открываем раздел создания текстур

В меню слева выберите раздел Design your products.

Выбор раздела создания мозаики

3. Выбираем тип мозаики

В том же меню слева выбираем:

1. Mosaic Blends — однородные смеси тесселов в определенных вами пропорциях.
2. Mosaic Shading Blends — плавный переход от одной смеси к другой.
3. Mosaic Decorations — мозаичные панно с возможностью подбора цветовых вариантов.
4. Mosaic Patterns — узоры с возможностью выбора формата и цвета плиток.

Выбор типа мозаики

4. Настраиваем смесь

В меню справа выбираем нужные размеры и цвета тесселов, указываем пропорции. Общая сумма процентного содержания всех видов плиток обязательно должна быть 100%.

Настройка смеси

5. Сохранение текстуры

В разделе Tools правого меню выбираем Download texture и сохраняем на компьютер zip архив с большой и маленькой текстурой мозаики, плюс текстовый файл с размерами примерно такого содержания: «Sheet size: 32.2cm x 32.2cm Texture size: 128.8cm x 128.8cm».

Сохранение готовой текстурыГотовая большая текстура

6. Создание bump текстуры

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

Настройка bump текстурыГотовая текстура для bump канала

Создание бесшовной текстуры в Blender

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

Финальный результат

Видеоурок

Текстовый урок

Рендерить мы будем квадратные текстуры, поэтому установите соответствующее разрешение для камеры (1024х1024, 2048х2048, 4096х4096…). Также измените ее тип на ортографический (Scale равен 1.0).

Далее стоит выровнять камеру перед плоскостью. Для этого выделите плоскость и перейдите в меню View > Align View > Align Active Camera to Selected.

В режиме редактирования плоскости продублируйте ее 8 раз и создайте из новых частей квадрат 3х3. Удалите дубликаты вершин, чтобы сделать из этого всего цельный объект (W > Remove Doubles).

В примере ниже куб является потомком плоскости (Ctrl + P > Object). Благодаря этому его можно продублировать на каждую грань объекта с помощью соответствующей опции.

Вместо куба создаем что-то другое. Например вот такие камни.

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

Вот так они выглядят при дублировании на каждую грань плоскости.

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

Обратите внимание на количество полигонов перед дублированием объекта на каждую грань. Если их будет слишком много, блендер начнет знатно тормозить. Модификатор Decimate поможет значительно сократить количество полигонов после скульптинга.

Теперь нам нужно отрендерить все карты, из которых мы в последствии будем создавать материал.

Для создания карты нормалей подымите кривую по оси Y до 0 для всех трех осей.

При создании карты высот наивысшая точка должна быть белой, а самая нижняя — черной.

Цветовую карту создавайте так, как вам нравится. Здесь нет никаких требований, лишь бы вам нравилось.

Тоже самое касается карты шероховатости. В черных участках шероховатость минимальна, в белых — максимальна.

После того, как все карты будут готовы, из них можно собрать наш PBR-материал.

Как вы могли заметить, мы использовали 3 карты из 4-х созданных. Карта высот пригодится нам для смешивания нескольких шейдеров и/или для создания смещения. Но в таком случае нам понадобится большое количество полигонов, поэтому смещать геометрию мы с ее помощью здесь не будем.

Ниже вы видите простой материал текстуры травы.

И вот теперь мы смешиваем два данных данных материала и карта высот выступает у нас в качестве фактора смешивания.

Ниже вы видите результаты итогового материала при различном освещении (три цвета лампы Point и HDR-карта).

С помощью данной техники можно создать огромное количество подобных текстурных карт. Сейчас трудно найти хотя бы одну игру AAA-класса, в которой бы не было подобных материалов. Отличный результат и минимальное количество полигонов.

Как сделать бесшовную текстуру для фона сайта

Шаг 1

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

Шаг 2

Используйте инструмент Dodge (осветление) для осветления тёмных областей.

Вот наш фрагмент.

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

Выберите инструмент Dodge (O) и большой мягкой кистью немного пройдитесь возле левого и правого краёв, чтобы немного осветлить тень. Не переборщите, иначе трава будет выглядеть слишком размытой.

Шаг 3

Как вы можете видеть выше, трава выглядит более равномерно окрашенной. Но этот листочек слева вверху разоблачит нас, если будет повторяться снова и снова, поэтому мы должны избавиться от него. Возьмите инструмент Patch (Заплатка) (J) и обведите вокруг листа мышкой, захватите эту область и перетащите. (Обратите внимание: инструмент Patch должен быть установлен на Source (Источник), а не на Destination (Назначение),

иначе разница будет несущественная).

Шаг 4

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

Шаг 5

Я оставил промежуток в 1 px, чтобы вы могли увидеть, как соединяются края.

Здесь вы можете видеть, что два слоя почти соприкасаются. Соедините их вместе так, чтобы между ними не было видно белого и объедините два слоя в один

Шаг 6

Теперь мы снова используем инструмент Patch (Заплатка), чтобы нарисовать неровную линию вокруг кромки, где соединяются два слоя, затем, используя мышь, перетащите выделенную область на близлежащий участок, чтобы заделать его.

Шаг 7

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

Шаг 8

Теперь мы повторим тот же самый процесс по вертикали. Дублируйте слой и подвиньте один вниз, а другой вверх, пока верхний и нижний края не соприкоснутся. Объедините слои вместе и используйте инструмент patch, чтобы избавиться от кромки.

Шаг 9

Теперь мы готовы к мощению!
Это будет работать, потому что мы практически избавились от краёв, новые края  документа уже совпадают, потому что мы подвинули слои равномерно влево и вправо, так что правый край документа действительно является следующим пикселем вдоль левого края.

Шаг 10

Нажмите CTRL+A, чтобы выделить всё и выберите Edit > Define Pattern.

Шаг 11

Дадим паттерну имя.

Шаг 12

Теперь на любом слое, если вы выберете blending options и отметите раздел Pattern Overlay, вы можете выбрать из вашего набора заказных паттернов, как показано, включая паттерн с травой, который мы только что сделали. На рисунке выше вы можете видеть, как я применяю паттерн к фону веб-сайта.
Конечно, вы должны также сохранить изображение паттерна как PSD или JPG, т. к. вам может понадобиться использовать отдельное изображение. Например, если вы будете использовать его как фоновую картинку в HTML-документе,  вам понадобится отдельная картинка в формате JPG image, а  не «Pattern» для Фотошопа.

Готово!

Вот и наша мощёная травка.

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

Научитесь создавать бесшовные текстуры и работать с ними

Часто незамеченные герои набора инструментов дизайнера, бесшовные текстуры находят множество применений для Интернета, печати и 3D-дизайна.

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

Макет веб-сайта с использованием бесшовной текстуры из зеленого мрамора от автора Амелии Остин.

---

Что такое бесшовные текстуры?

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

Набор бесшовных текстур высокого разрешения из библиотеки Shutterstock.

Хотя обычно их называют «текстуры», эти изображения, как правило, представляют собой плоские 2D-изображения (например, JPEG), которые можно использовать отдельно (например, в веб-дизайне и печатном дизайне) или наслоить с другими JPEG или текстурными «картами». »Для фотореалистичных 3D-рендеров.Изображения могут быть простыми или узорчатыми, но обычно содержат элементы, которые можно легко повторить без риска того, что изображение будет выглядеть искусственно увеличенным.

Вы можете создавать свои собственные бесшовные текстуры, редактируя исходное изображение в программном обеспечении, таком как Adobe Photoshop, или находить готовые бесшовные текстуры в библиотеке Shutterstock.

---

Когда мне использовать бесшовные текстуры?

3D-художников и пользователей САПР знакомы с преимуществами бесшовных текстур для создания ультрареалистичных изображений продуктов, мебели и окружающей среды.Тем не менее, полиграфические и веб-дизайнеры также найдут бесшовные текстуры незаменимыми для крупномасштабных макетов. Они могут привнести реалистичность и цельный профессиональный вид на веб-сайты, плакаты, вывески или САПР.

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

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

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

Ниже вы узнаете, как создавать свои собственные бесшовные текстуры всего за шесть простых шагов с помощью Photoshop.

---

Как создать собственные бесшовные текстуры?

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

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

Пример изображения, используемого в этом руководстве. Изображение автора Федоров Алексей.

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

Шаг 1. Выпрямление изображения

После открытия изображения в Photoshop , продублируйте слой Background , чтобы сохранить копию исходного изображения.

В Photoshop продублируйте фоновое изображение.

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

Используйте направляющие, вытащенные из линейок ( View> Rulers ), чтобы отметить вертикальные и горизонтальные точки на изображении. перед поворотом изображения, чтобы убедиться, что оно идеально совмещено с ними.

Совместите вертикальные и горизонтальные точки на изображении.

Шаг 2. Обрезка изображения

Некоторые изображения, такие как это, будут иметь элементы, пересекающие край изображения. В этом случае половинчатые камни не позволят нам разместить изображение бесшовно, поэтому определите область изображения, которая может быть повторена без потери бит элементов. Используйте инструмент Crop Tool ( C ), чтобы обрезать все выступающие края.

Используйте инструмент «Обрезка», чтобы обрезать ненужные края.

Шаг 3. Создание постоянного освещения

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

Перейдите в Image> Adjustments> Shadows / Highlights .

Выровняйте свет и тень, отрегулировав тени / светлые участки.

Отрегулируйте ползунки Shadows / Highlights до тех пор, пока количество света и тени не выровняется по всему изображению.

Есть несколько вариантов на выбор при настройке теней / светлых участков.

Шаг 4. Увеличьте холст

Используйте инструмент кадрирования ( C ) , чтобы растянуть холст по горизонтали и вертикали, утроив ширину и высоту монтажной области в целом.

Растяните холст по горизонтали и вертикали.

Шаг 5. Разложите изображение мозаикой

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

Здесь я вставляю кирпичи в место, где они могли бы поместиться, выравнивая копию по оригиналу.

Выравнивание дубликатов.

Выберите оба слоя изображения на панели Layers и дублируйте пару.Переместите их вправо и, как и прежде, плавно сопоставьте копии с оригиналами.

Расположите копии поверх оригиналов.

Выделите все слои изображения на панели Layers и дублируйте их, перемещая их над исходными изображениями, а затем вставляя текстуру на место.

Переместите текстуры на место.

Повторяйте, пока не будет заполнено все полотно.

Повторяйте этот процесс, пока не будет заполнено все полотно.

Если у вас есть области, которые кажутся немного рассинхронизированными, используйте точечную восстанавливающую кисть ( J ), чтобы перетащить области и заделать любые нечетные пятна.

Шаг 6: Отрегулируйте всю текстуру

На панели Layers создайте новую папку и поместите в нее все слои изображения.

Создайте новую папку на панели «Слои».

Затем переключите режим наложения папки с Pass Through на Normal .Это позволит вам добавить корректирующий слой над другими слоями изображения и применить эффект ко всем слоям, рассматривая их как одно бесшовное изображение.

Переключите режим наложения со сквозного на нормальный.

Попробуйте использовать корректирующий слой Curves или Levels , чтобы вернуть в изображение больше глубины и тона.

Придайте изображению дополнительную глубину и тон с помощью корректирующего слоя «Кривые» или «Уровни».

Когда вы закончите работу над текстурой, вы можете Файл> Сохранить как изображение как JPEG , готовое для использования в печатном или веб-проекте.Отличная работа!

---

Заключение: преобразующая сила бесшовных текстур

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

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

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

---

Найдите другие руководства по Adobe Photoshop, а также лучшие советы по работе с фоном:

Фоновое изображение обложки через Амелию Остин.

20+ лучших сайтов для загрузки бесплатных текстур

Текстуры и узоры имеют отдельное значение в процессе создания и проектирования. Многие думают, что 3D-художники и игровые дизайнеры — единственные, кто работает с текстурами и шаблонами для создания поверхностей 3D-геометрии и ресурсов.На самом деле художники, которые работают с 2d-концепт-дизайнерами и цифровыми художниками, также играют с текстурами, чтобы добавить приятные и четкие детали в свое искусство.

Использование текстур может приблизить ваш дизайн к реальности и превратить ваше искусство в более интересное и яркое произведение.

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

1. CG Текстуры

   CG Textures — потрясающий сайт с огромной базой различных высококачественных текстур. Вы можете просматривать различные категории текстур и загружать их в рамках заданной квоты. Для загрузки текстур сначала необходимо зарегистрироваться.

   Посетить веб-сайт

2. Текстурное хранилище

   Texture Vault, еще один большой архив с множеством высококачественных текстур. В его базе данных более 8000 изображений текстур с более чем 25 категориями.Это хорошее место для покупки и продажи текстур.

   Посетить веб-сайт

3. Текстурщик

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

   Посетить веб-сайт

4. Texturez

   Аккуратный и чистый сайт с большой категорией различных текстур. Каждая миниатюра текстуры содержит информацию о дате добавления и размере исходного файла изображения текстуры.У вас также есть возможность взглянуть на изображение предварительного просмотра с низким разрешением или само изображение текстуры полного размера.

   Посетить веб-сайт

5. Майанг

   Mayang — еще одна отличная библиотека текстур с более чем 4000 бесплатными текстурами высокого разрешения для загрузки. Вы можете скачать текстуры по одной бесплатно, но также предлагает вам приобрести сразу весь набор текстур.

   Посетить веб-сайт

6. 1000 лыжи

   Как следует из названия, этот веб-сайт предлагает широкий выбор текстур и изображений неба, которые можно использовать для создания небесных куполов или кубических карт.Вы можете загрузить частичные или полные 360 изображений неба с сайта 1000skies.

   Посетить веб-сайт

7. Текстура Люгера

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

   Посетить веб-сайт

8. Удивительные текстуры

   Amazing Textures предлагает вам просматривать различные категории, содержащие текстуры, относящиеся к городским (здания, ворота, интерьеры), разным (одежда, книги, еда) и природным элементам.

   Посетить веб-сайт

9. Текстуры Arrowway

   Arrow Way предлагает несколько великолепных DVD-дисков с пакетами текстур профессионального качества, включая некоторые дополнительные карты, такие как рельеф, отражение, карты нормалей и настройки материалов.

   Посетить веб-сайт

10. Библиотека текстур

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

    Посетить веб-сайт

11. Текстурный портал

    Портал

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

    Посетить веб-сайт

12. Текстурная мельница

    Texture Mill имеет более 5000 высококачественных изображений текстур с потрясающим уровнем детализации, которые вы хотели бы использовать в своих проектах.

    Этот замечательный веб-сайт предоставляет утилиту с простым пользовательским интерфейсом, которая позволяет вам настраивать оттенок, насыщенность, яркость-контрастность без использования Adobe Photoshop. Он также доступен как плагин для Maya и Blender.

    Посетить веб-сайт

13. Текстурные работы

    Texture Works — еще одно потрясающее место, которое предлагает большое количество бесплатных текстур и покадровое небо. Если вам нужны более подробные и качественные текстуры, вы можете приобрести доступные пакеты текстур.

    Посетить веб-сайт

14. Грандж текстуры

    Texture Works — еще одно потрясающее место, которое предлагает большое количество бесплатных текстур и покадровое небо. Если вам нужны более подробные и качественные текстуры, вы можете приобрести доступные пакеты текстур.

    Посетить веб-сайт

15. Текстуры Тони

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

    Посетить веб-сайт

16. Дзен Текстуры

    Еще одна отличная база данных, содержащая более 400 изображений текстур. Вы можете скачать их по одному или приобрести всю коллекцию за 29 долларов.

    Посетить веб-сайт

17. Фадж Графика

    В

    Fudge Graphics есть несколько действительно классных пакетов текстур, которые можно скачать бесплатно.

    Посетить веб-сайт

18. Абдузидо

    Abduzeedo каждый вторник публикует изображения текстур с потрясающей детализацией и высоким качеством. Перейдите по ссылке ниже, чтобы получить все эти потрясающие текстуры.

    Посетить веб-сайт

19. Текстурное сопряжение

    Этот веб-сайт — еще один отличный источник бесплатных текстур и узоров.Вы также можете скачать доступные пакеты бесплатно, вместо того, чтобы просматривать каждое изображение текстуры.

    Посетить веб-сайт

20. Взятые и потерянные

    Lost and Taken имеет множество бесплатных текстур, которые можно использовать как в личных, так и в коммерческих проектах. У вас есть масса текстур и более 30 категорий для просмотра.

    Посетить веб-сайт

21. Сайт бесплатных текстур

    На этом замечательном веб-сайте есть более 600 бесплатных изображений текстур, которые можно использовать как в коммерческих, так и в личных целях.

    Посетить веб-сайт

22. 3d текстура

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

    Посетить веб-сайт

Это все, надеюсь, вам понравился этот список. Если вы найдете какой-либо из этих сайтов полезным и уже использовали его контент, вы можете поблагодарить его, поставив им несколько отметок. Удачи с текстурированием!

Создание бесшовных текстур, даже не выходя из браузера

Школа искусств Йельского университета
придерживается несколько устаревшего подхода к плиточному фону

На прошлой неделе кто-то указал мне на Школу искусств Йельского университета и их.. ну .. интересное и, возможно, ироничное использование плиточного фона. В зависимости от вашего урожая, у вас могут быть воспоминания о MySpace, Angelfire или даже о недавно ушедших Geocities, но это заставило меня задуматься.

Фоновые изображения плитки похожи на крокодилов в мире веб-дизайна. Впервые они появились в «юрском» периоде Интернета, пережив таких динозавров, как макеты на основе таблиц и теги шрифтов. Конечно, они могут быть чертовски уродливыми и страшными, но, как крокодилы, они остаются на долгое время, потому что работают.

Хорошо, возможно, это было концептуальной натяжкой, но я много смотрю канал Discovery.

Скорее всего, мы увидим больше мозаичных фонов. Теперь, когда все текущие браузеры (IE9, Chrome, Firefox, Opera и Safari) наконец-то поддерживают использование нескольких фонов в одном элементе, кажется, есть отличные возможности для объединения плиток разного размера новыми и интересными способами. Однако в большинстве случаев вам нужно, чтобы образец изображения был мозаикой без видимых краев или швов.

Итак, как нам это сделать?

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

Есть несколько отличных коммерческих инструментов для бесшовной мозаики, которые в первую очередь предназначены для разработчиков игр и разработчиков 3D-моделей (хорошие примеры — Genetica, Pattern Studio и PhotoSEAM).

Если вы видите регулярное использование этих инструментов, они прекрасны, но, возможно, излишни для нас. Есть несколько платных плагинов для Photoshop и несколько сырых самодельных приложений, но я должен сказать, что меня ничего не впечатлило. Что, если бы вы могли сделать качественную бесшовную плитку, ничего не устанавливая и даже не выходя из браузера? Читать дальше.

1. Образец текстуры обоев из Lost & Taken

   Сегодня мы собираемся использовать некоторые из набора онлайн-графических инструментов Aviary. Чтобы поиграть, вы можете подумать об установке расширений Chrome или Firefox, которые напрямую связывают ваш браузер с их сервисом.Необязательно получать результат, но он упростит ваш процесс. Это ваш вызов.

2. Я начну со старой текстуры обоев из потрясающей и постоянно растущей коллекции Калеба Кимбро в Lost & Taken. Когда вы найдете понравившуюся текстуру, используйте расширение Aviary, чтобы сделать снимок экрана в окне браузера. Он должен загружаться прямо в редактор разметки изображений Aviary (также известный как Talon), где вы можете использовать инструмент кадрирования, чтобы обрезать изображение до красивого участка текстуры. Вам не нужно слишком заботиться о том, где именно вы обрезаете свои узоры — мы можем исправить это позже, — но постарайтесь выбрать область, которая относительно ровно освещена.

   Обрежьте изображение до приемлемого размера и затем перенесите его в редактор эффектов

   Затем нажмите зеленую кнопку «Image Effects» в правом верхнем углу, чтобы перенести наше изображение в редактор эффектов Aviary (он же Peacock) — вот здесь и происходят интересные вещи. Когда он загружен, в рабочем пространстве должен отображаться фрагмент вашей текстуры (помеченный как «Ресурс») с выходным холстом под ним. Соединительный рычаг автоматически присоединяет наш образец текстуры к холсту.

3. Теперь откройте вкладку «Эффекты» на левом краю, и вы найдете ящик, содержащий около 40 типов эффектов.Покопайтесь, пока не найдете эффект «Бесшовные», и перетащите его между плиткой текстуры (Ресурс) и холстом.

4. Соедините свой ресурс, эффект и холст вместе

   Нам нужно «связать» эти элементы вместе. Если вы правильно расположили эффект бесшовности, они могли автоматически соединиться друг с другом.

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

5. Выберите эффект «Бесшовные», и вы увидите его свойства, отображаемые на панели справа. Честно говоря, настройки по умолчанию не очень полезны, поэтому сбросьте горизонтальное и вертикальное смешение на ноль, а горизонтальное и вертикальное смещение на 50%. Это переместит швы с жесткими краями в центр холста, что упростит работу с ними.
6. Теперь по волшебству. Начните постепенно сдвигать настройки горизонтального перехода, и вертикальный шов с жесткими краями должен начать испаряться у вас на глазах. Если исходная текстура образца представляет собой органическую текстуру (бумага, трава, мрамор и т. Д.), Подойдет почти любая смесь около 10%. Искусственные повторяющиеся узоры, такие как обои и ткань, потребуют от вас более точной настройки, но это не так уж сложно.

   Сдвиньте настройки перехода по горизонтали, и вертикальный шов должен начать испаряться

7. Вы, наверное, догадались, что следующий шаг.Используйте ползунок вертикального перехода, чтобы удалить горизонтальное соединение.
8. Когда результат вас устраивает, щелкните элемент холста и установите флажок « Adapt Display Size to Input Bitmap » на панели свойств. Это автоматически обрежет для вас любую пустую область изображения. Вуаля ! Теперь вы должны смотреть на идеальную бесшовную плитку.
9. Теперь вам просто нужно его скачать. В меню «Файл» вверху вы можете использовать опцию «Экспортировать холст как растровое изображение», чтобы загрузить копию.Вы также можете сохранить копию в своей учетной записи Aviary, если она у вас есть.

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

Плитка бесшовная готовая

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

Сводка

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

Вы, вероятно, проходите мимо или едите с отличных поверхностей каждый день. Уберите их на черный день.

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

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

Удачи.

12 сайтов для загрузки бесплатных текстур и узоров

Для каждого креативного дизайнера и цифрового 3D художника текстуры фона являются важным активом дизайна.Есть ряд сайтов, предлагающих бесплатные текстуры и мозаичные узоры. Но поиск и поиск лучших мест для загрузки бесплатных фонов требует времени.

Как креативный дизайнер, я сам чувствую потребность. Просмотр десятков сотен текстур из разных источников каждый раз, когда мне нужны определенные текстуры, повторяется. Итак, сегодня я собрал 11 лучших веб-сайтов, на которых я могу скачать качественные ресурсы по текстурам и вернуться к ним, когда мне понадобятся какие-то конкретные текстуры. Надеюсь, эта коллекция будет вам полезна.

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

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

Lost and made — блог, посвященный бесплатным текстурам. Блог Калеба Кимброу предлагает различные текстуры в категориях бумаги, гранжа, дерева, царапин, металла и т. Д.

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

Куратор Атле Мо, Subtle Patterns предоставляет высококачественные мозаичные текстурные узоры, бесплатные для использования дизайнерами и разработчиками.

Texture King — еще один веб-сайт, предлагающий высококачественные бесплатные стоковые текстуры.

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

Этот сайт предоставляет высококачественные фоновые текстуры для фотографов, дизайнеров цифрового искусства и креативных дизайнеров. Бесплатные текстуры доступны в размере 900×600 пикселей, а текстуры с более высоким разрешением можно приобрести за небольшую плату. Они также продают комплекты текстур по сниженной цене.

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

TextureMate принадлежит Биллу Скотту, фотографу-любителю, который фотографирует текстуры и бесплатно публикует их на этом сайте. На сайте также есть бесплатные наборы узоров и кистей. Хорошая коллекция!

На этом сайте большое количество текстур. Однако перед загрузкой текстур вам следует внимательно прочитать их страницы часто задаваемых вопросов и лицензий.

У них есть сотни текстур по категориям. У них также есть вариант цвета, где вы можете найти текстуры на основе цветов.

Background Labs специализируется на создании множества бесплатных фоновых мозаичных узоров. Вы можете просматривать выкройки по цветам и категориям.

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

Создание бесшовных текстур — символы и содержимое

Сегодня увидел тему и в результате нашел довольно крутой инструмент, так что подумал, что поделюсь… Я искал генератор бесшовных изображений, чтобы упростить процесс, когда возникает необходимость использовать изображение в качестве текстуры. Раньше я делал несколько бесшовных текстур, но в целом процесс занимает довольно много времени, особенно если у вас нет канитель или фотошоп. Вот базовое изображение, которое я загрузил с веб-сайта Provia сегодня утром.

Сначала я наткнулся на этот сайт: https://www.imgonline.com.ua/eng/make-seamless-texture.php

Вы загружаете изображение, делаете несколько выделений, и получается цельное изображение. Я не тратил много времени на то, чтобы играть с ним, но лучший результат, который я получил, — это установка метода на NO 3, Pre-Cropped до 2 пикселей с каждой стороны, Pre-Averaging Intensity 25, и я использовал параметр вывода PNG-24. Вот созданное им мозаичное изображение (2×2)

Неплохо примерно для 2-х минутной работы. Если бы вы пытались сделать камень бесшовным, вы бы знали, насколько это сложно.

Лучшим вариантом, который я нашел, была загрузка под названием PixPlant. Он может работать как отдельная программа или использоваться в фотошопе (говорится). Он имеет довольно простой в использовании интерфейс и может быстро создавать параметры. Если у вас есть тот, который вам нравится, вы можете немного улучшить редактирование с помощью знакомых инструментов (рисование, клонирование, размытие, выравнивание и резкость). Это заняло немного больше времени, но использование и отображение фрагментов текстуры во время редактирования сделали это довольно просто, и дополнительный бонус в виде возможности создавать некоторые карты был крутым.Эта функция может потребовать немного работы, но это что-то …

Вот сравнение двух каменных стен, созданных сегодня … imgonline слева и PixPlant справа.

Наслаждаться

Провия — Терра Кат — Russet.calibz

5 веб-сайтов для загрузки бесплатных тонких текстур и градиентов

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

Но по мере продвижения к 2016 году мы начинаем видеть эволюцию плоского дизайна, которая выводит стиль за рамки простых цветовых палитр и выпуклых элементов, к тому, что в индустрии назвали плоским дизайном 2.0.

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

Этот «плоский, но не полностью плоский» стиль достигается путем добавления слоев или трехмерного моделирования к вашим плоским фоновым изображениям с использованием градиентов, узоров или текстур. Когда все сделано минимально, наслоение не только добавляет глубины вашему дизайну, но также может помочь вам передать уникальную индивидуальность бренда вашего клиента и вдохнуть больше жизни в ваш общий веб-дизайн.

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

Название

Subtle Patterns отражает его предложение T. Этот веб-сайт, один из моих личных фаворитов, содержит огромную библиотеку красивых минималистичных векторных текстур. Мало того, что все их текстуры можно загрузить совершенно бесплатно, но единственная заслуга создателей «Тонких шаблонов» — это комментарий в исходном коде HTML или CSS.Они также создали отличный плагин, который интегрирует их библиотеку текстур прямо в ваши панели Photoshop и Sketch.

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

Несмотря на то, что сайт «Transparent Textures» не самый красивый, он представляет собой уникальный способ находить и использовать текстуры в вашем 2.0 дизайнов. Их огромная коллекция текстур берется непосредственно из библиотеки «Тонкие узоры», но дает вам возможность предварительно просмотреть их применительно к выбранному вами цвету в браузере, а не в Adobe или Sketch. Просто введите шестнадцатеричное значение цвета фона, выберите понравившийся узор и вуаля, фон «Прозрачных текстур» теперь является предварительным просмотром вашего дизайна. Если вам нравится то, что вы видите, вы можете быстро скопировать CSS прямо в буфер обмена.

«Blend» начинался как небольшой побочный проект нью-йоркского дизайнера Колина Кини.Первоначально он хотел создать простой генератор цветовой палитры, который также предлагал простые функции для создания градиентов. В результате появился интуитивно понятный инструмент, который позволяет создавать красивые градиенты CSS3, используя цвета Flat и Material Design. Когда вы будете довольны результатом, вы можете просмотреть и скопировать градиент как кроссбраузерный код CSS.

Еще одна отличная библиотека текстур, Lost and Taken, в основном состоит из текстурированных стоковых фотографий, а не векторных изображений. Текстуры в основном отправляются пользователями и могут быть загружены и использованы бесплатно без указания авторства в личных и коммерческих проектах.Поскольку сайт управляется сообществом, у вас также есть возможность пожертвовать несколько долларов на обслуживание — что я бы посоветовал, если вы в конечном итоге будете использовать его регулярно. С такими категориями, как «Ткань», «Природа» и «Гранж», «Потерянное и взятое» может показаться неприменимым для ваших проектов Flat 2.0, но с небольшим (или большим) уменьшением непрозрачности вы будете удивлены, какие эффекты вы можете создать.

Дополнительная текстура и вдохновение градиентом

Ищу вдохновение в том, как использовать градиенты и текстуры в плоском дизайне 2.0? Ознакомьтесь с этими замечательными ресурсами:

Создание бесшовных текстур: советы и методы

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

Что такое бесшовная текстура?

Бесшовная текстура обычно представляет собой фотографию чего-то вроде кирпичной стены, которую можно повторять столько раз, сколько необходимо, без каких-либо разрывов или швов, каждый угол изображения должен совпадать и идеально совпадать с другим.Если бы вы сделали снимок кирпичной стены и попытались бы выложить ее мозаикой по геометрии, это не сработало бы, потому что левая сторона текстуры не могла бы совпадать с правой стороной. Чтобы успешно создавать мозаичные текстуры, все четыре угла текстуры должны совпадать с противоположным углом. Например, верх изображения должен совпадать с нижним. Чтобы добиться этого, вы должны выполнить некоторые манипуляции с фотографиями в такой программе, как Photoshop, чтобы создать бесшовную текстуру, которую можно накладывать на поверхность столько раз, сколько необходимо.

Съемка правой фотографии

Существует множество различных веб-сайтов, на которых можно найти бесшовные текстуры. Хотя это нормально и текстуры, скорее всего, подойдут для вашего проекта, лучше просто сделать фотографии самостоятельно. Для этого есть несколько причин. Во-первых, вам, возможно, придется приобрести эти бесшовные текстуры, которые могут начать накапливаться, особенно при ограниченном бюджете. Даже если вы купили, вам нужно будет очень внимательно следить за пользовательским соглашением, потому что вы не хотите нарушать какие-либо законы о лицензировании.Вторая причина в том, что вы точно знаете, что и как нужно принимать. Если вам нужно создать бесшовную текстуру для кирпичной стены, отправляйтесь в свой город и сделайте несколько фотографий. Постарайтесь создать свою библиотеку так, чтобы у вас были изображения, из которых можно было извлекать другие текстуры. Если вы собираетесь использовать подход «сделай сам» и делать свои собственные фотографии, тогда есть несколько очень важных вещей, которые нужно помнить, чтобы сделать идеальный снимок. Первое, в чем вам нужно убедиться, это то, что вы смотрите параллельно объекту.Вы не хотите смотреть на него под углом, а также вообще не хотите, чтобы камера поворачивалась. Вы должны попытаться сделать снимок как можно точнее. Если фотография была сделана под углом, это может вызвать некоторые странные искажения текстуры и будет практически невозможно правильно выложить мозаику. Вот отличный пример неудачного ракурса, вы можете видеть, что из-за того, что фотография была сделана, есть небольшая перспектива, где кирпичи подальше меньше. Эту фотографию было бы очень сложно использовать в качестве бесшовной текстуры материала.Последнее, в чем вы захотите убедиться, — это хорошее и ровное освещение в кадре. Вы не хотите, чтобы на изображении были горячие точки. Если вы находитесь на улице, постарайтесь найти место, где освещение будет равномерным по всей поверхности, что упростит выполнение мозаики текстур. Чтобы узнать больше о правильном способе привязки фотографий для использования в качестве текстуры в ваших 3D-моделях, обязательно прочитайте Пять советов по улучшению вашей фотографии для 3D-текстур.

Создание вашей первой бесшовной текстуры

После того, как вы сделали снимок, самое время перенести его в программу вроде Photoshop, где вы сможете произвести необходимые манипуляции.Чтобы фото можно было правильно выложить плиткой, вам нужно обрезать его как квадрат. Так, например, 1024х1024 или 2048х2048. Как только изображение будет обрезано до нужного размера, вам нужно будет выбрать небольшую область правой или левой стороны изображения с помощью инструмента выделения и Layer Via Copy и перетащить новую копию на другую сторону изображения. Вы должны заметить довольно большой шов на стыке копии с оригиналом; это можно очень легко исправить, используя ластик с очень низкой твердостью и непрозрачностью, сотрите шов и смешайте его лучше с изображением ниже, это должно сделать его едва заметным.Теперь, когда вы скопировали правую часть изображения в левую, при укладке плитки обе эти стороны будут намного лучше совпадать. Вы можете повторить этот процесс и для верхних краев. Когда вы пытаетесь выложить фотографию в Photoshop мозаикой, могут появиться небольшие швы, но вы можете пойти и отполировать их, используя что-то вроде инструмента Clone Stamp. В зависимости от вашей фотографии процесс может немного отличаться, но это отличный метод, который можно использовать для быстрого создания красивой бесшовной текстуры.

Использование инструмента Patch Tool для скрытия швов

Еще один отличный способ скрыть швы в текстуре — использовать инструмент «Патч» в Photoshop.Инструмент Patch Tool позволяет вам сделать выделение вокруг области вашей фотографии и скопировать выделение туда, где когда-либо был шов, и Photoshop отлично справится с объединением этих двух изображений вместе. Этот метод скрытия швов лучше всего использовать для абстрактных фотографий, например, гравийной дороги или участка травы. Поэтому убедитесь, что для того типа фотографии, с которой вы работаете, будет полезно использовать подход Patch Tool для скрытия швов. Создание бесшовных текстур — жизненно важная техника, которую нужно знать, особенно при текстурировании сред.Хотя в этом посте описан только один подход к созданию повторяющихся бесшовных текстур, существует множество различных методов, которые могут работать. Если вы хотите погрузиться глубже и изучить различные методы создания бесшовных текстур, обязательно ознакомьтесь с разделом «Создание бесшовных текстур для игр».

No related posts.