Создание текстуры в фотошопе: Как сделать бесшовную текстуру в Photoshop / Skillbox Media

Создание бесшовной текстуры | Урок по Photoshop CC 2017 / CC 2019 от KatalProject

Содержание

• Видео к уроку
• Способ #1 (плитка, обои)
• Способ #2 (трава, вода)
• Способ #3 (кирпич, галька)
• Способ #4 (штукатурка)
• Способ #5 (бумага, гранит, вязание)
• Материалы к уроку
• Лицензии

Бесшовные текстуры — штука незаменимая для тех, кто имеет дело с трехмерной графикой, будь то создание виртуальных миров компьютерных игр, архитектурная визуализация или дизайн интерьеров. Однако подобрать подходящую текстуру для своего проекта бывает весьма непросто, а бесшовную — и подавно. Зачастую гораздо проще, быстрее и дешевле сделать найденную картинку бесшовной самостоятельно. И в данном уроке представлено сразу несколько способов создания бесшовных текстур в 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).

define pattern, free transform, Photoshop СС 2019, текстура Photoshop, layer mask, Photoshop СС 2017, Crop tool, создание текстуры Photoshop, бесшовная текстура Photoshop

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

Содержание

быстрая навигация по статье

#1. Создание нового документа

#2. Кадрируем изображение по размеру холста

#3. Создаём бесшовную текстуру

#4. Избавляемся от швов на текстуре

Посмотреть видео-урок

Бесшовные текстуры достаточно востребованный материал любого дизайнера, их применяют при работе над коллажами, в веб-дизайне для фоновых изображений сайта, а так же в 3D моделировании для наложения на создаваемые объекты. Бесшовная текстура представляет собой изображение какой-либо текстуры, которое при сопоставлении со своей копией образует единый монолитный фон, без каких либо швов. Собственно говоря, поэтому её и называют бесшовной. В данном уроке мы будем делать из обычного изображения текстуры — бесшовную.

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

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

1. Создание нового документа

И так, давайте создадим новый документ, в котором будем делать текстуру. Выбираем в верхнем меню «Файл» — Создать». Бесшовную текстуру я буду делать квадратной, т.е. с равными сторонами, поэтому в настройках документа установим одинаковую ширину и высоту, чтобы получился квадрат. Можно сделать и прямоугольную текстуру, каких либо отличий в её создании не будет. Задаем размер холста, в зависимости от размера вашего изображения, в данном случае картинка с ягодами имеет размер 1600 на 900 пикселей, я сделаю холст немного меньше 600 на 600 пикселей.

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

2. Кадрируем изображение по размеру холста

Для начала необходимо определиться с областью изображения, которая будет той самой текстурой. Т.е. мы подгоняем изображение на холсте таким образом, чтобы небыло каких-то теней с боку или наоборот засвеченных участков, изображение должно иметь одинаковый тон и освещение со всех сторон. Так же можно его изменить в размере. Выбираем в верхнем меню «Редактирование» — «Свободное трансформирование» и настраиваем размер.

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

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

3. Создаём бесшовную текстуру

Теперь в верхнем меню выбираем «Фильтр» — «Другое» — «Сдвиг». Так как у нас изображение размером 600 на 600 пикселей здесь в настройках фильтра необходимо выставить сдвиг по горизонтали на половину размера изображения и по вертикали тоже, т.е. получается по горизонтали и по вертикали нужно установить значения сдвига «+300» пикселей.

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

4. Избавляемся от швов на текстуре

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

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

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

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

Второй способ — это копирование объектов и подгонка их под фон. Способ более трудоёмкий, но именно он подходит для текстуры с крупными объектами. Берем инструмент выделения «Лассо», выделяем им какую-нибудь целую ягоду и вырезаем её на новый слой. Для этого кликаем по выделенной области правой кнопкой мыши и выбираем «Скопировать на новый слой».

Теперь выбираем инструмент «Перемещение» и перетаскиваем ягоду на шов, чтобы его скрыть. Ягоду можно как-нибудь развернуть, отразить по горизонтали или вертикали, вообщем немного изменить, чтобы она отличалась от той с которой мы сняли копию. Выберем в верхнем меню «Редактирование» — «Свободное трансформирование» и повернем немного её, а так же приплющим и немного уменьшим.

Теперь удалим лишний фон с краев ягоды инструментом «Ластик».

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

Теперь задаем верхнему слою параметр наложения «Мягкий свет», берем простую мягкую кисть, устанавливаем черный цвет и рисуем на ягоде тень, максимально вписывая объект в фон.

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

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

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

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

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

Поделиться:

