Как сделать бесшовную текстуру в Photoshop
В данном уроке вы узнаете, как сделать бесшовную текстуру в Photoshop. Данный урок подойдет также тем, кто хочет узнать, как сделать бесшовный фон для сайта (паттерн для сайта, паттерн для фона) или паттерн для Фотошопа.
Что такое бесшовные текстуры? Зачем нужны бесшовные текстуры и как их использовать?
Прежде чем узнать, как сделать бесшовную текстуру в Фотошопе, давайте посмотрим, зачем они вообще нужны, эти бесшовные текстуры.
В игрострое довольно часто используется техника тайлинга текстур или затайливания текстур (от англ. tile — плитка). Тайлинг позволяет повторять текстуры на поверхности 3D модели. Очень часто затайленные текстуры применяются на ландшафте, либо для текстурирования дорог, домов и так далее. О тайлинге я уже рассказывал в уроке От тайлинга и смещения до атласа текстур на примерах смены обложки для книги и текстуры одежды и кожи персонажа.
Но для того чтобы затайленная текстура хорошо смотрелась на 3D модели, необходимо чтобы она была бесшовной.
Бесшовная текстура представляет собой изображение, элементы противоположных сторон которого совпадают.
Если противоположные стороны текстуры не будут подходить друг к другу, то при затайливании такой текстуры вы получите швы в месте их стыковки. Такие швы возникают вследствие резких переходов между рисунками текстуры на ее противоположных краях.
На рисунке показана не бесшовная текстура, размноженная в Фотошопе (дважды затайленная). Рисунок на краях изображения отличается.Как вы можете видеть на рисунке выше такую текстуру не стоит использовать для затайливания ландшафта или любого другого 3D объекта, да и просто для заливка фона сайта или холста в Фотошопе. И для создания паттерна для Фотошопа она не подойдет. Чтобы наложить текстуру на 3D модели без стыков (или залить фон сайта или холста), заметных пользователю, необходимо воспользоваться инструментами редакторов изображений.
Как сделать бесшовную текстуру в Фотошопе. Подготовка изображения в Фотошопе
Загрузите текстуру, которую хотите сделать бесшовной, в Фотошоп, открыв файл текстуры из Фотошопа или просто перетащите файл с текстурой из папки, где она у вас хранится, в окно Фотошопе (в этом случае новое изображение создавать не нужно, оно будет создано автоматически). Для данного урока я выбрал текстуру кирпича (кирпичной кладки) размером 512 на 512 пикселей.
На рисунке показана текстура кирпича, которая будет превращена в бесшовную текстуру.Также вы можете использовать инструмент свободного трансформирования (Ctrl+
Если вы применяли инструмент масштабирования или перемещения текстуры, необходимо выделить все видимое изображение на холсте (Ctrl+A) и скопировать его на новый слой (Ctrl+C и затем Ctrl
Смещаем изображение в Фотошопе, используя фильтр Смещение («Offset»)
Итак, как сделать бесшовную текстуру в Фотошопе… Фотошоп предоставляет вам отличный инструмент, который подойдет для создания бесшовной текстуры. Данный инструмент представляет собой фильтр в Фотошоп и называется Смещение или «Offset«. Я уже рассказывал про смещение текстур на поверхности 3D моделей (а на самом деле в uv пространстве), в частности, использующихся в компьютерных играх, в статье Эффекты в Unity3D. Часть III. Билборды (биллборды), бегущая строка, неоновая реклама, информационные щиты, реклама, рекламные щиты, баннеры.. Здесь фильтр Смещения также позволяет двигать текстуру по горизонтали и вертикали.
Чтобы сместить изображение текстуры, выберите вкладку фильтров «Filter» в главном меню и в открывшемся выпадающем меню выберите вкладку «Other«, в которой, в свою очередь, выберите вкладку «Offset…».
На рисунке показано окно настроек фильтра Смещения («Offset»).В окне фильтра «Смещение» выставьте значение для смещения по горизонтали равным 256 пикселям (
Для текстуры 1024 на 1024 смещение по вертикали и горизонтали можно выставить в 512 пикселей, для 2048 – 1024 пикселей, хотя и не обязательно.
Главное, чтобы вам было удобно работать в процессе удаления швов текстуры.
Используем инструмент клонирования Штамп («Clone Stamp Tool»), чтобы скрыть швы на изображении
Чтобы удалить швы на текстуре, в Фотошопе существует несколько инструментов. Одним из таких инструментов является «Штамп» («Clone
Инструмент «Штамп» в Фотошопе позволяет создавать клоны участков изображения и вставлять их в указанное место холста. Чтобы указать место на изображении, с которого будет клонироваться часть изображения, удерживайте клавишу ‘Alt’ и кликните Левой Клавишей Мыши в точке изображения, которая станет точкой отсчета клонирования участка-донора.
Теперь, удерживая Левую Клавишу Мыши, проведите по участку изображения, на который хотите скопировать часть изображения относительно указанной ранее начальной точки участка-донора. Обратите внимание, что параллельно вашей кисти движется окружность, повторяя движение вашей кисти и показывая, с какого участка изображение в настоящий момент осуществляется клонирование текстуры (ее части).
А вот так выглядит получившаяся текстура в Unity3D.
На рисунке показана затайленная бесшовная текстура кирпичной стены в Unity3D.При работе с данным инструментом особое внимание стоит уделить кисти, которая используется для данного инструмента, чтобы избежать резких границ и размытости на стыке краев текстур. Если вы будете использовать слишком мягкую кисть с большим размытием по краям и большой прозрачностью, то на стыке краев текстуры получите заявленное изображение. Если же будете использовать жёсткую кисть с резкими краями, то получите резкие переходы на швах текстуры. Кисть вы можете выбрать в меню сверху, расположенном сразу под главным меню.
Вместо Штампа или в качестве дополнения к нему вы можете использовать инструменты «Заплатка» (Patch Tool), Healing Brush Tool, Spot Healing Brush Tool
Возвращаем текстуру на место
Теперь, когда вы удалили все швы на изображении, превратив ее в бесшовную текстуру, необходимо вернуть её на место. Конечно, вы можете не возвращать ее, а использовать в том виде, в котором она сейчас есть — со смещением. Так можно поступить для бесшовной текстуры травы или бесшовной текстуры камней, каменной или кирпичной кладки. Однако такое смещение и результирующая текстура практически неприемлемы для текстур деталей, например, sci-fi стены или sci-fi плитки пола, создание которой рассматривается в уроке по созданию 3D модели sci-fi плитки пола в Blender. Превращаем 3D модель в sci-fi текстуру через запекание карт. Создание текстуры сетки для забора или пола для Unity3D, поскольку оставляет по краям затайленной 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.Также если заменить черный фон прозрачным фоном и изменить режим получившейся бесшовной текстуры на 8 бит или 16 бит в градациях серого (Grayscale, оттенки серого), то можно использовать получившуюся текстуру в качестве кисти для изменения формы/создания ландшафта в Unity3D. О создании кисти и использовании ее в Unity3d для редактирования ландшафта более подробно рассказывается в статье Террейн в Unity 3D. Часть Вводная – для затравки. Создание лабиринтов и подземелий в Unity3D.
Результирующую бесшовную текстуру можно также сохранить в качестве паттерна или кисти для Фотошопа.
На рисунке показан процесс создания паттерна для Фотошопа из изображения.Вы можете сохранить получившуюся текстуру и использовать ее в качестве кисти в Blender для раскрашивания 3D модели текстурой в Blender или использовать для редактирования 3D модели в режиме скульптинга.
В следующем уроке я расскажу, как сделать бесшовную текстуру в GIMP.
Скачать бесшовную текстуру кирпича бесплатно (free seamless texture — seamless-texture-brick-wall.jpg) (1782 Загрузки)
Автор: Максим Голдобин aka MANMANA
Post Views: 98 684
Как сделать бесшовную текстуру в Photoshop для 3D.
Умение создавать текстуру в Photoshop — полезный навык, особенно для работающих с 3ds Max. Для 3D графики текстуры играют очень важную роль. От качества текстур напрямую зависит качество визуализации 3D-сцены. Можно сказать, что 90% свойств материала несет в себе карта диффузного отражения, которая делается по фотографиям реальных фактур. В этом уроке я расскажу как создавать бесшовные текстуры из фотографий. В английском языке их обычно называют patterns или seamless textures.
Данный урок — первый в серии, посвященной подготовке текстур.
Идея первого метода проста: выбираем наиболее характерный фрагмент изображения, кадрируем его, применяем фильтр Offset, ретушируем стык.
В качестве исходного материала возьмем такое изображение. На нем неплохая текстура дерева.
В качестве образца я взял кусок в левом нижнем углу и кадрировал его инструментом Crop
.
Для 3D текстур желательно чтобы кусочек был квадратным. Это позволит
в дальнейшем легче назначать координаты проецирования в программе трехмерного моделирования. Получился вот такой вот кусочек.
С ним и будет идти вся дальнейшая работа.
Проверим выбранный кусок в качестве текстуры.
Командой Select > All выделяем все изображение целиком.
Вызываем в нем команду Edit > Define Pattern, которая определяет изображение как шаблон для заливки.
Теперь создаем новый документ большого размера, скажем 1024х768.
Вызываем команду Edit > Fill и выбираем образец для заливки.
Если теперь применить созданный образец, то мы получим явно заметные швы.
Для того чтобы получить возможность ретушировать стыки применим к кадрированному квадратику фильтр Filter > Other > Offset.
В поля диалогового окошка вводим примерно половину размера картинки, хотя если просто подергать ползунки, то не составит труда
загнать стыки в середину изображения.
В результате применения фильтра швы окажутся прямо посередине изображения, а левый
и правый край автоматически согласованы. Остается только воспользоваться любым инструментом ретуширования
для устранения стыков. Например, я чаще всего использую штамп клонирования, хотя и Patch tool тоже отлично подходит.
Если теперь применить созданный образец, то швов больше не видно. Обычно процедуру приходится повторять многократно до достижения удовлетворительного эффекта. При ретушировании следует обращать внимание на слишком характерные элементы изображения, заметные пятна и т.п. Ритмические повторения одинаковых сучков выдают искусственное происхождение текстурного рисунка.
В заключение не забудьте сохранить текстуру-квадратик в отдельный файл формата, понятного вашей 3D программе. Только проследите чтобы цветовая модель не была CMYK!
3ds Max неверно интерпретирует CMYK-файлы текстур помещенные в слоты растровых карт материалов!
К сожалению, если в исходном изображении присутствует неоднородность в освещении выбранного фрагмента, то даже безупречная ретушь стыков не позволит сделать шаг текстуры незаметным. В этом случае следует использовать инструменты осветления-затемнения. Хотя более технологично использовать фильтры, но об этом в следующий раз.
Создание бесшовной текстуры | Урок по Photoshop CC 2017 / CC 2019 от KatalProject
Бесшовные текстуры — штука незаменимая для тех, кто имеет дело с трехмерной графикой, будь то создание виртуальных миров компьютерных игр, архитектурная визуализация или дизайн интерьеров. Однако подобрать подходящую текстуру для своего проекта бывает весьма непросто, а бесшовную — и подавно. Зачастую гораздо проще, быстрее и дешевле сделать найденную картинку бесшовной самостоятельно. И в данном уроке представлено сразу несколько способов создания бесшовных текстур в Photoshop…
Создание бесшовной текстуры в PhotoshopОсновными методами получения текстур на сегодняшний день являются:
- фотографирование поверхностей;
- сканирование материалов;
- рисование текстур «с нуля» в графических редакторах.
Рисование «с нуля» — это отдельная история. В уроке же рассматриваются различные способы обработки в Photoshop текстур, полученных первыми двумя из перечисленных методов, которые, понятное дело, изначально бесшовными не являются.
Текстуры бывают очень разными, отсюда и способы их обработки могут потребоваться разные. Так, прием, прекрасно работающий на текстурах одного типа, может оказаться совершенно несостоятельным для текстур другого типа. Поэтому, чтобы на выходе получить качественную бесшовную текстуру, необходимо проанализировать исходное изображение и прикинуть, какой способ лучше использовать для его обработки. Урок состоит из пяти видео. Каждое видео — наглядный пример того, как можно сделать бесшовную текстуру в Photoshop тем или иным способом. Все показанные в видео исходные изображения, а также полученные из них бесшовные текстуры можно скачать по ссылкам из материалов к уроку.
Видео к уроку
Способ #1 (плитка, обои)
Способ #2 (трава, вода)
Способ #3 (кирпич, галька)
Способ #4 (штукатурка)
Способ #5 (бумага, гранит, вязание)
Материалы к уроку
Исходные изображения на pixabay.com:
[#1] плитка: Перейти
[#2] трава: Перейти
[#2] вода: Перейти
[#3] кирпич: Перейти
[#3] галька: Перейти
[#4] штукатурка: Перейти
[#5] бумага: Перейти
[#5] гранит: Перейти
[#5] вязание: Перейти
Исходные изображения на torange.biz:
[#1] обои: Перейти
Готовые бесшовные текстуры:
[#1] плитка и обои (рисунки PNG; 0.79 MB и 2.04 MB соответственно): Скачать
[#2] трава и вода (рисунки PNG; 3.37 MB и 2.09 MB соответственно): Скачать
[#3] кирпич и галька (рисунки PNG; 1.05 MB и 0.37 MB соответственно): Скачать
[#4] штукатурка (рисунок PNG; 0.55 MB): Скачать
[#5] бумага, гранит и вязание (рисунки JPG; 1.00 MB, 1.49 MB и 4.04 MB соответственно): Скачать
Лицензии
В видео #1 использована фотография обоев «Paper textures dear wallpaper texture book № 36317», автором которой является torange.biz, распространяемая на условиях лицензии Creative Commons Attribution 4.0 International (CC BY 4.0).
В видео #1 демонстрируется изображение «Vintage Wallpaper», автором которого является shaireproductions.com, распространяемое на условиях лицензии Creative Commons Attribution 2.0 Generic (CC BY 2.0).
В видео #1 демонстрируется изображение «Beige color. Texture. Blue mosaic tiles in the bath..», автором которого является torange.biz, распространяемое на условиях лицензии Attribution 4.0 International (CC BY 4.0).
В видео #1 демонстрируется изображение «Table-cloth 2008-1», автором которого является Alvesgaspar, распространяемое на условиях лицензии Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0).
Бесшовная текстура / Creativo.one
Умение создавать бесшовные текстуры в Фотошоп – полезный навык. Часто, необходимо, чтобы текстура повторялась, образовывая сплошное покрытие. Бесшовные текстуры еще называют «тайловыми» (от английского слова 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
Шаг 2: Добавление фильтров и корректирующих слоёв к первому смарт-объекту
Нажимаем клавишу D, чтобы привести основной и фоновый цвета цветовой палитры к умолчанию — чёрному и белому.
Идём Фильтр —> Рендеринг —> Облака с наложением (Filters —> Render —> Clouds Difference). Фильтр «Облака» применён к смарт-объекту в качестве смарт-фильтра. Фильтр «Облака» не имеет настроек, но в последствии его можно отключить и применить ещё один фильтр «Облака», а это уже будет другая визуализация фильтра, соответственно, вся конечная текстура примет другой вид. Вот как должен выглядеть документ:
Добавляем Фильтр —> Искажение —> Рябь (Filter —> Distort —> Ripple) и ставим следующие настройки:
Добавляем корректирующий слой «Постеризация» (Posterize) и ставим уровень от 10 до 15:
Добавляем корректирующий слой «Яркость/Контрастность» (Brightness/Contrast), уменьшаем яркость, увеличиваем контрастность:
Если на документе имеются ярко выраженные чёрные или белые области, примените корректирующий слой «Кривые» и опустите правый конец кривой и/или поднимите левый конец кривой:
Зажав клавишу Ctrl, выбираем все слои и преобразуем их в смарт-объект.
Шаг 3: Добавление фильтров и корректирующих слоёв ко второму смарт-объекту
Добавляем Фильтр —> Усиление резкости —> Резкость+ (Filter —> Sharpen —> Sharpen More). Можно ослабить действие фильтра, для этого дважды кликаем по фильтру в панели слоёв справа по иконке регулировки, в открывшеся диалоговом окне уменьшаем непрозрачность.
Добавляем Фильтр —> Шум —> Добавить шум (Filter —> Noise —> Add Noise) — введите значение Эффекта 15 пикселей, Распределение — Равномерная, поставьте галку у «Монохромный». Значение Эффекта можно будет отрегулировать позже:
Общий вид заготовки текстуры у меня получился в средне-серых тонах, поэтому я добавляю корректирующий слой «Уровни» (Levels) и сдвигаю белый ползунок влево, а чёрный — немного вправо:
Шаг 4: Создание бесшовного шаблона с помощью плагина
Теперь из этой заготовки мне необходимо сделать бесшовный шаблон. Для этого я воспользуюсь бесплатным плагином Seamless Textures Generator, скачать который и прочитать описание можно на этой странице.
Плагин корректно работает только с одним слоем. Поэтому необходимо преобразовать все имеющиеся слои в один смарт-объект и дублировать этот объект (Ctrl+J), чтобы у нас сохранился нетронутый оригинал. После этого открываем плагин через Окно —> Расширения —> Seamless Textures-Generator (Window —> Extensions —> SeamlessTextures-Generator), не забываем поставить галку у опции Define Pattern, чтобы документ автоматически определился как узор Photoshop и нажимаем кнопку Tile. Результат:
А вот как выглядит эта текстура, наложенная на документ размером 1280 на 800 пикселей:
Шаг 4: Создание бесшовного шаблона с помощью вручную
Можно сделать бесшовную текстуру и вручную. Возвращаемся к смарт-объекту, который мы сохранили в качестве оригинала, дублируем его, и растрируем дубликат в обычный слой.
Идём Фильтр —> Другое —> Сдвиг (Filter —> Other —> Offset). Т.к. сторона нашего документа 512 пикселей, задаём величину сдвига 256 и нажимаем ОК:
Если Вы присмотритесь повнимательнее, то увидите горизонтальный и вертикальный швы ровно по осевым линиям документа. Их необходимо удалить. Инструментом «Прямолинейное лассо» обводим швы, особая точность не нужна:
Затем идём Редактирование —> Выполнить заливку (Edit —> Fill), в диалоговом окне выбираем «С учётом содержимого» (Content-Aware) и нажимаем ОК. В данном случае этот инструмент Photoshop прекрасно справится со сглаживанием швов. Результат:
А вот как выглядит большой документ, залитый этой текстурой:
На этом всё, надеюсь, урок был полезен.
Как сделать бесшовную текстуру в Adobe Photoshop
Создание красивых звёзд.
4 1 20 939 Автор: diablo_ 23 марта 2006 в 00:00
В уроке, будет продемонстрирован способ плавного перехода из одной картинки в другую.
3 0 17 137 Автор: diablo_ 11 мая 2006 в 00:00
В этом уроке я вас научу, как нарисовать электрогитару в Photoshop (с небольшой помощью Illustrator). Вы научитесь рисовать тени и блики с помощью кисточки и линий. Так же вы научитесь изменять базовые фигуры, применять стили слоев и трансформировать их, что бы добиться объемности изображения.
11 3 25 815 Автор: IronMouse 8 июня 2011 в 20:20
Всем привет, если вы хотите добавить своему изображению эффектности, истории и глубины, тогда этот урок для вас. Сегодня я расскажу, как делать такие пылинки, царапины на вашем изображении.
4 3 22 741 Автор: Dmitrii Schucka 14 ноября 2010 в 00:00
Урок, по улучшению качества фотографий и любых других картинок.
1 0 44 966 Автор: diablo_ 10 марта 2006 в 00:00
Как сделать бесшовную текстуру в Фотошопе
Должно быть, каждый сталкивался с подобной ситуацией в Photoshop: решили сделать заливку из исходного изображения – получили некачественный результат (то картинки повторяются, то слишком контрастно переходят друг в друга). Конечно, выглядит это по меньшей мере некрасиво, но нет проблем, которые бы не имели решения. С помощью программы Photoshop CS6 и данного руководства вы сможете не просто избавиться от всех этих недостатков, но и реализовать красивый бесшовный фон.
Создание бесшовной текстуры в Photoshop
Нам предстоит избавиться от резких перепадов тона на имеющейся картинке, чтобы при совмещении не было резких границ.
- Сначала мы должны выделить на картинке участок при помощи инструмента Photoshop «Рамка».
Возьмем, к примеру, центр полотна. Заметьте, что выбор должен падать на фрагмент с более ярким и в тот же момент равномерным освещением (обязательно, чтобы на нем не было темных участков).
- Но как бы вы не старались, края картинки будут различаться, поэтому придется их осветлять. Для этого переходим к инструменту «Осветлитель» и выбираем мягкую кисть большого размера.
Обрабатываем темные края, делая участки более осветленными, чем прежде.
- Однако, как вы могли увидеть, в левом верхнем углу присутствует лист, который может дублироваться. Чтобы избавиться от этой незадачи, зальем его текстурой. Для этого выбираем инструмент «Заплатка» и обводим участок вокруг листа.
Выделение переносим на любой понравившейся вам участок травы.
- Теперь поработаем со стыковками и краями. Делаем копию слоя с травой и переносим его налево. Для этого используем инструмент «Перемещение».
- Получаем 2 фрагмента, которые в месте состыковки осветлены. Теперь нам нужно соединить их таким образом, чтобы от светлых участков не осталось и следа. Сливаем их в единое целое (CTRL+E).
- Здесь мы опять применяем инструмент «Заплатка». Выделяем нужный нам участок (область, в которой будет состыковка двух слоев) и перемещаем выделенный фрагмент на соседний.
С инструментом «Заплатка» наша задача становится значительно проще. Особенно данным инструментом удобно пользоваться с травой – фоном из разряда далеко не самых лёгких.
- Теперь перейдем к вертикальной линии. Все делаем точно так же: дублируем слой и перетаскиваем его наверх, другую копию располагаем снизу; состыкуем два слоя таким образом, чтобы между ними не оставалось белых участков. Сливаем слой и с помощью инструмента «Заплатка» действуем таким же образом, как делали это ранее.
Вот мы и сделали нашу текстуру.
Убедитесь, что на вашей картинке нет затемненных участков. При данной проблеме используйте инструмент «Штамп».
Остается сохранить наше отредактированное изображение. Для этого выделяем все изображение (CTRL+A), далее идем в меню «Редактирование/Определить узор».
Присваиваем имя этому творению и сохраняем его. Теперь его можно использовать в качестве приятного фона в ваших последующих работах.
Мы получили оригинальную зеленую картинку, которая имеет массу применений. Например, вы можете использовать её в качестве фона на веб-сайте или использовать как одну из текстур в Photoshop.
Мы рады, что смогли помочь Вам в решении проблемы.Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.
Помогла ли вам эта статья?
ДА НЕТПоделиться статьей в социальных сетях:
Как сделать бесшовную текстуру в Photoshop (Redux) — Medialoot
Более простой способ создания бесшовных текстур
В этом уроке я хотел вернуться к теме создания бесшовных текстур в Photoshop и поделиться с вами новой, невероятно простой техникой, которая делает весь процесс намного проще, чем раньше. Он даже работает с некоторыми текстурами, которые раньше я бы назвал «необратимыми».
Шаг 1
Для этого урока я использую anti-tree-8.jpg (бесплатная загрузка) из набора Antique Wood Textures на Medialoot. Обратите внимание, хотя этот метод выравнивает текстуры, исходное изображение, которое вы выбираете для использования, должно быть высокого качества и относительно сбалансированным для начала.
Откройте текстуру в Photoshop и используйте инструмент «Кадрирование» с квадратным соотношением сторон и 2000 пикселей как для ширины, так и для высоты. Следует установить флажок Удалить обрезанные пиксели .
Шаг 2
В моей предыдущей статье я рассказал о стандартном методе создания мозаичных изображений в Photoshop, который заключается в использовании фильтра «Смещение» и последующем смешивании краев с помощью инструмента «Клонирование».Прежде чем мы попробуем новый метод, давайте сначала протестируем фильтр Offset, чтобы увидеть, с чем мы будем здесь работать.
Перейдите в Фильтр> Другое> Смещение и введите +1000 пикселей как для горизонтального, так и для вертикального опций и нажмите OK.
Теперь, даже если вы волшебник с инструментом Clone, эти швы будет нелегко сгладить:
Шаг 2 (снова)
Так что давайте забудем об этом, отмените фильтр смещения и начните заново.Вместо этого продублируйте фоновый слой и установите непрозрачность верхнего слоя на 50% .
Шаг 3
Выделив верхний слой, перейдите в Edit> Transform и нажмите Flip Horizontal , а затем также Flip Vertical .
Шаг 4
Выберите оба слоя и объедините их вместе (CMD + E или CTRL + E).
Шаг 5
Теперь давайте снова попробуем это смещение. Как по волшебству, результат сейчас намного лучше, чем по сравнению с предыдущей попыткой.Швы все еще видны, но похоже, что их можно легко соединить.
Шаг 6
Используйте инструмент «Клонирование» с круглой кистью примерно 100 пикселей и 30% Hardness . Выберите подходящий источник, удерживая нажатой клавишу ALT и щелкнув область, которую вы хотите использовать. Затем клонируйте текстуру, используя волнистую линию слева направо, закрывающую шов.
Шаг 7
Повторите последний шаг, на этот раз для вертикального шва.
Шаг 8
По-прежнему используя инструмент «Клонирование», уберите любые аномалии в текстуре или отличительные элементы, которые появляются более одного раза и выдают тот факт, что текстура была дублирована.
Шаг 9
Чтобы восстановить часть исходного качества текстуры и замаскировать клонирование, примените фильтр Sharpen 1-2 раза по , пока не будет достигнут желаемый эффект.
Шаг 10
Это также хорошее время для окончательной корректировки, например, некоторых тонких корректировок уровней.
Шаг 11
Наконец, перейдите в меню Edit и выберите Define Pattern .. дайте вашему шаблону имя и нажмите OK.
Результат и заключение
Вот бесшовная текстура в действии при 25% увеличении. Там, где швы, практически не заметно.
Прелесть этой техники в том, что для создания бесшовных текстур требуется очень много ручной работы. Этот метод работает практически с любой текстурой и дает отличные результаты. Недостатком зеркального отражения и наложения текстуры является то, что это немного визуально изменяет текстуру.
Как создавать бесшовные текстуры в Photoshop
Оборачиваете ли вы текстуры вокруг 3D-объектов или просто заполняете фон, вероятно, вам потребуется заполнить большее пространство, чем позволяет исходный блок текстуры.Проблема в том, как избежать очевидных стыков, в которых текстура повторяется. Вот простое решение, с помощью которого можно сделать любую текстуру бесшовной.
Шаг 1: Начальная текстура
Выберите текстуру и обрежьте ее так, чтобы она соответствовала размеру окна Photoshop — вы не хотите, чтобы она свисала с холста. Если вы настроили инструмент кадрирования, чтобы он не удалял пиксели, что является стандартным, то после того, как вы обрежете, выберите все, а затем создайте новый слой из выделенного фрагмента. Это ограничит новый слой только тем, что видно в окне.
Шаг 2. Смещение текстуры
Перетащите слой текстуры в нижний левый угол, чтобы угол текстуры теперь находился более или менее посередине. Необязательно делать это точно.
Больше после прыжка! Продолжайте читать ниже ↓Члены бесплатного и премиум-класса видят меньше рекламы! Зарегистрируйтесь и войдите в систему сегодня.
Шаг 3: повторить текстуру
Удерживайте Option / Alt, перетаскивая текстуру вверх с помощью инструмента «Перемещение», чтобы сделать копию, удерживая Shift, чтобы она двигалась точно вертикально, пока нижняя часть повторяющейся текстуры не встретится с верхом существующей.Затем используйте Command / Ctrl + E, чтобы объединить эти два слоя вместе.
Шаг 4: Повторите еще раз
Теперь перетащите слой вправо, снова удерживая Option / Alt и Shift, чтобы сделать копию. Слейтесь еще раз. Теперь вы сместите исходную текстуру так, чтобы края оказались посередине. Соединения здесь очевидны, но вы знаете, что там, где текстура выходит за пределы верхнего края, она плавно повторяется снизу, и то же самое для левого и правого.
Шаг 5. Исправьте стыки
Самый простой способ начать — использовать инструмент «Точечное исцеление», перетаскивая его вертикально вниз по центру и горизонтально по горизонтали.Это будет отличное начало, хотя вас еще нет.
Шаг 6. Исправьте ошибки
После использования Spot Healing Tool у вас, вероятно, останутся некоторые громоздкие пятна, такие как черный камень в верхней части этого изображения, который выглядит слишком обрезанным справа. Переключитесь на инструмент клонирования и используйте его, чтобы пробовать чистые участки фона, чтобы скрыть любые аномалии.
Шаг 7: Сохраните текстуру
Выделите все, затем перейдите в Edit> Define Pattern.Дайте новому шаблону имя и нажмите OK. Теперь вы сможете использовать его в любой работе в Photoshop.
Шаг 8. Попробуй
Самый простой способ проверить новую текстуру — создать новый слой, заполненный любым плоским цветом, и выбрать «Слой»> «Стиль слоя»> «Наложение узора». Новая текстура будет последней в списке. Когда он заполнит слой, переместите диалоговое окно в сторону, и вы сможете перетащить его, чтобы проверить, действительно ли оно бесшовное. Вы также можете уменьшить масштаб, если хотите, чтобы проверить повторы.
Посмотреть видео
Посмотрите видеоверсию этого руководства ниже.
Блог Джулианны Кост | Как создать бесшовный узор (плитку) в Photoshop
Для создания бесшовного узора в Photoshop откройте желаемое изображение и выберите «Фильтр»> «Другое»> «Смещение».
Исходное изображение.
Увеличьте значения, чтобы можно было легко увидеть смещение, и для области «Неопределенная область» выберите «Обтекать».
Если вы видите, что значения тона резко смещаются, выберите «Правка»> «Отменить» (чтобы отменить фильтр смещения) и внесите все необходимые корректировки, чтобы выровнять освещение по всему изображению.
Здесь мы можем видеть, что тональные значения значительно сместились с левой стороны исходного изображения на правую. В этом случае плитка не будет бесшовной, если перед продолжением не будет зафиксирована тональность.
Это гораздо лучшая отправная точка, потому что освещение более равномерное по всему изображению.(Корректировки производились с помощью градуированного фильтра и корректирующей кисти в Camera Raw.)
После применения фильтра смещения к равномерно освещенному изображению швы становятся намного менее заметными.
Используйте «Восстанавливающую кисть» или инструменты «Клонирование штампа», чтобы удалить все заметные швы — будьте осторожны с границами изображения (если вы измените граничные области, они могут не плавно укладываться).
Чтобы убедиться, что узор будет бесшовным, снова запустите фильтр — на этот раз швов не должно быть видно.В противном случае удалите их с помощью лечебной кисти и снова запустите фильтр.
Когда файл станет бесшовным, выберите «Выделение»> «Выделить все», а затем «Правка»> «Определить узор». Присвойте шаблону заметное имя и нажмите OK. Этот узор теперь будет доступен при использовании Правка> Заливка, Стили слоя, Слои Узорной заливки, Штамп узора, Лечебная кисть, Инструменты формы (как для Заливки, так и для Обводки) и при создании Кисти (с использованием атрибута Текстура).
Примечание: поскольку легче создать бесшовный узор, когда исходное изображение равномерно освещено, я обнаружил, что сканирование текстур (например, бумаги) дает очень хорошие результаты.Кроме того, старайтесь избегать явных элементов текстуры, которые можно легко заметить при повторении рисунка.
Создание бесшовных мозаичных текстур в Photoshop
Бесшовные текстуры значительно упрощают жизнь. Они позволяют оперативно создавать УФ-картографию, могут использоваться в более широком спектре проектов и устраняют необходимость в дополнительной обработке. Создание бесшовных текстур в Photoshop действительно просто , но каждое изображение требует своей собственной серии правок и исправлений.Этот урок посвящен созданию каркаса, который можно применить к любой текстуре.
Преимущества мозаичных / бесшовных текстур
Текстурные плитки облегчают жизнь. Вам не нужно так сильно беспокоиться о UV-картировании, вы можете больше использовать изображения повторно, а постобработка станет меньшей головной болью. Проблема в том, что большинство изображений не являются бесшовными, особенно те, которые вы, возможно, сняли на камеру — реальный мир не так часто мозаики. Бесшовные текстуры также являются атрибутом, который помогает рыночным активам продаваться лучше и получать более качественные отзывы.Лично я избегаю текстур, которые не перекрывают как можно больше плиток — я знаю их негативное влияние на мой рабочий процесс.
Создание бесшовной текстуры
Photoshop может сделать с 2D-изображением все, что только можно представить, при условии, что вы готовы приложить усилия. Основным инструментом, используемым для создания мозаичных текстур в Photoshop, является фильтр Offset . Этот инструмент «оборачивает» края файла изображения вокруг краев холста, так что левый край будет выровнен по правому краю, а верхний край выровнен по нижнему краю.
Инструмент смещения обернул это изображение по краям холста так, что теперь правая и левая стороны соприкасаются.
На изображении выше, которое было 2048 пикселей в ширину, применение фильтра смещения со значением по горизонтали 1024 пикселей (половина общей ширины) создает эффект плитки. В этом случае создается «линия стыка» там, где теперь встречаются два края изображения. Удаление линий стыков с изображений — вот как вы создаете бесшовные текстуры в Photoshop. Вероятно, правильнее было бы называть их текстурами Seam-Line-Less , но, знаете ли, они не так хорошо скатываются с языка! Ниже приведен ряд шагов, которые можно применить к большинству изображений, чтобы удалить линии стыка и создать текстуры, которые красиво мозаичны!
Шаг первый: предварительное редактирование
Предварительно обработайте изображение, чтобы удалить шум и сбалансировать экспозицию, используя настройки слоев, маскирование и фильтры Photoshop
Мне нравится создавать текстуры с высоким разрешением и часто увеличивать текстуры с их исходных размеров до достичь этой цели.Некоторые типы редактирования проще и эффективнее применять до того, как произойдет какое-либо увеличение. Удаление шума — один из таких способов редактирования, который будет более точным и потребует гораздо меньше ресурсов процессора при применении к исходному изображению.
Еще одна правка, которую я делаю, когда моей конечной целью является удаление линий стыка, — это нормализация баланса экспозиции изображения. Это; попытка сделать недоэкспонированные и переэкспонированные области менее выраженными. В большинстве случаев это может быть достигнуто с помощью настройки экспозиции. Этот шаг отличается для каждого изображения и не всегда необходим.Иногда, после некоторой попытки нормализовать экспозицию, я понимаю, что создание бесшовной версии определенной текстуры невозможно — или, по крайней мере, нецелесообразно.
Шаг второй: балансировка структуры изображения
Использование инструмента «Перекос + деформация» очень полезно для выравнивания любых нечетных узоров на изображениях.
Многие текстуры имеют структурный узор, который плохо укладывается. Текстура джутового коврика состоит из горизонтальных и вертикальных линий, на которых материал переплетен.Эти линии создают вид «рядов» внутри текстуры. Эти строки необходимо выпрямить, чтобы при мозаике изображения края линий пересекались с обеих сторон изображения. Не все изображения требуют этого шага, но его всегда следует учитывать.
Шаг третий: увеличение + кадрирование
Определите соотношение сторон текстуры и разрешение с помощью инструментов «Кадрирование» и «Размер изображения».
К этому моменту я показал изменения, внесенные в изображение в его исходных размерах. Такие фильтры, как «Убрать шум», намного эффективнее работают с изображениями с низким разрешением, а также немного проще применять преобразования изображений.Для редактирования нижних изображений требуется меньше памяти — вот и все. На этом этапе я хочу максимально приблизиться к моему окончательному желаемому размеру вывода и соотношению сторон. Идеальное соотношение сторон для изображения, которое должно быть мозаичным, составляет 1: 1 . Идеального разрешения не существует, но я предпочитаю работать в 4K (4096 x 4096) или выше при создании текстур, которые собираюсь использовать снова и снова. Я использую инструмент Crop Tool с соотношением сторон 1: 1 и нахожу хорошее кадрирование. Затем я использую Ctrl + Alt + I, чтобы изменить размер изображения с до 4096 x 4096 пикселей.
Шаг четвертый: повышение резкости изображения
Повышение резкости больших и мелких деталей путем применения нескольких фильтров нерезкости с разными значениями радиуса
Значительно увеличенные изображения обычно также нуждаются в повышении резкости. Неважно, как вы сделаете изображение резче, — важно только то, что оно будет иметь внешний вид, подходящий для ваших целей. Мне нравится использовать фильтр «Маска нерезкости» в Photoshop, и я считаю его эффективным в большинстве случаев. Раньше я использовал сторонние инструменты повышения резкости, но считаю, что использование встроенных фильтров более удобно.Я также не люблю зависеть от чего-то, что не всегда может быть доступно, если я использую Photoshop на другой рабочей станции. Я применяю фильтр «Маска нерезкости» два раза — один для крупных деталей и один для мелких — и использую следующие настройки для изображений 4K:
Крупные детали : 2,8–3,2 пикселя Радиус
Мелкие детали : 0,8 — 1,2 px radius
Шаг 5: Плитка + удаление линий шва
Несколько различных подходов можно использовать для удаления линий шва после использования фильтра смещения
Все, что я сделал до этого момента, — это максимально упростить удаление линий шва.Несбалансированная экспозиция, блуждающие структурные линии и даже области различной резкости могут вызвать проблемы с мозаикой. Разложить текстуру в Photoshop очень просто — просто используйте фильтр «Смещение» с выбранной опцией «Обернуть края». Это «обернет» края изображения вокруг краев холста на основе заданных вами значений смещения. Я удаляю линии шва, используя двухэтапный процесс:
Удалить горизонтальные линии шва : Фильтры> Другое> Смещение> По горизонтали> 50% ширины изображения
Удалить вертикальные линии шва : Фильтры> Другое> Смещение> Вертикальное > 50% от высоты изображения
Для каждого из этих смещений я редактирую изображение, удаляя линии стыка.Необходимые правки сильно различаются в зависимости от изображения. Иногда я захожу так далеко, просто чтобы понять, что удаление линий швов и поиск другого изображения займет слишком много времени. Когда я думаю, что этот шаг станет проблемой, я сделаю это перед любыми другими изменениями, чтобы понять, с чем я могу столкнуться. Самый надежный способ удалить линии шва — использовать инструмент Clone Stamp Tool . Это очень ручной процесс, который, в зависимости от изображения, может занять у действительно много времени.Я часто сначала использую другие подходы, такие как копирование других частей изображения, растягивание изображения или использование инструмента заливки с выбранной опцией Content-Aware.
Заключительные мысли
Создание бесшовных текстур в Photoshop легко, но требует особого внимания, чтобы гарантировать качественный конечный результат. Шаги, которые я здесь описал, не гарантируют, что ваше окончательное изображение будет идеальным, но они применимы для большинства случаев использования. Я часто экспериментирую с кадрированием + смещением, прежде чем делать что-либо еще, чтобы понять, насколько хорошо изображение будет мозаично. Не все изображения будут мозаичными настолько, чтобы оправдать трату времени на их редактирование. . Не бойтесь отказываться от одного изображения и искать лучший. Я провел много времени в Photoshop, создавая бесшовные текстуры на протяжении многих лет, и могу с уверенностью сказать, что чем больше текстур редактируется, тем легче найти те, которые будут мозаичными, до того, как будет изменен первый пиксель. Знание того, какие изображения не будут использоваться для плитки , очень экономит время!
Как создать бесшовную текстуру в Photoshop
Дастин Ли 13 сентября 2017 г. 5 комментариев
Создание бесшовных узоров в Photoshop может оказаться бесценным инструментом в наборе инструментов любого дизайнера.Еще лучше — иметь возможность создавать их быстрее и проще.
Это подробное видео содержит советы по поиску текстур для вашего дизайна, использованию инструмента «Штамп клонирования» в Photoshop и многому другому.
Делиться:
5 Ответов
Оставить комментарий
Комментарии будут одобрены перед появлением.
Также в обучающих программах
Как рисовать с помощью обтравочных масок, масок слоев и альфа-фиксации в Procreate
Сюзанна Сарвер 28 июля 2021 г. 15 комментариев
Узнайте, как использовать обтравочные маски, маски слоев и альфа-блокировку, в этом простом для понимания руководстве по Procreate.Узнайте о различиях между каждым типом маски, а также о плюсах и минусах каждого типа маски. Эта статья включает множество наглядных примеров и анимированных GIF-файлов для демонстрации концепций.
Смотреть статью полностью →
Полное руководство по освоению кистей Procreate
Бейли Карри 26 июля 2021 г. 1 Комментарий
Откройте для себя секреты панели кистей Procreate (о которых другие художники не хотят, чтобы вы знали).Узнайте, как изменить границы кисти, получить более плавные мазки, темное искусство кривых давления и настроек наклона, а также как создавать кисти блендера, которые реагируют как настоящие кисти!
Смотреть статью полностью →
Как изменить цвет бумаги в фотошопе
Дастин Ли 18 июля 2021 г.
В этом сообщении блога мы рассмотрим, как изменить цвет бумаги в Photoshop за несколько простых шагов.
Смотреть статью полностью →
Научитесь создавать бесшовные текстуры и работать с ними
Часто незамеченные герои набора инструментов дизайнера, бесшовные текстуры находят множество применений для Интернета, печати и 3D-дизайна.
Здесь вы узнаете, как бесшовные текстуры могут помочь вам воплотить вашу дизайнерскую A-игру, добавив реализма и профессионализма в различные макеты.Вы также найдете быстрое и простое руководство по созданию профессиональных бесшовных текстур — из стоковых изображений или ваших собственных фотографий.
Макет веб-сайта с использованием бесшовной текстуры зеленого мрамора от автора Амелии Остин.Что такое бесшовные текстуры?
Бесшовные текстуры — это изображения, не имеющие видимых границ или краев, что позволяет незаметно размещать изображение мозаикой на большой площади. Дизайнеры часто ищут или создают бесшовные текстуры, чтобы действовать как согласованный фон или наложения текстур.
Набор бесшовных текстур высокого разрешения из библиотеки Shutterstock.Хотя обычно их называют «текстуры», эти изображения, как правило, представляют собой плоские 2D-изображения (например, JPEG), которые можно использовать сами по себе (например, в веб-дизайне и печатном дизайне) или наслоить с другими JPEG или текстурными «картами». »Для фотореалистичных 3D-рендеров. Изображения могут быть простыми или узорчатыми, но обычно содержат элементы, которые можно легко повторить без риска того, что изображение будет выглядеть искусственно увеличенным.
Вы можете создавать свои собственные бесшовные текстуры, редактируя исходное изображение в таком программном обеспечении, как Adobe Photoshop, или находить готовые бесшовные текстуры в библиотеке Shutterstock.
Когда использовать бесшовные текстуры?
3D-художники и пользователи САПР знакомы с преимуществами бесшовных текстур для создания ультрареалистичных изображений продуктов, мебели и окружающей среды. Тем не менее, полиграфические и веб-дизайнеры также найдут бесшовные текстуры незаменимыми для крупномасштабных макетов. Они могут привнести реалистичность и цельный профессиональный вид на веб-сайты, плакаты, вывески или САПР.
Текстуры, которые могут функционировать как бесшовный фон, полезны для любого дизайна, для которого требуется, чтобы изображение распространялось на всю или большую часть макета.Они действительно проявляют себя на адаптивных веб-сайтах и в приложениях, которые должны адаптироваться к разной ширине экрана.
Адаптивные веб-макеты действительно максимально используют крупномасштабные бесшовные текстуры, которые могут быть адаптированы для различных размеров экрана, а также могут дать макетам с прокруткой однородный фон от верхнего до нижнего колонтитула. Фоновое изображение предоставлено автором Амелии Остин.Вы также можете найти применение бесшовным текстурам в других типах дизайна, которые имеют особенно широкие или высокие размеры, например, журнальные развороты, плакаты, инфографику, веб-баннеры, обложки книг, меню или баннеры событий.Как только вы поймете, как легко собрать макет с бесшовным фоном, вы никогда не оглянетесь назад!
Ниже вы узнаете, как создавать свои собственные бесшовные текстуры всего за шесть простых шагов с помощью Photoshop.
Как создавать собственные бесшовные текстуры?
Бесшовные текстуры легко создать, используя исходное изображение и доступ к программному обеспечению для редактирования изображений, например Photoshop. Вы можете использовать свою фотографию или начать со стандартного изображения, которое хотите расширить.
Здесь я собираюсь использовать это фото как основу для создания гораздо большей бесшовной текстуры. Нам нужно будет выровнять освещение и убедиться, что изображение полностью прямое, прежде чем выложить его плиткой, которая соответствует конкретному рисунку камней.
Пример изображения, используемого в этом руководстве. Изображение предоставлено автором Федоровым Алексеем.Вы можете выполнить тот же процесс для любого исходного изображения, которое хотите использовать, или загрузите этот образ, чтобы точно следовать инструкциям.
Шаг 1. Выпрямление изображения
После открытия изображения в Photoshop , продублируйте слой Background , чтобы сохранить копию исходного изображения.
В Photoshop продублируйте фоновое изображение.Первый этап подготовки базового изображения — его выпрямление. Этот совет относится к изображениям, которые содержат любые визуальные линии, идущие вертикально или горизонтально, например узоры или изображения кирпичей, проволоки или тканого материала.
Используйте направляющие, вытащенные из линейок ( View> Rulers ), чтобы отметить вертикальные и горизонтальные точки на изображении , прежде чем повернуть изображение, чтобы убедиться, что оно идеально совмещено с ними.
Совместите вертикальные и горизонтальные точки на изображении.Шаг 2. Обрезка изображения
Некоторые изображения, такие как это, будут иметь элементы, пересекающие край изображения. В этом случае половинчатые камни не позволят нам разместить изображение бесшовно, поэтому определите область изображения, которая может быть повторена без потери бит и элементов. Используйте инструмент Crop Tool ( C ), чтобы обрезать все выступающие края.
Используйте инструмент Crop Tool, чтобы обрезать ненужные края.Шаг 3. Создание постоянного освещения
Выровняйте свет и тень на исходном изображении для получения однородного результата. Более того, постарайтесь устранить сильные различия между светом и тенью по всему изображению. Пограничные области вашего изображения особенно важно выровнять, так как они являются точками касания для мозаики вашей текстуры.
Перейдите в Image> Adjustments> Shadows / Highlights .
Выровняйте свет и тень, отрегулировав тени / светлые участки.Отрегулируйте ползунки Shadows / Highlights до тех пор, пока количество света и тени не выровняется по всему изображению.
При настройке теней / светлых участков можно выбрать один из нескольких вариантов.Шаг 4. Увеличьте холст
Используйте инструмент Crop Tool ( C ) , чтобы растянуть холст по горизонтали и вертикали, утроив ширину и высоту монтажной области в целом.
Растяните полотно по горизонтали и вертикали.Шаг 5. Разложите изображение мозаикой
Выберите слой изображения на панели Layers и скопируйте слой, перемещая копию вправо. Вместо того, чтобы размещать копию у правого края оригинала, ищите естественное место, где изображение будет помещаться для создания бесшовного эффекта. Это более важно для изображений, содержащих узоры, кирпичи или другие повторяющиеся элементы.
Здесь я вставляю кирпичи в место, где они могли бы поместиться, выравнивая копию по оригиналу.
Выравнивание дубликатов.Выберите оба слоя изображения на панели Layers и дублируйте пару. Переместите их вправо и, как и прежде, плавно сопоставьте копии с оригиналами.
Расположите копии поверх оригиналов.Выберите все слои изображения на панели «Слои » и скопируйте их , поместив их над исходными изображениями, а затем вставив текстуру на место.
Переместите текстуры на место.Повторяйте, пока не будет заполнен весь холст.
Повторяйте этот процесс, пока не будет заполнен весь холст.Если у вас есть области, которые кажутся немного рассинхронизированными, воспользуйтесь кистью Spot Healing Brush ( J ), чтобы перетащить области и заделать любые нечетные пятна.
Шаг 6. Отрегулируйте всю текстуру
На панели Layers создайте новую папку и поместите в нее все слои изображения.
Создайте новую папку на панели «Слои».Затем переключите режим наложения папки с Pass Through на Normal . Это позволит вам добавить корректирующий слой над другими слоями изображения и применить эффект ко всем слоям, рассматривая их как одно бесшовное изображение.
Переключите режим наложения со сквозного на нормальный.Попробуйте использовать корректирующий слой Curves или Levels , чтобы вернуть в изображение больше глубины и тона.
Придайте изображению дополнительную глубину и тон с помощью корректирующего слоя «Кривые» или «Уровни».Когда вы закончите работу над своей текстурой, вы можете Файл> Сохранить как изображение как JPEG , готовое для использования в печатном или веб-проекте. Отличная работа!
Заключение: преобразующая сила бесшовных текстур
Это один из самых сокровенных секретов профессиональных дизайнеров, и не зря — бесшовные текстуры объединяют большие макеты, придавая им глубину, интерес и ощущение погружения.
Теперь, когда у вас есть ноу-хау для создания ваших собственных бесшовных текстур, вы можете использовать свои изображения в качестве фона или наложения для самых разных дизайнов, от веб-сайтов до плакатов.
Все еще ищете идеальную бесшовную текстуру, которая привнесет изюминку в ваши макеты? Откройте для себя тысячи текстур с высоким разрешением и готовые бесшовные фоны в библиотеке Shutterstock.
Найдите другие руководства по Adobe Photoshop, а также лучшие советы по работе с фоном:
Фоновое изображение обложки через Амелию Остин.
Как создать бесшовные текстуры в Photoshop
В этом уроке я покажу вам еще одну технику создания мозаичных или бесшовных текстур.Как мы уже обсуждали в этой статье, есть некоторые текстуры, которые нельзя выложить плиткой с использованием техники смещения. Итак, я делюсь своей техникой, как я обычно обращаюсь с этими типами текстур, чтобы сделать их бесшовными или мозаичными. Наслаждаться.
Шаг 1
Здесь у меня есть изображение забора из звеньев цепи, которое нельзя выложить плиткой с помощью техники смещения. В этих типах текстуры небольшая и обычная единица узора повторяется по вертикали и горизонтали, образуя законченную текстуру.Вы можете легко заметить, как обычный узор из переплетенных проводов повторяется много раз, чтобы создать полное изображение ограждения из звеньев цепи. Поэтому вместо того, чтобы делать все изображение текстуры бесшовным, мы выберем этот общий повторяющийся узор текстуры и поработаем над ним, чтобы сделать его бесшовным.
Step2
Здесь у меня выделена некоторая область, и если мы повторим эту область по вертикали и горизонтали, это даст нам полную текстуру звена цепи, но есть некоторые точки, которые не совпадают правильно, поэтому текстура может быть не бесшовной.Нам нужно исправить эти точки, чтобы не было швов.
Примечание. У меня есть несколько направляющих на отдельном слое, так что я могу легко сопоставить эти точки правильно в соответствии с этими направляющими.
Шаг 3
Вы можете использовать Liquify Filter или Warp (Edit> Transform> Warp) шаблон, чтобы сопоставить эти точки. Мне нужны направляющие при настройке, поэтому я использую свой направляющий слой в качестве фона в Liquify. Вы можете переключить фон, нажав клавишу P на клавиатуре.
Шаг 4
Теперь скопируйте плитку и вставьте ее в новый документ. Чтобы избавиться от фона, просто выберите инструмент Magic Wand Tool (W) на панели инструментов, выберите фон и удалите выделенные пиксели.
Шаг 5
После удаления фона ваша текстура будет выглядеть так. Теперь перейдите в Edit> Define Pattern… , чтобы создать узор, дайте ему имя и нажмите OK .
Примечание. Если размеры вашей текстуры слишком велики, вы можете уменьшить размер текстуры, прежде чем сохранять ее как узор.
Шаг 6
Теперь создайте новый документ размером 800 × 600 пикселей , затем перейдите в меню Правка> Заливка… (Shift + f5) , появится диалоговое окно заливки. В группе Contents установите раскрывающийся список на Pattern и выберите пользовательский узор, который мы только что сохранили.