Как создать бесшовный фон при помощи Photoshop? | Техника и Интернет
Итак, как из любого понравившегося рисунка сделать себе бесшовный фон? Для начала находим необходимое изображение, внимательно его разглядываем и пытаемся оценить его сложность.
На рисунке изображены крупные предметы. Чем больше предмет, тем сложнее будет с ним работать!
Много четких линий. В этом случае неровности на стыках очень заметны, поэтому это тоже осложняет работу.
Неравномерно распределено освещение. Если противоположные стороны имеют разную яркость, то этот переход будет очень заметен даже в том случае, если сами по себе края картинки будут подходить друг к другу.
Открываем картинку в Photoshop’е (у меня версия CS4). Внимание! Далее я буду давать инструкции на английском и русском языке (для оригинальной и русифицированной версий), однако перевод может не совпадать с тем, что есть у вас — это зависит от версии русификатора! Щелкаем меню Image/Mode (Изображение/Режим) и убеждаемся, что у нас стоит галочка напротив RGB color (RGB цвет). Если нет, ставим ее.
Для своих работ я выбрала вот такую картинку (рис. 1, вверху). Как мы видим, она довольно абстрактна и — слава богу! — равномерно освещена. Однако на ней изображены крупные предметы, имеющие очень четкие линии. А как выглядит ваша картинка? Если у нее один край темнее противоположного, то начать нужно с освещения. Освещение можно подкорректировать несколькими способами.
Первый способ. Выбираем Filter/Render/Lights Effects (Фильтр/Освещение/Эффекты освещения) (рис. 2). Дальше настройки индивидуальны и зависят только от вашего рисунка. Покрутите овальчик слева, подергайте ползунки. Совет: если края картинки получаются темными (не хватает света), а при растягивании овала центр получается слишком ярким, увеличьте значение параметра
Второй способ. Если светлых (темных) мест совсем немного или же изменение незначительно, то можем воспользоваться кисточками с панели инструментов — Dodge или Burn (Осветление или Затемнение). Совет: кисточка для таких работ должна быть достаточно мягкой: уменьшаем параметр
Параметр Exposure (Экспозиция) отвечает за интенсивность, им вы можете регулировать для плавных переходов света.Теперь, когда изображение равномерно освещено, идем Filter/Other/Offset (Фильтр/Другие/Сдвиг) и выбираем опцию Wrap around (Вращать вокруг, в некоторых версиях — Обернуть).
Ставим значения обоих ползунков примерно (точность несущественна) вполовину изображения (например, у меня исходная картинка разрешением 400×300 пикселей, значит, я выставляю значения 200 по горизонтали и 150 по вертикали). Итак, теперь наши швы аккурат посередине (рис. 1, внизу). Наша задача — сделать их как можно менее заметными.
Масштабируем изображение и берем инструмент Clone Stamp (Штамп клонирования).
Кстати, если ваша картинка не содержит никаких геометрических фигур и вообще достаточно однородна, можно попробовать другой способ. Открываем исходное изображение (до сдвига швов) и добавляем в текстуры Edit/Define Pattern (Редактирование/Задать текстуру). Теперь вновь сдвигаем швы (Offset) и берем инструмент
Я свою картинку ретушировала с помощью обыкновенного штампа, по маленьким кусочкам подрисовывая нужные элементы и стирая при помощи обыкновенной кисточки черного цвета ненужные элементы.
Когда наш бесшовный фон будет готов, добавляем его в текстуры (как я описывала ранее). Создаем новый документ в Photoshop, ставим ему размер намного больше нашей картинки, далее идем Layer/New fill layer/Pattern (Слой/Новое заполнение слоя/Текстура) и выбираем нашу новую текстуру. Смотрим, что получилось!
Если вы попытались сделать так, как я рекомендовала, но у вас что-то не получилось — не расстраивайтесь! Существует плагин для Photoshop под названием
Только не надо сейчас произносить все слова, которые пришли вам на ум! Плагин этот не идеален, поэтому подойдет лишь для картинок туманов, облаков, шерсти и прочих подобных вещей.
Посмотрите что получится, если применить его к моему рисунку (рис. 5)! Правда, у меня красивей?
Теги: компьютеры, создание сайта, фототехника, рисунки, программы
Как сделать бесшовную текстуру фон для сайта всего за 3 шага?
Как сделать бесшовную текстуру фон для сайта
Вам периодически требуются качественные бесшовные текстуры и фоны, если вы занимаетесь веб-дизайном, 3D моделированием или другим творчеством. Найти нужную текстуру или фон в сети порой бывает очень не просто.
Поэтому решением данной проблемы может послужить вариант сделать бесшовную текстуру (фон) самостоятельно. При этом, вы сами сможете сделать текстуру нужного вам качества и оттенка.
Давайте самостоятельно сделаем бесшовную текстуру (фон) в программе фотошоп.
Итак, главной особенностью бесшовной текстуры (фона) является отсутствие границ, т.е. взяв данную текстуру и соединяя ее с копией с любой стороны мы в итоге получим бесшовное изображение, без каких либо разделений и границ.
В качестве примера посмотрите картинку ниже, где справа расположена текстура камня, а слева несколько данных текстур соединены.
Подобное бесшовное изображение, будь то текстура или фон для сайта, можно достаточно легко сделать в программе Photoshop с помощью специального плагина. Сейчас мы все это в подробностях рассмотрим.
Для начала работы нам потребуется сам фон или текстура который(ую) мы и будем «превращать» в бесшовный(ую). Естественно, что качество нашей будущей бесшовной текстуры или фона будет напрямую зависеть от качества исходного изображения или фото.
Допустим, вам необходимо сделать бесшовную текстуру асфальта, в таком случае вам потребуется фото данного асфальта. И чем качественнее данное фото будет, тем качественнее получится бесшовная текстура.
Вы можете найти нужное вам изображение в интернете, либо сделать фото объекта самостоятельно, но фото должно быть качественным.
Возьмем для примера фото асфальта, найденное в сети, фото специально подберем побольше размерами, чтобы текстура получилась высокого качества. В нашем случае размер фото составляет 1300 x 864px, чего будет достаточно.
Данная картинка (фото) не является бесшовным и это легко проверить состыковав данное изображение с копией. По итогу мы видим, что стыки (швы) на общей картине видны.
Принцип создания бесшовного изображения заключается в отражении краев (стыков), что в результате дает идеальное соединение изображения, тем самым создавая вид единой поверхности, а не разных кусков изображения. Для легкого и быстрого «превращения» фото (изображений) в бесшовные текстуры существует специальный плагин для фотошопа, который автоматически выполняет указанные выше функции (отражение и подгонка швов изображения).
Скачиваем бесплатный плагин
Данный плагин разработан для фотошопа, начиная с CS3.
Плагин является бесплатным и скачать его можно с нашего сайта:
- Плагин для Photoshop CS3
- Плагин для Photoshop CS5
- Плагин для Photoshop CS6
- Плагин для Photoshop СС
Скачайте плагин для вашей версии фотошоп и установите его. После установки плагина у вас в правой боковой панели программы фотошоп появится значок плагина:
Делаем фото квадратным
Чтобы создать бесшовное изображение (текстуру) с помощью данного плагина необходимо открыть нужное изображение (фото) программой фотошоп и сделать данное изображение квадратным — это обязательное требование данного плагина. Т.е. открываете необходимое изображение фотошопом, выбираете инструмент «Прямоугольная область» в левой панели программы и с его помощью (удерживая левую клавишу мыши) выделяете квадратную область из любой части вашего изображения.
Для того, чтобы область выделялась правильным квадратом, а не прямоугольником, необходимо в ходе выделения нужной области, помимо левой кнопки мыши удерживать клавишу «Shift».
После того, как нужная область выделена, выбираете в верхнем меню «Изображение» — «Кадрировать» и ваша выделенная область будет вырезана и обращена в квадратное изображение.
Теперь настало время воспользоваться «волшебным» плагином. При выделенном слое нашего квадратного изображения нажимаем на значок плагина и у нас открывается панелька.
Получаем бесшовную текстуру
В данной панельке мы указываем размер нашего изображения в пикселях (в нашем случае получилось 864px) и ставим галочку напротив «Difine Pattern», после чего просто выбираем способ создания бесшовного изображения нажатием на кнопку «Tile» или «Mirror». Если вы выберите способ «Tile», то ваше бесшовное изображение будет создано именно из вашей картинки в полном ее размере. Если же выберите способ «Mirror», то бесшовное изображение будет создано из 4-х ваших картинок, зеркально отраженных и уменьшенных под размер вашего квадрата. Вообщем просто попробуйте и все поймете сами.
Мы выбрали способ «Tile» и в результате получили текстуру высокого качества, размером 864 x 864 пикселя:
Бесшовную текстуру (фон) высокого качества, которою можно использовать в 3D max или фотошопе мы сделали.
Но давайте еще придадим ей необходимый нам оттенок. Допустим нам нужна текстура потрескавшегося асфальта не светло-серого цвета, а темно-красного. Для начала мы объединим получившиеся слои в одну картинку, а первоначальное изображение просто удалим за ненадобностью. В правой панели слоев удаляем самый нижний слой с нашим исходным изображением, чтобы оно не мешалось и преобразуем все получившиеся слои из которых состоит бесшовная текстура в одно изображение.
Для этого правой кнопкой мыши кликаем по папке «tile pattern» и выбираем в появившемся меню «Преобразовать в смарт-объект». После данных действий все содержимое папки будет преобразовано в один слой изображения, с которым мы в дальнейшем и будем работать (менять ему цветовой тон).
Красим текстуру в нужный цвет
Выделяем наш слой с бесшовным фоном, кликнув в панели слоев по нему левой кнопкой мыши и в нижнем меню, под панелькой слоев кликаем на значок коррекции и в появившемся меню выбираем «Цветовой тон/насыщенность».
После этого над нашим слоем с текстурой появится новый корректирующий слой и откроется окошко с настройками цветового тона и насыщенности. В данном окошке вы уже на свое усмотрение регулируете «ползунки» настроек цвета и тона, после чего применяете данные настройки.
Таким образом у вас получится бесшовная текстура с необходимым цветовым тоном. Остается сохранить данное изображение в высоком качестве, для этого в верхнем меню выбираем «Файл» — «Экспортировать» — «Сохранить для web» и в появившемся окне, в настройках качества выставляем 100%, после чего жмем кнопку «Сохранить».
После данных манипуляций получилась качественная бесшовная текстура с необходимым нам оттенком. И теперь, если мы приложим копии изображения друг к другу, то убедимся, что получается бесшовный фон, стыков (швов) уже нет.
Итак, наша бесшовная текстура готова!
Ваше имя (обязательно)
Ваш e-mail (обязательно)
Сообщение
Как создать бесшовный фоновый узор в Photoshop | by Icons8
8 простых шагов для создания растрового фонового узора из иконок PNG.
Бесшовные узоры можно наносить на любой фон, какой только можно себе представить, от веб-сайта или приложения до фотографии в Tinder.
1. Adobe Photoshop. Если вы наткнулись на это руководство, велика вероятность, что эта программа у вас уже есть. Тем не менее, вот ссылка для загрузки бесплатной тестовой версии.
2. Icons8 для рабочего стола. Это бесплатное приложение, содержащее множество значков и хорошо работающее с Photoshop.
Скачать Icons8
3. Иконки или другие изображения, которые вы хотите использовать в своем шаблоне. Для этого урока мы использовали наши значки природы. К вашему сведению, они бесплатны в формате PNG любого размера, поэтому вы можете сохранить их в своей учетной записи и использовать для шаблона.
Получить значки природы
1. Создайте основу для вашего рисунка
Создайте новый файл любого размера с одинаковой шириной и высотой. В нашем случае каждая сторона равна 200px.
2. Добавьте значки
Перетащите значки из Icons8 для рабочего стола (или любые другие значки) в файл Photoshop. Мы выбрали краба, рыбу, рыбу-клоуна и морского конька.
3. Разместите каждый значок на отдельном слое
Нажмите Введите , чтобы завершить процесс вставки значка. Вы должны нажимать ее столько раз, сколько необходимо, пока не перестанете видеть черную рамку.
В итоге должно получиться так:
Теперь каждая иконка находится на своем слое в вашем файле.
4. Настройте первый слой
Выберите один слой на панели слоев и перейдите к Filter > Other > Offset :
Установите параметры Horizontal и Vertical равными половине длины стороны файла. Помните ширину и высоту вашего квадрата? Это две настройки, которые вам нужны.
Размер нашего файла 200x200px, поэтому мы устанавливаем 100px для обоих параметров. Убедитесь, что вы проверили Wrap Around в нижней части всплывающего окна.
Нажмите «ОК». Первый слой готов:
5. Настройте второй слой
Выберите другой слой на панели слоев. Теперь снова перейдите к Filter > Other > Offset .
Затем установите Horizontal на 0px и нажмите OK:
6. Настройте третий слой
Выберите еще один слой и перейдите к Filter > Other > Offset . Теперь переверните по горизонтали и по вертикали значений. Для нашего случая по горизонтали будет 100px, а по вертикали 0px. Нажмите «ОК».
Теперь у нас есть плитка с узором.
7. Объединить слои
Выберите все слои, кроме Background на панели слоев и используйте комбинацию горячих клавиш Ctrl+E . Выбранные слои будут объединены.
8. Создайте свой шаблон
Сначала используйте еще одну комбинацию горячих клавиш Ctrl+A (выбрать все).
Затем перейдите к Правка > Определить шаблон :
Назовите его и нажмите OK.
Та-да! Ваш узор готов!
Выкройка у вас есть, отлично. Теперь давайте посмотрим, как использовать его на фоне.
1. Создайте новый файл
Чтобы увидеть результат, увеличьте его размер плитки узора. У нас 800x600px.
2. Выберите Pattern Overlay
Дважды щелкните Background на панели слоев. Нажмите OK во всплывающем окне.
Перейдите к Слой > Стиль слоя > Наложение узора :
Выберите только что созданный шаблон во всплывающем окне и нажмите OK.
3. Наслаждайтесь своим узором!
Как расширить фон в Photoshop
Как расширить фон в Photoshop
Редактирование
Вы когда-нибудь хотели иметь гладкий бесшовный фон на своих изображениях? Но либо не было достаточно большой стены, либо комната была слишком загромождена? Что ж, благодаря волшебству Photoshop очень просто воплотить свое видение в реальность. Как и при любом редактировании, есть много способов сделать это, но я считаю, что это самый простой (и самый быстрый!)
Подробнее: 10-секундное редактирование с использованием заливки с учетом содержимого
Откройте изображение в Photoshop, и вы будете готовы к работе!
Инструмент выделения
Вместо того, чтобы сосредотачиваться на том, чего у нас нет на изображении, давайте воспользуемся тем, что у нас есть, и выделим это с помощью инструмента выделения.
Для таких работ я использую прямоугольную рамку. Цель состоит в том, чтобы выделить пустое пространство стены, на которое вы хотите, чтобы остальной фон выглядел.Используя инструмент выделения, возьмите его с самого верха изображения и растяните до самого низа. Можно выйти за границу, она будет располагаться по краям вашего изображения.
Если с первого раза прямоугольник не получился правильно, либо переместите его, пока он не станет правильным, либо просто «отмените» и повторите попытку, пока он не подойдет.
Свободное преобразование
Не снимая выделения, перейдите в меню редактирования и раскрывайтесь, пока не увидите «Свободное преобразование». Выберите этот параметр. Вы должны увидеть маркировку вдоль рамки.
Заполните пространство
Используя маркеры, появившиеся с помощью команды «Свободное преобразование», щелкните один из них и потяните чистую стену в том направлении, которое вы хотите покрыть.
Продолжайте тянуть, пока не будет покрыто все пространство. Вы можете выйти за точку рамки, если хотите удалить что-то, что могло быть в исходной рамке (например, тень от абажура на моем изображении).0005
Для таких работ я использую прямоугольную рамку. Цель состоит в том, чтобы выделить пустое пространство стены, на которое вы хотите, чтобы остальной фон выглядел.
Вот оно!! Я говорил вам, что это было легко!
Здесь вы отмените выбор выделения.
И, конечно же, не забудьте сохранить свое изображение. (Но если вы забудете, утешайтесь тем, что вам потребуется менее 30 секунд, чтобы сделать это снова.)
Финал до и после. Удачного редактирования!
Узнайте больше советов по Photoshop:
– Краткое руководство по Photoshop: 6 функций, о которых вам нужно знать
— Создание симметрии в Photoshop
— 10-секундное редактирование с использованием заливки с учетом содержимого
Мелисса Хауген — Соавтор
Я женщина во многих шляпах — Жена моей возлюбленной старшеклассницы, Мать трех моих диких тварей, Медсестра и Фотограф. Моя любовь к фотографии началась в фотолаборатории в старшей школе и со временем стала только более страстной.