Как сделать бесшовную текстуру в фотошопе: Как сделать бесшовную текстуру в Adobe Photoshop — Независимое театральное объединение "Зрительские симпатии"

Разное

Содержание

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

Создание текстуры стекла, для различных объектов.

1 0 10 530 Автор: diablo_ 4 апреля 2006 в 00:00

Урок, посвящён созданию эффекту портрета из фотографии.

0 0 20 430 Автор: diablo_ 27 июля 2006 в 00:00

Урок по созданию кнопки. Такие кнопки, часто применяются на различных Web-Site и в программах.

2 0 10 736 Автор: diablo_ 13 февраля 2006 в 00:00

Урок, по созданию очень красивых Wallpaper (обои на рабочий стол)

3 0 16 678 Автор: diablo_ 20 марта 2006 в 00:00

Создания эффекта «подтёков» на объекте.

0 0 11 956 Автор: diablo_ 11 апреля 2006 в 00:00

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

Всем привет! В этом уроке я расскажу как сделать бесшовную текстуру для 3d max с использованием графического редактора Photoshop.

Подготовка к работе
Открываем необходимое изображение, выбираем его на панели слоев с помощью мыши и нажимаем комбинацию клавиш Ctrl + J. Делаем это 2 раза. Так мы создадим 2 копии основного изображения. У нас получились слои background, layer 1 и layer 1 copy.

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

Кликаем на верхнем слое layer 1. Выбираем в меню Filter (Фильтр) пункт blur (размытие), затем подпункт average (среднее). Мы получили фон серого цвета.

Скрываем верхний слой значком видимости (щелкаем по глазу на панели слоев).
Кликаем на layer 1 copy, заходим в меню фильтров, выбираем Other (другие), а из этого подменю нажимаем на High Pass (Цветовой контраст).

Двигаем ползунок на свое усмотрение в диапазоне от 10 до 30. Получаем усредненную по цветам текстуру. Видим, что темные края исчезают и теряется цвет.
Нажимаем ОК.

Делаем видимыми все слои, нажав на значок глаза рядом с каждым слоем. Смешиваем layer 1 и layer 1 copy в режиме Linear Light (линейный свет). Если эффект слишком сильный, меняем прозрачность эффекта наложения (Opacity ). Я выбрал 46 %.

Зажимаем alt, кликаем на эталон. Сравниваем начальный результат и текущий. Если изображение кажется не слишком насыщенным, Opacity можно усилить на свое усмотрение. Я передвинул ползунок до 75%.
Создание бесшовной текстуры
Выделяем вместе layer 1 и layer 1 copy, зажав клавишу Shift. Кликаем правой кнопкой мыши, из открывшегося меню выбираем Merge Down (объединить слои).

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

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

Зажимаем alt, выбираем место, откуда берем информацию, водим по участку с видимым швом. Таким образом получилось бесшовное изображение, без четких границ на поверхности.
Результат нашего труда можно смело использовать в 3d max. Такая текстура будет отлично смотреться в трехмерном пространстве.

comments powered by HyperComments

Создание бесшовной текстуры в Photoshop Как сделать бесшовную текстуру | Soohar

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

Посмотрите также Создание бесшовной текстуры | Видео урок

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

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

Затем следует создать новый слой (сочетание клавиш CTR+SHIFT +ALT+N).

Точно по центру расположите нужный рисунок.

Продублируйте слой (сочетание клавиш CTRL+J). И расположите рисунок в любом верхнем углу. (рис ниже) Для этого выберите инструмент Move Tool (V)

Теперь расположите рисунок на остальные три угла:

Соедините все созданные слои в один. Перейдите на панель инструментов в меню Edit — Define Pattern… и дайте текстуре название. (рис ниже)

Ну вот и все подготовительная часть окончена, теперь перейдем к самому интересному.

Для проверки создайте новый слой (старый можете удалить он нам не понадобится) и в палитре Layers кликайте по пиктограмме Add a layer style в выпадающем меню выберите

Pattern Overlay. .. (рис ниже.)

Откроется окно Layer Style в котором и следует указать настройки текстуры:

в строке Pattern выберите созданную текстуру

а в строке Scale ее размер. и нажмите OK.

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

Если вам интересно и хотите своевременно узнавать о новых уроках , то подписывайтесь на рассылку RSS новостей.

Offset filter для тайлинга

Offset filter для тайлинга<< к оглавлению…

Создание бесшовных текстур с помощью фильтра Offset

Это довольно стандартный приём, о котором многие знают, но я сделаю небольшое изменение, которое может быть вам полезным.
Скажем, у вас есть такой фрагмент текстуры (Это фото я сделал на водохранилище Мид [Lake Mead]) :

И вам нужно размножить (повторить) его на большой поверхности.

Конечно, это даже отдалённо не выглядит натурально, поскольку видны швы (на которые указывают красные стрелки). Так как же сделать бесшовную текстуру (т.н.»эффект черепицы» или многократно повторяющаяся текстура) ? Первый, имеющийся в вашем распоряжении, способ должно быть, offset filter (фильтр сдвига). Возьмите оригинал вашего изображения, и примените Offset filter (в Photoshop-е : Filter : Other…), с опцией Wrap Around и сдвигом пикселей на половину от размера целого изображения, в данном случае, моё изображение 400х400 пикселей, значит устанавливаем 200х200 пикселей. Получаем такой результат :

Теперь, используя кисть клонирования (clone stamp tool), замазываем швы. Результат такой :

Сейчас картинка смотрится достаточно хорошо и без явных стыков/швов.

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

К примеру, вот такая жёсткая кисть (т.е. с чёткими краями):

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

Вот результат, он немного лучше, но можно разглядеть чёткие края используемой кисти :

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

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

Также отрегулируйте параметр кисти Angle Jitter (угловой сдвиг) большими числовыми значениями, таким образом, каждый штрих кисти будет иметь разный узор (вращение кисти будет отличаться для каждого штриха), и можно настроить значение для Size Jitter (хотя это и не обязательно).

Когда вы сгладите швы, это даст намного более реалистичный результат:

Вот картинка в обычном разрешении, без размытости и без резких переходов :

