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


Бесшовная текстура

Умение создавать бесшовные текстуры в Фотошоп – полезный навык.  Часто, необходимо, чтобы текстура повторялась, образовывая сплошное покрытие. Бесшовные  текстуры еще называют «тайловыми» (от английского слова Tile – плитка).  Мы рассмотрим, как создать текстуру из исходного фонового изображения без шва. Это полезная техника, которая всегда пригодится. Очень важно правильно подобрать размер исходных фотографий, грамотно настроить переходы света и тени, да еще и сохранить результат в нужном формате.

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

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

Шаг 1. Инструментом «Рамка» (Crop) выделим участок травы в центре, где нет тёмных участков.

Шаг 2. Получился участок главным образом равномерно освещённым, но придётся поработать над освещением краёв, поскольку небольшие различия станут весьма явными, когда фон покроется текстурой. Инструментом «Осветлитель» (Dodge Tool) (О), выберем большую мягкую кисть, и мягко пройдёмся по левому и правому краям изображения, чтобы осветлить.

Шаг 3. Теперь наша трава выглядит более однородной. Но в верхнем левом углу есть небольшой лист, и если мы зальём такой текстурой, то лист будет повторяться снова и снова, таким образом, мы должны избавиться от него. Выберите инструмент «Заплатка» (Patch Tool) (J) и выделите участок вокруг листа, переместите полученное выделение на любой участок травы (в настройках инструмента «Заплатка» должен быть установлен «Источник» (Source)).

Шаг 4. Будем работать над стыками краёв друг с другом. Дублируйте слой с травой (Ctrl+J), переместите первый слой налево, а второй направо (инструментом «Перемещение» (Move)).

Шаг 5. На изображении ниже вы видите два слоя, касающихся друг друга. Соедините их таким образом, чтобы не было видно белого участка между ними и слейте оба слоя в один (Ctrl+E).

Шаг 6. Теперь мы снова используем инструмент «Заплатка» (Patch Tool) – выделите область соединения двух слоёв и перетащите выделение на соседнюю область.

Шаг 7. Инструмент  «Заплатка» (Patch Tool) делает этот вид работы  легким, особенно с таким трудным фоном, как трава (если вас не устраивают мелкие детали, то вы можете инструментом «Штамп» (CloneStampTool) клонировать отдельные травинки).

Шаг 8. Повторим процесс по вертикали. Дублируйте слой (Ctrl+J) и переместите один слой вверх, другой вниз, соедините их таким образом, чтобы не было видно белого участка между ними и слейте оба слоя в один (Ctrl+E). Снова используем инструмент «Заплатка» (Patch Tool) – выделите область соединения двух слоёв и перетащите выделение на соседнюю область.

Шаг 9. Наша текстура готова,

осталось сохранить наше изображение, как образец для дальнейшей работы. Нажимаем  Ctrl+A (выделим всё изображение) , заходим в меню Редактирование\Определить узор (Edit\Define pattern), присваиваете вашей текстуре имя и сохраняете.

Теперь к любому слою вы можете применить стиль слоя «Перекрытие узора» (Pattern Overlay) и из списка текстур выбрать нашу траву. Ниже приведён пример использования фона с травой для web-сайта.

Не забудьте сохранить документ в формате PSD или JPG.Примечание автора: на финальном изображении всё-таки заметны повторяющиеся тёмные участки, вы можете избавиться от них с помощью инструмента «Штамп» (CloneStampTool), но так как автор использовал это изображение для заливки фона вебсайта, то они не очень ему мешают.

Есть ещё один способ ретуширования стыков – это применить к кадрированному квадратику текстуры фильтр Фильтр\Другие\Сдвиг (Filter\Other\Offset).

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

Автор: Сollis

photoshop-master.ru

Как сделать бесшовную текстуру в Photoshop для 3D.

