Создание текстур бесшовных: Сделать бесшовную текстуру онлайн — IMG online
Создание бесшовных текстур в фотошоп. Бесшовная текстура
Процесс производства продукта с использованием технологий трехмерной компьютерной графики состоит из нескольких этапов. Одним из важнейших и обязательных этапов является этап создания трехмерных моделей, которые в будущем и будут являться частью рассказываемой истории. Причем абсолютно не важно, для чего именно создаются трехмерные модели или в какой индустрии их будут использовать. Ведь главная задача трехмерных моделей — создать ощущение реальности, заставить зрителя поверить в то, что он видит на экране и быть всецело во власти рассказываемой истории. В конечном итоге, трехмерная графика — это всего лишь один из способов донести до зрителя историю, придуманную сценаристом.
Но под короткой фразой «создать трехмерные модели», кроется гораздо более сложный процесс производства. Очень важной составляющей в этапе создания трехмерных моделей является создание материалов и текстур для трехмерных моделей.
Рекламный постер короткометражного фильма «Архитип» Арона Симса, главную роль в котором «играет» персонаж, полностью созданный средствами трехмерной компьютерной графики.
Общая информация
Прежде чем трехмерная модель появится на экране кинотеатра, телевизора или монитора, ее должны создать. Как правило, под термином «создать модель», подразумевают поочередное прохождение следующих этапов производства:
- Создание образа будущей модели.
- Создание геометрической формы трехмерной модели.
- Создание набора текстур для модели и настройка материалов.
- Настройка скелета и оснастки трехмерной модели.
- Анимация модели.
Два последних этапа производства присутствуют только в случае, если трехмерная модель будет персонажем. Если же она просто деталь окружения, то есть мира, в котором разворачиваются события, то для создания такой модели, как правило, достаточно только первых трех шагов.
Создание образа модели выполняет художник по концептам (concept artist) отталкиваясь от словесного описания режиссера или сценариста. Полученные наброски передаются моделеру (modeling artist) для того, чтобы он создал трехмерную геометрическую форму модели. На этом первые два шага в процессе производства трехмерной модели заканчиваются, но этого еще недостаточно для того, чтобы модель можно было использовать в финальном проекте.
Дело в том, что после этапа моделирования модель имеет только лишь правильную геометрическую форму, т.е. собака является собакой, автомобиль — автомобилем, но у модели напрочь отсутствуют материалы, которые и предают ей ее уникальные характеристики, а так же делают модель реалистичной. Именно после создания и назначения материалов, трехмерная модель собаки имеет черный окрас шерсти, а автомобиль покрашен красным цветом и имеет коричневый кожаный салон. Без материалов трехмерная модель выглядит серой и безликой, а вот именно материалы и вдыхают в трехмерные модели жизнь.
Пример трехмерной модели механического солдата будущего. Левая часть — чистая трехмерная модель, правая часть — законченная модель с назначенными материалами.
Copyright 2011 © Mike Jensen
Создание и настройка материалов
Что же такое «материалы», которые так нужны трехмерным моделям? Под этим термином подразумевается описание набора свойств поверхности. То есть материал хранит внутри себя описание того, какими свойствами (параметрами) обладает поверхность. Это такие свойства, как: цвет поверхности, глянцевитость или матовость, наличие или отсутствие рельефа, отражение, прозрачность, свечение и т.п.
Материалов существует огромное количество и каждый из них обладает своими, присущими только ему, наборами свойств (параметров). Для каждой трехмерной модели создаются свои материалы. Например, для модели стеклянного фужера нужен всего лишь один материал со свойствами цвета, прозрачности и отражения. А для трехмерной модели человека, нужно несколько материалов. Один для кожи со свойствами цвета, глянцевитости и рельеф, другой для волос, со свойствами цвета, глянцевитости, рельефа и прозрачности, а третий для глаз, со свойствами цвета, отражения и прозрачности.
Материалы создают художники по текстурам (texture artist), а так же могут создавать моделеры или же специалисты по настройке рендера (lighting/shading artist). В крупных компаниях процесс создания геометрической формы трехмерной модели и создание материалов для нее могут выполнять разные специалисты. В небольших компания всю работу по полному циклу производства модели, чаще всего, выполняет моделер.
Пример внешнего вида различных материалов, которые используются для назначения трехмерным моделям.
Источник: http://www.vray-materials.de
А вот создают и настраивают материалы обычно в тех же программах, в которых и создается геометрическая форма трехмерной модели. Это такие пакеты, как: Maya, Softimage, 3dsMax, LightWave 3D, Cinema 4D, Blender, Houdini, Modo и многие другие. Как правило все эти программы предоставляют удобный интерфейс для работы с материалами. А сам процесс работы сводится к тому, что художнику нужно подобрать правильное значение того или иного параметра в конкретном материале для того, чтобы он точнее соответствовал нужной поверхности.
Значения параметров материала художник может менять несколькими способами. Первый способ —
Пример настройки материалав ПО Autodesk Maya.
Источник: http://www.polycount.com/forum/showthread.php?t=94077
Использование текстур
Текстуры во всех пакетах занимающихся работой с трехмерной графикой делятся на два типа:
- растровые текстуры;
- процедурные текстуры.
Растровые текстуры — это обычные растровые изображения, которые можно получить любы способом: фото, видео технику, сканирования изображений, самостоятельное создание в редакторах растровой графики, таких как Adobe Photoshop, Gimp и др.
Процедурные текстуры — это текстуры, рисунок которых получается благодаря определенному алгоритму (математической формуле). Как правило, такие текстуры бывают не очень детализированными, но очень удобны при получении сложных материалов, где их используют для смешивания между собой растровых текстур.
Чаще художники по текстурам используют именно растровые изображения для создания материалов трехмерных моделей. И тут очень важно помнить об одной особенности растра. Она заключается в том, что качество растрового файла ограничено его размером. Чем больше ширина и высота картинки (изображения), тем выше вероятность того, что материал будет отображаться в качестве при любой степени приближения камеры к поверхности модели. Поэтому современные модели обычно используют текстуры размером минимум 2k (2048 пикселя), а в идеале, хотя бы 4k (4096 пикселя) и даже больше.
При использовании текстур, как составной части материала модели, обязательным является создание текстурной развертки трехмерной модели. Если для материалов, которые созданы без использования текстур, и даже в некоторых случаях при использовании процедурных текстур, создание текстурной развертки не является обязательным требованием, то для растровых текстур это необходимое требование. Поэтому до того, как для трехмерной модели создадут текстуры, ей должны сделать развертку текстурных координат.
Развертка текстурных координат
Под термином развертка (unwrap) — подразумевается процесс создания для каждого полигона трехмерной модели его отображения (проекции) на плоскости координат. Модели, которые создают, являются геометрическими формами расположенными в трехмерном пространстве, а текстуры — это плоские изображения. Развертка позволяет решить вопрос с тем, как на трехмерную геометрию нанести плоское (двумерное) изображение.
Для создания разверток можно использовать как программы, занимающиеся моделированием объектов, так и специализированные программы, которые выполняют исключительно создание разверток. Примерами программ второго типа являются программы: headus UVLayout, Ultimate Unwrap 3D, UVMapper, Unfold 3D.
Есть несколько требований к развертке текстурных координат:
- Размер полигонов на сетке текстурных координат должен соответствовать или приближаться к размеру полигона на трехмерной геометрии. Иначе текстура на поверхности модели может быть искажена (сжата или растянута).
- Нужно попытаться как можно эффективнее занят пространство текстурного квадрата (места, где расположена развертка текстурных координат), иначе это приведет к ухудшению качества отображения текстуры.
- В большинстве случает запрещены наслоения (наложения) одних текстурных координат с другими. Исключением являются только симметричные, а порой и одинаковые части модели.
- Нужно стараться делать как можно меньше швов (мест разделения текстурных координат) на видимых частях модели.
После того, как развертка модели готова, художник по текстурам может заняться созданием набора текстур.
Пример развертки текстурных координат (справа) для трехмерной модели пистолета (слева).
Источник: http://www.polycount.com/forum/showthread.php?t=80947
Создание текстур для трехмерной модели
В данный момент существует два основных способа создания текстур для материала, который в будущем будет назначен трехмерной модели.
Способ первый — это создание текстур в редакторах растровой графики (Adobe Photoshop, Gimp, Painter и т.п.) с нуля или же используя готовые растровые изображения (фотографии, рисунки и т.п.).
Способ второй — создание текстур в специализированных программа для рисования текстур сразу на поверхности трехмерной модели.
Оба способа сейчас активно используются. И у одного, и у второго, есть свои сторонники и противники. И одним, и вторым способом, можно получать качественные текстуры для моделей.
До появления специализированных программ, текстуры рисовали только в редакторах растровой графики по шаблону текстурной раскладки. Этот процесс и сейчас применяют для различных моделей. Единственным недостатком такого способа является то, что в случае наличия шва на модели (места, где разделяются текстурные координаты), художнику нужно его идеально проработать, чтобы он был не заметен на поверхности трехмерной модели. Хотя если швы сделаны правильно, их можно даже и не заметить.
Пример трехмерной модели «дрона» (слева) и набора текстур (справа) созданного в Adobe Photoshop.
Если вы занимаетесь веб-дизайном, 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%, после чего жмем кнопку “Сохранить”.
После данных манипуляций получилась качественная бесшовная текстура с необходимым нам оттенком. И теперь, если мы приложим копии изображения друг к другу, то убедимся, что получается бесшовный фон, стыков (швов) уже нет.
Умение создавать текстуру в Photoshop — полезный навык, особенно для работающих с 3ds Max. Для 3D графики текстуры играют очень важную роль. От качества текстур напрямую зависит качество визуализации 3D-сцены. Можно сказать, что 90% свойств материала несет в себе карта диффузного отражения, которая делается по фотографиям реальных фактур. В этом уроке я расскажу как создавать бесшовные текстуры из фотографий. В английском языке их обычно называют patterns или seamless textures .
Данный урок — первый в серии, посвященной подготовке текстур.
Идея первого метода проста: выбираем наиболее характерный фрагмент изображения, кадрируем его, применяем фильтр Offset, ретушируем стык.
В качестве исходного материала возьмем такое изображение. На нем неплохая текстура дерева.
В качестве образца я взял кусок в левом нижнем углу и кадрировал его инструментом Crop
.
Для 3D текстур желательно чтобы кусочек был квадратным. Это позволит
в дальнейшем легче назначать координаты проецирования в программе трехмерного моделирования. Получился вот такой вот кусочек.
С ним и будет идти вся дальнейшая работа.
Проверим выбранный кусок в качестве текстуры.
Командой Select > All выделяем все изображение целиком.
Вызываем в нем команду Edit > Define Pattern , которая определяет изображение как шаблон для заливки.
Теперь создаем новый документ большого размера, скажем 1024х768.
Вызываем команду Edit > Fill и выбираем образец для заливки.
Если теперь применить созданный образец, то мы получим явно заметные швы.
Для того чтобы получить возможность ретушировать стыки применим к кадрированному квадратику фильтр Filter > Other > Offset .
В поля диалогового окошка вводим примерно половину размера картинки, хотя если просто подергать ползунки, то не составит труда
загнать стыки в середину изображения.
В результате применения фильтра швы окажутся прямо посередине изображения, а левый
и правый край автоматически согласованы. Остается только воспользоваться любым инструментом ретуширования
для устранения стыков. Например, я чаще всего использую штамп клонирования, хотя и Patch tool тоже отлично подходит.
Если теперь применить созданный образец, то швов больше не видно. Обычно процедуру приходится повторять многократно до достижения удовлетворительного эффекта. При ретушировании следует обращать внимание на слишком характерные элементы изображения, заметные пятна и т.п. Ритмические повторения одинаковых сучков выдают искусственное происхождение текстурного рисунка.
3ds Max неверно интерпретирует CMYK-файлы текстур помещенные в слоты растровых карт материалов!
К сожалению, если в исходном изображении присутствует неоднородность в освещении выбранного фрагмента, то даже безупречная ретушь стыков не позволит сделать шаг текстуры незаметным. В этом случае следует использовать инструменты осветления-затемнения. Хотя более технологично использовать фильтры, но об этом в следующий раз.
Должно быть, каждый сталкивался с подобной ситуацией в Photoshop: решили сделать заливку из исходного изображения – столкнулись с некачественным результатом (то картинки повторяются, то слишком контрастно переходят друг в друга). Конечно, выглядит это по меньшей мере некрасиво, но нет проблем, которые бы не имели решения.
С помощью программы Photoshop CS6 и данного руководства вы сможете не просто избавиться от всех этих недостатков, но и реализовать красивый бесшовный фон!
Итак, приступим же к делу! Поэтапно выполняйте указанную ниже инструкцию и вас обязательно все получится.
Сначала мы должны выделить на картинке участок при помощи инструмента Photoshop «Рамка» . Возьмем, к примеру, центр полотна. Заметьте, что выбор должен падать на фрагмент с более ярким и в тот же момент равномерным освещением (обязательно, чтобы на нем не было темных участков).
Но, как бы Вы не старались, края картинки будут различаться, поэтому придется их осветлять. Для этого переходим к инструменту «Осветлитель» и выбираем мягкую кисть большого размера. Обрабатываем темные края, делая участки более осветленными, чем прежде.
Однако, как Вы могли увидеть, в левом верхнем углу присутствует лист, который может дублироваться. Чтобы избавиться от этой незадачи, зальем его текстурой. Для этого выбираем инструмент «Заплатка» и обводим участок вокруг листа. Выделение переносим на любой понравившейся вам участок травы.
Теперь поработаем со стыковками и краями. Делаем копию слоя с травой и переносим его налево. Для этого используем инструмент «Перемещение» .
Получаем 2 фрагмента, которые в месте состыковки осветлены. Теперь нам нужно соединить их таким образом, чтобы от светлых участков не осталось и следа. Сливаем их в единое целое (CTRL+E ).
Здесь мы опять применяем инструмент «Заплатка» . Выделяем нужный нам участок (область, в которой будет состыковка двух слоев) и перемещаем выделенный фрагмент на соседний.
С Инструментом «Заплатка» наша задача становится значительно проще. Особенно данным инструментом удобно пользоваться с травой – фоном из разряда далеко не самых лёгких.
Теперь перейдем к вертикальной линии. Все делаем точно так же: дублируем слой и перетаскиваем его наверх, другую копию располагаем снизу; состыкуем два слоя таким образом, чтобы между ними не оставалось белых участков. Сливаем слой и с помощью инструмента «Заплатка» действуем таким же образом, как делали это ранее.
Вот мы в прицепе и сделали нашу текстуру. Согласитесь, это было довольно легко!
Убедитесь, что на вашей картинке нет затемненных участков. При данной проблеме используйте инструмент «Штамп» .
Остается сохранить наше отредактированное изображение. Для этого выделяем все изображение (CTRL+A ), далее идем в меню «Редактирование/Определить узор» , присваиваем имя этому творению и сохраняем его. Теперь его можно использовать в качестве приятного фона в ваших последующих работах.
Мы получили оригинальную зеленую картинку, которая имеет массу применений. Например, вы можете использовать её в качестве фона на вебсайте или использовать как одну из текстур в Photoshop.
При текстурировании различных объектов очень важно уметь создавать бесшовные текстуры. Наши советы и хитрости помогут вам избежать основных ошибок и лучше разобраться в сабже.
При текстурировании дорог, стен или крыш, например, для видеоигр особенно важно уметь создать тайловую или бесшовную текстуру на всю протяженность геометрии, поскольку создание текстуры для, например, целой кирпичной стены может оказаться довольно трудоемким процессом. Особенность такого подхода кроется в необходимости обмануть зрителя, не дав ему возможности отличить начало от конца текстуры.
Что такое бесшовная или тайловая текстура?
Бесшовная или тайловая текстура обычно является фотографией какого-либо объекта, например, кирпичной стены, которая может повторяться необходимое число раз без видимых швов или разрывов, при этом каждый угол изображения должен идеально совпадать с любым другим.
Если вы уже успели сфотографировать кирпичную стену и пытаетесь затайлить ее на геометрии, то ничего у вас не выйдет, поскольку левая часть текстуры не будет совпадать с правой. Для корректной тайловой текстуры характерно, что ее противоположные части идеально совпадают. Для такого эффекта необходимо проделать ряд манипуляций в Photoshop.
Как правильно снять фотографию
Существует множество вебсайтов с тайловыми текстурами. В целом это неплохо, большинство этих текстур идеально подойдет для вашего проекта, однако в некоторых случаях текстуры приходится создавать вручную, фотографируя окружающие объекты. На это существует несколько причин.
Во-первых, некоторые идеально подходящие текстуры недоступны для бесплатного скачивания, их можно только приобрести, что ощутимо скажется на вашем бюджете.
Во-вторых, обычно мы, прекрасно представляя себе, что нам нужно, безуспешно перерываем весь Интернет в поисках подходящей текстуры. В случае с кирпичной стеной гораздо проще подойти к понравившейся стене и сфотографировать ее.
В случае, если вы все-таки отважитесь на то, чтобы сфотографировать нужную текстуру, необходимо помнить о нескольких важных моментах.
Во-первых, необходимо встать параллельно объекту, на который нельзя смотреть под углом. Необходимо сфотографировать этот объект максимально прямо.
В дальнейшем объект, снятый под углом, может вызвать довольно странные искажения текстуры, которую будет невозможно корректно затайлить.
Пример неправильного ракурса можно увидеть на изображении ниже, из-за небольшой, казалось бы, перспективы, нижние кирпичи выглядят меньше верхних. Сделать такую фотографию тайловой будет довольно сложно.
При фотографировании текстуры необходимо также позаботится и о корректном освещении объекта. Стоит избегать всевозможных засветов. При уличной съемке лучше выбирать хорошо освещенные места, не снимая против солнца.
Создание бесшовной текстуры
Итак, фотография готова. Пришло время открыть ее в Photoshop и обрезать квадратом. Например, 1024×1024 или 2048×2048.
После этого с помощью инструмента Selection или команды Layer Via Copy необходимо выделить правую или левую часть изображения и перетянуть новую копию в противоположную часть изображения.
При этом в глаза сразу же бросится грубый шов, который необходимо пофиксить любым удобным способом, например, выбрать инструмент Eraser, уменьшить его Hardness и Opacity, и пройтись им по шву, что сделает его менее заметным.
Этот же процесс необходимо повторить и для верхней и нижней частей изображения. При попытке затайлить полученную текстуру незначительные швы все еще возникают. Это можно легко пофиксить с помощью инструмента Clone Stamp или любого другого подобного инструмента. Процесс, в зависимости от фотографии, может разниться, но незначительно.
Избавление от швов с помощью инструмента Patch
Со швами можно также распрощаться с помощью инструмента Patch, при этом необходимо сначала выделить нужный участок геометрии, а затем скопировать его на другой, например, на участок со швом. При этом Photoshop идеально сотрет какие-либо границы между этими участками изображения.
Такой подход лучше всего использовать для абстрактных фотографий, например асфальта или травы.
Рекомендуем также
Как сделать бесшовную текстуру
Доброго времени суток читатели и подписчики gimpart! Из сегодняшнего урока вы узнаете, как сделать бесшовную текстуру с помощью бесплатного фоторедактора gimp.
Что такое бесшовная текстура?
Бесшовная текстура — элемент графического оформления, с изображением текстуры какого-либо материала. Повсеместно используется дизайнерами для оформления своих работ. Например, для создания графики неба, асфальта, травы, кирпичных стен и подобного в мобильных приложениях, компьютерных играх, цифровой живописи и т.д. При раскладке такой текстуры «одна к другой», образуется целостная картинка без швов и искажений.
Данный элемент позволяет значительно экономить вес и увеличивать производительность приложений и игр, так как в качестве генерации используется небольшая часть «образец». Путем составления элементов «образцов» друг к другу получается целостная картинка желаемого оформления. Смотрите, в «Текстурах» гимпа есть текстура кирпичи с размером 916×916 пикселей. И мы данной данной текстурой заливаем изображение размером 2748×2748. Таким образом, у нас получается поле c 3×3.
Для создания текстуры без краев в программе гимп существует специальный фильтр «Бесшовная мозайка» (для версии программ 2.10). Находится он в меню «Фильтры — Проекция — Бесшовная мозайка». Обратите внимание, что и в версии гимп 2.10, данный фильтр может ещё называться «Без швов». Может перевод на русский в в подверсиях встречается разный.
В старых же версиях программы gimp, данный фильтр располагался в меню «Фильтры — Карта — Без швов»
Как сделать бесшовную текстуру в gimp
Для начала откроем в программе изображение, на основе которого мы хотим сделать бесшовную текстуру. За образец я взял изображение старой бумаги с сайта pixabay.
После того, как мы открыли картинку, необходимо выделить с помощью прямоугольного выделения квадратную область, на основе которой хотим создать текстуру. Для создания квадратного выделения необходимо задать одинаковые размеры и проставить «галочку» зафиксировать.
Выделяем область. Стараемся выделить такой участок, где нет большого перепада по теням и светам.
Далее используем команду фильтра «Бесшовная мозайка»
Кадрируем изображение до размеров выделения.
И сохраняем результат через меню «Файл — Экспортировать как». В настройках указываем, что хотим сохранить «как текстура». Обратите внимание, расширение файла поменяется на PAT.
В следующем окне вводим имя текстуры, которое будет отображаться, когда мы мышкой наводим на миниатюру текстуры в палитре GIMP.
Текстура сделана. Чтобы она у нас переехала на постоянное место жительство в гимп, ее нужно скопировать в пользовательский каталог текстур. Расположен он по адресу ->> Диск C — Пользователи — <Имя вашего пользователя в системе>-AppData — Roaming — GIMP — 2.10 — Patterns
Подгружаем созданную текстуру, нажав на кнопку «Обновить» на панели текстур.
Теперь текстура появится в списке.
Попробуем залить вновь созданной текстурой произвольную область, например 1920-1080 пикселей.
Как видите, у нас четко прослеживаются диагональные линии, которые присутствовали в нашей квадратной текстуре.
На этом урок завершён. Спасибо за внимание и до новых встреч.
P.S. Урок про использование текстур из фотошопа смотрите по ссылке.
Если вам понравился урок или статья, то пожалуйста поддержите меня нажав на социальные кнопочки ниже. Тем самым вы поделитесь информацией о блоге GimpArt.Org со своими друзьями в социальных сетях. Спасибо!
Автор блога GimpArt.Org — Антон Лапшин
За 10 лет обучил работе в фоторедакторе Gimp более 12000 пользователей, мои видео-уроки и мастер-классы на одноименном YouTube канале посмотрели более 1 400 000 раз!!!
👉Посмотрите другие материалы:
—>Программы для создания бесшовных текстур.
Texture Maker — программа для генерации бесшовных текстур. Texture Maker умеет изготавливать как процедурные (генерируемые), так и самодельные текстуры, базирующиеся на уже готовых изображениях. При этом у пользователя есть возможность использовать эффекты освещения, перспективы, и даже создавать анимированные текстуры с незаметным для зрителя зацикливанием (повторением). Texture Maker имеет поддержку плагинов и скриптов для автоматизации работ. Программа имеет более сотни генераторов текстур, фильтров и инструментов деформации, 700 различных пресетов (шаблонов) для быстрого изготовления текстур, есть стандартные инструменты цветовой коррекции и шейдеры для создания реалистичного освещения. Кроме того, Texture Maker оснащён встроенными инструментами, позволяющими «выдирать» текстуру из фотографий, генерировать ландшафты, использовать системы частиц и многое другое. Большой плюс программы это то, что программа может работать в многопроцессорных системах. С его помощью нетрудно получить текстурные изображения разнообразных естественных поверхностей, таких как скалы, листва, почва, каменные плиты, гравий, трава и пр., — исходный материал для многих из них включен в программу в качестве шаблонов, число которых очень велико. Чуть больше времени потребуется для получения таких текстурных образцов, как шахматная доска, кирпичи, плитки и т.п. Можно создавать текстуры не только с чистого листа или из шаблонов, но и на основе фотографий, для которых предварительно будет автоматически проведена тоновая и цветовая коррекция. При разработке бесшовных изображений удобнее создавать маленькие образцы текстур, которые уже сама программа будет автоматически расширять до стандартного размера. Для создания реалистического освещения и добавления теней, искажения и управления прозрачностью, добавления границ и цветовой коррекции и пр. можно использовать большой набор инструментов, причем для каждого из них предлагается широкий диапазон параметров настройки. В перечне прочих возможностей Texture Maker — наличие встроенного генератора абстрактных текстур, конвертирование черно-белых текстур в режим RGB, возможность автоматизации за счет использования пакетной обработки, поддержка группы «быстрых инструментов», просмотр текстур в режиме реального времени на стандартных примитивах и моделях, возможность расширения возможностей программы за счет подключения плагинов.
Скачать Texture Maker можно с официального сайта разработчика по этой ссылке.
Как сделать текстуры в фотошопе. Создание текстур в Photoshop
Применение различных текстур к элементам может значительно улучшить ваш дизайн. Текстуры можно использовать для создания дизайнов полиграфии или для различных веб-проектов, и в любом случае нужно правильно уметь обращаться с ними в фотошопе. Ведь умение создавать различные текстур может также отлично также пригодиться для зд-моделирования. Поэтому сегодня вашему вниманию будет предоставлена подборка уроков, в которых вы найдете различные техники работы с текстурами.
5 способов применения текстур в дизайне
Добавляем текстуру ржавчины
В этом уроке вы узнаете, как с помощью дополнительных корректирующих слоев, настроек цвета и простых фильтров добавлять текстуру ржавчины к различным объектам. Эту технику можно применять к более сложным иллюстрациям и коллажам.
Создаем реалистичную текстуру бумаги за 5 минут
Эффект печенья в Photoshop
Создаем макет сайта с использованием различных текстур
Создание такого шаблона займет у вас меньше часа. В уроке вы сможете найти несколько практических советов.
Добавляем текстуру на изображение
Эта техника подойдет не ко всем иллюстрациям — с одними наложенная текстура будем смотреться лучше, с другими хуже. Очень важно не переборщить с подобными текстурами в своих изображениях.
Текстура камней в Photoshop
В этом уроке будет показан быстрый и простой способ создания реалистичной текстуры камней с помощью фильтра Liquify. Этот урок создан для пользователей, которые уже имеют представление с работой в фотошопе.
3 простых шага в добавлении текстур
Использование текстур в дизайне — достаточно важная вещь. Этот урок поможет сделать это очень быстро и легко.
Создание гранж-текстур в фотошопе
В уроке показан быстрый и простой способ создания фона гранж-тектсур в Photoshop.
Используем различные текстуры для создания композиций в Photoshop CS5
Конечно. можно сделать фотографию и использовать ее для текстуры. Но это не единственный вариант. Текстур дерева можно создать самостоятельно, руководствуясь шагами данного урока.
Создаем гранж-дизайн, используя Photoshop
Урок по созданию световых эффектов
Урок по созданию текстуры дерева
Простой способ создавать реалистичную текстуру дерева.
Создаем бетонный эффект, используя различные стили слоя
Удивительно, что можно сделать, играясь с разными стилями.
Чешуйчатая кожа
Вещь, за которую нужно поблагодарить Photoshop — он может значительно упростить работу. Представьте себе, сколько бы времени ушло на создание иллюстрации с драконом, динозавром или другой рептилией, которые имеют чешуйчатую кожу.
Добавление текстур к коже
Совет: как превратить деревянную текстуру в удивительный фон
Динамичная акварельная типографика
В этом уроке будет рассказано, как смешивать некоторые векторные элементы и акварельные эффекты в своем дизайне. Очень быстрый эффект, который в основном зависит от правильного выбора изображения и цвета.
Если вы занимаетесь веб-дизайном, 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%, после чего жмем кнопку “Сохранить”.
После данных манипуляций получилась качественная бесшовная текстура с необходимым нам оттенком. И теперь, если мы приложим копии изображения друг к другу, то убедимся, что получается бесшовный фон, стыков (швов) уже нет.
В данном уроке вы узнаете, как сделать бесшовную текстуру в Photoshop. Данный урок подойдет также тем, кто хочет узнать, как сделать бесшовный фон для сайта (паттерн для сайта, паттерн для фона) или паттерн для Фотошопа.
Что такое бесшовные текстуры? Зачем нужны бесшовные текстуры и как их использовать?
Прежде чем узнать, как сделать бесшовную текстуру в Фотошопе, давайте посмотрим, зачем они вообще нужны, эти бесшовные текстуры.
В игрострое довольно часто используется техника тайлинга текстур или затайливания текстур (от англ. tile — плитка). Тайлинг позволяет повторять текстуры на поверхности 3D модели. Очень часто затайленные текстуры применяются на ландшафте, либо для текстурирования дорог, домов и так далее. О тайлинге я уже рассказывал в уроке .
Но для того чтобы затайленная текстура хорошо смотрелась на 3D модели, необходимо чтобы она была бесшовной .
На рисунке показана затайленная далеко не бесшовная текстура, на которой видны стыки между противоположными краями текстуры.
Бесшовная текстура представляет собой изображение, элементы противоположных сторон которого совпадают.
Если противоположные стороны текстуры не будут подходить друг к другу, то при затайливании такой текстуры вы получите швы в месте их стыковки. Такие швы возникают вследствие резких переходов между рисунками текстуры на ее противоположных краях.
На рисунке показана не бесшовная текстура, размноженная в Фотошопе (дважды затайленная). Рисунок на краях изображения отличается.
Как вы можете видеть на рисунке выше такую текстуру не стоит использовать для затайливания ландшафта или любого другого 3D объекта, да и просто для заливка фона сайта или холста в Фотошопе. И для создания паттерна для Фотошопа она не подойдет. Чтобы наложить текстуру на 3D модели без стыков (или залить фон сайта или холста), заметных пользователю, необходимо воспользоваться инструментами редакторов изображений.
Как сделать бесшовную текстуру в Фотошопе. Подготовка изображения в Фотошопе
Загрузите текстуру, которую хотите сделать бесшовной, в Фотошоп, открыв файл текстуры из Фотошопа или просто перетащите файл с текстурой из папки, где она у вас хранится, в окно Фотошопе (в этом случае новое изображение создавать не нужно, оно будет создано автоматически). Для данного урока я выбрал текстуру кирпича (кирпичной кладки) размером 512 на 512 пикселей.
На рисунке показана текстура кирпича, которая будет превращена в бесшовную текстуру.
Если вы не нашли текстуру размером 512 на 512 пикселей (1024 х 1024, 2048 х 2048 или 4048 х 4048 пикселей), а нашли, например, текстуру размером 1300 на 700, то обрежьте изображение в Фотошопе до размера в 512 х 512 пикселей при помощи инструмента Рамки/Crop (в панели инструментов слева) или использовав инструмент изменения размера холста «Canvas Size», который вы можете найти во вкладке «Image» главного меню.
На рисунке показаны инструменты, позволяющие обрезать изображение Canvas Size (A) и Crop (B).
Также вы можете использовать инструмент свободного трансформирования (Ctrl + T ) либо инструмент Scale , который вы найдете в меню Transform вкладки Edit главного меню.
На рисунке показан инструмент Scale для изменения масштаба изображения (в данном случае, подгонки изображения) в Photoshop.
Если вы применяли инструмент масштабирования или перемещения текстуры, необходимо выделить все видимое изображение на холсте (Ctrl + A ) и скопировать его на новый слой (Ctrl + C и затем Ctrl + V ). Если этого не сделать, то выступающее за холст изображение нам помешает. Альтернативой копипасту может послужить упоминавшийся ранее инструмент обрезки изображения Crop. Далее мы будем работать с новым созданным слоем: выделите его в панели справа, щелкнув на нем Левой Кнопкой Мыши.
Смещаем изображение в Фотошопе, используя фильтр Смещение («Offset»)
Итак, как сделать бесшовную текстуру в Фотошопе… Фотошоп предоставляет вам отличный инструмент, который подойдет для создания бесшовной текстуры. Данный инструмент представляет собой фильтр в Фотошоп и называется Смещение или «Offset «. Я уже рассказывал про смещение текстур на поверхности 3D моделей (а на самом деле в uv пространстве), в частности, использующихся в компьютерных играх, в статье . Здесь фильтр Смещения также позволяет двигать текстуру по горизонтали и вертикали.
Чтобы сместить изображение текстуры, выберите вкладку фильтров «Filter » в главном меню и в открывшемся выпадающем меню выберите вкладку «Other «, в которой, в свою очередь, выберите вкладку «Offset …».
На рисунке показано окно настроек фильтра Смещения («Offset»).
В окне фильтра «Смещение » выставьте значение для смещения по горизонтали равным 256 пикселям (Horizontal 256 pixels right ) и смещение по вертикали равным также 256 пикселям (Vertical 256 pixels down ), чтобы сместить изображение текстуры на 256 пикселей по горизонтали и вертикали. Нажмите кнопку «OK «, чтобы применить фильтр и сместить текстуру. Как вы можете видеть (и себя на холсте или на рисунке выше) в центре изображения появились швы, поскольку края изображения не совпадают друг с другом.
Для текстуры 1024 на 1024 смещение по вертикали и горизонтали можно выставить в 512 пикселей, для 2048 – 1024 пикселей, хотя и не обязательно.
Данные значения смещения служат лишь рекомендательными и могут для изображения 512 на 512 пикселей (а также для 1024х1024, 2048×2048) составлять 128 пикселей, 256 пикселей и так далее.
На рисунке показано изображение, к которому применен фильтр смещения, значения для которого выставлены в 128 по вертикали и горизонтали.
Главное, чтобы вам было удобно работать в процессе удаления швов текстуры.
Используем инструмент клонирования Штамп («Clone Stamp Tool»), чтобы скрыть швы на изображении
Чтобы удалить швы на текстуре, в Фотошопе существует несколько инструментов. Одним из таких инструментов является «Штамп » («Clone Stamp Tool «), иногда еще называемый кистью клонирования или клонирующей кистью.
На рисунке показан инструмент Штамп в Фотошопе.
Инструмент «Штамп » в Фотошопе позволяет создавать клоны участков изображения и вставлять их в указанное место холста. Чтобы указать место на изображении, с которого будет клонироваться часть изображения, удерживайте клавишу ‘Alt’ и кликните Левой Клавишей Мыши в точке изображения, которая станет точкой отсчета клонирования участка-донора.
Теперь, удерживая Левую Клавишу Мыши, проведите по участку изображения, на который хотите скопировать часть изображения относительно указанной ранее начальной точки участка-донора. Обратите внимание, что параллельно вашей кисти движется окружность, повторяя движение вашей кисти и показывая, с какого участка изображение в настоящий момент осуществляется клонирование текстуры (ее части).
На рисунке показана результирующая бесшовная текстура кирпичной кладки.
А вот так выглядит получившаяся текстура в Unity3D.
На рисунке показана затайленная бесшовная текстура кирпичной стены в Unity3D.
При работе с данным инструментом особое внимание стоит уделить кисти, которая используется для данного инструмента, чтобы избежать резких границ и размытости на стыке краев текстур. Если вы будете использовать слишком мягкую кисть с большим размытием по краям и большой прозрачностью, то на стыке краев текстуры получите заявленное изображение. Если же будете использовать жёсткую кисть с резкими краями, то получите резкие переходы на швах текстуры. Кисть вы можете выбрать в меню сверху, расположенном сразу под главным меню.
Вместо Штампа или в качестве дополнения к нему вы можете использовать инструменты «Заплатка» (Patch Tool), Healing Brush Tool, Spot Healing Brush Tool
Возвращаем текстуру на место
Теперь, когда вы удалили все швы на изображении, превратив ее в бесшовную текстуру, необходимо вернуть её на место. Конечно, вы можете не возвращать ее, а использовать в том виде, в котором она сейчас есть — со смещением. Так можно поступить для бесшовной текстуры травы или бесшовной текстуры камней, каменной или кирпичной кладки. Однако такое смещение и результирующая текстура практически неприемлемы для текстур деталей, например, sci-fi стены или sci-fi плитки пола, создание которой рассматривается в , поскольку оставляет по краям затайленной 3D модели половинки текстур.
Проверка бесшовности текстуры и коррекция швов текстуры
Чтобы проверить, насколько «бесшовной» получилась ваша текстура, вы можете, если сместить текстуру не на 256 пикселей по вертикали и горизонтали, а например на +128 и +128 пикселей, или на -128 и +128 пикселей, или на +128 и 0 пикселей и так далее. Только не забывайте (а лучше записывайте) на сколько пикселей и в какую сторону каждый раз смещали текстуру, чтобы иметь возможность вернуть ей изначальное нулевое смещение. Если подобное смещение выявило нарушение бесшовности, то подредактируйте стыки текстур, как было описано выше, чтобы избавиться от швов на текстуре (смещенной). Не забывайте, что не стоит залезать на края изображения, чтобы опять не пришлось править несовпадения краев текстур.
Повторите проверку несколько раз с разными значениями для смещения по вертикали и горизонтали, чтобы убедиться, что вы создали бесшовную текстуру.
Используем инструмент Осветлитель (Dodge Tool) и Затемнитель (Burn Tool) для осветления изображения в Фотошопе
Если текстура неоднородно освещена, то при затайливании текстуры, например, в игровом движке Unity3d, Unreal Engine, Amazon Lumberyard, Cryengine и других, или в 3D редакторах 3ds MAX, Cinema4D, Blender и т.д., такие затенения образуют повторяющийся узор. На небольших расстояниях камеры или точки наблюдения такой эффект не особо заметен. Чем больше камера будет удаляться от поверхности с такой затайленной текстурой, тем сильнее будет заметен эффект паттерна.
Чтобы избежать подобного эффекта, необходимо, чтобы все участки текстуры были одинаково осветлены/затемнены. Для осветления текстуры (отдельных ее участков) вы можете воспользоваться инструментом «Dodge Tool «, работа с которым более подробно описана в ///уроке про осветление карты высот для создания ландшафта.
На рисунке показаны инструменты осветления и затемнения изображения Dodge Tool и Burn Tool.
Как и где еще используются затайленные текстуры
После того, как вы узнали, как сделать бесшовную текстуру в Фотошопе, давайте посмотрим, где еще могут быть использованы бесшовные текстуры, созданные в Фотошопе.
Получившуюся бесшовную текстуру можно использовать для раскрашивания ландшафтов или 3D моделей в Unity3d.
На рисунке показан 3D ландшафт, созданный в Unity3D в одном из уроков по созданию террейнов в Unity3D.
Результирующую бесшовную текстуру можно также сохранить в качестве паттерна или кисти для Фотошопа.
На рисунке показан процесс создания паттерна для Фотошопа из изображения.
В следующем уроке я расскажу, как сделать бесшовную текстуру в GIMP.
[email protected]
Post Views: 31 327
Все гениальное — просто!
Основная цель этой статьи – это показать некоторые приемы и правила текстурирования, которые поднимут ваши текстуры на новый уровень качества. Все советы, которые вы прочитаете в этой статье – это не единственный метод решения проблем, но судя со своего многолетнего опыта создания текстур, могу сказать, что эти методы работают наилучшим образом (быстро и качественно).
1. Выразительность материала – что это такое?Понятие выразительности материала я буду использовать очень часто.
Демонстрация НЕ(!)выразительности материала.
Но вообще, в конечном счете, не имеет особого значения, выглядит сама текстура хорошо или плохо, если она отлично смотрится уже на готовой модели.
Однако, отличный способ проверить качество текстуры – это взглянуть на раскладку и отметить для себя, можно ли распознать, где какой материал (метал, камень, резина и т.д.) или определить какая часть модели здесь развернута.
Но если работаешь над современными материалами или материалами нового поколения (NextGen materials), то это не всегда возможно. Тем не менее, если все же можно распознать материал, то это отличный шанс, что материал будет отлично выглядеть и на модели. Но если материал распознать не удается, то большая вероятность того, что вы будете смотреть на набор случайных цветов и пикселей, но на самом деле это будет должно было быть металлом.
(Использование фотографий в качестве текстуры может легко это исправить, но об этом ниже.)
Помимо хорошей диффузной карты (diffuse map ) также большое значение имеет качество карты отражений (specular map ). Существует множество инструментов, которые создадут карту отражений за вас, но они не дают нужного контроля. Особенно когда вы работаете над разными материалами, размещенными на одной текстуре, или с ярким текстом.
Поэтому Photoshop остается единственным отличным инструментом для создания карт отражений. Используя его можно сделать маску, которая будет исключать области, где карта отражений не нужна. А если у вас на текстуре присутствует белый текст, то с помощью маски можно приглушить яркость этого текста на карте отражений.
Выше приведена картинка, где показано, как можно создать карту отражений для простой текстуры с двумя материалами: бетон и металл. Каждый материал имеет свою собственную коррекцию уровней (Levels 1 и 2) с маской. Вы также можете вместо коррекции уровней использовать регулировку яркости/контраста (Brightness/Contrast), но использование уровней дает побольше контроля над картинкой. А сверху корректирующих слоев (Levels 1 и 2) лежит Hue/Saturation для того чтобы карта отражений стала черно-белой.
2. Базовый материалХорошим тоном при создании текстуры считается старт работы с базового материала. Если вы создаете материал металла, то сначала создайте равномерную (желательно повторяющуюся — tiled) текстуру, сплошь заполненную металлом. Если металл нужен поврежденный, то повреждения можно дорисовать поверх базового материала.
Обязательно сохраняйте базовые текстуры. Таким образом, если вам опять понадобится создать материал металла, то вы берете базовый материал и создаете на его основе новый.
Это очень удобно, если вы работаете над рядом типовых объектов или зданий. Таким образом, начиная с базового материала для каждого типа материалов на вашей текстуре, можно создать хорошую выразительность материала. После того как каждая часть будет иметь свой материал, можно начинать добавлять детали.
3. Вся красота в невидимых на первый взгляд деталях.Качественная текстура на low-poly модели.
Это то, что множество людей пропускают при создании текстур – мелкие детали . Они не видны при беглом просмотре, но очень сильно увеличивают интересность и живость текстуры.
В зависимости от стилистики и тематики вы можете использовать как минимализм в деталях, так и экстремально насыщенные деталями текстуры.
Ваша работа как раз и заключается в том, чтобы дать зрителю объект который офигительно выглядит. Неуловимые детали как раз идеальны для этой задачи, а этими деталями может быть все что угодно. Наклейки, остатки краски, заклепки, болты, какие-то каракули черным маркером, грязь, жировые пятна, да все что угодно.
Но основной момент – это сделать все это незаметным/неброским. Если с этим переборщить, то эффект будет противоположным и картинка испортится.
Объект на картинке ниже – это очень хороший пример создания деталей в нужном количестве. Как вы, наверное, заметили, диффузный цвет сразу подгружается с деталями и большинство из них незаметны на первый взгляд. На объекте кусочки пленки, разводы, наклейки с текстом, царапины, заклепки, этикетки и др. Именно эти детали придают реалистичного вида двадцати двум треугольникам модели.
4. Делайте ваши текстуры четче.Будьте осторожны. Некоторые любят четкие (sharp ) и резкие (crisp ) текстуры, а другие – оставляют их немножко размытыми.
Лично я предпочитаю четкие текстуры, поэтому я всегда финальным шагом применяю фильтр четкости (Unsharp mask в Photoshop) ко всей текстуре.
По существу, я просто делаю копию всей своей текстуры и делаю эту копию самым верхним слоем. Потом применяю к этому слою фильтр Unsharp mask (несмотря на свое противоречивое название, этот фильтр сделает вашу текстуру именно четче).
Я предпочитаю вместо Sharpen использовать фильтр Unsharp mask — с ним вы 100% не испортите текстуру. К тому же Unsharp mask дает дополнительный контроль над финальной картинкой.
Есть большой соблазн сделать ну очень четкую текстуру, но это может привести к разного рода артефактам на картинке.
Первая картинка (normal) – это оригинальная текстура. Так она выглядит в Photoshop без каких-либо коррекций.
Вторая картинка – это оригинал с примененным фильтром Unsharp mask на 70%. Очень хорошо выступили детали на краске и царапины.
Правда теперь очень выразительным стал блик на горизонтальном ребре, но его можно немного притушить. (Сделать это нужно на оригинальной текстуре и заново применить фильтр Unsharp mask. В таком случае вы будете иметь на выходе полностью четкую текстуру и сохраните в идеальном порядке ваш.psd файл).
На последней картинке ясно видны артефакты, которые вам точно не нужны. Здесь явно доминирует белый цвет, а также ярко оранжевые пиксели по бокам краски и т.д. Такого нужно тщательно избегать.
5. Будьте осторожны, используя фотографии.Тщательно избегайте использовать фотографии при создании своих текстур. О причине этого читайте в одном отличном . Очень редко выпадает возможность использовать часть фотографии непосредственно в текстуре без добавления/убирания деталей или подгона фото под UV-развертку.
Я не говорю, что это невозможно. Некоторым специалистам по текстурированию это очень хорошо удается. Но в большинстве своем, использование фотографий для текстур – это прерогатива новичков. Но лучше бы им посмотреть на другие техники создания базовых текстур.
6. Используйте фотоналожение (Photo overlays).Даже с учетом совета №5, использование фотографий – это не всегда плохо.
Фотографии – это отличный способ добавить мелких деталей. Т.е. таких деталей, как мелкие поры, которые разбавляют простую однородную заливку и делают модель не такой мультяшной.
Лучший способ продемонстрировать, о чем сейчас идет речь — это показать текстуру с и без фотоналожения.
Лучший способ получить хороший эффект – это пройтись по всем режимам смешивания (blending modes ) в Photoshop»е и выбрать наиболее подходящий для пары: базовый материал + фото.
Обычно хорошо работают режимы Overlay и Vivid Light . Результат от других режимов смешивания сильно зависит от картинки, но очень часто получается выжженная картинка. Но всегда нужно держать в уме тот факт, что фотоналожение должно быть едва различимым .
Эти маленькие детали должны быть совсем неброскими.
Еще одна вещь, которую нужно всегда держать в уме – это масштаб деталей .
Если вам нужно добавить небольшой дефект на краске, как на второй картинке дверей, то вы должны подобрать масштаб деталей такой же, как масштаб вашего объекта. Если масштабы не будут совпадать, то зритель сразу заметит подвох, поскольку эти дефекты краски будут неуместны.
Для лучшего эффекта наложения советую уделить немного времени опции Blend if (Смешать если) для каждого слоя.
Это опция чрезвычайно полезна, если у вас на картинке есть очень светлые или темные участки, которые портят всю красоту. С помощью Blend if вы значительно можете их сгладить. А если зажать Alt и потянуть ползунок , то он расщепится и получиться сглаженный переход между тем, что смешивается и тем, что не будет смешиваться.
Подпишитесь на обновление блога (вот ).
Подяка спонсору, сайту, который поможет вам с автопродажей любой марки автомобиля. Те, кто хоть раз сталкивались с проблемой продажи авто, оценят этот сайт по достоинству.
Как известно, шмоток модов много не бывает, но каждому хочется выделить своего персонажа из толпы довакинов\нереваринов\эльфиек\вампиров… 🙂
Прекрасно знаю, как по-разному может выглядеть одна и та же вещь с разными текстурами. Поэтому, решила написать небольшой тутор по созданию текстур и ретекстуров для готовых моделек. А если точнее, то распишу последовательность действий, в которой я обычно работаю.
Недавно сделала несколько новых моделей, на примере одной из них буду показывать и рассказывать. Итак:
Название: Текстуры — тонкая материя.
Уровень сложности: Адепт.
Нужности: Photoshop+NVIDIA Tools Normalmap Filter+DDS Plugin, Autodesk 3D Max+Nif Plugin (Importer-Exporter).
Рейтинг: NC-17.
Размер: Миди.
Статус: Закончено.
Текстуры во многих играх «запаковываются» в форматDDS, по своей сути это еще один алгоритм сжатия изображения, как PNG или JPEG, который имеет гибкую систему настроек. Чтоб создавать игровые текстуры, нужно у
Если открыть чужую текстуру и с ходу начать поверх нее работать, то можно перепутать верх и низ, один элемент с другим, лево и право (да-да,так тоже можно). Некоторые текстуры интуитивно понятны, а в некоторых черт ногу сломит. Дабы не гадать на бобах и не запускать по сто раз игру для проверки, надо выяснить, с чем мы имеем дело:)
Цель описанных далее манипуляций — определить, как лучше работать над текстурой в 2D. Если вы ровненько наложили красивые текстурки и не можете понять, почему же в игре великолепные узоры поплыли, то 3D вам в помощь.
Нам понадобится рассмотреть выбранную модель в 3D максе. Макс у меня открыт почти все время, пока я делаю текстуру, в нем можно быстро посмотреть результат манипуляций в 2D редакторе, подключить сетку для лучшей ориентировки и т.д.
Модели в Скайриме (и еще в некоторых играх) в формате Nif. И для экспорта в макс нужно поставить Nif Plugin .
Нажимаем на эмблему макса в левом верхнем углу, Import.
Легче всего взять файл прямо из Data, но если вы выложили модель в любое другое место, проверьте, чтобы в пути к файлу не было русских букв (макс может выдавать ошибку). У меня импортер не ругается только на русскоязычные название жестких дисков и рабочий стол, но у всех по-разному, у вас может с рабочего стола не открыть.
Опять жмякаем Import.
Готово, модель с нами.
Выделим ее ЛКМ . Справа, на панели инструментов заходим во вкладку Modify , в списке у вас будет три модификатора.
Щелкаем на верхней строчке ПКМ , выбираем Collapse to -> Yes . (Просто мера предосторожности, чтоб избежать вылетов.)
Добрались до главного. Чуть выше, в Modifier List находим модификатор Unwrap UVW . Весь список не листаем, достаточно щелкнуть по нему и нажать U на клавиатуре, все просто. У меня этот модификатор до кучи вынесен на отдельную кнопку, прямо под списком, вместе с другими «горячими» модификаторами:D
[Для справки: этот модификатор позволяет присвоить пространственным точкам модели (вертексам) такое значение на плоскости, при котором рисунок, наложенный в дальнейшем на плоскость в 2D редакторе, не будет искажен на данной объемной модели. ]
Open UV Editor.
Открывшееся окно разворачиваем, в нем нам нужен пункт рендера развертки…Tools -> Render UVW Template.
Теперь выберем размер в пикселях. Корректными значениями будут: 8х8, 16х16,….512х512, 1024х1024, 2048х2048, 4096х4096. Выбирайте размер под свои нужды. Обычно я беру 4к или 2к (для больших и мелких объектов соответственно), изначальный большой размер дает лучшее качество при дальнейшем сжатии. 4к можно потом уменьшить на 2к, 2к на 1к и т.д. без значительных потерь. Уменьшать — не растягивать:D
Render UVW Template.
Полученное изображение сохраняем в формате PNG. Формат PNG очень классный, он сохраняет прозрачность. На кой черт оно нам надо? Изображение помещается в фотошопе на самый верхний слой, оно прозрачное и не содержит ничего лишнего, кроме граней модели. Если исходные текстуры на выбранной вами модели очень мусорные и невозможно из них понять, что к чему относится, то отрендеренная развертка поможет четко разграничить объекты.
Как я уже писала в самом начале, 3D макс оставляю открытым почти все время текстурирования. Есть еще несколько вещей, которые хотелось бы упомянуть.
Если после рендера все еще остается непонятным, какой элемент развертки за что отвечает, то можно использовать окно Unwrap , чтобы все прояснить. В левом нижнем углу нужно отметить «выделение по полигонам» и «выделение по элементу». Это позволит выделить элемент полностью, нажав на любой полигон, относящийся к нему.
Во вьюпорте элемент тоже выделяется.
Очень удобно для выявления вот таких маленьких объектов.
Развертки бывают разные..
Правильно сделанная развертка — залог вкусной текстурки. :3 Плохая развертка несет с собой отчаяние, разрушение и багет:С Она непредсказуема, с ней сложно работать в 2D редакторе. Прежде чем браться за ретекстур не лишним будет проверить, а стоит ли?
Material editor -> Diffuse -> Checker.
Перетаскиваем сферу (материал) на объект. Это стандартный материал макса для проверки на вшивость. Представляет из себя «шахматную доску». Там, где растягиваются квадраты, растянется и итоговая текстура. Все дело в степени потянутости…Есть приемлемые растяжения, а есть не совместимые с жизн работой в 2D редакторе. Некоторые модели лучше оставить в покое, серьезно..для безопасности своих же нервов.
При желании можно увеличить тайлинг (квадраты уменьшатся), чтобы оценить адекватность развертки на мелких деталях.
Плохо._____.
Приемлемые потягушки.
Сразу несколько примеров.
Все хреново:D
Обычно никто не заморачивается над мелкими деталями (шнурки, тонкая подошва, люверсы, заклепки, ремешки) — как развернулись, так и развернулись. Они могут растягиваться, лежать в куче, перекрывать друг друга. В подобных случаях, вытянуть ретекстур, не затрагивая исходную развертку, можно, но сложно. Одним из простых решений является однотонная заливка.
Еще чекер помогает увидеть соразмерность объектов. Больше квадраты — меньше места на развертке, меньше квадраты — больше места на развертке. Чем больше объект (платье, брюки, целое тело), тем больше информации в пикселях он потребует для качественного результата. Если маленький объект (бусина, пуговица, манжет) на развертке увеличен в ущерб бОльшему, это не есть гуд:С
Адекватная соразмерность.
Что-то не так…
Чужая модель — потемки. Если свой собственный меш я знаю от и до, какие где швы находятся, имеются ли искажения, как части развертки соотносятся друг с другом по размеру..и прочие мелочи, то чужой меш приходится изучать.
Ладно,перейдем уже к фотошопу.
Начнем с создания Diffuse map, а, проще говоря, нарисуем карту цвета. Одно важное действие, которое полезно предварительно сделать. Создать «маску» для каждого элемента. В кавычках потому, что это не маска слоя. Это всего один слой, на котором у меня лежать все силуэты элементов, залитые каким-нибудь одним цветом.
Вот так это выглядит.
Зеленые линии — границы элементов (верхний слой).
Маску всегда создаю с небольшим припуском, с помощью инструмента «перо». Никакие сглаживания не делаю, только грубое выделение. Главное — не оставлять открытые участки.
Все, что происходит в Вегасе, остается в Вегасе.
Все, что происходит дальше — находится между первым слоем и слоем с маской. Слоев получается много, очень много..слишком:\ (Я делаю резервные копии всего, что только можно, поэтому к концу работы собирается огромная группа «Резерв».)
Для каждого объекта (или материала) создаю свою папку, чтобы они не зависели друг от друга. Я не сливаю слои до последнего, чтоб была возможность скорректировать один элемент, не затрагивая остальные.
В процессе работы на слоях скапливается много шлака. В любой момент можно встать на слой-маску, сделать выделение нужного объекта, инверсию выделения и быстро удалить весь мусор. Или нарезать и примерить пачку фото, в поисках подходящей текстуры.
Кстати, не всегда можно найти подходящую под замысел картинку в и-нете, иногда приходится действовать по вдохновению, my brothers. Например, за основу для подошвы я взяла фото собственного сапога. И вообще, стараюсь фотографировать все, что может пригодиться для текстурирования. Также для создания подошвы мне понадобились старый забор, гвоздодер и наждачка.
Еще слой-маска полезен, если у вас нет возможности или желания запекать карту теней. Выделяем нужный объект и, ориентируясь по слою с разверткой, чисто и быстро накидываем тени.
Cнова открыв Material editor , можно примерить текстуру на модель: Diffuse -> Bitmap -> Твоя_текстура.jpg\png\tiff….
Теперь уже можно в целом посмотреть на то, что мы натворили. Включив сетку, увидим, как исправить тот или иной косяк, на какое конкретно место что нужно передвинуть.
Теперь пора оживить модель. Normal map — та самая карта, которая дает плоскому Diffuse map рельеф. Грубо говоря, эта карта создает реакцию на свет и тень. Наложив нормали на лоу-поли модель можно добиться эффекта объема.
Мидл-поли штаны и хай-поли обувь.
Normal map штанов.
Реакция на освещение.
Карту для штанов я снимала с хай-поли модели.
Нормали могут выглядеть по-разному. Для рендера в 3D максе, например, подходит ч\б версия диффуза, но он также воспринимает и другие виды нормалей. Далее я распишу один из способов создания подобной карты в фотошопе.
Нам понадобится установить NVIDIA Tools Normalmap Filter .
Сперва нужно обесцветить созданный ранее диффуз. Но перед этим важно учесть одну особенность: темные оттенки воспринимаются как углубления, а светлые — как выпуклости. Что из этого следует? Нужно обратить внимание на материалы: царапины всегда будут светлее основы, а т.к. царапины — это углубления, то придется их сделать темными, чтоб фильтр их понял правильно.
Например, на этой текстуре присутствует два материала: кожа и металл. Оба они имеют царапины.
Простое обесцвечивание даст нам инверсию света и тени при рендере. Правильная основа для применения фильтра будет выглядеть примерно так.
В данном случае я инвертировала сразу оба материала.
Что касается наших ботинок, то на них есть некоторые материалы, которые не нуждаются в инверсии. Колдовать придется с металлом, темными швами и царапинами на подошве. Подошва представляет собой наиболее сложный объект, т.к у нее есть ребристая поверхность, которую НЕ нужно инвертировать, и царапины, которые нужно инвертировать. Упорядочивание слоев и групп может показаться слишком педантичным, но сейчас без этого было бы очень сложно.
Первым шагом я создаю две новые группы Normal и Diff (да-да, снова группы, еще больше групп). В Diff скидываю весь диффуз и отключаю тени, сейчас они не понадобятся. Далее, стоя на группе Diff, нажимаю Ctrl+Alt+Shift+E. Создается слой со всем содержимым, который отправляется в папку Normal (можно перед этим еще фон отключить, но это не столь важно). Применяем к нему обесцвечивание.
Группу Normal пока можно скрыть и заняться сложными пациентами. После обработки, накладываю инвертированные объекты поверх обесцвеченных. Можно еще подтянуть контраст или наоборот, приглушить некоторые моменты. Теперь все готово к применению фильтра Normalmap .
Заходим в Фильтр -> NVIDIA Tools -> NormalMapFilter . В окне настроек можно поменять Scale, попереключать каналы (задействует красный, зеленый, синий или все сразу) и посмотреть на результат. Сейчас меня устроили такие настройки.
Результат можно оставить как есть, он вполне самодостаточен.
Нормал, снятый с хай-поли модели, имитирует общую форму, нормал, полученный в фильтре, имитирует микрорельеф. Их можно миксовать между собой, чтобы добиться более реалистичного эффекта.
Вот что получаем на выходе.
Рельеф сразу же хорошо прочитывается. Но, на мой взгляд, выглядит плосковато, при приближении это видно.
Добиться лучшего эффекта можно несколькими простыми действиями. Копируем полученный слой, ставим ему режим перекрытия и применяем на нем фильтр Размытие по Гауссу . А дальше только нажимаем Ctrl+J (скопировать слой) и Ctrl+F (применить последний фильтр, в нашем случае «размытие»).
Теперь больше похоже на правду.
Кратко о Specular map (карта блеска). Тут уже более-менее без выкрутасов. Нам понадобится простой ч\б вариант диффуза. Регулировка производится таким образом: черный цвет — нет блеска, белый цвет — есть блеск. Металл может быть ржавый, тусклый. Или наоборот — отшлифованный. Кожа может быть матовой, потертой или лакированной. Свойства материала настраиваются в соответствии с задумкой.
Спекуляр может быть сохранен как отдельная карта или вставлен в альфа-канал нормала.
Последним пунктом является сохранение созданных текстур в DDS формате. Файл -> Сохранить как , выбираем расширение DDS . В открывшемся диалоговом окне нам предлагают выбрать тип текстуры и степень сжатия. Подробно про разные алгоритмы сжатия можно почитать и еще . Сейчас я сохраняю в DXT5 .
Теперь можно закинуть получившиеся файлы в нужную директорию и посмотреть на результат в игре.
Достаточно было зайти в Скай один раз, чтобы убедиться, что все в порядке.
All done. Постаралась рассказать обо всем понемногу. Надеюсь, вы нашли для себя что-то полезное в этом руководстве.
Не удается найти страницу | Autodesk Knowledge Network
(* {{l10n_strings.REQUIRED_FIELD}})
{{l10n_strings.CREATE_NEW_COLLECTION}}*
{{l10n_strings.ADD_COLLECTION_DESCRIPTION}}
{{l10n_strings.COLLECTION_DESCRIPTION}} {{addToCollection.description.length}}/500 {{l10n_strings.TAGS}} {{$item}} {{l10n_strings.PRODUCTS}} {{l10n_strings.DRAG_TEXT}}{{l10n_strings.DRAG_TEXT_HELP}}
{{l10n_strings.LANGUAGE}} {{$select.selected.display}}{{article.content_lang.display}}
{{l10n_strings.AUTHOR}}{{l10n_strings.AUTHOR_TOOLTIP_TEXT}}
{{$select.selected.display}} {{l10n_strings.CREATE_AND_ADD_TO_COLLECTION_MODAL_BUTTON}} {{l10n_strings.CREATE_A_COLLECTION_ERROR}}проект в категории Логотипы, 30.05.2017 в 23:46
Бесплатно зарегистрируйся и получай уведомления о новых проектах по работе
l | Заказчик Отзывы фрилансеров: + 6 0 — 0 Зарегистрирован на сайте 6 лет и 2 месяца | Бюджет: по договоренности |
Необходимо на постоянной основе делать бесшовные текстуры. Элементы для текстур рисовать не нужно!!!
Предоставим готовые отрисованные в векторе, их нужно будет приводить к одной цветовой гамме и красиво компоновать в текстуры. Часть текстур нужно сделать с нуля с большим количеством элементов, часть простые (расставить элементы в шахматном порядке), часть текстур предоставим готовых (зигзаги, полоски, горох), их нужно покрасить в соотвествии с цветовой гаммой и сохранить в двух форматах ( eps и jpg). Предоставим плагин для иллюстратора, который упрощает создание текстур, сам ровно расставляет элементы по границам и разрезает их. Текстур нужно будет много, сроки обсуждаемы.
Работа по договору (отправка почтой)
Во вложении примеры текстур.
Просьба указать стоимость за конкретные примеры во вложении.
Разделы:
Опубликован:
30.05.2017 | 23:46
Теги: создать логотип онлайн, логотип сделать, заказать логотип, придумать логотип, разработать логотип, создать лого
Итак, приступим. Сразу оговорюсь, что «урок» рассчитан на тех, кто как минимум знает что такое «Corel DRAW» :))))). Я использую версию Corel DRAW 4X, но для работы подойдет любая версия этого векторного редактора, имеющеяся у вас под рукой. И еще нам понадобятся векторные элементы (рисунки) из которых мы будем составлять текстуру. Я использую элементы собственного изготовления, но можно взять картинки и из имеющихся у вас векторных клипартов (если создаете текстуру не для «коммерции», а для собственного удовольствия). Действие 1. Рисуем границы будущего фрагмента текстуры. Выбираем инструмент «квадрат» на панели инструментов (1), для того, чтобы фрагмент вышел равносторонний, не забываем активизировать «замочек» (2) или просто рисуем квадрат мышкой одновременно удерживая клавишу Shift. Для того, чтобы облегчить себе дальнейшую работу, приводим значения сторон квадрата к целым числам, например 100х100 мм (3). Действие 2. Заполнение квадрата. В произвольном порядке располагаем наши элементы по краю границы квадрата. Элементы должны частично выходить за рамку. Однако, следите, чтобы они не выходили за верхний и нижний край будущей текстуры. Группируем закомпонованные элементы (меню: Arrange-Group или Ctrl+G) и с помощью меню «Position» (меню: Arrange-Transformations-Position или Alt+F7) дублируем их на противоположную сторону квадрата (H:100, «Apply To Duplicate») Аналогичным способом оформляем верхнюю и нижнюю границы рисунка (V:100, «Apply To Duplicate») . Пустующую середину «квадрата» заполняем (копируем и размножаем) этими же элементами в произвольном порядке. Поздравляю, наша бесшовная текстура готова на 90% :)) Действие 3. Убираем лишнее. Группируем все мелкие элементы рисунка (цветы, загогулины и божьи коровки), заливаем наш белый квадрат однотонной зеленой заливкой. Способом, описанным в первом действии рисуем новый, бОльший по площади квадрат прямо над нашей композицией. С помощью меню «Trim» ( меню: Arrange-Transformations-Shaping — Trim) «вырезаем» маленький зеленый квадрат из большого прозрачного. Получившейся из большого квадрата «рамкой» с помощью все того же «трима» «обрезаем» у сгруппированных элементов части, входящие за края зеленого квадрата. Теперь большая «рамка»-квадрат нам не нужна, смело ее удаляем и… … получаем бесшовную текстуру!:)) Ура! Теперь можно проверить, как она стыкуется: По-моему — неплохо:) Bonus! Всем, кто дочитал до конца — картинка созданная на этом «уроке» в подарок!:) Можете взять ее в качестве бэкраунда для украшения своих виртуальных страничек 🙂 |
Как сделать бесшовную текстуру в Photoshop (Redux) — Medialoot
Более простой способ создания бесшовных текстур
В этом уроке я хотел вернуться к теме создания бесшовных текстур в Photoshop и поделиться с вами новой, невероятно простой техникой, которая делает весь процесс намного проще, чем раньше. Он даже работает с некоторыми текстурами, которые раньше я бы назвал «необратимыми».
Шаг 1
Для этого урока я использую anti-tree-8.jpg (бесплатная загрузка) из набора Antique Wood Textures на Medialoot. Обратите внимание, хотя этот метод выравнивает текстуры, исходное изображение, которое вы выбираете для использования, должно быть высокого качества и относительно сбалансированным для начала.
Откройте текстуру в Photoshop и используйте инструмент «Кадрирование» с квадратным соотношением сторон и 2000 пикселей для ширины и высоты. Следует установить флажок Удалить обрезанные пиксели .
Шаг 2
В моей предыдущей статье я рассказал о стандартном методе создания мозаичных изображений в Photoshop, который заключается в использовании фильтра «Смещение» и последующем смешивании краев с помощью инструмента «Клонирование».Прежде чем мы попробуем новый метод, давайте сначала протестируем фильтр Offset, чтобы увидеть, с чем мы будем здесь работать.
Перейдите к Фильтр> Другое> Смещение и введите +1000 пикселей для обоих параметров по горизонтали и вертикали и нажмите OK.
Теперь, даже если вы волшебник с инструментом Clone, эти швы будет нелегко сгладить:
Шаг 2 (снова)
Так что давайте забудем об этом, отмените фильтр смещения и начните заново.Вместо этого продублируйте фоновый слой и установите непрозрачность верхнего слоя на 50% .
Шаг 3
Выделив верхний слой, перейдите в Edit> Transform и нажмите Flip Horizontal , а затем также Flip Vertical .
Шаг 4
Выберите оба слоя и объедините их вместе (CMD + E или CTRL + E).
Шаг 5
Теперь давайте снова попробуем это смещение. Как по волшебству, результат сейчас намного лучше, чем по сравнению с предыдущей попыткой.Швы все еще видны, но похоже, что их можно легко соединить.
Шаг 6
Используйте инструмент «Клонирование» с круглой кистью примерно 100 пикселей и 30% Hardness . Выберите подходящий источник, удерживая нажатой клавишу ALT и щелкнув область, которую вы хотите использовать. Затем клонируйте текстуру, используя волнистую линию слева направо, закрывающую шов.
Шаг 7
Повторите последний шаг, на этот раз для вертикального шва.
Шаг 8
По-прежнему используя инструмент «Клонирование», уберите любые аномалии в текстуре или отличительные элементы, которые появляются более одного раза и выдают тот факт, что текстура была дублирована.
Шаг 9
Чтобы восстановить часть исходного качества текстуры и замаскировать клонирование, примените фильтр Sharpen 1-2 раза по , пока не будет достигнут желаемый эффект.
Шаг 10
Это также хорошее время для окончательной корректировки, например, некоторых тонких корректировок уровней.
Шаг 11
Наконец, перейдите в меню Edit и выберите Define Pattern .. дайте вашему шаблону имя и нажмите OK.
Результат и заключение
Вот бесшовная текстура в действии при 25% увеличении. Там, где швы, практически не заметно.
Прелесть этой техники в том, что для создания бесшовных текстур требуется очень много ручной работы. Этот метод работает практически с любой текстурой и дает отличные результаты. Недостатком зеркального отражения и наложения текстуры является то, что это немного визуально изменяет текстуру.
Создание бесшовных текстур в Photoshop Урок
Совместимость:
Photoshop 7, CS-CS6, CC
Из этого туториала Вы узнаете, как создать бесшовную текстуру в Photoshop.Я создал учебник с помощью Photoshop CS2, но он должен работать одинаково во всех версиях. Это работает только с текстурами , но не с узорами . Текстуры — это такие вещи, как гранит, грязь или кора. Узор — это что-то вроде кружева или чего-нибудь с рисунком на нем.
Изображение, которое я использую для этого урока, принадлежит Анджеле Сассер из deviantArt (Спасибо, Анджела!). Вы можете следовать руководству, используя то же изображение, что и я, если хотите. Вы можете найти изображение здесь, чтобы помочь вам следить за происходящим.
1. Прежде всего, взгляните на изображение. Одна его сторона значительно темнее другой? Как вы можете видеть, здесь правая верхняя часть немного темнее остальных. Это может затруднить получение бесшовного изображения, поэтому я собираюсь обрезать изображение.
2. Я обрезал его до нижней левой части изображения выше, которое выглядит довольно однородным по цвету. Если вы не знаете, как обрезать изображение, проще всего будет использовать инструмент Rectangular Marquee Tool (нажмите M), чтобы выбрать часть изображения, которую вы хотите сохранить.Затем выберите «Изображение»> «Обрезать ..» в главном меню. Он должен выглядеть примерно так (но не обязательно).
3. Части изображения, которые мешают нашему образцу быть бесшовным, находятся там, где встречаются края, верно? Итак, давайте переместим эти края, чтобы мы могли лучше их видеть. Да, мы можем это сделать! В Photoshop есть замечательная функция для создания бесшовных текстур, которая называется «Смещение».
Вы найдете его в главном меню: выберите «Фильтр»> «Другое»> «Смещение
».Используйте настройки, аналогичные тем, которые вы видите на моем изображении здесь.При этом берется край правой стороны изображения и оборачивается его к левой стороне (и оборачивается нижняя часть к верху), эффективно перемещая предыдущие «края» в середину изображения!
4. Видите те строки, где вещи не совпадают? Вот где были наши старые края. новых края были откуда-то из середины изображения, поэтому теперь они полностью бесшовные. Все, что нам нужно сделать, это исправить те видимые, и мы в порядке!
5.Теперь самое сложное. Нам нужно как-то очистить эти видимые края, и инструмент Clone Stamp Tool — способ сделать это. Он находится в окне инструментов, где я выделил его красным, или вы можете просто нажать «S», чтобы сделать его активным.
Кисть, которую вы решите использовать, также очень важна. НЕ используйте только стандартную круглую кисть или что-нибудь со слишком «мягкими» краями. Вот несколько предложений. В разделе «Кисти Natural 2» подойдет любая из 3 кистей для мела. Практически любая из кистей в «Natural Brushes» работает.Я также предпочитаю использовать несколько кистей из набора «Wet Media Brushes». Капельная вода, сухая кисть на полотенце, краска на шероховатой текстуре и грубая сухая кисть — одни из моих любимых. Особенно, если вы работаете с землистой текстурой, как эта. Какую кисть вы будете использовать, будет зависеть от шероховатости вашей текстуры. Если это что-то довольно мягкое, возможно, вам подойдет более мягкая кисть. Но я бы все равно держался подальше от круглых. Они оставляют очень отчетливые края.
6. Убедитесь, что ваша непрозрачность установлена где-то между 50-85%, как вы видите здесь.50% подходит для более мягких текстур, а приближение к 85% отлично подходит для таких грубых текстур, как эта. Я собираюсь использовать «Rough Dry Brush» из набора «Wet Media Brushes». Как вы можете видеть здесь, у меня размер около 29, а моя непрозрачность установлена на 82%.
7.Если вы никогда раньше не использовали Clone Stamp Tool, это может быть забавно. Он берет одну часть изображения и рисует ее копию в другом месте изображения. Итак, вам нужно найти красивую чистую часть изображения.Часть, на которой нет этой уродливой видимой линии. Возможно, где-то в правом нижнем углу. Удерживая ALT, щелкните левой кнопкой мыши в правой нижней части изображения.
Теперь начните закрашивать эту уродливую линию с левой стороны. Видите это маленькое перекрестие в правом нижнем углу? Это показывает вам, что инструмент клонирования штампа использует в качестве ориентира для того, что он в настоящее время рисует. Убедитесь, что перекрестие не заходит за край страницы или где-нибудь в некрасивую видимую линию, иначе вы получите беспорядок.Самый простой способ, который я нашел, — это нажать ALT и получить контрольную точку, а затем немного закрасить линию. Затем нажмите ALT в другом месте и получите еще одну контрольную точку, затем закрасьте линию в другом месте. Всегда следите за прицелом, чтобы убедиться, что он остается там, где вы хотите!
Когда вы перемещаете кисть вверх, ориентир / перекрестие перемещается вверх. Он будет точно повторять ваши движения.
Это может показаться сложным, но попробуйте. Вы поймете, о чем я.Может потребоваться несколько попыток, прежде чем вы действительно освоите инструмент штампа клонирования. Однако это очень удобно, если вы это сделаете!
Следует иметь в виду одну вещь. НЕ делайте слишком много усилий с этими четырьмя углами, где линии пересекаются с краями! Обведите эти области кистью меньшего размера и убедитесь, что она совсем не перекрывает край изображения. Помните, эти края должны оставаться бесшовными, и если вы будете слишком сильно с ними возиться, они больше не будут! Итак, вы можете рисовать БЛИЗКО к краю, но не полностью.(Это относится ко всем краям картины, а не только к четырем, где линии пересекаются с ними. Но эти неприглядные линии — единственная часть изображения, которую вы должны изменить, поэтому я выделил только их.)
8. Вот как выглядит мое изображение, когда я закончу. Вы больше не можете видеть эти строки!
9. А теперь проверим. Нам нужно убедиться, что он выглядит безупречно, верно?
Выберите «Правка»> «Определить узор …» в главном меню.Затем откройте новое изображение. Я сделал свой 1000 X 1000 пикселей, 72 пикселя / дюйм, цветовой режим RGB, а фоновое содержимое было белым.
Теперь создайте новый слой, щелкнув «Создать новый слой» в нижней части палитры слоев (если палитра слоев не отображается, выберите «Окно»> «Слои» в главном меню или нажмите F7).
10. Выберите инструмент «Заливка» на палитре инструментов, как показано здесь, а затем щелкните в любом месте холста. Какой цвет вы используете, не имеет значения.
11. В нижнем левом углу палитры слоев нажмите кнопку «Добавить стиль слоя», как показано здесь. Выберите «Наложение узора» в меню.
12. В появившемся окне щелкните маленькую стрелку справа от эскиза текущего выбранного рисунка. Прокрутите вниз (если есть полоса прокрутки) и выберите самый последний шаблон. Это должен быть тот, который мы только что создали.
После того, как вы выбрали это в качестве шаблона, вы должны увидеть его на своем холсте.Поиграйте с ползунком «Масштаб», чтобы быть абсолютно уверенными в том, что вы видите более одного экземпляра своей текстуры. Он должен быть достаточно маленьким, чтобы можно было видеть видимые края, если они есть.
13. Вы можете увидеть, как мой выглядит ниже. Вы можете увидеть повторяющийся узор, и если вы увеличите масштаб изображения и осмотритесь, то увидите, что линий почти не видно. Если это правда, то все готово! Если это не так, вы всегда можете вернуться к этой текстуре и исправить ее. Если вы не видите то место, которое нужно исправить, скорее всего, вы слишком близко подошли к краю с помощью штампа клонирования.Итак, сделайте еще один Filter> Other> Offset, и вы сможете увидеть это и исправить.
Вот и все! Теперь у вас должна быть полностью бесшовная текстура!
Конечно, одни текстуры в этом контексте будут выглядеть лучше других. Если в центре есть большое коричневое пятно, ваша текстура может не выглядеть так уж хорошо при повторении… потому что это будет очевидно. Остальные работают очень хорошо. Этот находится где-то посередине, поскольку вы можете ВИДЕТЬ повторяющийся узор, но это не так уж и плохо.
Я надеюсь, что вам понравился этот урок, и я надеюсь, что он отвечает на некоторые из ваших вопросов о том, как создать бесшовную текстуру. Если у вас есть вопросы, не стесняйтесь спрашивать!
Создание бесшовных мозаичных текстур в Photoshop
Бесшовные текстуры значительно упрощают жизнь. Они позволяют оперативно создавать УФ-картографию, могут использоваться в более широком диапазоне проектов и устраняют необходимость в дополнительной обработке. Создание бесшовных текстур в Photoshop действительно легко, но каждое изображение требует своей собственной серии правок и исправлений.Этот урок посвящен созданию каркаса, который можно применить к любой текстуре.
Преимущества мозаичных / бесшовных текстур
Текстурные плитки облегчают жизнь. Вам не нужно так сильно беспокоиться о UV-картировании, вы можете больше использовать изображения повторно, а постобработка станет меньшей головной болью. Проблема в том, что большинство изображений не являются бесшовными, особенно те, которые вы, возможно, сняли на камеру — реальный мир не так часто мозаики. Бесшовные текстуры также являются атрибутом, который помогает рыночным активам продаваться лучше и получать более качественные отзывы.Лично я избегаю текстур, которые не перекрывают как можно больше плиток — я знаю их негативное влияние на мой рабочий процесс.
Создание бесшовной текстуры
Photoshop может сделать с 2D-изображением практически все, что только можно представить, если вы готовы приложить усилия. Основным инструментом, используемым для создания мозаичных текстур в Photoshop, является фильтр Offset . Этот инструмент «оборачивает» края файла изображения вокруг краев холста, так что левый край будет выровнен по правому краю, а верхний край выровнен по нижнему краю.
Инструмент смещения обернул это изображение по краям холста так, что теперь правая и левая стороны соприкасаются.
На приведенном выше изображении, ширина которого составляла 2048 пикселей, применение фильтра смещения со значением по горизонтали 1024 пикселей (половина общей ширины) создает эффект плитки. В этом случае создается «линия стыка» там, где теперь встречаются два края изображения. Удаление линий стыков с изображений — вот как вы создаете бесшовные текстуры в Photoshop. Вероятно, правильнее было бы называть их текстурами Seam-Line-Less , но, знаете ли, они не так хорошо скатываются с языка! Ниже приведен ряд шагов, которые можно применить к большинству изображений, чтобы удалить линии стыка и создать текстуры, которые красиво мозаичны!
Шаг первый: предварительное редактирование
Предварительно обработайте изображение, чтобы удалить шум и сбалансировать экспозицию, используя корректировку слоев, маскирование и фильтры Photoshop
Мне нравится создавать текстуры с высоким разрешением и часто увеличивать текстуры с их исходных размеров до достичь этой цели.Некоторые типы редактирования проще и эффективнее применять до того, как произойдет какое-либо увеличение. Удаление шума — один из таких способов редактирования, который будет более точным и потребует гораздо меньше ресурсов процессора при применении к исходному изображению.
Еще одна правка, которую я делаю, когда моей конечной целью является удаление линий стыка, — это нормализация баланса экспозиции изображения. То есть; попытка сделать недоэкспонированные и переэкспонированные области менее выраженными. В большинстве случаев это может быть достигнуто с помощью настройки экспозиции. Этот шаг отличается для каждого изображения и не всегда необходим.Иногда, после некоторой попытки нормализовать экспозицию, я понимаю, что создание бесшовной версии определенной текстуры невозможно — или, по крайней мере, нецелесообразно.
Шаг 2. Балансировка структуры изображения
Использование инструмента «Перекос + деформация» очень полезно для выравнивания любого нечетного рисунка на изображениях.
Многие текстуры имеют структурный узор, который плохо укладывается. Текстура джутового коврика состоит из горизонтальных и вертикальных линий, на которых материал переплетен.Эти линии создают вид «рядов» внутри текстуры. Эти строки необходимо выпрямить, чтобы при мозаике изображения края линий пересекались с обеих сторон изображения. Не все изображения требуют этого шага, но его всегда следует учитывать.
Шаг третий: увеличение + кадрирование
Определите соотношение сторон текстуры и разрешение с помощью инструментов «Кадрирование» и «Размер изображения».
К этому моменту я показал изменения, внесенные в изображение в его исходных размерах. Такие фильтры, как «Убрать шум», намного эффективнее работают с изображениями с низким разрешением, а также немного проще применять преобразования изображений.Для редактирования нижних изображений требуется меньше памяти — вот и все. На этом этапе я хочу максимально приблизиться к моему окончательному желаемому размеру вывода и соотношению сторон. Идеальное соотношение сторон для изображения, которое должно быть мозаичным, составляет 1: 1 . Идеального разрешения не существует, но я предпочитаю работать в 4K (4096 x 4096) или выше при создании текстур, которые собираюсь использовать снова и снова. Я использую инструмент Crop Tool с соотношением сторон 1: 1 и нахожу хорошее кадрирование. Затем я использую Ctrl + Alt + I, чтобы изменить размер изображения с до 4096 x 4096 пикселей.
Шаг четвертый: Повышение резкости изображения
Повышение резкости больших и мелких деталей с помощью нескольких фильтров нерезкости с разными значениями радиуса
Значительно увеличенные изображения обычно также нуждаются в повышении резкости. То, как вы решите сделать изображение более резким, не имеет значения — важно только то, что оно будет иметь внешний вид, подходящий для ваших целей. Мне нравится использовать фильтр «Маска нерезкости» в Photoshop, и я считаю его эффективным в большинстве случаев. Раньше я использовал сторонние инструменты повышения резкости, но считаю, что использование встроенных фильтров более удобно.Я также не люблю зависеть от чего-то, что не всегда может быть доступно, если я использую Photoshop на другой рабочей станции. Я применяю фильтр «Маска нерезкости» два раза — один для крупных деталей и один для мелких — и использую следующие настройки для изображений 4K:
Большие детали : 2,8–3,2 пикселя Радиус
Мелкие детали : 0,8 — 1,2 px radius
Шаг 5: Плитка + удаление линий шва
Несколько разных подходов можно использовать для удаления линий шва после использования фильтра смещения
Все, что я сделал до этого момента, — это максимально упростить удаление линий шва.Несбалансированная экспозиция, блуждающие структурные линии и даже области различной резкости могут вызвать проблемы с мозаикой. Разложить текстуру в Photoshop очень просто — просто используйте фильтр «Смещение» с выбранной опцией «Обернуть края». Это «обернет» края изображения вокруг краев холста на основе заданных вами значений смещения. Я удаляю линии шва, используя следующий двухэтапный процесс:
Удалить горизонтальные линии шва : Фильтры> Другое> Смещение> По горизонтали> 50% ширины изображения
Удалить вертикальные линии шва : Фильтры> Другое> Смещение> Вертикальное > 50% от высоты изображения
Для каждого из этих смещений я редактирую изображение, удаляя линии стыка.Необходимые правки сильно различаются в зависимости от изображения. Иногда я захожу так далеко, просто чтобы понять, что удаление линий швов и поиск другого изображения займет слишком много времени. Когда я думаю, что этот шаг станет проблемой, я сделаю это перед любыми другими изменениями, чтобы понять, с чем я могу столкнуться. Самый надежный способ удалить линии шва — использовать инструмент Clone Stamp Tool . Это очень ручной процесс, который, в зависимости от изображения, может занять у действительно много времени.Я часто сначала использую другие подходы, такие как копирование других частей изображения, растягивание изображения или использование инструмента заливки с выбранной опцией Content-Aware.
Заключительные мысли
Создание бесшовных текстур в Photoshop легко, но требует особого внимания, чтобы гарантировать качественный конечный результат. Шаги, которые я здесь описал, не гарантируют, что ваше окончательное изображение будет идеальным, но они применимы для большинства случаев использования. Я часто экспериментирую с кадрированием + смещением, прежде чем делать что-либо еще, чтобы понять, насколько хорошо изображение будет мозаично. Не все изображения будут мозаичными настолько, чтобы оправдать трату времени на их редактирование. . Не бойтесь отказываться от одного изображения и искать лучший. Я провел много времени в Photoshop, создавая бесшовные текстуры на протяжении многих лет, и могу с уверенностью сказать, что чем больше текстур редактируется, тем легче найти те, которые будут мозаичными, до того, как будет изменен первый пиксель. Знание того, какие изображения не будут использоваться для плитки , очень экономит время!
Как создавать бесшовные текстуры в Photoshop
Из этого видеоурока вы узнаете, как создавать бесшовные текстуры в Photoshop.
Мы будем использовать фильтр облаков для создания текстуры. Но после изучения техники, описанной в этом уроке, вы сможете использовать любое другое изображение, которое вам нравится.
При создании повторяющейся текстуры плитки из одного и того же изображения необходимо убедиться, что вы удалили шов. В противном случае вы увидите твердый край на стыке сторон каждого изображения.
Чтобы удалить эти швы или края, вы можете использовать фильтр «Смещение». Этот фильтр позволяет вам перемещать края в другую часть изображения, чтобы вы могли лучше их видеть, и редактировать их, если вам нужно.
Использование фильтра смещения для создания бесшовных текстур в Photoshop
В этом уроке основное внимание будет уделено фильтру «Смещение» для создания бесшовных текстур в Photoshop, который позволит вам перемещать содержимое изображения по горизонтали или вертикали и обтекать другую сторону.
Это позволяет увидеть стык текстуры, и вы можете использовать любой из инструментов редактирования Photoshop, чтобы удалить его.
Фильтр бесшовных облаков в Photoshop
Из этого видеоурока вы также узнаете, как создавать бесшовные текстуры с помощью фильтра облаков.
Вы также узнаете малоизвестный трюк, который использует преимущества алгоритма облачного фильтра для быстрого создания бесшовных повторяющихся узоров с использованием документов правильного размера.
В Photoshop есть малоизвестный трюк, который позволяет создавать бесшовные текстуры с помощью фильтра облаков, используя преимущества алгоритма фильтра облаков.
Если вы создаете документ, высота и ширина которого равны степени двойки, Photoshop всегда будет генерировать бесшовные повторяющиеся узоры, когда вы применяете фильтр облаков.
Ширина и высота не обязательно должны совпадать. Но и ширина, и высота должны быть числами в степени 2.
Например, 2, 4, 8, 16, 128, 256, 512, 1024, 2048 и т. Д.
Прочтите этот ежедневный совет Photoshop, чтобы увидеть еще один крутой трюк с фильтром облаков.
Учебное пособие по: как создать бесшовную текстуру в GIMP
Этот пост первый появился на www.vickiwenderlich.com.
Часто нам нужен текстурированный фон или текстура для наложения других объектов.В большинстве случаев нам нужна бесшовная плитка, чтобы она могла повторяться бесконечно.
Мы используем плитки с бесшовной текстурой в фонах веб-сайтов, в качестве образцов узоров в Illustrator или Photoshop и даже для создания динамических текстур в игровой графике (например, в Tiny Wings).
К сожалению для любителей Photoshop, по-настоящему простого способа сделать бесшовную плитку в Photoshop не существует.
К счастью для всех нас, GIMP делает это до смешного просто. И GIMP бесплатный! Если у вас его нет, скачайте здесь.Чтобы воспользоваться этой функцией, ее стоит скачать, даже если у вас уже есть Photoshop.
Мы сосредоточимся на создании случайно сгенерированной текстуры, но вы также можете применить этот метод к фотографии.
Шаг 1: Создайте случайную текстуру
Открыть новый документ
Создайте новый документОткройте GIMP. Перейдите в Файл> Создать. Введите желаемый размер плитки; Я выбрал 200 × 200 пикселей. Щелкните ОК.
Теперь у вас чистый холст.Убедитесь, что для образцов фона и переднего плана (на панели инструментов) установлены белый и черный цвета по умолчанию.
Если это не так, щелкните маленький черно-белый значок образца рядом с образцами фона и переднего плана. Применить фильтр Выберите фильтр «Пламя»
. В строке меню выберите «Фильтры»> «Рендеринг»> «Природа»> «Пламя». В появившемся диалоговом окне вы можете изменить настройки, если хотите, и просмотреть небольшой предварительный просмотр.
Flame — очень вариативный фильтр — каждый раз вы будете получать что-то совершенно новое.Вы можете найти все варианты, нажав кнопку «Редактировать» вверху.
Щелкните ОК.
Результаты фильтра
Результат фильтра FlameВот что у меня есть; у вас будет что-то еще в зависимости от того, как работал фильтр Flame. Посмотрим, как это выглядит плиткой:
В мозаичном исполнении это изображение выглядит довольно прерывистым.Уф, эти швы уродливые. Итак, теперь давайте воспользуемся возможностями GIMP, чтобы избавиться от них!
Но сначала давайте сохраним изображение.
Сохраните документ как .xcfПерейдите в меню «Файл»> «Сохранить», перейдите к папке, в которой вы хотите сохранить изображение, и введите имя.
Я считаю полезным указать размер изображения после имени, чтобы, когда я буду искать его позже, я мог легко выбрать правильное изображение (у меня часто есть разные размеры одного и того же изображения).
Я выбрал «texture_flame_200». GIMP сохранит его как файл .xcf.
Шаг 2. Сделайте плитку бесшовной
Сделай это так!Снова перейдите в раздел «Фильтры» и выберите «Фильтры»> «Карта»> «Сделать бесшовным».
Плитка бесшовнаяГотово.
Да, это так просто. Я понятия не имею, почему в Photoshop нет такой возможности.
Продолжайте читать, чтобы увидеть, как это выложено плиткой!
Попробуйте в веб-браузере
В большинстве случаев вы не можете получить реальный эффект текстуры, пока не попробуете ее. Иногда встречаются раздражающие узоры, из-за которых текстура выглядит фальшивой. Вот самый простой способ, который я нашел, это проверить:
Сохраните изображение как PNG
Выберите «Файл»> «Сохранить копию».Вверху, где находится имя файла, измените расширение на .png. В открывшемся диалоговом окне нажмите ОК.
Создайте файл .html
Откройте Блокнот или TextEdit. Убедитесь, что вы находитесь в режиме обычного текста (а не в формате RTF). Скопируйте и вставьте следующий код (вставив свое имя файла там, где у меня «texture_flame_200.png»):
Сохраните это как файл.html в той же папке, что и плитка текстуры.
Откройте файл .html.
Откройте Finder (или проводник Windows), перейдите в папку, в которой сохранен файл .html, и дважды щелкните по нему.
Ваш веб-браузер должен выскочить и отобразить новую вкладку или окно с фрагментом текстуры, повторяющимся в качестве фонового изображения.
Намного лучше — никаких краев не видно.Вот мой результат.
Если вам не нравится возникающий узор, попробуйте несколько других типов визуализации. Вы также можете просто отменить пару шагов и начать заново, поскольку каждый раз при рендеринге вы получаете случайный результат.
Вот еще несколько текстур и как я их получил:
Фильтры> Визуализация> Облака> Разностные облака
Фильтр разностных облаковЭто очень круто, потому что есть флажок, который вы можете выбрать, чтобы сделать текстуру мозаичной прямо в диалоговом окне.
Смотрите, это выложено плиткой здесь.
Фильтры> Художественные> Применить холст
Фильтр холстаНастройки по умолчанию. Отображается после применения фильтра «Сделать бесшовным».
Смотрите, это выложено плиткой здесь.
Фильтры> Лава Плитка лавыНастройки по умолчанию. Так как это дало мне цветное изображение, а мне нужна была черно-белая текстура, я выбрал «Цвета»> «Обесцветить». Я выбрал вариант «Среднее» и нажал «ОК». Затем я запустил фильтр «Сделать бесшовным».
Смотрите, это выложено плиткой здесь.
Если вы хотите, чтобы черные и белые области текстуры были перевернуты, выберите «Цвета»> «Инвертировать».
Добавьте немного цвета
Лучше всего делать текстуры черно-белыми и накладывать их поверх цвета.
Переименовать слой текстуры Сначала переименуйте слой текстуры.Сначала переименуйте слой текстуры на панели «Слои».
Дважды щелкните имя и измените текст с «Фон» на «Текстура».
Щелкните значок «Создать новый слой» на панели «Слои» (значок листа бумаги в нижнем левом углу).
Создать новый слой Создайте новый слой на панели «Слои».Выберите тип заливки слоя (я выбрал белый цвет, но если для вашего переднего плана или фона задан цвет, которым вы хотите его заполнить, выберите его) и нажмите «ОК».
Перетащите новый слой под слой текстуры на панели «Слои».
Залейте новый слой цветом
Дважды щелкните цвет переднего плана на панели инструментов и выберите новый цвет. Я выбрала загар. Затем перейдите в Edit> Fill With FG Color.
Ваше изображение не изменится. Это потому, что ваша черно-белая текстура покрывает цветной слой. Нам нужно изменить режим наложения слоя с текстурой.
Выберите слой «Текстура» на панели «Слои».
Щелкните стрелки рядом с Mode и выберите Multiply.
Теперь наш холст имеет красивый коричневый цвет!Теперь вы должны увидеть свою цветную текстуру.
Если вы или ваш клиент решите, что цвет необходимо настроить, его легко изменить, отредактировав цветовой слой под слоем текстуры.
Вы также можете попробовать различные режимы наложения или уменьшить непрозрачность слоя текстуры.
Не забудьте сохранить.xcf файл , чтобы вы могли вернуться и внести изменения, а также сохранить копии в формате PNG для использования в ваших проектах.
Вы можете редактировать PNG в GIMP и добавлять слои, но как только вы сохраните и закроете файл, слои будут объединены, и вы больше не сможете редактировать каждый отдельно. Если вы хотите, чтобы изображение оставалось редактируемым, вам необходимо сохранить его как файл .xcf.
Есть другой способ создания бесшовных текстур?
Я хотел бы это услышать! В настоящее время разрабатывается более сложное руководство, когда этот метод создания бесшовных текстур с помощью одной кнопки не дает вам желаемого вида.
Создание бесшовных текстур и бесшовных фонов в Illustrator
Думаю, вы все согласитесь, что Illustrator просто великолепен, и с постоянными улучшениями, которые мы видим с каждой новой версией, он становится все лучше и лучше. Раньше я создавал бесшовные текстуры для типографики и бесшовные фоны для своих веб-проектов и иллюстраций с помощью Photoshop. Но мы заметили значительные улучшения в панели «Оформление» в более поздних версиях Illustrator, поэтому теперь я создаю эти текстуры и фон исключительно в Illustrator — на самом деле это очень просто!
Итак, в сегодняшнем уроке я расскажу вам, как создавать различные бесшовные текстуры и фоны в Adobe Illustrator.
Подробности руководства: бесшовные текстуры и бесшовные фоны
- Программа: Adobe Illustrator CC (Вы сможете создать это учебное пособие в CS4 +, но некоторые из изображений учебного пособия могут выглядеть иначе.)
- Сложность: начальный / средний
- Темы: панель внешнего вида, эффекты, заливка узором, стили графики
- Примерное время выполнения: каждые 15-20 минут
Добавление бесшовных текстур в Illustrator
Если вы какое-то время работали с иллюстратором, вы, вероятно, знаете, что можете легко добавить текстуру как изображение, настроить ее на умножение, и все готово.Одна из замечательных особенностей использования техник, описанных в этом уроке, заключается в том, что вы можете легко создать бесшовную текстуру или фон, не добавляя маску и не проверяя, чтобы она соответствовала вашему рисунку должным образом. Если вы ищете более бесшовные текстуры, я бы рекомендовал проверить FreeVector.com. Кроме того, мы будем использовать панель «Оформление», чтобы быстро создать уникальный графический стиль — это должно упростить применение эффектов к другим текстовым и векторным объектам. (Psst … Я знаю, что некоторые из вас говорят, что использование растровых эффектов в Illustrator является обманом, потому что это не векторная графика, и вместо этого вы должны просто использовать Photoshop.Но я обнаружил, что создавать такие эффекты в Illustrator намного проще и быстрее. Еще одно ключевое преимущество создания этого в Illustrator — масштабируемость векторов даже с применением растровых эффектов. Если вы не расширите эффекты, вы сможете корректировать изображения, не беспокоясь о создании пиксельных изображений. Так почему бы не попробовать? 🙂)
Растровые эффекты
Если вы знакомы с некоторыми текстурными эффектами и фильтрами в Photoshop, вы почувствуете себя как дома с этой техникой.Для этих эффектов я установил Document Raster Effects Settings на 300 ppi . Вы можете изменить это разрешение, перейдя в Эффект> Параметры растрового эффекта документа.
Шаг 1
Создайте новый документ и нарисуйте прямоугольник с помощью инструмента «Прямоугольник» (M).
Шаг 2
Снимите обводку и залейте прямоугольник линейным градиентом. Измените первую цветовую границу в градиенте на зеленовато-синий цвет, измените вторую цветовую границу на более темный зеленовато-синий цвет и измените Угол на -90.
Шаг 3
На панели «Оформление» откройте всплывающее меню и выберите Добавить новую заливку . Выберите самую верхнюю заливку на панели «Оформление» и измените цвет заливки на серый.
Шаг 4
Выбрав новую серую заливку на панели «Оформление», перейдите в меню «Эффект »> «Текстура»> «Зернистость» . В диалоговом окне «Зерно» измените интенсивность на 90 , контраст на 50 и тип зерна на разбрызгивание. Затем нажмите ОК.На панели Appearance нажмите стрелку слева от заголовка и в подсписке щелкните ссылку Opacity и измените режим наложения на Multiply .
Шаг 5
Во всплывающем меню панели «Оформление» добавьте еще одну New Fill , как раньше. Выберите верхнюю заливку и измените градиент на радиальный градиент . Затем установите белый цвет на обоих стопах и измените Непрозрачность первого белого цвета на 40, а второго на 0.В подменю нового радиального градиента нажмите Opacity и измените режим наложения на Overlay , как показано на изображениях ниже.
Шаг 6
То же самое и с бесшовной текстурой фона, но мы также можем добавить похожие текстуры к нашей копии, сохраняя при этом редактируемый текст! (Разве не потрясающая панель внешнего вида ?!) Для начала выберите инструмент «Текст» (T) и введите текст. Я использовал шрифт Museo Slab 900 для текста «Растровый».Затем, используя панель Color , удалите обводку и заливку с текста.
Шаг 7
На панели «Оформление » щелкните всплывающее меню, выберите Добавить новую заливку и залейте его линейным градиентом. Измените первый ограничитель цвета на белый, второй на светло-серый и измените угол на -90.
Шаг 8
Создайте еще одну новую заливку из панели «Оформление » и залейте ее серым цветом. Затем выберите новую серую заливку и перейдите в Effect> Texture> Texturizer .В диалоговом окне Texturizer измените текстуру на Burlap, Scaling на 200, Relief на 50 и Light to Top. Измените режим наложения заливки на Умножение и установите Непрозрачность на 5.
Шаг 9
Выберите нижний линейный градиент на панели Appearance и перейдите в Effect> Stylize> Drop Shadow . В диалоговом окне Drop Shadow измените непрозрачность на 60 , смещение X и Y на 0, и размытие на 1 . Теперь у вас должен быть эффект светлой текстуры и тень на вашем тексте!
Шаг 10
Для текста «Эффекты» я использовал Museo Sans 300 (я как бы помешан на семействе Museo).Снова введите текст, затем, используя панель Color , удалите обводку и заливку. Затем создайте новую заливку из панели «Оформление» и добавьте линейный градиент к тексту, изменив первый цветовой стоп на черный, а второй — на серый. Затем измените угол на -90. Создайте еще одну новую заливку, убедитесь, что вы редактируете последний элемент списка заливок на панели Appearance , измените заливку на более светлый цвет, чем ваш фон, и перейдите в Effect> Distort & Transform> Transform .В диалоговом окне Transform Effect измените вертикальное перемещение на 1. Это сделано для примера растровой текстуры! Как получилось у тебя?
Играя около
Проявите творческий подход. Интересно поиграть с различными эффектами, чтобы увидеть, какие новые текстуры вы можете создать. Ниже взято из учебника Vectips «Создание редактируемого сшиваемого типа этикеток» с добавлением некоторых базовых текстур.
Заливка узором
Создание этой техники очень похоже на технику растровых эффектов.На самом деле, эти текстуры представляют собой просто заливку бесшовным узором, которая есть в Illustrator, но они могут дать довольно интересные результаты.
Шаг 1
Начальные шаги почти такие же, как и в предыдущем примере растра. Создайте прямоугольник, удалите и обведите. На панели «Градиент» залейте его линейным градиентом, используя зеленовато-желтые цветовые точки, и измените угол на -90.
Шаг 2
Вместо того, чтобы использовать эффект на следующем шаге, мы собираемся использовать некоторые стандартные образцы шаблонов Illustrator.На панели Swatches нажмите кнопку меню библиотеки образцов в нижнем левом углу панели и выберите Patterns> Basic Graphics> Basic Graphics_Textures . Выделив прямоугольник, выберите новую заливку из панели Appearance , выберите самую верхнюю заливку и залейте ее образцом Bird Feet из библиотеки, которую мы только что открыли. (Самый простой способ увидеть имена образцов в библиотеке — выбрать «Большой список» во всплывающем меню на панели образцов.После того, как вы заполнили новую заливку образцом Bird Feet, измените режим наложения на Overlay .
Шаг 3
Чтобы закончить фон, создайте новую заливку и залейте ее тем же белым радиальным градиентом из шага 5 растровой техники. Вот и все, что касается техники заливки узором! Довольно просто, правда?
Шаг 4
Обработка текста очень похожа на обработку растрового изображения. Чтобы создать текст «Узор», я сделал то же, что и в шаге 10, с растровым изображением.Я использовал Susa Heavy для шрифта, а с помощью панели Appearance я залил его темно-серым линейным градиентом, добавил новую заливку, сместил новую заливку и изменил заливку смещения на более светлый цвет фона.
Шаг 5
Под текстом «Узор» я добавил 2 простых контура с помощью инструмента Line Segment (/) . Для этого просто нарисуйте путь, равный длине текста. Перейдите в Window> Stroke , чтобы открыть панель Stroke, и измените обводку на 1 pt, а цвет на серый.Создайте еще один путь прямо под первым и измените цвет обводки на светлый фоновый цвет.
Шаг 6
Для текста «Образец» я использовал Museo Slab 900. Удалите обводку и заливку, а также на панели «Оформление» и добавьте новую заливку. Измените новую заливку на линейный градиент с первым белым цветом, второй — более темным желтым цветом, и измените Угол на -90. Выбрав новую заливку, перейдите в Effects> Stylize> Drop Shadow . В диалоговом окне Drop Shadow измените непрозрачность на 50, смещение по осям X и Y на 0, и размытие на.5 пикселей.
Шаг 7
Создайте новую заливку из панели «Оформление » и залейте ее линейным градиентом. Затем измените первую цветовую границу на светло-желтый цвет, измените вторую на тот же, более темный желтый цвет, как в предыдущем шаге, и установите Угол на -90. Выбрав новую заливку, перейдите в Effects> Path> Offset Path . В диалоговом окне Offset Oath измените Offset на -1 px .
Играя около
С ними действительно весело играть.Возьмите только что созданную фоновую текстуру, найдите элемент Bird Fill и измените его любым из образцов Basic Graphics_Textures, чтобы увидеть, что у вас получится! Также попробуйте комбинировать несколько разных узоров на одном фоне, чтобы увидеть, какие крутые эффекты это дает.
Объединение растровых эффектов и заливки узором
Эта техника, наверное, моя любимая. Интересно исследовать и экспериментировать со всеми разными результатами. В основном мы комбинируем методы заливки растром и узором.Это очень похоже, поэтому, если у вас не было проблем с предыдущими методами, у вас не будет проблем с ними!
Шаг 1
Я не буду вдаваться в подробности, потому что вы уже выполнили начальные шаги в первых двух примерах. По сути, создайте прямоугольник, залейте его красным линейным градиентом, создайте узор с зернистостью Sprinkle и создайте радиальный белый градиент.
Шаг 2
Добавьте еще одну заливку в панель Appearance и выберите узорную заливку « Diamond » из Basic Graphic_Textures.Установите режим наложения новой заливки узором на Overlay и измените непрозрачность на 50 .
Шаг 3
Для типа «Combo» я использовал RadioTime для шрифта и использовал тот же градиент серого и смещение, что и в предыдущих примерах. Вторичный текст — это просто Museo Sans 300 с желтой заливкой.
Играя около
Как и раньше, сейчас хорошее время, чтобы поиграть и посмотреть, какие варианты обработки текстуры вы можете придумать!
Создание стилей графики
Итак, теперь, когда у нас созданы все эти замечательные текстуры, мы можем применить эффект к другим изображениям и тексту.Вместо того, чтобы создавать эффект каждый раз, мы можем просто создать стиль графики.
Шаг 1
Чтобы создать графический стиль, просто выберите текстуру и нажмите кнопку «Новый стиль графики» на панели «Стиль графики» . Серьезно, это так просто. Теперь выберите какой-нибудь текст или другой объект и нажмите новый стиль на панели стилей графики и все готово! Вы даже можете создавать графические стили для каждой из созданных нами текстовых обработок.
Шаг 2
Иногда я корректирую текстуру на панели Appearance , чтобы включить другие элементы.В приведенных ниже примерах кнопок я добавил заливку со смещением на 1 пиксель и добавил тень к заливке. Фоновая текстура — это просто заливка графическим пером (Эффект> Эскиз> Графическое перо) , и значки обработаны так же, как мой текст в некоторых примерах текстуры.
Игра с бесшовными текстурами и бесшовным фоном
Теперь поэкспериментируйте с графическими стилями для других текстовых, пользовательских и векторных объектов. Надеюсь, вам понравится создавать всевозможные уникальные бесшовные текстуры и фоны, используя эти методы.Не стесняйтесь поделиться любыми своими крутыми творениями, оставив комментарий ниже!
Эти значки ссылаются на сайты социальных закладок, где читатели могут делиться и открывать новые веб-страницы.Создание идеально повторяемых текстур — Уроки — gimpusers.com
- 1
Бесшовные текстуры очень часто используются в 3D-моделировании, а также для фонов веб-сайтов.
Если у вас есть хорошее изображение для начала, как здесь, с симметричными листьями цветка, есть быстрый способ создать хорошо воспроизводимую текстуру с помощью GIMP.
- 2
Просто выберите фильтр «Сделать бесшовным» в меню «Фильтр» / «Карта». GIMP пытается размыть края изображения, чтобы сделать его бесшовным. В некоторых случаях это выглядит действительно хорошо.
- 3
Чтобы проверить, насколько хорошо воспроизводится текстура, выполните следующие действия:
— скопировать бесшовное изображение в буфер обмена ( Attn: только изображения с макс.размер 512 × 512 пикселей можно напрямую использовать как кисть / узор «на лету» в GIMP . Если ваше изображение больше 512 × 512 пикселей, пожалуйста, сначала уменьшите его)
— теперь создайте совершенно новое изображение любого размера ( т.е. 1600 × 1200 пикселей)
— выберите инструмент Заливка ведра и установите опцию «Узор». В раскрывающемся списке первый — это материал, который вы скопировали в буфер обмена
— Затем щелкните внутри белого фона нового изображения или просто используйте РЕДАКТИРОВАТЬ / ЗАПОЛНИТЬ ШАБЛОН, чтобы проверить бесшовность. - 4
Однако фильтр «сделать бесшовным» не является идеальным выбором для всех текстур и узоров.Иногда выцветание — это не то, как мы хотим, чтобы бесшовная текстура выглядела (см. Изображение).
- 5
Обеспечение резкости без шва
Было бы лучше, если бы текстура оставалась резкой. Поэтому нам нужно кое-что делать вручную. Сначала нам нужно сместить изображение по ширине и высоте. В GIMP для этого есть фильтр: Слой / Преобразование / Смещение. В диалоговом окне нажмите кнопку «Смещение по x / 2, y / 2».
- 6
Теперь используйте инструмент GIMPs Clone. Клонируйте части по хорошо видимым средним линиям (см. Изображение шага 5). Попробуйте покрыть эти видимые границы, вы также можете попробовать клонировать, то есть целую ветку через изображение.
Чем больше деталей вы придадите изображению путем клонирования, тем более ровной будет ваша текстура в конце!
- 7
Затем повторите шаг со смещением (СЛОЙ / ПРЕОБРАЗОВАНИЕ / СМЕЩЕНИЕ) и нажмите кнопку «Смещение на x / 2, y / 2» и примените его.После использования техники повторения шага 3 текстура будет выглядеть примерно так.
- 8
Часто вам нужно выровнять яркость изображения. Как сделать изображение однородным по яркости, вы можете увидеть в этом уроке:
Выровнять яркость изображений
На показанном изображении (деревянная текстура) я использовал технику, показанную в руководстве, чтобы получить текстуру с адаптированной яркостью. В этом простом случае я снова использовал фильтр «Сделать бесшовным», немного увеличил резкость и добавил мягкий коричневый цветовой тон с помощью баланса Цвета / Цвет.
Надеюсь, вам понравилось это руководство, и вы сочтете его полезным / полезным!