оригинал статьи : http://www.neilblevins.com/cg_education/offset_filter/offset_filter.htm
перевод и адаптация: Александр Ергашов /© 2009-2012/
<< к оглавлению…

Урок по созданию бесшовной текстуры в Фотошопе | Тайлинг текстуры — Уроки Графика в Photoshop

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

Подготовительная часть

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

— если у вас есть возможность сделать фотографии с материалами для создания текстур самому, СДЕЛАЙТЕ!
— при съёмке образцов материалов для будущих текстур, старайтесь держать камеру перпендикулярно. Тогда вам не придётся в дальнейшем исправлять вертикали на фотографиях.
— свет должен быть максимально однородным по всей поверхности снимаемой области. Избегайте световых бликов и теней, потому что потом от них будет трудно избавиться.
— если снимаемый на камеру образец материала обладает отражательными свойствами, старайтесь не размещать его рядом с объектами, которые будут в нём отражаться. Сделать это может быть довольно трудно, но вы уж постарайтесь, потому что это действительно важно.

Делаем тайлинговую текстуру

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

Откройте эту фотографию в Фотошопе, перейдите в меню Filter > Other > Offset.

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

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

Всё можно лёгко изменить при помощи инструмента Clone Stamp с различными параметрами твёрдости и диаметра кисти.

Вот конечный результат нашей работы (кликните по изображению, чтобы увеличить его).

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

Источник: Topviewport

Читайте также:

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

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

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

II способ.

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

—
—

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

—
—

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Все это я покажу вам на примере фотографии джинсов.

Выбираем инструмент создания прямоугольной области выделения Rectangular Marquee Tool , зажимаем Shift и создаем квадратную область выделения как на рисунке:

Нажимаем Ctrl+C , чтобы скопировать часть изображения. Затем создайте новый документ File > New… При этом, если вы скопировали часть изображения, программа автоматически подставит размеры этого фрагмента для нового документа.

Вставьте скопированное изображение, нажав Ctrl+V .

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

Обратите внимание на выделенные фрагменты. Такие швы возникают из-за того, что при заливке паттерны стыкуются друг с другом, начиная с левого верхнего угла, правый край к левому и низ к верху. А далеко не все края изображений совмещаются стык-в-стык. Решить это проблему поможет фильтр Filter > Other > Offset…

Как можно догадаться, первый параметр указывает на какое количество пикселей сместить изображение по горизонтали. Второй – по вертикале. Сместите изображение так, чтобы стыки получились ближе к центру изображения, здесь проще с ними работать. После этого, используя наборы инструментов из вкладки Healing или Stamp , уберите швы.

Я использовал инструмент Spot Healing Brush Tool . Просто выбрал его и провел два раза по швам: вверх и вниз. Вот, что получилось:

Теперь создадим Pattern . Для этого перейдите Edit > Devine Pattern… и укажите название паттерна.

Все! Теперь давайте проверим, что у нас получилось. Создайте новый документ любого размера. Выберите инструмент заливки Paint Bucket Tool , в настройках укажите, что заливать будем паттерном, а не цветом, и выберите ваш, только что созданный, паттерн.

Заливаем изображение и получаем

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создание бесшовных текстур, при помощи Adobe Photoshop. / 3D моделирование / Сообщество разработчиков игр

Всем привет! Хочу рассказать Вам об одной хитрости, которая будет полезна новичкам, при создании бесшовных текстур для своих проектов.
Для выполнения этого урока Вы должны обладать базовыми знаниями работы в «Фотошопе», знать что такое слои, Smart Object и подобное.

Итак, как вы поняли, техника эта использует всю прелесть умных объектов или Smart object в Photoshop. Для тех, кто хорошо владеет программой, опишу принцип в вкратце. Для создания бесшовной текстуры, берется необходимая фотография, размер больше чем 2048 пикселей на сторону. Далее, она загоняется в умный объект, и приводится в квадратную пропорцию. Сохраняем и выставляем 4 умных объекта рядом, как 4 тайла. Далее, двигаем, крутим, «штампуем» и вообще прибегаем ко всем известным вам инструментам для уничтожения шва. Прелесть метода в том, что сохраняя умный объект, его изменения сразу переносятся в файл где он использован, и вы видите, насколько хорошо ваша текстура «сшилась». Надеюсь вы поняли принцип, а теперь, опишу процесс подробнее.

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

1. Переводим текстуру из Background в layer, что бы при изменении масштабов листа, она не обрезалась. (Двойной клик ЛКМ по слою)
2. Ставим размер холста 2048 на 2048, через Canvas size (ctrl + alt + c).
3. ПКМ на наш слой с картинкой, и переводим его в Smart object.
4. Дважды кликаем на слой (на миниатюрку), что бы открылся файл Умного объекта.
5. Через тот же canvas size делаем размер фала 1024 на 1024 пиксела. На ругательство что картинка обрежется, соглашаемся и продолжаем (proceed). Сохраняем (ctrl + s), в результате чего, Умный объект созранится в наш первый файл. Поставьте 4 объекта рядом, через обычное копирование. Получим что — то подобное.

Уже хорошо, кое — где даже не заметен шов, но всё же он есть. И вот тут нам пригодится наш Умный объект!

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

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

7. Теперь небольшая хитрость. Можно убрать шов штампом, но это будет не очень красиво, и затратно по времени. Мы поступим иначе. Выделяем прямоугольным выделением с одной из сторон часть картинки и копируем на новый слой (ctrl + j).

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

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

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

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

Карты диффуза и нормалей:

Финальный результат в движке:

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

бесшовных текстур в Photoshop

Введение

Предварительные требования

Нет.

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

Photoshop

Настройка документа

При создании любой текстуры вы хотите, чтобы она оставалась квадратной. Размеры должны быть равными 2 в любой степени. То есть: 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048 или 4096.
Вы также хотите убедиться, что параметр DPI вашего файла установлен на 72. Единственный раз, когда вы когда-либо захотите изменение DPI — это когда вы создаете что-то для печати, и в этом случае будет установлено значение 300. Все остальное можно оставить в покое.

Подготовка текстуры для плитки