Учебное пособие по Photoshop: основные сочетания клавиш для создания текстур

Узнайте, как использовать основные сочетания клавиш для создания текстур в Adobe Photoshop с Николасом Стивенсоном

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

Николас Стивенсон (@nicholassstevenson) — иллюстратор, аниматор и преподаватель университета, известный созданием высокотекстурированных и многослойных иллюстраций. В этом уроке он шаг за шагом покажет вам, как использовать ярлыки в Photoshop для создания текстур и управления ими.

Как легко создать базовую иллюстрацию для ваших текстур

1. Прежде чем вы сможете начать создавать текстуры, вам нужно создать иллюстрацию. Чтобы создать базовый слой с фигурами, сначала нажмите Control + Shift + N, чтобы создать новый слой, а затем нажмите L, чтобы выбрать инструмент «Лассо».

Создайте новый слой, нажав Control + Shift + N

2. Используя лассо, нарисуйте фигуру. Нажав Alt + Delete, вы можете залить фигуру своим передним цветом, нажав Control + Delete, вы можете залить ее своим задним цветом. Нажмите Control + D, чтобы снять выделение с фигуры.

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

Вы можете либо продолжать создавать новые слои, либо, если есть фигура, которую хотите продублировать, нажмите Control + J, чтобы продублировать слой, и перетащите фигуру, перетащив ее. Когда вы закончите, нажмите Control + E, чтобы объединить слои. Теперь вы готовы начать добавлять текстуры.

Как использовать основные сочетания клавиш для создания текстур в Adobe Photoshop

1. Нажмите L, чтобы использовать инструмент «Лассо», чтобы выбрать текстуру, которую вы хотите использовать.

2. Нажмите Control + C, чтобы скопировать его.

3. Откройте иллюстрацию и нажмите Control + V, чтобы вставить текстуру на новый слой.

Нажмите Control + V, чтобы вставить текстуру в новый слой иллюстрации.

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

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

5. В настройках слоя выберите переход «Экран».

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

7. Нажмите Control + T, а затем используйте мышь, чтобы уменьшить, увеличить или повернуть обрезанную текстуру. Когда вы закончите, нажмите Enter.

Нажмите Control + T, чтобы с помощью мыши настроить размер или поворот обрезанной текстуры

8. Если вы хотите открыть панель для настройки насыщенности, нажмите Control + U.

9. Если вы хотите открыть панель для настройки уровней, нажмите Control + L.

10.

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

11. Нажав I, вы можете инвертировать цвета в текстуре.

Нажав I, вы можете инвертировать цвета в текстуре

12. Повторите эти шаги для каждой текстуры, которую вы хотите применить к иллюстрации.

13. Самое главное, не забудьте использовать Control + S, чтобы сохранить свою работу.

Создание текстур в Photoshop — Photofocus

Гостевой пост и изображения от

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

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

Некоторые из факторов, которые я учитываю при выборе текстуры для наложения изображения, включают цвет(а) текстуры, ее яркость и уровень детализации или загруженности.

Photoshop — это мощный инструмент для фотографов и редакторов изображений, который идеально подходит для творческого использования текстур. Тем не менее, программа требует довольно сложного обучения. В этом уроке вы узнаете, как вручную применить текстуру к фотографии (я буду демонстрировать с помощью Photoshop CS5), а для тех владельцев Photoshop, которые все еще осваивают основы и просто хотят перейти к творческой погоне, я затем покажу вам, как легко и быстро накладываются текстуры с помощью моих инструментов текстур из Kubota Bor-Tex DASHBOARD.

1) Откройте свою основную фотографию в Photoshop. Вам также необходимо иметь в виду палитру слоев [Окно > Слои].

2) Предполагая, что ваша основная фотография уже была отредактирована по желанию, предварительно текстурируйте, найдите нужную текстуру и поместите ее на основную фотографию [Файл > Поместить]. Чтобы обеспечить наилучшее качество, выберите файл текстуры, размер и разрешение которого не меньше или близки к размеру и разрешению вашей основной фотографии.

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

После того, как вы определились с размещением текстуры, просто нажмите клавишу возврата (перекрещивающиеся линии исчезнут). Выглядит отлично, не так ли? Очень драматично! (Шучу. Это еще не все.) Затем вы сделаете пару корректировок в своей палитре слоев.

4) Не снимая выделения со слоя текстуры, сдвиньте регулятор непрозрачности до нужного уровня. Я выбрал 60%.

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

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

6a) Не снимая выделения со слоя текстуры, щелкните значок «Добавить маску слоя» в нижней части палитры слоев. Это добавит миниатюру маски слоя к слою с текстурой.