Умение создавать текстуру в Photoshop - полезный навык, особенно для работающих с 3ds Max. Для 3D графики текстуры играют очень важную роль. От качества текстур напрямую зависит качество визуализации 3D-сцены. Можно сказать, что 90% свойств материала несет в себе карта диффузного отражения, которая делается по фотографиям реальных фактур. В этом уроке я расскажу как создавать бесшовные текстуры из фотографий. В английском языке их обычно называют patterns или seamless textures.

Данный урок - первый в серии, посвященной подготовке текстур.

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

В качестве исходного материала возьмем такое изображение. На нем неплохая текстура дерева. В качестве образца я взял кусок в левом нижнем углу и кадрировал его инструментом Crop Crop tool.Исходное изображениеФрагмент для текстуры

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

Проверим выбранный кусок в качестве текстуры. Командой Select > All выделяем все изображение целиком. Вызываем в нем команду Edit > Define Pattern, которая определяет изображение как шаблон для заливки. Теперь создаем новый документ большого размера, скажем 1024х768. Вызываем команду Edit > Fill и выбираем образец для заливки.Окно заливки

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

Пример заливки текстурой

Для того чтобы получить возможность ретушировать стыки применим к кадрированному квадратику фильтр Filter > Other > Offset. В поля диалогового окошка вводим примерно половину размера картинки, хотя если просто подергать ползунки, то не составит труда загнать стыки в середину изображения.Фильтр OffsetТекстура со швом

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

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

Заливка бесшовной текстурой

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

3ds Max неверно интерпретирует CMYK-файлы текстур помещенные в слоты растровых карт материалов!

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

milovsky.ru

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

 Время чтения:4 минуты Изображений:10

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

Бесшовная текстура в Photoshop

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

Как создать?

1. Открываем Photoshop и создаем новый документ (славиши Ctrl+N) размерами например 400х400 пикселей. Размер по большому счету не очень важен, поскольку мы можем в дальнейшем легко масштабировать созданную нами текстуру. Далее выбираем Custom Shape Tool(клавиша U):

и выбрав нужную форму создаем в центре некую композицию, которую мы будем в дальнейшем делать бесшовной. Я создал вот такую небольшую композицию Думаю получилось очень даже симпатично. :-)

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

теперь нажмите сочетание клавиш Ctrl + E (Layer > Merge Layers). У вас должен получиться один слой с нашей композицией.

2. Сдвигаем текстуру. Теперь самое время сдвинуть текстуру так чтобы она давала правильное заполнение в последствии. Для этоко к нашему объединённому слою применим фильтр Filter >Other > Offset:

значения сдвига должны быть равны половине размера текстуры. Ну вот и получили мы бесшовную текстуру. Правда в центре у нас образовалось пустое место. Заполняем также какими нибудь объектами на наше усмотрение. Я добавил несколько фигур:

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

На этом сам процесс создания закончен.

Как использовать?

Создаем новый документ, например 1024х768 пикселей. Создаем новый слой и заливаем его любым цветом. Потом назначаем этому слою новый стиь.

В меню Pattern Overlay выбираем созданную нами текстуру и изменяем параметры по своему вкусу.

На этом все. Спасибо за внимание.Дальше используйте свое воображение!

mainview.ru

Бесшовные текстуры в фотошопе — Arttopia.Уникальные уроки рисования и дизайна в Adobe Photoshop

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

Часто бесшовные текстуры применяются для заливки фона в так называемых «резиновых сайтах».

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

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

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

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

Итак, делаем бесшовные текстуры в фотошопе.

Приступаем к работе

Открываем картинку Ctrl+O. Вызываем панель слоев – F7. Разблокируем первоначальный слой, дважды щелкнув по нему в панели слоев.

Бесшовные текстуры

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

Бесшовные текстуры

Идем в меню «Image» – «Image Size» («Изображение» – «Размер изображения»)(Alt+Ctrl+I).

Бесшовные текстуры

Смотрим ширину и длину изображения, делим пополам. Запишите значения на листочке, чтобы не забыть.

Бесшовные текстуры

Заходим в меню «Filter» – «Other» — «Offset» («Фильтр» — «Другое» — «Сдвиг»).