При создании любой текстуры, которая будет облицована плиткой, вы должны убедиться, что в ней нет очевидных узоров. Взгляните на свою текстуру и посмотрите, есть ли какие-нибудь пятна, которые действительно выделяются среди остальных. Они выдадут узор, поскольку вы сможете заметить их повторение. Вся наша текстура должна иметь одинаковый уровень детализации и цвета. Это не значит, что вся текстура должна быть мягкой, просто убедитесь, что ни одна часть не привлекает ваше внимание больше, чем другая.Еще вам нужно остерегаться светлых участков и теней. Если есть слишком темные тени, вы можете осветлить их с помощью инструмента Dodge ( alt + shift + d ). Как вариант, вы можете затемнить светлые участки с помощью инструмента Burn ( alt + shift + b ). Текстура, которую я хотел, также была немного темнее, поэтому я пошел дальше и отрегулировал общую яркость текстуры. После того, как вы удалите все важные детали из текстуры, мы рассмотрим, как создать несколько пользовательских кистей, которые позволят нам добавлять менее очевидные повторяющиеся детали.

Создание нестандартной кисти

Мы создаем собственные кисти, потому что хотим, чтобы процесс клонирования выглядел как можно более естественно. Эти кисти будут созданы из элементов нашей текстуры и помогут скрыть швы, которые создаст смещение текстуры. Наш первый шаг — взять наш инструмент Magic Wand и использовать его, чтобы выбрать часть нашей текстуры. Выбранный фрагмент будет основой для нашей кисти. Размер выбора зависит от вас, как и то, что вы выбираете. Старайтесь, чтобы выделение было меньше, чтобы при использовании нескольких раз поверх создаваемых деталей не было слишком много узора.Если вы обнаружите, что ваш выбор слишком велик или слишком мал, вы можете изменить «Допуск» в настройках инструмента поверх Photoshop. Чем выше допуск, тем больше будет выделять инструмент. Сделайте выбор, который вам нравится, и выберите инструмент выделения ( клавиша «v», ) из меню инструментов. Теперь перейдите в меню «Правка»> «Определить набор кистей», выберите его и дайте своей кисти имя. Итак, теперь вы можете создавать свои собственные кисти. Не стесняйтесь делать несколько разных кистей для вашей текстуры.Чем больше у вас будет, тем менее очевидным будет тайлинг 🙂

Смещение

Мы хотим использовать фильтр Offset для выравнивания краев границы нашей текстуры. Единственным недостатком использования смещения является то, что в центре остаются 2 основных шва, пересекающих нашу текстуру. Вы можете видеть это на картинке слева. Фильтр «Смещение» можно найти в меню «Фильтр»> «Другое». Когда вы используете фильтр смещения, вам нужно изменить два параметра. Ползунки по вертикали и горизонтали позволяют выбрать соответствующие расстояния в пикселях.Мы хотим установить оба этих параметра равными половине ширины пикселя нашей текстуры. Для квадратной текстуры размером 512 пикселей это означает установку для них обоих значений 256. Давайте применим фильтр «Смещение» к нашему слою текстуры. Мы почти закончили, но что мы можем сделать с этими швами?

Клон штамп

Теперь ваша текстура смещена, но мы должны избавиться от этих швов. Давайте начнем с выбора Clone Stamp (клавиша «s»), а затем выберем созданную нами специальную кисть в меню Brush Menu ( клавиша «F5» ).Наведите указатель мыши на часть текстуры, удерживая нажатой клавишу alt, а затем щелкните, чтобы установить эту область в качестве источника клонирования. Теперь вы сможете щелкнуть в любом месте холста и штамповать часть этого изображения в форме вашей пользовательской кисти. Сделайте это, чтобы покрыть все швы текстуры. Постарайтесь сделать это ровно столько, сколько вам нужно, и не штампуйте края изображения, за исключением тех мест, где швы пересекают край. Вы также должны выбирать разные источники клонирования по мере продвижения, чтобы не клонировать одну и ту же область снова и снова.

Наш последний шаг в удалении швов — скопировать пиксели из четырех точек, где швы пересекали края нашего документа. Мы хотим, чтобы эти точки были зеркальными копиями друг друга. Для этого мы собираемся сделать полукруглое выделение вверху, Скопировать ( ctrl + c ) пиксели, Вставить ( ctrl + v ) их на новый слой ( ctrl + shift + n ), переверните их по вертикали (Правка> Трансформировать> «Отразить по вертикали») и переместите вниз к нижнему краю.То же самое будет сделано с зеркальным отображением пикселей левого края вправо, но мы перевернем пиксели по горизонтали. Как только это будет сделано, используйте ластик Eraser ( «e», ) с вашей пользовательской формой кисти, чтобы смешать края вставленных слоев с вашей базовой текстурой. Когда это будет сделано, убедитесь, что ваш слой с рисунком кисти скрыт и Объедините видимые слои ( ctrl + e ), чтобы получить единственный слой. Если вы немного запутались в процессе, посмотрите диаграмму слева от нас.Мы просто копируем пиксели из более темных оттенков, переворачиваем их и помещаем на место более светлых оттенков.

Определение шаблона

Для тестирования нашей текстуры. Мы превратим его в узор, а затем заполним новый файл большего размера нашим настраиваемым узором. Чтобы создать наш узор, мы выделим Select All ( ctrl + a ), убедимся, что наш Select Tool ( «v», клавиша ) активен, перейдем в меню Edit и выберем «Define Pattern». Дайте вашему шаблону имя и создайте новый документ, который как минимум вдвое превышает размер вашего текущего холста.В вашем новом файле создайте новый слой ( ctrl + shift + n ), снова перейдите в меню «Правка» и нажмите «Заливка». В диалоговом окне, которое появляется под свитком «Use», выберите «Pattern», выберите свой образец, а затем нажмите «OK». Ваш документ должен быть выложен плиткой с вашей пользовательской текстурой, как в нашем примере выше. Найдите минутку, чтобы просмотреть это и убедиться, что вы не видите никаких швов. Если вы заметите какие-либо, вернитесь и исправьте их; посмотри внимательно. Если их нет, значит, вы закончили и добавили новый навык в свой набор инструментов: D

Заключение

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

Дополнительная литература