Затем щелкните инструмент «Кисть» на боковой панели инструментов, установите непрозрачность кисти на 100% и убедитесь, что вы выбрали черный цвет в качестве цвета переднего плана.

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

Чтобы сохранить цвет и закрасить только текстуру, выполните шаг 6b.

6b) С выделенным слоем текстуры и без добавления маски слоя создайте размытие по Гауссу [Фильтр > Размытие > Размытие по Гауссу]. Когда появится окно параметров, выберите Радиус всех 250 пикселей и нажмите OK.

Это создаст смарт-фильтр прямо под слоем с текстурой. Нажмите, чтобы выбрать белую миниатюру маски эффектов фильтра и инвертировать смарт-фильтр [Настройки изображения > Инвертировать или command+I (Mac), control+I (ПК)], в результате чего миниатюра маски эффектов фильтра изменится с белой на черную.

Затем щелкните инструмент «Кисть» на боковой панели инструментов, установите непрозрачность кисти на 100%, а затем убедитесь, что вы выбрали белый цвет в качестве цвета переднего плана.

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

ДО ПОСЛЕ

Теперь вы знаете, как накладывать текстуру на фотографию и управлять ею. Другой метод применения текстур проиллюстрирован ниже в виде использования инструментов текстуры из Kubota Bor-Tex DASHBOARD. Этот метод особенно ускорит ваши навыки редактирования фотографий, если вы только начинаете работать в Photoshop, или упростит ваш рабочий процесс, если вы профессионал в Photoshop.

1) Установите зрительный контакт с мышью и тихим голосом произнесите слова: «БОР-ТЕКС. СДЕЛАЙ ЭТО.»

Ваше изображение откроется в Photoshop, текстура будет применена и удалена со всей кожи, она будет сохранена, а бесплатная холщовая пленка 16×20 будет доставлена ​​на ваш адрес доставки по умолчанию в течение одного часа.

Что, вы не знали, что Бор-Текс умеет? Ладно, может быть, не все, но если я заставлю тебя сказать эти слова своей мышке, это круто.

1) Откройте свою основную фотографию в Photoshop и откройте подключаемый модуль плавающей палитры Kubota Bor-Tex DASHBOARD [Файл > Автоматизировать > Kubota Bor-Tex Dashboard Palette].

2) Предполагая, что ваша основная фотография уже была отредактирована, предварительно отредактировав текстуру, просмотрите параметры текстуры в панели инструментов Bor-Tex, предварительно просмотрев текстуру в окне над списком текстур. Выберите нужную текстуру, дважды щелкнув имя текстуры или выбрав «Применить» в правом нижнем углу. (Я выбрал Calm из набора инструментов для работы с текстурами Земли).

3) Как показано ниже, текстура поступает в режим свободной трансформации, который позволит вам изменять размер, растягивать и поворачивать текстуру так, как вы хотите, чтобы она выглядела на основной фотографии. Щелчок правой кнопкой мыши по текстуре откроет меню других параметров, таких как отражение и вращение различными способами. Вы также увидите, что Bor-Tex изначально разместил текстуру так, чтобы она идеально подошла к вашей основной фотографии. (Я свернул ИНФОРМАЦИОННУЮ ПАНЕЛЬ Bor-Tex, щелкнув синюю область вверху.)

При необходимости отрегулируйте размещение текстуры. Я повернул свою текстуру на 180°. После того, как вы определились с размещением текстуры, просто нажмите клавишу возврата (кстати, при использовании Bor-Tex всплывает небольшое окно, в котором вы выполняете эти шаги).

Здесь Bor-Tex действительно работает. Вот краткое изложение того, что Bor-Tex только что автоматически сделал для меня за считанные секунды:

? Непрозрачность текстуры была установлена ​​на 80%,
? режим наложения установлен на Overlay (по умолчанию)
? Размытие по Гауссу было создано
? Smart Filter был создан и инвертирован
? Кисть была выбрана
? Непрозрачность кисти установлена ​​на 100%
? был выбран белый цвет

4) Как предлагается во всплывающем окне Bor-Tex, не стесняйтесь рисовать любую текстуру вдали от части вашей основной фотографии (обычно это что-то вроде кожи), используя кисть, которая имеет уже выбраны для вас (вы будете удалять только текстуру, сохраняя ее цвет). Я нарисую текстуру с лица моего объекта.

5) Если вы решите изменить режим смешивания, вы можете вызвать эту команду, введя ключевое слово, такое как смешивание или режим, в поле поиска на панели инструментов Bor-Tex и щелкнув «Применить» (я выбираю смешивание «Жесткий свет»).