Бесшовная текстура онлайн: Сделать бесшовную текстуру онлайн — IMG online
Содержание
Как сделать бесшовную текстуру
В этом уроке узнаем, как сделать бесшовную текстуру в Фотошопе.
В интернете миллионы потрясающих текстур и узоров, которые ждут, пока вы их скачаете. Но бывает так, что размеры текстуры не соответствуют размеру нашего файла. Не беда. После прохождения этого урока вы сможете адаптировать любую текстуру под любой размер.
Для примера возьмем текстуру бумаги. Но данный урок подходит текстуры.
Шаг 1.
Открываем текстуру
Открываем нашу текстуру в Adobe Photoshop. Размер нашей текстуры 1920х1080 px. Нам важно знать размер точный для того чтобы рассчитать на сколько нужно сдвигать части.
Выбираем Фильтр > Другое > Сдвиг (Filter > Other > Offset) и выставляем значения сдвига ровно половину от значения размера изображения. Также выставляем режим Неопределенных областей (Undefined Areas) – Вставить отсеченные фрагменты (Wrap Around).
Шаг 2.
Ретуширование стыка
Теперь необходимо заретушировать места стыков. Есть несколько способов, как это можно сделать. Я использовал инструмент Заплатка – Patch Tool (J).
Создайте новый слой. В верхней панели инструментов выберите режим Заплатки С учетом содержимого (Content-Aware) и поставьте галочку напротив Образец со всех слоев (Sample All Layers).
Настройка режима Адаптации возможно потребует небольших экспериментов, для разных изображений, но как правило режим Среднее (Medium) работает хорошо.
Сделайте выделение вертикального стыка.
Шаг 3.
Ретуширование стыка
Затем нажмите левую кнопку мыши по выделению стыка и не отпуская ее сдвиньте влево или вправо.
Когда вы отпустите кнопку мыши, Photoshop заменит содержимое оригинально выделения текстурой из того места куда вы сдвинули выделение, и учтет содержимое и его цвет. И постарается адаптировать содержимое к тону нужного места.
Поскольку мы сделали наш стык на новом слое, поэтому, если необходимо, мы можем стереть лишние участки.
Шаг 4.
Ретуширование стыка
Повторим тоже самое для горизонтального стыка.
Шаг 5.
Генерация паттерна
Теперь можно склеить все получившиеся слои в один. После этого создадим узор (текстуру) для заливки. Нажмем Редактирование > Определить Узор (Edit > Define Pattern).
После этого бесшовная текстура готова.
Теперь можно создать документ любого размера, после этого выбрать в панели Стиль слоя > Наложение узора (Layer Style > Pattern Overlay) паттерн который мы только что сделали.
Шаг 6.
Финальное изображение
С помощью настроек в панели Наложение Узора можно масштабировать паттерн, а также двигать его.
На основе этого урока, так можно адаптировать любую более равномерную по тону текстуру.
Может быть понадобится дополнительные ухищрения в убирании стыков, но общий алгоритм действий аналогичный.
Ссылка на источник
Как сделать бесшовную текстуру в фотошопе
Бесшовные текстуры — это изображения с текстурой какого-либо материала, поверхности, вещества, которые при состыковки с любой стороны относительно друг-друга образуют целую сплошную картинку, без смещений и искажений. Подобные текстуры (фоны) обычно применяются в 3D моделировании и веб-дизайне. Если вы хоть раз работали в каком-нибудь 3D редакторе, к примеру 3D max, то знаете не по наслышке о том, что бесшовные текстуры в 3D моделировании — очень важный элемент, поскольку именно от их качества зависит качество модели в целом. Чем больше размер текстуры, тем лучшего качества 3D модель получится в результате.
Для создания бесшовных текстур и фонов используют различные специальные программы, существуют и различные плагины для фотошопа, которые способствуют созданию бесшовных изображений. Мы же рассмотрим простой способ создания бесшовной текстуры в фотошопе, без использования плагинов и сторонних программ. Для создания бесшовной текстуры нам нужно изображение данной текстуры, обычно производят фотосъемку , либо отрисовывают ее в ручную.
Мы же возьмем готовую картинку (текстуру) земли (почвы), которую я нашел в интернете и сделаем ее с помощью фотошопа бесшовной.
Первым делом открываем изображение программой фотошоп и разблокируем его, если оно заблокировано (значок замочка на против слоя), кликнув по замочку левой кнопкой мыши. Данная процедура дает возможность редактировать изображение, если же замочек не снять, то с картинкой никаких манипуляций произвести не удастся. В моем случае изображение заблокировано не было.
Теперь необходимо узнать размер изображения, для этого в верхнем меню переходим в «Изображение» — «Размер холста», либо нажимаем комбинацию клавиш Alt + Ctrl + С.
Размер изображения логично конечно посмотреть выбрав пункт «Размер изображения», но мы выберем холст, чтобы при необходимости сразу изменить размеры, а не повторять эти же действия по несколько раз. И так, кликнув по пункту «Размер холста» появится всплывающее окошко с параметрами.
Нам необходимо убедиться, что размеры изображения имеют четные значения, потому что нам нужно будет разделить значения длины и ширины изображения ровно пополам. В моем случае и ширина изображения (596px) и высота (380px) делятся на 2, поэтому менять ничего не нужно. Если же у вас одно из значений или оба не четные числа, то необходимо изменить размеры холста, прописав уменьшив число на единичку до четного и нажав кнопку «Ок». При этом, при изменении размеров холста имейте в виду, что стороны холста не должны быть закреплены, т.е. скрепка указанная на картинке выше не должна быть активирована, иначе вы измените, к примеру высоту на четное число, а ширина станет нечетной.
Запоминаем размеры нашего холста (изображения), делим их на 2 и получаем следующее: ширина — 298px и высота — 190px. Теперь переходим в верхнем меню в «Фильтр» — «Другое» — «Сдвиг».
Во всплывающем окне вводим наши полученные методом деления на 2 значения ширины и высоты изображения, а так же выбираем пункт «Вставить отсеченные фрагменты».
В результате у нас получается изображение, сложенное из 4-х частей, стыки которых не совпадают и явно выделяются.
Нам нужно удалить данные погрешности. Для этого мы будем использовать инструмент «Точечная восстанавливающая кисть», можно так же использовать инструмент «Штамп» — это уже на ваше усмотрение — экспериментируйте. В левой панели программы выбираем необходимый нам инструмент и аккуратно обрабатываем стыки.
После того, как избавитесь от видимых швов (стыков) необходимо снова войти в фильтр «Сдвиг» и прописать значения горизонтали и вертикали по нулям. В результате у меня получилось бесшовное изображение (текстура).
Теперь давайте проверим как это будет выглядеть, для этого я возьму несколько получившихся текстур и состыкую их друг с другом разными сторонами.
Как видите, теперь швов (стыков) не видно, что и требовалось сделать, у нас получилась бесшовная текстура для 3D max или фотошопа. Еще раз напомню, если хотите получить текстуру высокого качества, то необходимо использовать большое изображение и чем больше, тем лучше.
Как я делаю бесшовный узор в фотошопе. Бесшовные фоны как сделать online
Если вы занимаетесь веб-дизайном, 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
.
Возьмем для примера фото цветов.
Вот такой банальный рисунок. Вы можете взять любой другой. Сейчас эта картинка достаточно большая, ее можно уменьшить до такого размера, который нужен.
Если фон нашего сайта просто замостить такой картинкой получится вот так:
Получилось некрасиво и видны швы
В Photoshop»е есть такая замечательная функция как Сдвиг
(Фильтр / Другое / Сдвиг). Мы могли бы воспользоваться этой функцией для получения бесшовного фона, но рисунок достаточно непростой и не хотелось бы терять качество фотографии. Потому я делю картинку на 4 равные куска (для этого наверное лучше брать изначально картинку квадратной формы или обрезать ее до квадрата).
Получается вот так:
Далее мы разрезаем эту картинку на 4 части и каждую часть помещаю на отдельный слой. Это можно сделать при помощи Прямоугольного выделения
(выделяем ровно четверть, в нашем случае картинка 580 на 580 пикселей, значит четверть равна 290 на 290 пикселей), далее выделенную область копируем Ctrl+C и вставляем тут же Ctrl+V. Также этого можно добиться при помощи инструмента Раскройка
, но тогда наши 4 части сохранятся в отдельную папку и потом их надо будет перенести в один документ для создания 4х слоев.
И перемещаем наши 4 куска следующим образом:
Такого же эффекта можно достичь, как я говорила ранее, используя функцию Сдвиг
(Фильтр / Другое / Сдвиг), сдвигая картинку на половину ее высоты и ширины, в данном случае на 290px и 290px. Конечно же это в разы проще, но чтобы сделать качественный бесшовный фон на сайте этого будет недостаточно. Так как если взглянуть на фото выше, мы видим что эффект Размытия
сделает картинку банально некрасивой, а дорисовывать цветы очень трудоемкое занятие.
Эта картинка по сути основа для нашего бесшовного фона. Если ваша текстура достаточно не сложная, то достаточно просто замаскировать швы в центре картинки, по периметру стыковка будет идеальная и бесшовная. Без такого перемещения было бы невозможно идеально угадать место стыка, а так мы видим все наши швы в центре.
Убираем стыки на будущем бесшовном фоне
Сейчас наш холст занимает 580х580px. Мы будет сдвигать каждый слой (каждую четверть) в сторону центра на 40px по очереди. Таким образом у нас слои будут накладываться друг на друга. Это можно сделать простым перетаскивание на 40px, либо использовать тот же самый Сдвиг на 40px по вертикали и горизонтали. У нас получится такая картинка, уже с размером холста 500х500px.
Далее будет самый творческий процесс. Берем инструмент Ластик
, самый обычный, можно взять с мягкими краями. Выставляем непрозрачность на 50%. Нам нужно будет пройтись по тем слоям, которые расположены сверху, т.е. нетронутым останется у нас только нижний слой. Нам нужно будет пройтись по краям, где у нас наложение слоев, убирая обрезки цветов, те что полностью не поместились. На их месте будут просвечиваться целые цветы нижних слоев. Процесс творческий, потому надо будет поэксперементировать).
У меня получилось вот так:
Швы вышли достаточно незаметными и картинка выглядит целостной. Зато я теперь точно знаю, что раз в центре все аккуратно, то по периметру стыковка будет идеальная.
Посмотрим что у нас получилось в итоге, если замостить фон на сайте:
Вот такой у нас получился бесшовный фон для нашего сайта.
Которое мы можем использовать. Несмотря на это, если мы размножим картинку как есть, результат будет не очень хороший. Как вы можете видеть выше, места, где картинка повторяется, очень заметны, и тёмные пятна выглядят просто жутко. Чтобы превратить это фото в мощёный фон, нам сначала нужно удалить все неравномерности, а затем сделать плавный переход у краёв.
Шаг 1
Обрежьте, сделав фото меньше, чтобы избежать тёмных мест.
Таким образом, первый шаг это — взять основную картинку и затем обрезать до такого размера, чтобы в углах не было тёмных пятен, как показано выше.
Шаг 2
Используйте инструмент Dodge (осветление)
для осветления тёмных областей.
Вот наш фрагмент.
На самом деле я немного уменьшил изображение, так чтобы текстура не была такой резкой. Теперь хотя у него более равномерный цвет, нам нужно осветлить края. Чем больше мы можем сделать, тем лучше, так как даже небольшая разница слишком бросается в глаза, когда фон размножен.
Выберите инструмент Dodge (O)
и большой мягкой кистью немного пройдитесь возле левого и правого краёв, чтобы немного осветлить тень. Не переборщите, иначе трава будет выглядеть слишком размытой.
Шаг 3
Как вы можете видеть выше, трава выглядит более равномерно окрашенной. Но этот листочек слева вверху разоблачит нас, если будет повторяться снова и снова, поэтому мы должны избавиться от него. Возьмите инструмент Patch (Заплатка) (J)
и обведите вокруг листа мышкой, захватите эту область и перетащите. (Обратите внимание: инструмент Patch должен быть установлен на Source (Источник), а не на Destination (Назначение),
иначе разница будет несущественная).
Шаг 4
Теперь наш фон выглядит очень приятно и равномерно. Нам только нужно сделать плавный переход от одного края к другому. Дублируйте слой, затем подвиньте первый слой влево, а второй слой вправо до тех пор, пока вы не увидите оба слоя и белый промежуток между ними. Теперь соедините их вместе, так чтобы правый край первого слоя коснулся левого края второго слоя.
Шаг 5
Я оставил промежуток в 1 px, чтобы вы могли увидеть, как соединяются края.
Здесь вы можете видеть, что два слоя почти соприкасаются. Соедините их вместе так, чтобы между ними не было видно белого и объедините два слоя в один
Шаг 6
Теперь мы снова используем инструмент Patch (Заплатка)
, чтобы нарисовать неровную линию вокруг кромки, где соединяются два слоя, затем, используя мышь, перетащите выделенную область на близлежащий участок, чтобы заделать его.
Шаг 7
Инструмент patch делает подобного рода операции действительно просто, особенно с такими шумными фонами, как эта трава. Как вы можете видеть, если не приглядываться очень внимательно, совсем незаметно, где была линия перехода. Если вы хотите, вы можете усовершенствовать детали и клонировать отдельные листочки травы — но и этого достаточно для наших целей.
Шаг 8
Теперь мы повторим тот же самый процесс по вертикали. Дублируйте слой и подвиньте один вниз, а другой вверх, пока верхний и нижний края не соприкоснутся. Объедините слои вместе и используйте инструмент patch, чтобы избавиться от кромки.
Шаг 9
Теперь мы готовы к мощению!
Это будет работать, потому что мы практически избавились от краёв, новые края документа уже совпадают, потому что мы подвинули слои равномерно влево и вправо, так что правый край документа действительно является следующим пикселем вдоль левого края.
Шаг 10
Нажмите CTRL+A
, чтобы выделить всё и выберите Edit > Define Pattern.
Шаг 11
Дадим паттерну имя.
Шаг 12
Теперь на любом слое, если вы выберете blending options и отметите раздел Pattern Overlay, вы можете выбрать из вашего набора заказных паттернов, как показано, включая паттерн с травой, который мы только что сделали. На рисунке выше вы можете видеть, как я применяю паттерн к фону веб-сайта.
Конечно, вы должны также сохранить изображение паттерна как PSD или JPG, т. к. вам может понадобиться использовать отдельное изображение. Например, если вы будете использовать его как фоновую картинку в HTML-документе, вам понадобится отдельная картинка в формате JPG image, а не «Pattern» для Фотошопа.
Готово!
Вот и наша мощёная травка.
Как вы можете видеть, здесь много тёмных пятен, но т. к. я буду использовать её в качестве фона для сайта, это не проблема, поскольку сверху будут всякие разные штуки. Несмотря на это вы можете легко вернуться назад и залатать эти пятна, чтобы сделать фон более однородным.
На беоне заметно распространены так называемые бесшовные дизайны.
В интернете можно найти множество бесшовных фонов, а вот как сделать бесшовный фон из собственной картинки?
Это я предложу Вам сделать первым уроком.
1. открываем изображение в фотошопе. Пусть оно называется слой 1
Я выбрала вот это:
—
—
2. Нажимаем J+ctrl (создаем дубликат слоя). называем его слой 2
3. Идем: фильтр-другие-сдвиг.
Ставим свои настройки.
Для каждого изображения настройки индивидуальны, для своего я выбрала такие:
—
—
4. Находясь на слое два идем: фильтр-размытие-размытие по Гауссу.
Я поставила такие настройки:
—
—
5. Далее берем ластик (большой, ок. 300 пикс). Стираем немного по бокам слоя 2
Примерно так:
—
— .
6. Создаем копию слоя 1(слой 3). Перетаскиваем его так, чтобы он находился над слоем 2. Идем: редактирование-свободное трансформирование. Немного уменьшаем слой 3:
—
— .
7. Ластиком немного подтираем края слоя 3, что они слились с фоном.
Можно дублировать слой и добавить немного размытия в движении.
Итог:
—
—
II способ.
Бесшовный фон можно сделать также при помощи фильтра: mehdi.
С ним все значительнее проще.
Если появятся желающие, дам ссылку на скачивание этого фильтра.
Для создание бесшовного фона я выбрала вот это изображение:
—
—
Открываем фильтр. Выглядит он так:
—
—
Я поставила такие настройки.
Итог:
—
—
На этом все.
Буду рада увидеть ваши работы.
скачать фильтр здесь.
Много раз меня спрашивали, и вот я решила выделить время и сделать таки урок по созданию бесшовного узора в Фотошопе. Возможно есть методы намного проще и удобней, но я изобрела вот такой велосипед, на нем и катаюсь.
Итак, приготовьтесь, сейчас я буду очень подробно показывать, как я сделала такой цветочный фон. Картинки большие и их больше десяти штук, хотя по правде сказать можно было бы уложиться и в две, зафиксировав лишь основные моменты. Но раз я пообещала пошаговый процесс, то его и буду демонстрировать. Если что, я предупредила))
Создаем документ 4500х4500 пикселей, с разрешением 300.
Вставляем в наш документ заранее приготовленные элементы. В моем случае, это 3 вот таких цветочных заготовки (все они аккуратно вырезаны по контуру и размещены в разных слоях).
Дублируем наши цветочки и в произвольном порядке заполняем ими верх и левую сторону холста. Как видите элементы в разной степени выступают за край. Теперь выделяем все цветы, что пересекают левую границу холста и дублируем их. *не забываем периодически сохранять документ
Выделив наши дубли, щелкаем по маркеру трансформационной области. Теперь у нас стала активной панелька сверху под главным меню. Выбираем точку отсчета левый верхний угол в «Reference point location». Сейчас мы видим координаты нашей группы объектов относительно верхнего левого угла. Их мы и будем менять.
Поскольку мы работаем с левой стороной, то соответственно и двигать объекты будем относительно оси Х. Сейчас у меня там -1018. Итак, достаем калькулятор и додаем до этой цифры 4500 (ширину нашей рабочей области). В итоге у нас получается 3482, это число мы и вводим в графу Х. Наши цветочки переместились, готово.
Аналогично дублируем весь верхний ряд вниз, вычислив координаты нашей группы объектов по оси Y.*не забываем периодически сохранять документ
Если нужно подвигать наши элементы, то не забываем, что теперь противоположные стороны взаимосвязаны. Так что, для перемещений выделяем объект и его дубль и тогда смещаем.
Всю пустую область заполняем цветочками так, чтобы это было гармонично и красиво. Следим за тем чтобы наши объекты не пересекали границ рабочей области. Вот в принципе, наш бесшовный узор и готов. Но поскольку я параноик, которому надо все перепроверить, то у меня есть еще несколько шагов))
Помещаем все наши слои в папку и дублируем ее. Объекты из дубля сливаем все в один слой. В принципе, дубль мне нужен для того чтобы иметь запасную папку с послойными элементами. Еще я добавила фон. Кадрируем наше изображение по контуру рабочей области.
Дублируем наш слой с цветочным узором. Перемещаем его на 4500 пикселей вправо. Выделяем узор и его дубль и двигаем так чтобы было видно шов, где они соединяются. Для чего я это делаю? Проверяю все ли сошлось)) Иногда, когда слоев очень много, то можно напутать с верхними нижними дублями и какой-то листик в одной части паттерна уйдет под цветочек, а с другой стороны уже будет сверху. Но в нашем случае все замечательно. *не забываем периодически сохранять документ
Ищешь как создать текстуру онлайн? Легко
Ищешь как создать текстуру онлайн? Легко — Canva
Your browser is not supported and may not give the best experience.
ВойтиЗарегистрироваться
Придайте своим работам глубину с помощью текстур на платформе Canva. У нас есть все инструменты, чтобы добавить в ваши дизайны текстуру, а еще прекрасная библиотека изображений, под завязку набитая текстурами, которые вас обязательно вдохновят!
Добавьте дизайну ослепительного блеска или сурового реализма с помощью текстур
Перед тем как наряжать дизайн в вельвет и джинсовую ткань, давайте определим, что из себя представляют текстуры? Текстуры придают определенного единообразия внешнему виду материалов. Например, яркие цвета выглядят гладкими или глянцевыми, а текстура шероховатой ткани — жесткой и поношенной. С помощью Canva вы с легкостью можете добавить текстуры в свой дизайн, чтобы сделать его более интересным и наделить его своеобразной атмосферой.
Фоновые текстуры — надежный фундамент дизайна
Выберите фоновую текстуру в качестве основоположного элемента своего дизайна. Выберите панель «Фон», чтобы просмотреть все бесплатные и премиум-текстуры и рисунки — от простой решетки до высококачественных фотографий растений и бумажного волокна. Щелкните нужный фон, а затем добавьте поверх него текст и другие элементы — пускай они как следует выделяются.
В нашей библиотеке изображений вы найдете множество прекрасных текстур
Уже просмотрели все фоновые текстуры? Текстуры можно найти не только на панели «Фон». Введите в библиотеке изображений запрос «текстура» или «узор», и вы увидите множество текстур, которые можно использовать в качестве фона или другого элемента дизайна. Ищете что-то конкретное? Введите соответствующий запрос (например, «фон» или «мох») в библиотеке изображений, чтобы найти подходящую текстуру. Перетащите изображение в дизайн, затем обрежьте его и измените его размер для максимального эффекта.
Облачите дизайн в изящные прозрачные текстуры
Возможно, вы хотите тонко приукрасить дизайн текстурой в виде, скажем, едва различимой завесы или почти неуловимого кружева? Найдите узор по вкусу в нашей библиотеке изображений и перетащите его в свой дизайн. Выделите эту текстуру и щелкните стрелку вниз, чтобы открыть ползунок прозрачности. Перетащите ползунок влево, чтобы текстура выглядела легко и изящно. Перетащите его еще дальше, и от текстуры останется лишь тонкий намек. Затем попробуйте наложить эту прозрачную текстуру на фигуры однородного цвета или другие изображения. Возможности безграничны!
Создавайте текстуры из собственных фотографий
Не нашли в нашей библиотеке текстуру, напоминающую ту замечательную ткань, из которой было сделано вечернее платье вашей бабушки? Не беда! Сфотографируйте или отсканируйте свою уникальную текстуру и добавьте ее в Canva. После этого вы сможете пользоваться ею точно так же, как и любой другой из наших текстур. Ваш фотоаппарат плохо уловил все детали текстуры? У нас вы найдете множество инструментов для редактирования своей фотографии. Предпочитаете делать фотографии на смартфоне или планшете? К вашим услугам приложения Canva для iPhone, iPad и Android.
Навигация по нижнему колонтитулу
© 2021 г. Все права защищены. Canva®
Как сделать бесшовную текстуру в Photoshop для 3D.
Умение создавать текстуру в Photoshop — полезный навык, особенно для работающих с 3ds Max.
Для 3D графики текстуры играют очень важную роль. От качества текстур напрямую зависит
качество визуализации 3D-сцены. Можно сказать, что 90% свойств материала несет в себе карта диффузного отражения,
которая делается по фотографиям реальных фактур.
В этом уроке я расскажу как создавать бесшовные текстуры из фотографий.
В английском языке их обычно называют patterns или seamless textures.
Данный урок — первый в серии, посвященной подготовке текстур.
Идея первого метода проста: выбираем наиболее характерный фрагмент изображения, кадрируем его,
применяем фильтр Offset, ретушируем стык.
В качестве исходного материала возьмем такое изображение. На нем неплохая текстура дерева.
В качестве образца я взял кусок в левом нижнем углу и кадрировал его инструментом Crop
.
Для 3D текстур желательно чтобы кусочек был квадратным. Это позволит
в дальнейшем легче назначать координаты проецирования в программе трехмерного моделирования. Получился вот такой вот кусочек.
С ним и будет идти вся дальнейшая работа.
Проверим выбранный кусок в качестве текстуры.
Командой Select > All выделяем все изображение целиком.
Вызываем в нем команду Edit > Define Pattern, которая определяет изображение как шаблон для заливки.
Теперь создаем новый документ большого размера, скажем 1024х768.
Вызываем команду Edit > Fill и выбираем образец для заливки.
Если теперь применить созданный образец, то мы получим явно заметные швы.
Для того чтобы получить возможность ретушировать стыки применим к кадрированному квадратику фильтр Filter > Other > Offset.
В поля диалогового окошка вводим примерно половину размера картинки, хотя если просто подергать ползунки, то не составит труда
загнать стыки в середину изображения.
В результате применения фильтра швы окажутся прямо посередине изображения, а левый
и правый край автоматически согласованы. Остается только воспользоваться любым инструментом ретуширования
для устранения стыков. Например, я чаще всего использую штамп клонирования, хотя и Patch tool тоже отлично подходит.
Если теперь применить созданный образец, то швов больше не видно. Обычно процедуру приходится повторять многократно до
достижения удовлетворительного эффекта. При ретушировании следует обращать внимание на слишком характерные элементы изображения, заметные пятна и т.п.
Ритмические повторения одинаковых сучков выдают искусственное происхождение текстурного рисунка.
В заключение не забудьте сохранить текстуру-квадратик в отдельный файл формата, понятного вашей
3D программе. Только проследите чтобы цветовая модель не была CMYK!
3ds Max неверно интерпретирует CMYK-файлы текстур помещенные
в слоты растровых карт материалов!
К сожалению, если в исходном изображении присутствует неоднородность в освещении выбранного фрагмента, то даже безупречная
ретушь стыков не позволит сделать шаг текстуры незаметным. В этом случае следует использовать инструменты осветления-затемнения.
Хотя более технологично использовать фильтры, но об этом в следующий раз.
Бесшовная текстура / Creativo.one
Умение создавать бесшовные текстуры в Фотошоп – полезный навык. Часто, необходимо, чтобы текстура повторялась, образовывая сплошное покрытие. Бесшовные текстуры еще называют «тайловыми» (от английского слова Tile – плитка). Мы рассмотрим, как создать текстуру из исходного фонового изображения без шва. Это полезная техника, которая всегда пригодится. Очень важно правильно подобрать размер исходных фотографий, грамотно настроить переходы света и тени, да еще и сохранить результат в нужном формате.
В этом уроке создадим бесшовный фон из травы.
Почему вы не можете просто применить заливку из исходного изображения? Если мы зальем фон, используя исходное изображение, то получим не очень хороший результат. Пример вы можете видеть ниже, изображение повторяется, и темные участки выглядят нелепо. Так что, прежде чем создавать бесшовный фон, нам необходимо удалить неисправности, а затем еще поработать со стыками текстур.
Шаг 1. Инструментом «Рамка» (Crop) выделим участок травы в центре, где нет тёмных участков.
Шаг 2. Получился участок главным образом равномерно освещённым, но придётся поработать над освещением краёв, поскольку небольшие различия станут весьма явными, когда фон покроется текстурой. Инструментом «Осветлитель» (Dodge Tool) (О), выберем большую мягкую кисть, и мягко пройдёмся по левому и правому краям изображения, чтобы осветлить.
Шаг 3. Теперь наша трава выглядит более однородной. Но в верхнем левом углу есть небольшой лист, и если мы зальём такой текстурой, то лист будет повторяться снова и снова, таким образом, мы должны избавиться от него. Выберите инструмент «Заплатка» (Patch Tool) (J) и выделите участок вокруг листа, переместите полученное выделение на любой участок травы (в настройках инструмента «Заплатка» должен быть установлен «Источник» (Source)).
Шаг 4. Будем работать над стыками краёв друг с другом. Дублируйте слой с травой (Ctrl+J), переместите первый слой налево, а второй направо (инструментом «Перемещение» (Move)).
Шаг 5. На изображении ниже вы видите два слоя, касающихся друг друга. Соедините их таким образом, чтобы не было видно белого участка между ними и слейте оба слоя в один (Ctrl+E).
Шаг 6. Теперь мы снова используем инструмент «Заплатка» (Patch Tool) – выделите область соединения двух слоёв и перетащите выделение на соседнюю область.
Шаг 7. Инструмент «Заплатка» (Patch Tool) делает этот вид работы легким, особенно с таким трудным фоном, как трава (если вас не устраивают мелкие детали, то вы можете инструментом «Штамп» (CloneStampTool) клонировать отдельные травинки).
Шаг 8. Повторим процесс по вертикали. Дублируйте слой (Ctrl+J) и переместите один слой вверх, другой вниз, соедините их таким образом, чтобы не было видно белого участка между ними и слейте оба слоя в один (Ctrl+E). Снова используем инструмент «Заплатка» (Patch Tool) – выделите область соединения двух слоёв и перетащите выделение на соседнюю область.
Шаг 9. Наша текстура готова,
осталось сохранить наше изображение, как образец для дальнейшей работы. Нажимаем Ctrl+A (выделим всё изображение) , заходим в меню Редактирование\Определить узор (Edit\Define pattern), присваиваете вашей текстуре имя и сохраняете.
Теперь к любому слою вы можете применить стиль слоя «Перекрытие узора» (Pattern Overlay) и из списка текстур выбрать нашу траву. Ниже приведён пример использования фона с травой для web-сайта.
Не забудьте сохранить документ в формате PSD или JPG.
Примечание автора: на финальном изображении всё-таки заметны повторяющиеся тёмные участки, вы можете избавиться от них с помощью инструмента «Штамп» (CloneStampTool), но так как автор использовал это изображение для заливки фона вебсайта, то они не очень ему мешают.
Есть ещё один способ ретуширования стыков – это применить к кадрированному квадратику текстуры фильтр Фильтр\Другие\Сдвиг (Filter\Other\Offset).
В открывшемся диалоговом окне подвигаем ползунки, перемещая изображение по горизонтали и вертикали. В результате применения фильтра швы окажутся примерно посередине изображения, а края автоматически согласованы. Остается только воспользоваться любым инструментом ретуширования фотошоп для устранения стыков («Штамп» или «Заплатка») и поработать над освещением краёв.
Автор: Сollis
Бесшовные фоны как сделать online. Как в фотошопе за несколько шагов сделать бесшовную текстуру
Непременно, что фон ваших WEB страничек в значимой мере определяет стиль и привлекательность всего WEB сайта. Фон в виде рисунка, узора либо текстуры воскрешает WEB страничку. При помощи текстур вы сможете имитировать создание изображений на разных поверхностях, таких как мрамор, брезент либо кирпичная кладка. Совместно с тем следует смотреть, чтобы фон не затруднял чтение основного текста.
Изображение для фона можно взять в одной из бессчетных бесплатных библиотек в WWW. Но можно сделать набросок и без помощи других. Поглядим, как это сделать на примере сотворения обычный фоновой текстуры. Начнем с сотворения нового документа размером 100х 100 пикселов с черным цветом фона и белоснежным цветом фронтального плана.
Щелкните мышью на значке Default Foreground and Background Colors (D)
(Цвета фронтального плана и фона по умолчанию) на панели инструментов (Tools) программки Adobe Photoshop, чтобы установить цвета по умолчанию.
Поменяйте местами цвета фронтального плана и фона, щелкнув мышью на значке Switch Foreground and Background Colors (X) (Переключатель цветов фронтального плана и фона) на панели инструментов (Tools). Цвет фона на образчике станет черным.
Изберите команду меню File — New (Файл — Новый). На дисплее появится диалог New (Новый).
В полях ввода Width (Ширина) и Might (Высота) введите значения ширины и высоты документа — 100 пикселов.
В открывающемся перечне Color mode (Цветовой режим) изберите RGB Color (Цвет RGB).
В открывающемся перечне Background Contents (Содержимое фона) изберите Background Color (Цвет фона).
Нажав кнопку ОК, закройте диалог New (Новый). В рабочем окне программки Adobe Photoshop появится окно нового документа с размерами 100х100 пикселов и черным цветом фона.
При помощи фильтров Clouds (Облака) и Difference Clouds (Облака с наложением) сделаем мягенький узор в виде «облаков». Эти фильтры генерируют узор при помощи случайных величин, которые меняются в спектре от основного цвета к фоновому, в нашем случае от белоснежного к черному.
Изберите команду меню Filter — Render — Clouds (Фильтр — Рендеринг — Облака). Фильтр будет использован, и на изображении появится узор в виде «облаков».
Сейчас применим к изображению фильтр Difference Clouds (Облака с наложением).
Изберите команду меню Filter — Render — Difference Clouds (Фильтр — Рендеринг — Облака с наложением). Узор на изображении поменяется.
Повторное неоднократное применение этого фильтра делает эффект «прожилок», который припоминает текстуру мрамора. Для повторного внедрения последнего использовавшегося фильтра довольно надавить комбинацию кнопок Ctrl+F.
Нажмите пару раз комбинацию кнопок Ctrl+F. При каждом нажатии этой композиции кнопок фильтр будет применяться повторно, а изображение в окне документа — изменяться.
Дальше применим к изображению фильтр Glowing Edges (Свечение краев) из группы фильтров Stylize (Стилизация). Все фильтры этой группы делают ярко выраженные эффекты очерчивания за счет смещения пикселов и увеличения контрастности изображения и в особенности полезны при обработке черно-белых изображений. Фильтр Glowing Edges (Свечение краев) ищет границы цветовых областей и добавляет свечение, схожее неоновому.
Изберите команду меню Filter — Stylize — Glowing Edges (Фильтр — Стилизация — Свечение краев). На дисплее появится диалог Glowing Edges (Свечение краев), в каком следует найти характеристики эффекта.
Переместите ползунковый регулятор Edge Width (Ширина границ) налево так, чтобы в поле ввода над ним появилось значение 1.
Ползунковый регулятор Edge Brightness (Яркость границ) переместите к правому краю так, чтобы значение этого параметра стало равно 20.
Для параметра Smoothness (Сглаженность) установите значение 1.
Закройте диалог Glowing Edges (Свечение краев), нажав кнопку ОК.
После внедрения этого фильтра изображение будет затемнено. Потому воспользуемся
командой Brightness/Contrast (Яркость/Контраст) для роста яркости и контраста.
Изберите команду меню Image — Adjustments — Brightness/Contrast (Изображение — Корректировки — Яркость/Контраст). На дисплее появится диалог Brightness/Contrast (Яркость/Контраст).
Переместите ползунковый регулятор Brightness (Яркость) на право так, чтобы в поле ввода над ним отобразилось значение +50.
Переместив ползунковый регулятор Contrast (Контраст) на право, установите значение этого параметра +30.
Нажав кнопку ОК, закройте диалог Brightness/Contrast (Яркость/Конграст).
Сейчас наше изображение, состоящее пока из цветов сероватого, нужно тонировать либо окрасить.
Изберите команду меню Image — Adjustments — Hue/Saturation (Изображение — Корректировки — Цветовой тон/Насыщенность). На дисплее появится диалог Hue/Saturation (Цветовой тон/Насыщенность).
При помощи этого диалога вы сможете настраивать в изображении цветовой тон, насыщенность и яркость отдельных цветовых компонент.
Удостоверьтесь, что установлен флаг Preview (Подготовительный просмотр), чтобы иметь возможность следить в окне документа результаты конфигурации характеристик.
Установите флаг Colorize (Тонирование). В диалоге поменяется положение ползунковых регуляторов, а в окне документа изображение будет тонировано — приобретет красноватый колер.
Чтобы лучше осознать закономерности опции цветовых компонент, следует представить для себя, что все видимые человечьим глазом цвета диапазона, размещаются на цветовом круге. Каждый цвет на этом круге характеризуется тремя базисными параметрами: цветовым тоном (Hue), насыщенностью (Saturation) и яркостью (Lightness). Такое представление соответствует уже рассмотренной нами ранее цветовой модели HSB.
Для описания цветового тона обычно употребляется заглавие цвета: красноватый, оранжевый, желтоватый, зеленоватый и так дальше Каждый цветовой тон занимает определенное положение на цветовом круге и характеризуется величиной угла от 0° до 360°.
Насыщенность — это степень чистоты цвета, которая определяется соотношением сероватого цвета и данного цветового тона. Насыщенность выражается в процентах от 0% — сероватый — до 100% — стопроцентно насыщенный. На цветовом круге насыщенность возрастает от центра к краю.
Яркость охарактеризовывает относительную освещенность либо затемненность цвета и измеряется в процентах в спектре от 0% — темный — до 100% — белоснежный.
На цветовом круге главные цвета моделей RGB и CMYK находятся в определенной зависимости: каждый цвет размещен против дополняющего его цвета и находится между цветами, из которых он получен. К примеру, сложение зеленоватого и красноватого дает желтоватый. Чтобы усилить какой-нибудь цвет, необходимо ослабить дополняющий его — расположенный напротив него на цветовом круге. Так, чтобы поменять общее цветовое решение в пользу голубых тонов, следует понизить содержание красноватого. По краю цветового круга размещаются так именуемые спектральные цвета, либо цветовые тона. Эти цвета характеризуются наибольшей насыщенностью.
Создадим насыщенность красноватого колера изображения в окне документа наибольшей.
Перемещайте ползунковый регулятор Saturation (Насыщенность) на право и наблюдайте в окне документа, как при всем этом увеличивается насыщенность красноватого цвета. Напомним, что на цветовом круге это соответствует движению от центра к краю. Установите значение этого параметра -100%.
Изменим цветовой тон изображения на голубой.
Перемещайте ползунковый регулятор Hue (Цветовой тон) на право и наблюдайте, как меняется цветовой тон изображения в окне документа. Изменяющееся при всем этом числовое значение в поле ввода над ползунковым регулятором отражает угол поворота на цветовом круге относительно начального красноватого цвета.
Установите значение параметра Hue (Цветовой тон) — 210. Такое значение отражает тот факт, что на цветовом круге голубой цвет, которым тонировано изображение, сдвинут относительно красноватого на 210°.
Нажав кнопку ОК, закройте диалог Hue/Saturation (Цветовой тон/Насыщенность). Установленные цветовые характеристики будут закреплены.
Сохраните документ в папке WEB, в файле Fon.psd в формате Adobe Photoshop.
На этом создание фоновой текстуры можно считать законченным. Но, потому что набросок
будет повторен на WEB страничке много раз, между кусками фона будут видны швы.
В Adobe ImageReady имеется особый фильтр — Tile Maker (Конструктор повторений), который позволяет удалить швы, создавая таким способом бесшовный фон.
Нажмите кнопку Edit In ImageReady (Shift+Ctrl+M) (Редактировать в ImageReady (Shift+Ctrl+M)) в нижней части панели инструментов (Tools). Будет запущена программа Adobe ImageReady, и в ее рабочем окне раскроется документ Fon.psd.
Изберите команду меню Adobe ImageReady Filter — Other — Tile Maker (Фильтр — Другие — Конструктор повторений). На дисплее появится диалог Tile Maker (Конструктор повторений).
Данный фильтр смешивает пикселы на краях изображения для сотворения бесшовного фона. При установленном переключателе Blend Edges (Размытие краев) будет производиться размытие краев рисунка для исключения швов между плитками при повторении изображения на WEB страничке.
В поле ввода Width (Ширина) следует указать ширину полосы у края изображения, в границах которой должен происходить плавный переход. Обычно употребляются значения от 5% до 15%, максимум до 20%. Воспользуемся значением этого параметра, предлагаемым по умолчанию, — 10 процентов.
При установленном флаге Resize Tile to Fill Image (Поменять размер плитки для наполнения изображения), размер плиток подгоняется под размер изображения. Если данный флаг скинуть, то плитки будут меньше размера изображения на величину, определенную параметром Width (Ширина), и на WEB страничке они не будут впритирку прилегать друг к другу.
Установка переключателя Kaleidoscope Tile (Калейдоскоп) создаст фон в виде калейдоскопа, в каком изображение отражается по горизонтали и вертикали, создавая таким способом уникальный узор.
Установите флаг Resize Tile to Fill Image (Поменять размер плитки для наполнения изображения).
Закройте диалог Tile Maker (Конструктор повторений) нажатием кнопки ОК. Установленные характеристики будут использованы.
Чтобы узреть, как будет смотреться в программке просмотра WEB страничек сделанный фон, следует поначалу указать программке, что данное изображение должно употребляться как фон.
Изберите команду меню File — Output Settings — Background (Файл — Характеристики вывода — Фон). На дисплее появится диалог Output Settings (Характеристики вывода).
Установите переключатель Background (Фон), чтобы использовать активное изображение в качестве фона WEB странички.
Закройте диалог Output Settings (Характеристики вывода), нажав кнопку ОК.
Сейчас можно просмотреть фон в .
Изберите команду меню File — Preview in (Файл — Подготовительный просмотр в) и в показавшемся подменю — программку просмотра WEB страничек. Будет запущен избранный браузер, и в его окне вы увидите сделанный бесшовный фон.
Для пуска браузера, установленного по умолчанию, вы сможете надавить кнопку Preview In Default Browser (Ctrl+Alt+P) (Подготовительный просмотр в браузере по умолчанию (Ctrl+Alt+P)) на панели инструментов (Tools).
Не считая фонового рисунка в окне программки просмотра выводится информация о формате изображения (Format), его размерах (Dimensions), размере файла (Size) и параметрах оптимизации (Settings), а ниже — HTML код автоматом сгенерированного файла.
Закройте окно браузера, нажав кнопку в правом верхнем его углу.
Чтобы сделанное изображение можно было использовать как фон WEB странички, его нужно улучшить и сохранить в WEB формате.
Щелкните мышью на ярлычке 2-Up (2 варианта) в высшей части окна документа. Будет выполнена оптимизация с последними установленными параметрами, и вы увидите оригинальное и оптимизированное изображения.
Подберите лучшие, с вашей точки зрения, характеристики оптимизации в формате GIF.
Сохраните оптимизированный документ в папке WEB под именованием Fon.gif, выбрав команду меню File — Save Optimized (Файл — Сохранить оптимизированный документ).
Закройте программку Adobe ImageReady без сохранения документа Fon.psd, нажав кнопку в правом верхнем углу ее окна.
Поглядим сейчас, как будет смотреться сделанный фон на WEB страничке other.html.
Откройте файл other.html из папки WEB в программке Блокнот (Notepad) и воткните в открывающий тег
атрибут background=Fon.gif.
Откройте в браузере файл other.html.
Видите ли, WEB страничка с сделанным фоном смотрится существенно увлекательнее, чем с однородным. Направьте внимание также, что швы между плитками фактически неприметны.
Закройте программку просмотра WEB страничек.
Удалите из HTML кода файла other.html вставленный атрибут background=Fon.gif.
Закройте программку Блокнот (Notepad).
Мы познакомились со методом сотворения бесшовного фона на базе фоновой текстуры, приобретенной при помощи фильтров Clouds (Облака) и Difference Clouds (Облака с наложением). Применяя разные эффекты к одноцветным либо полутоновым изображениям, вы сможете создавать самые различные текстуры. Ниже коротко описаны еще некие методы производства фоновых текстур. При этом обозначенные характеристики фильтров не являются строго неуклонными. Вы сможете разнообразить их в широких границах, получая всякий раз новый эффект.
Шероховатость
В программке Adobe Photoshop сделайте новый документ размером 100 x 100 пикселов с белоснежным цветом фона и черным цветом фронтального плана.
Залейте изображение черным цветом.
Примените фильтр Add Noise (Добавить шум), выбрав команду меню Filter — Noise — Add Noise (Фильтр — Шум — Добавить шум) с установленным переключателем Uniform (Равномерное), флагом Monochromatic (Сохранить цвета) и параметром Amount (Эффект) равным 400.
Примените фильтр Emboss (Рельеф), воспользовавшись командой меню Filter — Stylize — Emboss (Фильтр — Стилизация — Рельеф), с параметрами: Angle (Угол)=45, Height (Высота)=2, Amount (Эффект)=30.
Тонируйте изображение, выбрав команду меню Image — Adjustments — Hue/Saturation (Изображение — Корректировки — Цветовой тон/Насыщенность).
Шлифованная плитка
Сделайте новый документ размером 100 x 100 пикселов и с белоснежным цветом фона.
Примените фильтр Add Noise (Добавить шум) с установленным переключателем Gaussian (По Гауссу), флагом Monochromatic (Сохранить цвета) и параметром Amount (Эффект) равным 125.
Примените фильтр Motion Blur (Размытие в движении), воспользовавшись командой меню Filter — Blur — Motion Blur (Фильтр — Размытие — Размытие в движении), с параметрами: Angle (Угол)=-45, Distance (Расстояние)=100. Последний параметр должен быть не меньше размера изображения.
Примените фильтр Emboss (Рельеф) с параметрами: Angle (Угол)=45, Height (Высота)=2, Amount (Эффект)=35. Направьте внимание, что параметр Angle (Угол) должен отличаться от такого же параметра фильтра Motion Blur (Размытие в движении).
Тонируйте изображение, воспользовавшись диалогом Hue/Saturation (Цветовой тон/Насыщенность), применив последующие характеристики: флаг Colorize (Тонирование) — установлен, Hue (Цветовой тон)=180, Saturation (Насыщенность)=10, Lightness (Яркость)=+20.
Облицовочная плитка
Сделайте новый документ размером 100х 100 пикселов и с белоснежным цветом фона.
Примените фильтр Add Noise (Добавить шум) с установленным переключателем Uniform (Равномерное), флагом Monochromatic (Сохранить цвета) и параметром Amount (Эффект) равным 120.
Примените фильтр Emboss (Рельеф) с параметрами: Angle (Угол)=45, Height (Высота)=1, Amount (Эффект)=30.
В гамме Channels (Каналы) сделайте новый канал Alpha 1, нажав кнопку Create new channel (Сделать новый канал).
Выделите изображение альфа-канала в окне документа командой Select — All (Выделение — Все) и сделайте рамку выделения шириной 3 пиксела командой Select — Modify — Border (Выделение — Модификация — Граница).
Инвертируйте выделение командой Select — Inverse (Выделение — Направить выделение) и залейте выделенную область белоснежным цветом. Отмените выделение.
Примените к альфа-каналу фильтр Gaussian Blur (Размытие по Гауссу), воспользовавшись командой меню Filter — Blur — Gaussian Blur (Фильтр — Размытие — Размытие по Гауссу) с параметром Radius (Радиус)=2.0 пиксела, чтобы размыть границу.
В гамме Layers (Слои) выделите слой Background (Фон) и сделайте эффект трехмерности при помощи фильтра Lighting Effects (Эффекты освещения), воспользовавшись командой меню Filter — Render — Lighting Effects (Фильтр — Рендеринг — Эффекты освещения).
Тонируйте изображение, воспользовавшись диалогом Hue/Saturation (Цветовой тон/ Насыщенность).
Для сотворения фоновых текстур, не считая обрисованных фильтров, попытайтесь использовать фильтры Colored Pencil (Магический карандаш), Sponge (Губка), Grain (Зерно), Craquelure (Кракелюры), Chalk & Charcoal (Мел и уголь), Mezzotint (Меццотинто), Mosaic (Мозаика), Halftone Pattern (Полутоновой узор), Note Paper (Почтовая бумага), Polntillize (Пуантилизм), Reticulation (Ретикуляция), Glass (Стекло), Texturizer (Текстуризатор), Texture (Текстура), Ink Outlines (Тушь) и Mosaic Tile (Цветная плитка). Заметим, что применение неких фильтров, к примеру, Glass (Стекло), к сплошному цвету дает очень малозначительный либо нулевой эффект.
Которое мы можем использовать. Несмотря на это, если мы размножим картинку как есть, результат будет не очень хороший. Как вы можете видеть выше, места, где картинка повторяется, очень заметны, и тёмные пятна выглядят просто жутко. Чтобы превратить это фото в мощёный фон, нам сначала нужно удалить все неравномерности, а затем сделать плавный переход у краёв.
Шаг 1
Обрежьте, сделав фото меньше, чтобы избежать тёмных мест.
Таким образом, первый шаг это — взять основную картинку и затем обрезать до такого размера, чтобы в углах не было тёмных пятен, как показано выше.
Шаг 2
Используйте инструмент Dodge (осветление)
для осветления тёмных областей.
Вот наш фрагмент.
На самом деле я немного уменьшил изображение, так чтобы текстура не была такой резкой. Теперь хотя у него более равномерный цвет, нам нужно осветлить края. Чем больше мы можем сделать, тем лучше, так как даже небольшая разница слишком бросается в глаза, когда фон размножен.
Выберите инструмент Dodge (O)
и большой мягкой кистью немного пройдитесь возле левого и правого краёв, чтобы немного осветлить тень. Не переборщите, иначе трава будет выглядеть слишком размытой.
Шаг 3
Как вы можете видеть выше, трава выглядит более равномерно окрашенной. Но этот листочек слева вверху разоблачит нас, если будет повторяться снова и снова, поэтому мы должны избавиться от него. Возьмите инструмент Patch (Заплатка) (J)
и обведите вокруг листа мышкой, захватите эту область и перетащите. (Обратите внимание: инструмент Patch должен быть установлен на Source (Источник), а не на Destination (Назначение),
иначе разница будет несущественная).
Шаг 4
Теперь наш фон выглядит очень приятно и равномерно. Нам только нужно сделать плавный переход от одного края к другому. Дублируйте слой, затем подвиньте первый слой влево, а второй слой вправо до тех пор, пока вы не увидите оба слоя и белый промежуток между ними. Теперь соедините их вместе, так чтобы правый край первого слоя коснулся левого края второго слоя.
Шаг 5
Я оставил промежуток в 1 px, чтобы вы могли увидеть, как соединяются края.
Здесь вы можете видеть, что два слоя почти соприкасаются. Соедините их вместе так, чтобы между ними не было видно белого и объедините два слоя в один
Шаг 6
Теперь мы снова используем инструмент Patch (Заплатка)
, чтобы нарисовать неровную линию вокруг кромки, где соединяются два слоя, затем, используя мышь, перетащите выделенную область на близлежащий участок, чтобы заделать его.
Шаг 7
Инструмент patch делает подобного рода операции действительно просто, особенно с такими шумными фонами, как эта трава. Как вы можете видеть, если не приглядываться очень внимательно, совсем незаметно, где была линия перехода. Если вы хотите, вы можете усовершенствовать детали и клонировать отдельные листочки травы — но и этого достаточно для наших целей.
Шаг 8
Теперь мы повторим тот же самый процесс по вертикали. Дублируйте слой и подвиньте один вниз, а другой вверх, пока верхний и нижний края не соприкоснутся. Объедините слои вместе и используйте инструмент patch, чтобы избавиться от кромки.
Шаг 9
Теперь мы готовы к мощению!
Это будет работать, потому что мы практически избавились от краёв, новые края документа уже совпадают, потому что мы подвинули слои равномерно влево и вправо, так что правый край документа действительно является следующим пикселем вдоль левого края.
Шаг 10
Нажмите CTRL+A
, чтобы выделить всё и выберите Edit > Define Pattern.
Шаг 11
Дадим паттерну имя.
Шаг 12
Теперь на любом слое, если вы выберете blending options и отметите раздел Pattern Overlay, вы можете выбрать из вашего набора заказных паттернов, как показано, включая паттерн с травой, который мы только что сделали. На рисунке выше вы можете видеть, как я применяю паттерн к фону веб-сайта.
Конечно, вы должны также сохранить изображение паттерна как PSD или JPG, т. к. вам может понадобиться использовать отдельное изображение. Например, если вы будете использовать его как фоновую картинку в HTML-документе, вам понадобится отдельная картинка в формате JPG image, а не «Pattern» для Фотошопа.
Готово!
Вот и наша мощёная травка.
Как вы можете видеть, здесь много тёмных пятен, но т. к. я буду использовать её в качестве фона для сайта, это не проблема, поскольку сверху будут всякие разные штуки. Несмотря на это вы можете легко вернуться назад и залатать эти пятна, чтобы сделать фон более однородным.
Все это я покажу вам на примере фотографии джинсов.
Выбираем инструмент создания прямоугольной области выделения Rectangular Marquee Tool
, зажимаем Shift
и создаем квадратную область выделения как на рисунке:
Нажимаем Ctrl+C
, чтобы скопировать часть изображения. Затем создайте новый документ File > New…
При этом, если вы скопировали часть изображения, программа автоматически подставит размеры этого фрагмента для нового документа.
Вставьте скопированное изображение, нажав Ctrl+V
.
Итак, это заготовка для создания паттерна. Если мы создадим его сейчас, то при заливке изображения большего размера, чем 331х331px, будут видны швы (места стыковки). Для тех, кто не понял, показываю на примере.
Обратите внимание на выделенные фрагменты. Такие швы возникают из-за того, что при заливке паттерны стыкуются друг с другом, начиная с левого верхнего угла, правый край к левому и низ к верху. А далеко не все края изображений совмещаются стык-в-стык. Решить это проблему поможет фильтр Filter > Other > Offset…
Как можно догадаться, первый параметр указывает на какое количество пикселей сместить изображение по горизонтали. Второй – по вертикале. Сместите изображение так, чтобы стыки получились ближе к центру изображения, здесь проще с ними работать. После этого, используя наборы инструментов из вкладки Healing
или Stamp
, уберите швы.
Я использовал инструмент Spot Healing Brush Tool
. Просто выбрал его и провел два раза по швам: вверх и вниз. Вот, что получилось:
Теперь создадим Pattern
. Для этого перейдите Edit > Devine Pattern…
и укажите название паттерна.
Все! Теперь давайте проверим, что у нас получилось. Создайте новый документ любого размера. Выберите инструмент заливки Paint Bucket Tool
, в настройках укажите, что заливать будем паттерном, а не цветом, и выберите ваш, только что созданный, паттерн.
Заливаем изображение и получаем
Если вы занимаетесь веб-дизайном, 3D моделированием или другим творчеством, связанным с 3D max или Photoshop, то вам периодически требуются качественные бесшовные текстуры и фоны. Найти нужную текстуру или фон в сети порой бывает очень не просто, поэтому решением данной проблемы может послужить вариант сделать бесшовную текстуру (фон) самостоятельно. При этом, вы сами сможете сделать текстуру нужного вам качества и оттенка.
Давайте самостоятельно создадим бесшовную текстуру (фон) в программе фотошоп. И так, главной особенностью бесшовной текстуры (фона) является отсутствие границ, т.е. взяв данную текстуру и соединяя ее с копией с любой стороны мы в итоге получим бесшовное изображение, без каких либо разделений и границ. В качестве примера посмотрите картинку ниже, где справа расположена текстурка камня, а слева несколько данных текстур соединены.
Подобное бесшовное изображение, будь то текстура или фон, можно достаточно легко сделать в программе Photoshop с помощью специального плагина. Сейчас мы все это в подробностях рассмотрим.
Для начала работы нам потребуется сам фон или текстура который(ую) мы и будем “превращать” в бесшовный(ую). Естественно, что качество нашей будущей бесшовной текстуры или фона будет напрямую зависеть от качества исходного изображения или фото. Допустим, вам необходимо сделать бесшовную текстуру асфальта, в таком случае вам потребуется фото данного асфальта и чем качественнее данное фото будет, тем качественнее получится бесшовная текстура. Вы можете найти нужное вам изображение в интернете, либо сделать фото объекта самостоятельно, но фото должно быть качественным.
Возьмем, для примера фото асфальта, найденное в сети, фото специально подберем побольше размерами, чтобы текстура получилась высокого качества. В нашем случае размер фото составляет 1300 x 864px, чего будет достаточно.
Данная картинка (фото) не является бесшовным и это легко проверить состыковав данное изображение с копией. По итогу мы видим, что стыки (швы) на общей картине видны.
Принцип создания бесшовного изображения заключается в отражении краев (стыков), что в результате дает идеальное соединение изображения, тем самым создавая вид единой поверхности, а не разных кусков изображения. Для легкого и быстрого “превращения” фото (изображений) в бесшовные текстуры существует специальный плагин для фотошопа, который автоматически выполняет указанные выше функции (отражение и подгонка швов изображения).
Данный плагин разработан для фотошопа, начиная с CS3 и заканчивая последней на сегодняшний день версией CC. Плагин является бесплатным и скачать его можно с нашего сайта:
Скачайте плагин для вашей версии фотошоп и установите его. После установки плагина у вас в правой боковой панели программы фотошоп появится значок плагина:
Чтобы создать бесшовное изображение (текстуру) с помощью данного плагина необходимо открыть нужное изображение (фото) программой фотошоп и сделать данное изображение квадратным – это обязательное требование данного плагина. Т.е. открываете необходимое изображение фотошопом, выбираете инструмент “Прямоугольная область” в левой панели программы и с его помощью (удерживая левую клавишу мыши) выделяете квадратную область из любой части вашего изображения.
Для того, чтобы область выделялась правильным квадратом, а не прямоугольником, необходимо в ходе выделения нужной области, помимо левой кнопки мыши удерживать клавишу “Shift”.
После того, как нужная область выделена, выбираете в верхнем меню “Изображение” – “Кадрировать” и ваша выделенная область будет вырезана и обращена в квадратное изображение.
Теперь настало время воспользоваться “волшебным” плагином. При выделенном слое нашего квадратного изображения нажимаем на значок плагина и у нас открывается панелька.
В данной панельке мы указываем размер нашего изображения в пикселях (в нашем случае получилось 864px) и ставим галочку напротив “Difine Pattern”, после чего просто выбираем способ создания бесшовного изображения нажатием на кнопку “Tile” или “Mirror”. Если вы выберите способ “Tile”, то ваше бесшовное изображение будет создано именно из вашей картинки в полном ее размере. Если же выберите способ “Mirror”, то бесшовное изображение будет создано из 4-х ваших картинок, зеркально отраженных и уменьшенных под размер вашего квадрата. Вообщем просто попробуйте и все поймете сами.
Мы выбрали способ “Tile” и в результате получили текстуру высокого качества, размером 864 x 864 пикселя:
Бесшовную текстуру (фон) высокого качества, которою можно использовать в 3D max или фотошопе мы сделали, но давайте еще придадим ей необходимый нам оттенок. Допустим нам нужна текстура потрескавшегося асфальта не светло-серого цвета, а темно-красного. Для начала мы объединим получившиеся слои в одну картинку, а первоначальное изображение просто удалим за ненадобностью. В правой панели слоев удаляем самый нижний слой с нашим исходным изображением, чтобы оно не мешалось и преобразуем все получившиеся слои из которых состоит бесшовная текстура в одно изображение.
Для этого правой кнопкой мыши кликаем по папке “tile pattern” и выбираем в появившемся меню “Преобразовать в смарт-объект”. После данных действий все содержимое папки будет преобразовано в один слой изображения, с которым мы в дальнейшем и будем работать (менять ему цветовой тон).
Выделяем наш слой с бесшовным фоном, кликнув в панели слоев по нему левой кнопкой мыши и в нижнем меню, под панелькой слоев кликаем на значок коррекции и в появившемся меню выбираем “Цветовой тон/насыщенность”. После этого над нашим слоем с текстурой появится новый корректирующий слой и откроется окошко с настройками цветового тона и насыщенности. В данном окошке вы уже на свое усмотрение регулируете “ползунки” настроек цвета и тона, после чего применяете данные настройки.
Таким образом у вас получится бесшовная текстура с необходимым цветовым тоном. Остается сохранить данное изображение в высоком качестве, для этого в верхнем меню выбираем “Файл” – “Экспортировать” – “Сохранить для web” и в появившемся окне, в настройках качества выставляем 100%, после чего жмем кнопку “Сохранить”.
После данных манипуляций получилась качественная бесшовная текстура с необходимым нам оттенком. И теперь, если мы приложим копии изображения друг к другу, то убедимся, что получается бесшовный фон, стыков (швов) уже нет.
Бесшовные фоны как сделать online. Использовать такие фоны можно как background для сайтов и виртуальных открыток, так и для создания любых изображений.
Вы можете задавать любой нужный вам цвет на всех элементах рисунка. Уменьшать и увеличивать орнамент, делать прозрачный фон, но правда функцию прозрачности поддерживают не все экземпляры.
Регистрация и оплата не требуются. Хотя предлагают пожертвовать если вам этого хочется. Сейчас я покажу вам как тут можно работать. Переходим по ссылочке https://patterncooler.com/ . Выбираем и кликаем по нему левой кнопкой мыши
И оказываемся в редакторе фонов. Если хотим посмотреть какую палитру предлагают нам для выбранного изображения, то надо нажать на кнопочку Show color
Если же мы хотим выбрать случайные цвета, то жмём на чикбокс Случайные
Чтобы отредактировать цвет, жмём на него либо на экране, либо на квадратики внизу
Редактирование может происходить либо движением ползунка, либо на экране с цветовой палитрой, либо установкой кода цвета в обведённое красным цветом на скриншоте окошко
Изображению можно задать текстуру, для это кликаем на кнопку textur
И выбираем подходящую
А ещё здесь же можно изменить масштаб элементов дизайна (обведено зелёным)
Функция прозрачности к сожалению работает не на всех изображениях. И такие картинки никоим образом не помечены. Поэтому узнавать это придётся нам самим. Отрываем картинку в редакторе и если внизу слева, стоит бегунок Прозрачность, то двигаем его. Для того чтобы добиться нужного эффекта
Если мы всё сделали так, как нам нужно, то нажимаем на кнопку Скачать
После этого открывается папочка на нашем компьютере, чтобы сохранить файл, выбираем нужную папку, даём название файлу и сохраняем. Думаю, что как это делать особо объяснять не надо. А теперь посмотрите видеоурок, где всё я объясняю более подробно
Итак, я рассказала как сделать бесшовный фон или бекграунд в on-line сервисе. Если что то не понятно, то пожалуйста задавайте вопросы на блоге. А не в соцсетях или скайпе. Так как это будет полезно как остальным посетителям блога, так и вам. Потому что частенько в комментариях пишут полезные подсказки.
Бесшовные фоны как сделать online.
Бесшовные текстуры
В этом разделе представлено огромное количество различных различных бесшовных текстур ,
доступна для бесплатной загрузки, которую вы можете использовать в своей работе.
Текстуры играют важную роль в 3D-дизайне и компьютерной анимации.
От их качества зависит эффективность и реалистичность визуализации.
Представляем большую коллекцию текстур для успешного развития вашего дизайн-проекта.
Благодаря нашему креативному ресурсу у вас не возникнет проблем с поиском необходимых материалов для рендеринга.Наш каталог постоянно обновляется и расширяется.
В этом разделе представлены бесшовные текстуры для фотошопа, организованные для удобного поиска по подразделам: асфальт, бетон, вода, дерево, доски, кора, почва, мрамор, песок, ткань, трава и т. Д.
Текстуры досок и дерева являются одними из самых популярных среди веб-дизайнеров и художников. В категории представлено более 500 различных вариаций 3D-моделирования: от самых простых до эксклюзивных.
Текстуры травы (растительность в разное время года, цветочные поляны, газоны) характеризуются высоким уровнем детализации, что позволяет создавать реалистичные дизайнерские пейзажи любой сложности.
При интерьерном моделировании требуется текстуры ткани, различной формы и цветовой гаммы. Высокое разрешение, отсутствие швов передают реалистичную поверхность материала. Текстуры можно накладывать на объекты любого размера, отображая детальную структуру волокон.
Фактуры мрамора , благодаря своим декоративным качествам, используются для создания самых разнообразных композиций. Благодаря разнообразию узоров и цветов вы легко сможете выбрать идеальный вариант для создания оригинальной 3D-модели .
Бесплатные профессиональные материалы с высоким разрешением обеспечат отличную визуализацию HD-качества. Чтобы оценить художественные свойства текстуры, вы можете использовать удобный предварительный просмотр, представленный на каждой странице текстуры.Для бесплатной загрузки просто нажмите на соответствующий значок и сохраните файл.
Выберите интересующий вас раздел и просмотрите текстуры.
Создание бесшовных текстур, даже не выходя из браузера
Школа искусств Йельского университета
придерживается несколько устаревшего подхода к плиточному фону
На прошлой неделе кто-то указал мне на Школу искусств Йельского университета и их .. колодец .. интересное и, возможно, ироничное использование плиточного фона.В зависимости от вашего урожая, у вас могут быть воспоминания о MySpace, Angelfire или даже о недавно ушедших Geocities, но это заставило меня задуматься.
Фоновые изображения плитки похожи на крокодилов в мире веб-дизайна. Впервые они появились в «юрском» периоде Интернета, пережив таких динозавров, как макеты на основе таблиц и теги шрифтов. Конечно, они могут быть чертовски уродливыми и страшными, но, как крокодилы, они остаются на долгое время, потому что работают.
Хорошо, это могло быть концептуальной натяжкой, но я много смотрю канал Discovery.
Забегая вперед, мы, скорее всего, увидим больше мозаичных фонов. Теперь, когда все текущие браузеры (IE9, Chrome, Firefox, Opera и Safari) наконец-то поддерживают использование нескольких фонов для одного элемента, кажется, есть отличные возможности для объединения плиток разного размера новыми и интересными способами. Однако в большинстве случаев вам нужно, чтобы образец изображения был мозаикой без видимых краев или швов.
Итак, как нам это сделать?
Наиболее распространенный метод создания бесшовных плиток включает использование фильтра смещения Photoshop для перемещения стыков внутрь области изображения, а затем ручное ретуширование стыков с помощью восстанавливающей кисти или инструмента клонирования.Теперь нет никаких аргументов: это дает хороший результат, но требует некоторой работы и, когда задействованы сложные шаблоны, часто значительных навыков.
Есть несколько отличных коммерческих инструментов для бесшовной мозаики, которые в первую очередь предназначены для разработчиков игр и разработчиков 3D-моделей (хорошие примеры — Genetica, Pattern Studio и PhotoSEAM).
Если вы видите регулярное использование этих инструментов, они великолепны, но, возможно, для нас излишни. Есть несколько платных плагинов для Photoshop и несколько сырых самодельных приложений, но я должен сказать, что меня ничего не впечатлило.Что, если бы вы могли сделать качественную бесшовную плитку, ничего не устанавливая и даже не выходя из браузера? Читай дальше.
Образец текстуры обоев из Lost & Taken
Сегодня мы собираемся использовать некоторые из наборов онлайн-графических инструментов Aviary. Чтобы поиграть, вы можете подумать об установке расширений Chrome или Firefox, которые связывают ваш браузер напрямую с их сервисом. Необязательно получать результат, но он упростит ваш процесс.Это ваш вызов.
- Я собираюсь начать со старой текстуры обоев из потрясающей и постоянно растущей коллекции Калеба Кимбро в Lost & Taken. Когда вы найдете понравившуюся текстуру, используйте расширение Aviary, чтобы сделать снимок экрана в окне браузера. Он должен загружаться прямо в редактор разметки изображений Aviary (он же Talon), где вы можете использовать инструмент кадрирования, чтобы обрезать изображение до красивого участка текстуры. Вам не нужно слишком заботиться о том, где именно вы обрезаете свои узоры — мы можем исправить это позже, — но постарайтесь выбрать область, которая относительно ровно освещена.
Обрежьте изображение до приемлемого размера и затем перенесите его в редактор эффектов
Затем нажмите зеленую кнопку «Image Effects» в правом верхнем углу, чтобы перенести наше изображение в редактор эффектов Aviary (он же Peacock) — здесь и происходят интересные вещи. Когда он загружен, в рабочем пространстве должен отображаться фрагмент вашей текстуры (помеченный как «Ресурс») с выходным холстом под ним. Соединительный рычаг автоматически присоединяет наш образец текстуры к холсту.
- Теперь откройте вкладку «Эффекты» на левом краю, и вы найдете ящик, содержащий около 40 типов эффектов.Покопайтесь, пока не найдете эффект «Бесшовные», и перетащите его между плиткой текстуры (Ресурс) и холстом.
Соедините свой ресурс, эффект и холст вместе
Нам нужно «связать» эти элементы вместе. Если вы правильно расположили эффект бесшовности, они могли автоматически соединиться друг с другом.
Если нет, ничего страшного. Просто перетащите соединительный рычаг от крошечной ручки на нижнем краю нашего образца и ручки на верхнем краю плитки с эффектом бесшовные.Выполните тот же процесс, чтобы подключить эффект Бесшовные к холсту. Теперь у вас должна быть хорошая цепочка от ресурса до перехода на холст.
- Выберите эффект «Бесшовные», и вы увидите его свойства, отображаемые на панели справа. Честно говоря, настройки по умолчанию не очень полезны, поэтому сбросьте горизонтальное и вертикальное смешение на ноль, а горизонтальное и вертикальное смещение на 50%. Это переместит швы с жесткими краями в центр холста, что упростит работу с ними.
- Теперь по волшебству. Начните постепенно сдвигать настройки перехода по горизонтали, и вертикальный шов с жесткими краями должен начать испаряться на ваших глазах. Если исходная текстура образца представляет собой органическую текстуру (бумага, трава, мрамор и т. Д.), Подойдет почти любая смесь около 10%. Искусственные повторяющиеся узоры, такие как обои и ткань, потребуют от вас более точной настройки, но это не так уж сложно.
Сдвиньте настройки горизонтального перехода, и вертикальный шов должен начать испаряться
- Вы, наверное, догадались, что следующий шаг.Используйте ползунок вертикального перехода, чтобы удалить горизонтальное соединение.
- Когда результат вас устраивает, щелкните элемент холста и установите флажок « Adapt Display Size to Input Bitmap » на панели свойств. Это автоматически обрежет любую пустую область изображения. Вуаля ! Теперь вы должны смотреть на идеальную бесшовную плитку.
- Теперь вам просто нужно его скачать. В меню «Файл» вверху вы можете использовать опцию «Экспортировать холст как растровое изображение», чтобы загрузить копию.Вы также можете сохранить копию в своей учетной записи Aviary, если она у вас есть.
Вот готовая плитка из примера, и я создал небольшую демонстрационную страницу, чтобы показать ее действие.
Плитка бесшовная готовая
Примечание. Вы можете заметить водяной знак Aviary в нижнем углу изображения. Он включен по умолчанию, но может быть отключен в настройках вашего профиля. У вас должна быть учетная запись Aviary, но это вам ничего не стоит.
Сводка
Как вы, наверное, уже догадались, редактор эффектов делает гораздо больше, чем просто создает бесшовные плитки.Peacock — это сложный инструмент, позволяющий смешивать и сопоставлять исходные фотографии, сгенерированные фрактальные узоры, процедурные текстуры, эффекты линз и фильтры для создания практически любой поверхности, которую вы можете себе представить. Сегодня мы почти не поцарапали поверхность, но генератор бесшовной плитки — отличный способ получить что-то ценное от Aviary, одновременно намочив ноги.
Вы, вероятно, проходите мимо или едите с отличных поверхностей каждый день. Уберите их на черный день.
В этой демонстрации я начал с одной из текстур Калеба, но если поискать в Интернете, везде можно найти отличные бесплатные исходные материалы.Раньше я пробовал текстуры у коммерческих розничных продавцов плитки, поставщиков специальной бумаги, оптовых торговцев тканями и производителей кирпича.
Более того, большинство из нас носит в набедренных карманах высококачественные «устройства для захвата текстуры». Просто осознавайте, что видят ваши глаза, хватайте и убирайте это. Вскоре у вас появится собственная суперполезная коллекция бесплатных необработанных текстур.
Удачи.
Как создавать бесшовные текстуры в Photoshop
Оборачиваете ли вы текстуры вокруг 3D-объектов или просто заполняете фон, вероятно, вам потребуется заполнить большее пространство, чем позволяет исходный блок текстуры.Проблема в том, как избежать очевидных стыков, в которых текстура повторяется. Вот простое решение, с помощью которого можно сделать любую текстуру бесшовной.
Шаг 1: Начальная текстура
Выберите текстуру и обрежьте ее так, чтобы она соответствовала размеру окна Photoshop — вы не хотите, чтобы она свисала с холста. Если вы настроили инструмент кадрирования, чтобы он не удалял пиксели, что является стандартным, то после того, как вы обрежете, выберите все, а затем создайте новый слой из выделенного фрагмента. Это ограничит новый слой только тем, что видно в окне.
Шаг 2. Смещение текстуры
Перетащите слой текстуры в нижний левый угол, чтобы угол текстуры теперь находился более или менее посередине. Необязательно делать это точно.
Больше после прыжка! Продолжайте читать ниже ↓
Члены бесплатного и премиум-класса видят меньше рекламы! Зарегистрируйтесь и войдите в систему сегодня.
Шаг 3: повторить текстуру
Удерживайте Option / Alt, перетаскивая текстуру вверх с помощью инструмента «Перемещение», чтобы сделать копию, удерживая Shift, чтобы она двигалась точно вертикально, пока нижняя часть повторяющейся текстуры не встретится с верхом существующей.Затем используйте Command / Ctrl + E, чтобы объединить эти два слоя вместе.
Шаг 4: Повторить еще раз
Теперь перетащите слой вправо, снова удерживая Option / Alt и Shift, чтобы сделать копию. Слейтесь еще раз. Теперь вы сместите исходную текстуру так, чтобы края оказались посередине. Соединения здесь очевидны, но вы знаете, что там, где текстура выходит за пределы верхнего края, она плавно повторяется снизу, и то же самое для левого и правого.
Шаг 5. Исправьте стыки
Самый простой способ начать — использовать инструмент «Точечное исцеление», перетаскивая его вертикально вниз по центру и горизонтально по горизонтали.Это будет отличное начало, хотя вас еще нет.
Шаг 6. Исправьте ошибки
После использования Spot Healing Tool у вас, вероятно, останутся некоторые громоздкие пятна, такие как черный камень в верхней части этого изображения, который выглядит слишком обрезанным справа. Переключитесь на инструмент клонирования и используйте его, чтобы пробовать чистые участки фона, чтобы скрыть любые аномалии.
Шаг 7: Сохраните текстуру
Выделите все, затем перейдите в Edit> Define Pattern.Дайте новому шаблону имя и нажмите OK. Теперь вы сможете использовать его в любой работе в Photoshop.
Шаг 8. Попробуй
Самый простой способ проверить новую текстуру — создать новый слой, залитый любым плоским цветом, и выбрать «Слой»> «Стиль слоя»> «Наложение узора». Новая текстура будет последней в списке. Когда он заполнит слой, переместите диалоговое окно в сторону, и вы сможете перетащить его, чтобы проверить, действительно ли оно бесшовное. Вы также можете уменьшить масштаб, если хотите, чтобы проверить повторы.
Посмотреть видео
Посмотрите видеоверсию этого руководства ниже.
Дом OSArch — Wiki.OSArch
Мы помогаем создать искусственную среду с помощью бесплатного программного обеспечения , повышенной прозрачности и более этичного подхода.
В этой вики мы собираем и делимся всем, что знаем о бесплатных технологиях в нашей отрасли. Каждая страница на этом сайте написана такими же людьми, как вы.
Примите участие [править]
Заинтересованы в инициативах OSArch, и почему OSArch так важен для проектирования, строительства, эксплуатации и утилизации антропогенной среды? См. Введение в OSArch. Мы сильное и растущее сообщество.
Прямо сейчас мы ищем добровольцев, чтобы помочь с этими вещами. Если вы готовы, напишите на форумах и дайте нам знать!
Ознакомьтесь с бесплатными программами [править]
Знаете ли вы, что список бесплатных инструментов, которые помогут вам в работе, постоянно растет? В отличие от проприетарного программного обеспечения, бесплатное программное обеспечение никогда не сделает вашу цифровую работу несовместимой, устаревшей или заставит вас подписаться.См. Справочник бесплатного программного обеспечения AECO.
Начать путешествие:
Присоединяйтесь к нам на форуме, чтобы мы могли открыть эти страницы вместе:
Хотите углубиться в технологию AEC?
Использовать открытые стандарты [править]
Открытые технологии и стандарты помогают нашим цифровым инструментам взаимодействовать и защищать вас от истечения срока хранения данных. Посмотрите, что доступно в Справочнике стандартов открытых данных.
Узнайте о концепциях данных Industry Foundation Class (IFC):
Предоставляете OpenBIM для управления объектами?
Узнайте, как указать требования к данным с помощью MVD и MicroMVD (все статьи).
Застряли на проприетарном ПО? Изучите передовой опыт и обходные пути для получения данных, соответствующих отраслевым стандартам.
Чтобы увидеть полный список статей, просмотрите каталоги и категории.
«Программное обеспечение с открытым исходным кодом (OSS) — это тип компьютерного программного обеспечения, исходный код которого выпущен по лицензии, в которой правообладатель предоставляет пользователям права на использование, изучение, изменение и распространение программного обеспечения для всех и для любых целей. .»-Википедия |
20 Полезные сайты для графического дизайна Текстуры и узоры
При правильном применении узоры и текстуры могут создавать удивительные и действительно уникальные дизайны. Обычно они используются для фона сайта, но также могут использоваться как повторяющиеся шаблоны в таких компонентах сайта, как верхний и нижний колонтитулы. Если вы используете правильный тип шаблонов, он действительно может улучшить внешний вид вашего сайта для зрителя.
В этой статье мы поделимся 20 отличными сайтами , где вы можете бесплатно найти и загрузить бесшовные текстуры, узоры и плитки.
1. Бесшовные текстуры
Бесшовные текстуры , как следует из названия сайта, предоставляет текстуры высокого качества. Определенная сайтом бесшовная текстура «» может повторяться бесконечно без каких-либо краев. Они в основном используются в 3D-дизайне, фонах веб-сайтов, графическом дизайне и обоях для рабочего стола “.
2. Pattern8
Pattern8 имеет макет эскизов в стиле галереи, так что вы можете быстро просмотреть большое количество узоров на одной странице одновременно.На сайте также есть изящная функция фильтра, которая позволяет сузить то, что вы видите, по цвету.
3. Библиотека шаблонов
Библиотека шаблонов содержит прекрасную коллекцию бесплатных шаблонов, созданных некоторыми из самых талантливых дизайнеров.
4. PatternCooler
PatternCooler — отличный сайт для создания бесшовных узоров. Для каждого представленного шаблона вы можете изменить цвет, повернуть и изменить их разрешение, а также сохранить их в своей учетной записи PatternCooler (если она у вас есть).
5. Ava7Patterns
Ava7Patterns предоставляет красивые шаблоны для загрузки. Вы можете искать шаблоны в коллекции сайта, насчитывающей более 1200 шаблонов по цвету или форме.
6. Vector Valley
Vector Valley , репозиторий ресурсов векторов, имеет раздел по шаблонам, который предоставляет просто великолепные векторные фоновые шаблоны.
7.Текстура Palace
Texture Palace предлагает более 2000 бесплатных текстур, которые вы можете скачать и использовать в своих проектах.
8. Один странный чувак
One Odd Dude имеет на сайте раздел «Текстуры» с большим разнообразием стандартных текстур, которые вы можете фильтровать по категориям и упорядочивать по популярности , рейтингу пользователей и дате публикации.
9. GRSites
GRSites — это ресурсный центр в виде каталогов для фоновых текстур.Это один из (если не самый большой) архив фоновых узоров в Интернете.
10. Фоновые лаборатории
Background Labs предлагает множество фонов для загрузки. У них есть функция поиска по облаку тегов, так что вы можете легко искать текстуру фона по ключевому слову.
11. DINPATTERN
DINPATTERN i s сайт разработчика с бесплатными бесшовными узорами. Существует даже набор шаблонов, совместимых с мобильными устройствами, для ваших нужд веб-разработки.
12. Пиксель Будда
Pixel Buddha предоставляет вам различные стили бесплатных узоров и текстур. Взгляните на их монохромную палитру.
13. Дикие текстуры
Wild Textures предлагает уникальные красиво оформленные фоновые узоры и текстуры для вашего использования. Если вы не видите то, что ищете, они также открыты для новых идей и предложений.
14. Улучшенные текстуры
Better Textures — это коллекция бесплатных, качественных и оригинальных бесшовных фоновых текстур. Они организовывают коллекцию в такие группы, как «Мешковина» и «Сухая кисть».
15. Паттеррифик
Patterrific — это сайт в стиле блога, на котором представлены красивые и достойные внимания шаблоны графического дизайна, а также полезные сообщения, демонстрирующие дизайн пользователей.
16. Модели изменений
Образцы изменений , автор Лизы Феникс, отличается уникальными и поистине блестящими графическими узорами, такими как этот пастельный узор грибов.
17. Справочная информация
Архив фона — это демонстрация фоновых узоров, которые вы можете скачать. У них есть отличная функция поиска на правой боковой панели, так что вы можете найти именно для вас фоновый узор.
18.Фоновые лаборатории
Background Labs предлагает загружаемые шаблоны, графику и текстуры, подходящие для любых ваших вдохновляющих идей.
19. Образец цитрусовой луны
Созданный в 2004 году, Citrus Moon Pattern обеспечивает оригинальные шаблоны графического дизайна. Обновления сайта прекратились примерно в 2005 году, но шаблоны появлялись почти каждый день, так что есть еще много шаблонов, которые можно найти там.
20. Шаблонная головка
Pattern Head — это сайт в стиле блога, на котором представлены красивые образцы графического дизайна, такие как красивые винтажные узоры.
Связанное содержание
Как сделать бесшовную текстуру в Photoshop (Redux) — Medialoot
Более простой способ создания бесшовных текстур
В этом уроке я хотел вернуться к теме создания бесшовных текстур в Photoshop и поделиться с вами новой, невероятно простой техникой, которая делает весь процесс намного проще, чем раньше.Он даже работает с некоторыми текстурами, которые я раньше назвал бы «необратимыми».
Шаг 1
Для этого урока я использую antique-wood-8.jpg (бесплатная загрузка) из набора Antique Wood Textures на Medialoot. Обратите внимание, хотя этот метод выравнивает текстуры, исходное изображение, которое вы выбираете для использования, должно быть высокого качества и относительно сбалансированным для начала.
Откройте текстуру в Photoshop и используйте инструмент «Кадрирование» с квадратным соотношением сторон и 2000 пикселей как для ширины, так и для высоты.Следует установить флажок Удалить обрезанные пиксели .
Шаг 2
В моей предыдущей статье я рассказал о стандартном методе создания мозаичных изображений в Photoshop, который заключается в использовании фильтра «Смещение» и последующем смешивании краев с помощью инструмента «Клонирование». Прежде чем мы попробуем новый метод, давайте сначала протестируем фильтр Offset, чтобы увидеть, с чем мы будем здесь работать.
Перейдите в Filter> Other> Offset и введите +1000 пикселей для обоих вариантов Horizontal и Vertical и нажмите OK.
Теперь, даже если вы волшебник с инструментом Clone, эти швы будет нелегко сгладить:
Шаг 2 (снова)
Так что давайте забудем об этом, отмените фильтр смещения и начните заново. Вместо этого продублируйте фоновый слой и установите непрозрачность верхнего слоя на , 50%, .
Шаг 3
Выделив верхний слой, перейдите в Edit> Transform и нажмите Flip Horizontal , а затем также Flip Vertical .
Шаг 4
Выберите оба слоя и объедините их вместе (CMD + E или CTRL + E).
Шаг 5
Теперь давайте снова попробуем это смещение. Как по волшебству, результат сейчас намного лучше, чем по сравнению с предыдущей попыткой. Швы все еще видны, но похоже, что их можно легко соединить.
Шаг 6
Используйте инструмент «Клонирование» с круглой кистью около , 100 пикселей, и , с твердостью 30% . Выберите подходящий источник, удерживая нажатой клавишу ALT и щелкнув область, которую вы хотите использовать.Затем клонируйте текстуру, используя волнистую линию слева направо, закрывающую шов.
Шаг 7
Повторите последний шаг, на этот раз для вертикального шва.
Шаг 8
По-прежнему используя инструмент «Клонирование», уберите любые аномалии в текстуре или отличительные элементы, которые появляются более одного раза и выдают тот факт, что текстура была дублирована.
Шаг 9
Чтобы восстановить часть исходного качества текстуры и замаскировать клонирование, примените фильтр Sharpen 1-2 раза по , пока не будет достигнут желаемый эффект.
Шаг 10
Это также хорошее время для окончательной корректировки, например, некоторых тонких корректировок уровней.
Шаг 11
Наконец, перейдите в меню Edit и выберите Define Pattern. дайте вашему шаблону имя и нажмите OK.
Результат и заключение
Вот бесшовная текстура в действии при 25% увеличении. Там, где швы, практически не заметно.
Прелесть этой техники в том, что для создания бесшовных текстур требуется очень много ручной работы.Этот метод работает практически с любой текстурой и дает отличные результаты. Недостатком зеркального отражения и наложения текстуры является то, что это немного визуально изменяет текстуру.
Texture Maker — Генератор бесшовных текстур
Texture Maker — это генератор и дизайнер бесшовных текстур.
Приложение содержит все необходимое для создания бесшовных текстур для использования в 3D.
пакеты рендеринга, разработка игр, веб-графика, редактирование изображений и видео.
Он может создавать процедурные и нарисованные вручную текстуры с нуля, удалять
видимые швы на существующих изображениях, кадрирование текстур с фотографий с применением перспективы
исправление, рендеринг бесшовных плиток из фрагментов образцов структуры и объединение
существующие текстуры и карты высот с реалистичным освещением.
Кроме того, с Texture Maker не проблема с анимированными текстурами. Программа даже способна
создания бесшовных циклов анимации.
Texture Maker может быть расширен с помощью плагинов и автоматизирует сложные операции с помощью скриптов.
способности. Почти все функции используют несколько процессоров в системе.
Обзор функций:
Все функции оптимизированы для бесшовных текстур
Более 130 различных генераторов, фильтров и инструментов для деформации
Около 700 пресетов для быстрых результатов
Стандартные инструменты для цветокоррекции, масштабирования, добавления границ и т. Д.
Может отображать анимированных текстур с бесшовными петлями
Автоматическое MIP-отображение для уменьшенных текстур
Мульти-текстурный миксер
Шейдер для реалистичного освещения
Инструмент Textractor для извлечения текстур из фотографий с коррекцией перспективы
Инструмент ISampler для создания больших, однородных, бесшовных текстур из образцов патчей
Инструмент калейдоскоп для визуализации симметричных плиток
Генератор генетических текстур для быстрых абстрактных плиток
Преобразование текстур в градациях серого в карты нормалей RGB
Средство визуализации ландшафта, создающее карт окружения
Система частиц для анимированных текстур, таких как эффектов оружия и жидкости
Предварительный просмотр текстуры в реальном времени на стандартных примитивах и предварительно обработанных моделях
Полностью с возможностью создания сценариев и пакетный рендеринг
Программируемые горячие клавиши для оптимального рабочего процесса
Расширенная справочная система
Плагины
Поддержка многопроцессорных систем (SMP) и гиперпоточности
.