Hourences — Уловки текстур (http: // www NULL.hourences NULL.com/tutorials-texture-tricks)

Используемые ярлыки программ

Photoshop
Marquee Selection Tool (клавиша «m»)
Burn Tool (alt + shift + b)
Dodge Tool (alt + shift + d)
Отменить выбор (ctrl + shift + d)
Клонировать штамп (клавиша «s»)
Вставить (ctrl + v)
Копировать (ctrl + c)
Инструмент выбора (клавиша «v»)
Выбрать все (ctrl + a)
Новый слой (ctrl + shift + n)
Объединить видимые слои (ctrl + e) 
Контекстное меню (клавиша «F5»)

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

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

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

Как сделать текстуру бесшовной? Есть много способов добиться этого. Некоторые из этих способов требуют больше времени и более болезненны, чем другие. (Подсказка: если вы выполняете какое-либо копирование / вставку, ваш путь, вероятно, будет одним из самых болезненных.) Вот хорошие новости: если вы используете Photoshop, у него есть действительно отличный инструмент, специально разработанный для упрощения рисования бесшовных узоров! Его нетрудно использовать, и вы можете использовать его независимо от вашего личного стиля, будь то пиксельная графика, векторный вид, реалистичный и детальный вид и т. Д.Инструмент называется «Фильтр смещения», и он будет главным героем нашей истории. Если вы уже знаете об этом и постоянно пользуетесь им — отлично. В таком случае это руководство не для вас, и вы можете перестать читать сейчас. Но если вы этого не сделаете, оставайтесь со мной, и я проведу вас через процесс создания довольно сложной текстуры.

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

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

Следующее, что нужно сделать, это перейти в Filter> Other и выбрать Offset:

Как только мы выберем это, мы увидим всплывающее окно с двумя ползунками:

(убедитесь, что у вас выбрано «обтекание»)

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

Теперь мы можем рисовать в центральной области и заполнять пустые части:

Наш эскиз, если он закончен, и он бесшовные. Предположим, вы не верите мне, что это бесшовно, и мы хотим проверить, как он выглядит, когда мы заполняем им плоскость.Мы можем использовать еще одну функцию Photoshop, которая часто может оказаться полезной. Мы можем перейти в Edit> Define Pattern и сохранить наш эскиз как новый узор. Затем мы можем открыть новый документ большего размера и перейти в меню «Правка»> «Заливка». Там мы увидим всплывающее окно, подобное этому:

Мы выберем шаблон, который мы определили, из списка и нажмите OK. Вот что мы получим:

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

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

Теперь мы хотим раскрасить текстуру, чтобы она выглядела красиво и трехмерно. Как и раньше, буду работать поэтапно. Я нарисую что-нибудь в центре, а затем воспользуюсь фильтром смещения. Постепенно мы постараемся сделать текстуру красивее и красивее. Я не буду подробно объяснять, что я делаю, потому что я не собираюсь учить вас рисовать.Я только хочу показать вам, как использовать инструменты Photoshop. возможно, ваш стиль полностью отличается от моего. Может быть, вы занимаетесь пиксельной графикой или чем-то еще — это не имеет значения, вы все равно можете использовать тот же базовый процесс, что и я. Давайте смотреть!

Сейчас зачет!

Снова сместите, затем добавьте цвет!

Смещение, затем добавьте блики!

Сдвигайте и начинайте рисовать лаву!

Смещение и еще немного лавы!

Смещение, затем добавление свечения!

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

Посмотрим, будет ли плитка!

Да, это так.

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

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

Она показывает заметную линию. Вы видите это? Линия — это залог существования создателя пакета ресурсов.Этого следует избегать, и этого очень и очень трудно избежать. Вот где нужно много опыта, чтобы преуспеть. Когда вы это заметите, это может быть уже невозможно исправить. Урок здесь — быть осторожным в начале работы. Следите за происхождением! Сделайте это минимальным.

Вот и все! Продолжайте компенсировать вещи. Не позволяйте родословной завладеть вами. Иди и нарисуй несколько камней. Все это хорошее. До свидания!

Учебное пособие по Photoshop — Как создать мозаичную текстуру из гальки

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

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

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

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

Базовое фото для создания текстуры гальки в Photoshop

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

В Photoshop CS4 мы можем использовать 3D / New Tiled Painting.

Проверьте эффект рисунка на фотографии

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

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

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

Равномерная область, которая будет использоваться для текстуры

Активировав режим быстрой маски (Q), вы можете выделить текущее выделение. Затем я сохраняю свой выбор, перетаскивая некоторые направляющие с линейок (нажмите Cmd + R, если линейки не видны).

Auswahl durch Hilfslinien markiert

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

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

Теперь текстура бесшовная от левого края до правого края. Но у нас все еще та же проблема, но теперь разрыв находится в центре изображения.Но это упрощает нам объединение нового слоя с фоном с помощью инструмента Ластик (E).

Итак, выберите инструмент «Ластик» с размером кисти 30 пикселей и уменьшенной жесткостью. Если вы используете перьевой планшет или твердую руку перемещаете мышь, вы также можете использовать инструмент Лассо (L) и затем сгладить выделение с помощью (Cmd + ALT + D)

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

Новый слой выглядит примерно так:

Стирание элементов на новом слое текстуры гальки

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

Нижняя и правая новая граница текстуры гальки

Теперь ваша текстура выглядит так:

Бесшовная мозаичная текстура гальки

Результат уже выглядит очень хорошо, поэтому уменьшите все видимые слои до одного слоя (Cmd + Shift + E), выберите область, которую мы определили руководящими принципами, и обрежьте выделение. (Изображение / кадрирование)

Теперь проверьте эффект узора еще раз с помощью 3D / New Tiled Painting

Уменьшенный эффект узора текстуры гальки

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

Таким образом, отмените последнее действие мозаики текстуры, чтобы вернуться к исходному размеру изображения. Поскольку мы использовали соседние части текстуры, чтобы сделать их бесшовными, нам нужно сосредоточиться только на углах. Как я уже упоминал ранее, мы попытались стереть скопированные слои как можно ближе к углам. Но все равно будет проблема, если текстура будет выложена плиткой. Чтобы увидеть эффект, перейдите в Filter / Other / Offset. Поскольку наше изображение имеет размер 1600 x 1600 пикселей, введите 800 пикселей по горизонтали и 800 пикселей по вертикали.

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

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

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

Активируйте инструмент «Штамп» (S) и выберите область для копирования, нажав ALT. Теперь используйте гладкую кисть, чтобы отредактировать центральную точку. Затем я немного поработал над слишком темными камешками, которые слишком доминируют в моем финальном изображении.

Окончательная бесшовная мозаичная текстура земли из гальки

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

Если вам нравится эта текстура с высоким разрешением, вам может быть интересно взглянуть на «GroundCollection» со 111 текстурами земли с высоким разрешением.

Если у вас есть какие-либо намеки, подсказки или комментарии, просто напишите мне.

Если вам понравилась эта статья, вам понравятся следующие статьи по теме:

Как создавать искусственные текстуры и пользовательские кисти с помощью Photoshop

От профессиональных дизайнеров интерьера до домашних энтузиастов одно можно сказать наверняка: обои — это производит большое впечатление в мире домашнего декора.Одна из тенденций дизайна, которую мы замечаем, — это недорогой подход к тактильным стенам: обои с искусственной текстурой. В этом руководстве по Adobe® Photoshop® к нам присоединилась член маркетинговой команды Лори, которая рассказывает об одном способе создания цифровой текстуры, которую можно применять для создания различных искусственных поверхностей, таких как мрамор, текстура древесины, трава, лен или другие материалы. случай этого учебного, проблемного бетона. И хотя это руководство подходит для продвинутых начинающих и средних художников в области цифровых технологий, оно требует рабочего знания Photoshop и базового понимания бесшовных повторов.

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

Шаг 1. Измените размер изображения

Откройте фотографию текстуры в Photoshop и, в зависимости от конкретной цели дизайна, измените размер изображения до 6, 12 или 24 дюймов в ширину с разрешением 150 dpi, чтобы окончательная текстура повторялась равномерно в течение использовать на обоях.Мне нравится начинать с большого и уменьшать размер позже, если это необходимо, поэтому в этом уроке я буду работать с файлом шириной 24 дюйма. Длина сейчас не важна.

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

Шаг 2: Порог

Работая с дублированным слоем, мы редактируем фотографию в черно-белое изображение, что упрощает создание мозаичной текстуры. В меню Изображение перейдите к Регулировка > Порог .Отрегулируйте ползунок, чтобы получить более или менее текстуру. Если вам нужна нежная или тонкая текстура, вам понадобится более низкий уровень порога, для чего-то более тяжелого — более высокий. Я добавил примеры ниже, чтобы проиллюстрировать это.

Мне нравится повторять этот процесс несколько раз на дублированных слоях, поэтому у меня есть несколько вариантов построения текстуры, что дает мне больше гибкости на следующем этапе. Позже вы всегда можете удалить то, что вам не нужно. И это хорошее напоминание о том, что нужно СОХРАНИТЬ свою работу после каждого шага!

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

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

Шаг 3: Обрезка

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

При кадрировании изображения сохраняйте слои без изменений (не объединяйте их) и придерживайтесь исходной ширины — в моем случае это 24 дюйма.После кадрирования конкретной фотографии размер моего файла составляет 24 × 18 дюймов, что соответствует 3600 x 2700 пикселей. Запишите размеры вашей фотографии в пикселях и держитесь под рукой, чтобы перейти к следующему шагу.

В этом уроке мы создаем бесшовную повторяющуюся текстуру, которую можно применить ко всему дизайну, но иногда вы хотите, чтобы только определенные области вашего изображения имели эффект текстуры. В таких случаях лучше подойдет специальная кисть. Чтобы создать текстурированную кисть , вместо повторяющегося текстурированного узора, выполните шаги 1-3, затем перейдите к шагу 6 и вместо определения узора выберите Edit> Define Brush Preset .Вы также можете попробовать это с фотографией или сканированием формы или текстуры, созданной вами на бумаге.

Шаг 4: Смещение

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

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

Объедините слои в группе copy , затем перейдите в Filter> Other> Offset . Когда откроется диалоговое окно, вы введете размер изображения в пикселях , разделенный на два . Для моего изображения размером 3600 x 2700 пикселей я введу +1800 на горизонтальном ползунке и +1350 на вертикальном ползунке. Убедитесь, что выбран Wrap Around , затем нажмите ОК.

До и после смещения швов

Шаг 5: Сделайте бесшовным

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

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

Шаг 6. Определите узор

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

Выбрать> Цветовой диапазон . Возьмите образец черной текстуры и сдвиньте датчик Fuzziness до упора вправо (200). Создайте новый слой и залейте выделение черным цветом. Это звучит нелогично, но нам нужна текстура на отдельном слое с прозрачным фоном.

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

Моя розовая ладонь с созданной здесь искусственной текстурой и без нее

Шаг 7: Протестируйте свой узор

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

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

На новом слое выберите Edit> Fill> Pattern > Custom Pattern , затем выберите вновь созданную текстуру. Это приведет к мозаике вашей текстуры, чтобы вы могли видеть места, которые вам, возможно, придется отредактировать. Обязательно увеличьте масштаб, чтобы проверить наличие линий пикселей.

Продолжайте вносить изменения в исходный файл текстуры (как в шаге 5), затем определяйте и тестируйте (шаги 6 и 7), пока вы не будете довольны.Вы можете снова изменить размер текстуры или сохранить узор текстуры различных размеров. Как только я был доволен повторением, я сохранил свой на 24 дюйма в ширину и 12 дюймов в ширину.

24 ″ версия 12 ″ версия

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

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

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

ЗАО Студия — Визуализация дизайна DoItYourself

07.03.2019

Бесшовная текстура , или мозаичная текстура, повторяется, не создавая явного шва.Это довольно полезно как в текстуре 2-го плана, так и в материале 3D-модели. Многие программы предоставляют библиотеки текстур, в которых вы можете получить некоторые базовые текстуры. Но что, если вы не можете найти нужную бесшовную текстуру? Сделайте свой собственный! Превратите любую картинку в бесшовную текстуру всего за 4 шага.

Загрузить
Начнем с примеров текстур. Если вы найдете их полезными, нажмите «Скачать». Они БЕСПЛАТНЫ! Если вы хотите узнать больше о том, как я их делаю, продолжайте читать.
Видеоуроки

ШАГ 1: Настройте изображение.
Импортируйте любое изображение, которое хотите использовать в качестве текстуры, в Photoshop. Получите информацию о размере изображения в «Изображение> Размер изображения». Например, в примере, который я использую, 1000 пикселей на 750 пикселей.
ШАГ 2: Смещение.
Выберите «Фильтр> Другое> Смещение». Во всплывающем окне сместите по горизонтали и вертикали на половину размера изображения.Например, я перемещаю изображение на 500 пикселей вправо и на 375 пикселей вниз. Таким образом, в центре полотна открываются швы.
ШАГ 3: Закройте швы.
Используйте инструмент «M», чтобы выделить полоску изображения рядом с центральным швом. Чтобы избежать образования новых швов, щелкните правой кнопкой мыши, чтобы выбрать «Feature». Затем с помощью инструмента «V» перетащите область выделения, чтобы закрыть центральный шов. При перетаскивании удерживайте клавишу Shift для ортогонального перемещения и удерживайте клавишу Alt для копирования.
ШАГ 4: Нанесите текстуру.
Теперь вы создали бесшовную текстуру. Просто сохраните изображение как файл jpg и импортируйте в любую программу моделирования как материал или текстуру.
Чтобы использовать в фотошопе как узор заливки, определите изображение как узор в «Правка»> «Определить узор».
Для чего вы используете бесшовные текстуры? 2D-иллюстрация или 3D-рендеринг? Оставьте комментарий, дайте мне знать! Спасибо, и на этом наш урок завершен. Надеюсь, вы узнали из него что-то новое.Пожалуйста, оставьте комментарий, если у вас есть предложения, вопросы или идеи!
Seamless 2: Pattern Utility Plugin — Полное руководство
Создание бесшовных узоров включает в себя несколько повторяющихся задач, поэтому я решил создать подключаемый модуль Photoshop, посвященный этой теме. В результате в 2019 году был выпущен Seamless, и на самом деле это был мой самый первый плагин, так что я просто учился на этом пути. Несомненно, тогда я сделал несколько ошибок, на которых я научился, но, несмотря на это, Seamless по-прежнему помогает сотням людей ускорить свои рабочие процессы, связанные с бесшовными узорами и текстурами.
В любом случае, прошло некоторое время, и с выпуском UXP в Photoshop 2021 я подумал, что это прекрасная возможность переделать весь плагин, чтобы охватить еще больше вариантов использования, а также повысить производительность в целом.
Поскольку у меня было запланировано множество функций, единый интерфейс был бы слишком перегружен. Это привело к решению создавать автономные панели для каждого варианта использования, которые также можно использовать независимо от других. Можно сказать, что Seamless 2 на самом деле представляет собой набор из 9 отдельных плагинов.
В этом посте я подробно объясню назначение и функциональность всех панелей.
Создавайте уникальные узоры элементов, рандомизируя различные свойства слоя, такие как положение, поворот, масштаб, цвет и многое другое.
Если вам нужно создать разные варианты одного или нескольких слоев, редактирование всего вручную может быть очень утомительным. Эта панель создает все необходимые копии, группирует их вместе и применяет желаемые настройки для каждого слоя. Новые значения выбираются случайным образом, но вы можете определить диапазоны значений для каждого свойства слоя во всплывающем окне настроек.
Свойства: Выберите положение, масштаб, поворот, непрозрачность, оттенок, насыщенность и яркость.
Копий: Панель воспроизведения в случайном порядке работает на основе выбранных слоев. Если вам нужно несколько копий одного и того же слоя, вам не нужно делать это вручную. Просто установите значение на ползунке.
Версии: Поскольку Shuffle работает со случайными значениями, первое выполнение не всегда может дать желаемый результат
. Обычный рабочий процесс — это перемешать> отменить> перемешать> отменить и т. Д.Чтобы сэкономить время, вы также можете позволить панели генерировать несколько версий за один запуск, которые вы можете легко просматривать и выбирать из снимков истории.
Расширенные настройки : Вы определяете, насколько случайными будут результаты. Просто перейдите к расширенным настройкам и укажите минимальные и максимальные значения для определенных свойств, определите конкретную цветовую палитру (вместо полностью случайных цветов) и многое другое.
Создавайте смещения узоров относительно размера холста и исправляйте переполняющиеся элементы, автоматически копируя их на противоположную сторону.
Половинное смещение по горизонтали или вертикали может нарушить повторяемость прямых
линий и сделать узор более динамичным. (Также известен как «раппорт»)
Создать смещение : смещает все выбранные слои относительно ширины и высоты холста. Вы можете применить неравномерные смещения, установив для одного направления значение 25%, 50% или 75%. Это автоматически расширит холст на 200% или 400% (но вы также можете отключить это), так что результат будет по-прежнему бесшовным.
Интерактивная панель обеспечивает предварительный просмотр в реальном времени, который визуализирует результирующий эффект с помощью кругов (представляющих ваши слои). Когда смещение будет сгенерировано, копии выбранных слоев будут смещены во всех 4 направлениях. Таким образом, вы все равно можете перемещать элементы после этого, не нарушая целостного макета.
Развернуть вручную: Если вы хотите сместить элементы, но сохранить исходные границы холста, просто снимите флажок в предыдущем разделе. В этом разделе просто есть удобные кнопки для быстрого увеличения холста на 200% или 400%.
Смещение вручную : Вы предпочитаете перемещать слои вручную? На панели есть несколько полезных инструментов для этого! Просто укажите смещение и нажмите одну из кнопок со стрелками. Вы можете выбрать, следует ли дублировать слой во всплывающем меню. Кроме того, есть возможность рассчитать смещение на основе границ слоя, а не границ холста. Если выбор активен, границы выбора будут опорным значением.
Исправить переполнение : исправить все переполненные слои одним щелчком мыши.Другими словами, скопируйте все слои, которые касаются края холста, на противоположные стороны. Это гарантирует, что полученное изображение будет бесшовным. В отличие от недавно добавленной в Photoshop функции «Предварительный просмотр узоров», эта функция не разделяет слои и, следовательно, также работает с фигурами и смарт-объектами.
Удалить снаружи: Удаляет все слои, которые находятся за пределами холста (и поэтому не видны). Он влияет только на слои, которые полностью находятся снаружи, и не обрезает слои, которые только касаются края.
Заполните холст выбранным слоем, регулируя различные параметры, такие как смещение и зазор. Предварительный просмотр в реальном времени помогает получить немедленную обратную связь об ожидаемом результате.
Repeat & Fill создает копии выбранного слоя и размещает их в сетке так, как вы указываете в настройках. Кроме того, есть опция автоматического масштабирования, которая вычисляет необходимое увеличение или уменьшение масштаба, чтобы идеально подогнать созданную сетку к размеру холста. По умолчанию все копии сгруппированы вместе, и вы можете заранее создать резервную копию выбранного слоя.
Начать с начала координат: Если вы отключите эту опцию, слой останется на месте и будет повторяться оттуда. В противном случае перед повторением слой перемещается в верхний левый угол.
Заполнить доступное пространство: Вместо заполнения холста можно также задать количество столбцов и строк. Кстати, если есть активный выбор, панель будет работать на основе границ выделения, а не границ холста.
Промежуток: Установите интервал между каждым столбцом или строкой.Входные данные могут обрабатывать такие значения единиц измерения, как «25%», «2 дюйма», «30 мм» и т. Д. Если вы оставите единицу измерения подальше, по умолчанию будут использоваться пиксели.
Смещение: Сделайте отступ строк или столбцов на определенный процент. Когда «чередующееся смещение» включено, смещение будет колебаться взад и вперед между значением и 0. В противном случае смещение будет постоянно увеличиваться.
Авто-масштабирование: Автоматическое масштабирование исходного слоя вверх или вниз, чтобы повторяющаяся сетка идеально соответствовала ширине или высоте холста.Расчет и масштабирование выполняются заранее (а не по всей сетке), поэтому указанный зазор останется немасштабируемым.
Решение одним щелчком мыши для точного поворота бесшовного узора до пикселя при сохранении бесшовного результата. Увеличение размера холста будет указано еще до того, как вы повернете выкройку.
Угол: Используйте ползунок для выбора одного из доступных углов поворота. Вы можете спросить, почему нельзя просто установить какой-либо угол. Это связано с лежащим в основе алгоритмом определения необходимого нового холста, чтобы изображение оставалось бесшовным.Не каждый угол поворота может даже привести к безупречному результату.
Доступные углы:
2.86, 5.71, 11.31, 14.04, 18.43, 26.57, 30.96, 33.69, 38.65, 41.99, 45, 47.73, 50.19, 56.31, 59.53, 63.43, 67.38, 71.57, 75.96, 78.69, 84.29, 87.14
Масштаб: Предварительно уменьшите масштаб изображения, чтобы уменьшить его размеры после поворота. Во всплывающем меню вы можете активировать функцию «Интеллектуальное масштабирование», которая применяет уменьшение масштаба, сохраняя изображение как смарт-объект.Это делает вращение намного медленнее, но вы можете масштабировать его впоследствии без потери качества (до исходного размера, конечно).
Предварительный просмотр размера: При использовании ползунков вы увидите в реальном времени расчет того, как поворот повлияет на размер документа. Даже с указанными выше «особыми» углами плавное вращение может привести к гораздо большему размеру. В этих случаях на панели отображается предупреждение.
Пример:
Дополнительные параметры: Если вы хотите повернуть на отрицательный угол или переключить слияние слоев, вы можете установить эти параметры во всплывающем меню.
Смешивание двух текстур вручную может быть утомительным занятием. Эта панель содержит набор масок, которые позволяют выполнять работу одним щелчком мыши.
Исходное изображение: Если включен параметр «использовать выбранные слои», панель будет смешивать выбранные слои (убедитесь, что их ровно два). Вы также можете выбрать два изображения из своей файловой системы, если отключите эту опцию.
Создать фреймы: Если этот параметр активен, панель поместит два изображения внутри фреймов.Это позволяет упростить замену с помощью перетаскивания, поэтому вы можете быстро обмениваться изображениями.
Дополнительные советы: После обработки двух изображений вы можете попробовать разные маски. Обновите маску, снова нажав кнопку или дважды щелкнув миниатюру маски.
Также есть всплывающее меню с большей функциональностью, например, чтобы подогнать слой к границам холста (полезно, когда вы заменяете одну из текстур другой).
Сделайте текстуру бесшовной, повернув края внутрь, а затем заклеив видимые линии краев различными методами.
Свести изображение: Ярлык для быстрого объединения всех слоев в один фоновый слой. Это экономит несколько щелчков мышью и упрощает обработку изображения между шагами.
Выровнять свет: Выровняйте свет и различия контрастности по изображению с помощью фильтра Highpass. Более однородное изображение легче сделать бесшовным.
Выровнять цвет: Выровняйте цвет по изображению с помощью среднего фильтра.
Загните края внутрь: Самый важный шаг к созданию бесшовной текстуры — сделать швы видимыми.Применяя к изображению смещение 50%, края перемещаются внутрь и затем могут быть исправлены / исправлены на следующих шагах.
Расширить и отразить: Кроме того, вы также можете сделать изображение бесшовным, отразив его со всех сторон. Это не требует дополнительных действий, но может выглядеть непривлекательно.
Auto-Patch: Панель имеет 3 режима авто-исправления, которые пытаются удалить видимые швы после их поворота внутрь. Все они отбирают информацию о пикселях с изображения и наносят отпечатки на критические области, чтобы исправить это.Вы можете добавить размытие и смещение, чтобы края исправленных областей лучше сливались.
Перекрестная заливка: Использует заливку с учетом содержимого на крестообразной форме.
Fill & Blend: Использует заливку с учетом содержимого в области вокруг каждой четверти холста.
После этого он смешивает вновь сгенерированные пиксели по краю.
Mirror & Blend: Подобен Fill & Blend, но вместо заливки с учетом содержимого он генерирует пиксели, зеркально отражая каждую четверть по отдельности, а затем смешивая их вместе.
Когда вы заполняете большую область бесшовным узором, вы часто можете ясно видеть повторы, что выглядит не очень хорошо. Эта панель создает больше разнообразия за счет выборки и исправления участков изображения.
Просто выберите область текстуры без множества повторений и нажмите кнопку — панель будет рандомизировать текстуру, не оставляя следов исправленных областей, благодаря грамотному использованию фильтров размытия и смещения.
Плотность: Значение от 1 до 10, определяющее, какая часть исходной области будет заделана.Обычно плотности 5-6 достаточно, чтобы заполнить все изображение.
Мин. Масштаб: Для еще большего разнообразия панель может произвольно уменьшать отдельные участки. Если вам нужен только исходный размер, оставьте его равным 100%.
Яркость ГСЧ: Сделайте текстуру менее скучной и простой, добавив некоторые вариации яркости отдельных участков.
Отразить и повернуть : Добавление случайного поворота и переворота помогает разбить повторы в изображении.Однако вы также можете отключить это для текстур, которые следуют направленному потоку.
Blend edge: Применяя фильтр размытия или смещения к каждому участку, они хорошо сочетаются с исходной текстурой, не оставляя нежелательных резких краев внутри изображения.
Пакетный импорт нескольких файлов изображений в виде шаблонов Photoshop. Панель предоставляет параметры для расширенного переименования, а также может воспроизводить действие для каждого изображения после его открытия.
Источник: Выберите папку или несколько файлов для обработки панелью.
Изменить имя: Для лучшей организации вы можете изменить имя файла, когда он импортируется как шаблон. Вы можете удалить расширение файла, искать и заменять определенный текст, а также что-то добавлять или добавлять. Вы также можете увидеть предварительный просмотр отредактированного имени.
Воспроизвести действие: Если ваше изображение требует некоторой обработки, прежде чем его можно будет добавить в качестве шаблона (например, изменение размера), вы можете выбрать действие, которое вы хотите воспроизвести для каждого файла после его открытия.
Режим предварительного просмотра узора — действительно полезная функция, доступная с Photoshop 2021.Эта панель быстро включает и выключает режим — на случай, если вы не хотите назначать и запоминать другое сочетание клавиш.
Поздравляем, если вы зашли так далеко, надеюсь, теперь цели и функции плагина понятны. Благодаря разнообразию инструментов, предлагаемых плагином, он является отличным дополнением к рабочему процессу каждого дизайнера, работающего с бесшовными узорами и текстурами, потенциально экономя им несколько часов. Многие из панелей имеют настраиваемые интерфейсы, поэтому не забудьте проверить всплывающие меню, чтобы узнать о дополнительных параметрах.Говоря об интерфейсе, все панели, конечно, поддерживают темы, что означает, что они автоматически меняют свой внешний вид, чтобы соответствовать вашей предпочтительной теме Photoshop. Также есть панель обзора, обеспечивающая быстрый доступ ко всем остальным панелям плагина:
Если у вас остались нерешенные вопросы или у вас есть идеи и отзывы о Seamless 2, просто напишите мне сообщение. Если вам не терпится опробовать плагин самостоятельно, вы можете приобрести его здесь. Удачи, создавая бесшовные узоры и текстуры!
Как уравнять текстуры в Photoshop — TOLAS
Не правда ли, создание текстур с помощью цифровых зеркальных камер — прекрасная идея? Так будет до тех пор, пока вы не разместите их на больших поверхностях и не столкнетесь с проблемами укладки плитки, такими как неравномерная яркость, видимые швы, изменение цвета и т. Д.Однако есть несколько приемов для решения этих проблем. Один из них недавно был показан , здесь . Это вдохновило меня написать этот пост и показать вам, как я готовлю свои текстуры , прежде чем я делаю их мозаичными.
Лично я редко использую Photoshop для раскрашивания плитки. Такие программы, как Pixplant или Imagesynth, позволяют автоматически создавать мозаичные текстуры с использованием исходных изображений. Хотя это не идеальное решение для дерева и других органических материалов, оно может сэкономить много времени.По сути, вы можете сделать несколько фотографий поверхности, импортировать их и получить мозаичный вывод всего за несколько щелчков мышью. Теоретически это работает со всеми «необработанными» фотографиями, но на практике лучше потратить больше времени и тщательно подготовить их перед импортом. Выравнивание их по цветовому тону и общей яркости в конечном итоге окупится.
Я хочу показать вам, как я выравниваю исходные изображения с помощью слоев в Photoshop. Но во-первых, я должен признать, что он основан на этом мини-уроке Питера Гатри.Честно говоря, я просто не мог понять это полностью, поэтому начал возиться со смешиванием слоев и в конце концов разработал свою собственную технику. Целью было минимизировать количество шагов.
Шаг за шагом
Добавьте Cgtextures.com в закладки, если вы еще этого не сделали 😀
Откройте в Photoshop
Дублировать фоновый слой [Ctrl-J]
Открыть фильтр> Размытие> Среднее…
Дважды щелкните фоновый слой, чтобы превратить его в подвижный слой.
Переместите его в верх стопки, измените его непрозрачность на 50% [5] и режим наложения на Linear Light
Откройте Filter> Other> High Pass… и поиграйте с параметром Radius для управления эффектом
Обычно Radius 100 работает нормально, но в зависимости от фотографии вы можете настроить его в диапазоне от 50 до 150.
Скачать Изображение 1 (большое) с этой страницы
Откройте в Photoshop
Дублировать фоновый слой [Ctrl-J]
Открыть Фильтр> Размытие> Среднее…
Дважды щелкните слой Background , чтобы превратить его в подвижный слой.
Переместите его в верх стопки, измените его непрозрачность на 50% [5] и режим наложения на Linear Light
Откройте Filter> Other> High Pass… и поиграйте с параметром Radius для управления эффектом
Примечание. Если вы используете последнюю версию Photoshop, вам может потребоваться нажать «Показать все элементы меню», чтобы получить доступ к среднему и высокому уровню…
Радиус 100 отлично работает в большинстве ситуаций, но вы можете настроить его в диапазоне от 50 до 150 в зависимости от разрешения изображения и размера деталей.
No related posts.