Бесшовные текстуры

Вводим значения, равные половине от 100% ширины и высоты изображения.

Бесшовные текстуры

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

Бесшовные текстуры

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

На всякий случай еще раз применяем фильтр «Ctrl+F»(повторяет предыдущий фильтр).

Смотрим, чтобы стыки уже не были видны.

Далее создаем паттерн. Заходим в меню:

«Edit» – «Define pattern»(Редактирование» – «Определить узор»).

Бесшовные текстуры

Создаем новый документ, например 1920х1080px.

Выбираем инструмент Paint Bucket (G) (Заливка), меняем в настройках заливки Foreground (Цвет переднего плана) на «Pattern»(Регулярный).

Бесшовные текстуры

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

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

До встречи!

arttopia.ru

Как сделать бесшовную текстуру в Фотошопе

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

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

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

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

Рамка в ФотошопВыделение фрагмента

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

Осветлитель в ФотошопОсветление краев

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

Заплатка в ФотошопеЗаливка текстурой в Фотошопе

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

Склейка слоев в Фотошопе

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

Склейка слоев в Фотошопе (2)

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

Редактирование текстуры заплаткой

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

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

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

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

Готовая текстура травы

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

Сохранение текстуры в ФотошопеСохранение текстуры в Фотошопе (2)

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

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

Помогла ли вам эта статья?

Да Нет

lumpics.ru

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

В этом уроке узнаем, как сделать бесшовную текстуру в Фотошопе.

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

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

Шаг 1. Открываем текстуру

Открываем нашу текстуру в Adobe Photoshop. Размер нашей текстуры 1920х1080 px. Нам важно знать размер точный для того чтобы рассчитать на сколько нужно сдвигать части.

Выбираем Фильтр > Другое > Сдвиг (Filter > Other > Offset) и выставляем значения сдвига ровно половину от значения размера изображения. Также выставляем режим Неопределенных областей (Undefined Areas) –  Вставить отсеченные фрагменты (Wrap Around).

Открываем текстуру

Шаг 2. Ретуширование стыка

Теперь необходимо заретушировать места стыков. Есть несколько способов, как это можно сделать. Я использовал инструмент Заплатка – Patch Tool (J).

Создайте новый слой. В верхней панели инструментов выберите режим Заплатки С учетом содержимого (Content-Aware) и поставьте галочку напротив Образец со всех слоев (Sample All Layers).

Настройка режима Адаптации возможно потребует небольших экспериментов, для разных изображений, но как правило режим Среднее (Medium) работает хорошо.

Сделайте выделение вертикального стыка.

Ретуширование стыка

Шаг 3. Ретуширование стыка

Затем нажмите левую кнопку мыши по выделению стыка и не отпуская ее сдвиньте влево или вправо.

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

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

Ретуширование стыка

Шаг 4. Ретуширование стыка

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

Ретуширование стыка

Шаг 5. Генерация паттерна

Теперь можно склеить все получившиеся слои в один. После этого создадим узор (текстуру) для заливки. Нажмем Редактирование > Определить Узор (Edit > Define Pattern).

После этого бесшовная текстура готова.

Теперь можно создать документ любого размера, после этого выбрать в панели Стиль слоя > Наложение узора (Layer Style > Pattern Overlay) паттерн который мы только что сделали.

Генерация паттерна

Шаг 6. Финальное изображение

С помощью настроек в панели Наложение Узора можно масштабировать паттерн, а также двигать его.

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

Ссылка на источник

Финальное изображение

sveres.ru

Как в фотошопе за несколько шагов сделать бесшовную текстуру | DesigNonstop

Как в фотошопе за несколько шагов сделать бесшовную текстуру

16

Как в фотошопе за несколько шагов сделать бесшовную текстуруОтличный урок от 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) можно добавить новый узор и использовать его для заливки фона.Как в фотошопе за несколько шагов сделать бесшовную текстуру

Оцените, пожалуйста, статью!
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)

www.designonstop.com


Смотрите также