Как создать бесшовный фон при помощи Photoshop? | Техника и Интернет
Итак, как из любого понравившегося рисунка сделать себе бесшовный фон? Для начала находим необходимое изображение, внимательно его разглядываем и пытаемся оценить его сложность.
На рисунке изображены крупные предметы. Чем больше предмет, тем сложнее будет с ним работать!
Много четких линий. В этом случае неровности на стыках очень заметны, поэтому это тоже осложняет работу.
Неравномерно распределено освещение. Если противоположные стороны имеют разную яркость, то этот переход будет очень заметен даже в том случае, если сами по себе края картинки будут подходить друг к другу.
Открываем картинку в Photoshop’е (у меня версия CS4). Внимание! Далее я буду давать инструкции на английском и русском языке (для оригинальной и русифицированной версий), однако перевод может не совпадать с тем, что есть у вас — это зависит от версии русификатора! Щелкаем меню
Для своих работ я выбрала вот такую картинку (рис. 1, вверху). Как мы видим, она довольно абстрактна и — слава богу! — равномерно освещена. Однако на ней изображены крупные предметы, имеющие очень четкие линии. А как выглядит ваша картинка? Если у нее один край темнее противоположного, то начать нужно с освещения. Освещение можно подкорректировать несколькими способами.
Первый способ. Выбираем Filter/Render/Lights Effects (Фильтр/Освещение/Эффекты освещения) (рис. 2). Дальше настройки индивидуальны и зависят только от вашего рисунка. Покрутите овальчик слева, подергайте ползунки. Совет: если края картинки получаются темными (не хватает света), а при растягивании овала центр получается слишком ярким, увеличьте значение параметра Focus (Фокус). Смотрим на мой пример (рис. 3).
Второй способ. Если светлых (темных) мест совсем немного или же изменение незначительно, то можем воспользоваться кисточками с панели инструментов — Dodge или Burn (Осветление или Затемнение). Совет: кисточка для таких работ должна быть достаточно мягкой: уменьшаем параметр Жесткость (Hardness). Параметр Exposure (Экспозиция) отвечает за интенсивность, им вы можете регулировать для плавных переходов света.
Теперь, когда изображение равномерно освещено, идем Filter/Other/Offset (Фильтр/Другие/Сдвиг)
Ставим значения обоих ползунков примерно (точность несущественна) вполовину изображения (например, у меня исходная картинка разрешением 400×300 пикселей, значит, я выставляю значения 200 по горизонтали и 150 по вертикали). Итак, теперь наши швы аккурат посередине (рис. 1, внизу). Наша задача — сделать их как можно менее заметными.
Масштабируем изображение и берем инструмент Clone Stamp
Кстати, если ваша картинка не содержит никаких геометрических фигур и вообще достаточно однородна, можно попробовать другой способ. Открываем исходное изображение (до сдвига швов) и добавляем в текстуры Edit/Define Pattern (Редактирование/Задать текстуру). Теперь вновь сдвигаем швы (Offset) и берем инструмент
Я свою картинку ретушировала с помощью обыкновенного штампа, по маленьким кусочкам подрисовывая нужные элементы и стирая при помощи обыкновенной кисточки черного цвета ненужные элементы. Посмотрите увеличенный фрагмент изображения до ретуширования и после (рис. 4).
Когда наш бесшовный фон будет готов, добавляем его в текстуры (как я описывала ранее). Создаем новый документ в Photoshop, ставим ему размер намного больше нашей картинки, далее идем Layer/New fill layer/Pattern (Слой/Новое заполнение слоя/Текстура) и выбираем нашу новую текстуру. Смотрим, что получилось!
Если вы попытались сделать так, как я рекомендовала, но у вас что-то не получилось — не расстраивайтесь! Существует плагин для Photoshop под названием
Только не надо сейчас произносить все слова, которые пришли вам на ум! Плагин этот не идеален, поэтому подойдет лишь для картинок туманов, облаков, шерсти и прочих подобных вещей. Посмотрите что получится, если применить его к моему рисунку (рис. 5)! Правда, у меня красивей?
Повторяющиеся бесшовные узоры в Photoshop
Шаг 3. Создаём выделенную область в документе
Берём инструмент «Овальная область» (Elliptical Marquee Tool). Наводим курсор мыши точно в центр документа на перекрестье направляющих, зажимаем клавиши Shift+Alt, зажимаем левую клавишу мыши и тащим курсор от центра в любую сторону, чтобы получилась примерно такая окружность:
О точном размере не волнуйтесь, размер мы подгоним позднее.
Шаг 4. Заливаем выделение
Теперь необходимо заполнить выделение чёрным цветом. Для этого нажимаем клавишу D (после чего цвета в панели цветов становятся по умолчанию, чёрным и белым), затем нажимаем комбинацию Alt+Delete, выделение заполняется основным цветом, в нашем случае, чёрным. Документ должен выглядеть так:
Снимаем выделение, нажав Ctrl+D. Края круга выглядят рубленными,т.к. документ увеличен на 300%.
Шаг 5. Клонируем слой
Клонируйте слой с чёрным кругом,нажав Ctrl+J.
Шаг 6. Смещаем копию
Откройте диалоговое окно Фильтр —> Другое —> Сдвиг (Filter —> Other —> Offset) и задайте сдвиг 50 пикселей по вертикали или горизонтали и не забудьте поставить галку у опции «Вставить отсечённые фрагменты» (Wrap Around):
Нажмите кнопку OK, чтобы закрыть диалоговое окна. Документ выглядит так:
Шаг 7. Определяем документ, как узор
Идём по вкладке главного меню Редактирование —> Определить узор (Edit —> Define Pattern). Откроется окно, где введите имя новому узору и нажмите ОК:
Готово! Мы сохранили наш документ в качестве основы узора.
Теперь давайте попробуем применить его в новом документе. Документ с кружками можно закрыть, он нам больше не нужен.
Шаг 8. Создаём новый документ и добавляем новый слой
Создаём новый документ размером, например, 700 на 700 пикселей с белым фоном. Создаём новый пустой слой в документе, нажав Ctrl+Shift+Alt+N.
Шаг 9. Заполняем документ узором
Пройдите по вкладке главного меню Редактирование —> Выполнить заливку (Edit —> Fill). В диалоговом окне выберите «Регулярный» (Pattern), а затем свой узор:
После чего нажмите ОК. Photoshop зальёт узором всю площадь документа:
Узор готов. В следующем материале рассмотрим, как добавить цвета и градиенты к узорам Photoshop.
Как сделать бесшовную текстуру фон для сайта всего за 3 шага?
Как сделать бесшовную текстуру фон для сайта
Вам периодически требуются качественные бесшовные текстуры и фоны, если вы занимаетесь веб-дизайном, 3D моделированием или другим творчеством. Найти нужную текстуру или фон в сети порой бывает очень не просто.
Поэтому решением данной проблемы может послужить вариант сделать бесшовную текстуру (фон) самостоятельно. При этом, вы сами сможете сделать текстуру нужного вам качества и оттенка.
Давайте самостоятельно сделаем бесшовную текстуру (фон) в программе фотошоп.
Итак, главной особенностью бесшовной текстуры (фона) является отсутствие границ, т.е. взяв данную текстуру и соединяя ее с копией с любой стороны мы в итоге получим бесшовное изображение, без каких либо разделений и границ.
В качестве примера посмотрите картинку ниже, где справа расположена текстура камня, а слева несколько данных текстур соединены.
Подобное бесшовное изображение, будь то текстура или фон для сайта, можно достаточно легко сделать в программе Photoshop с помощью специального плагина. Сейчас мы все это в подробностях рассмотрим.
Для начала работы нам потребуется сам фон или текстура который(ую) мы и будем “превращать” в бесшовный(ую). Естественно, что качество нашей будущей бесшовной текстуры или фона будет напрямую зависеть от качества исходного изображения или фото.
Допустим, вам необходимо сделать бесшовную текстуру асфальта, в таком случае вам потребуется фото данного асфальта. И чем качественнее данное фото будет, тем качественнее получится бесшовная текстура. Вы можете найти нужное вам изображение в интернете, либо сделать фото объекта самостоятельно, но фото должно быть качественным.
Возьмем для примера фото асфальта, найденное в сети, фото специально подберем побольше размерами, чтобы текстура получилась высокого качества. В нашем случае размер фото составляет 1300 x 864px, чего будет достаточно.
Данная картинка (фото) не является бесшовным и это легко проверить состыковав данное изображение с копией. По итогу мы видим, что стыки (швы) на общей картине видны.
Принцип создания бесшовного изображения заключается в отражении краев (стыков), что в результате дает идеальное соединение изображения, тем самым создавая вид единой поверхности, а не разных кусков изображения. Для легкого и быстрого “превращения” фото (изображений) в бесшовные текстуры существует специальный плагин для фотошопа, который автоматически выполняет указанные выше функции (отражение и подгонка швов изображения).
Скачиваем бесплатный плагин
Данный плагин разработан для фотошопа, начиная с CS3. Плагин является бесплатным и скачать его можно с нашего сайта:
Скачайте плагин для вашей версии фотошоп и установите его. После установки плагина у вас в правой боковой панели программы фотошоп появится значок плагина:
Делаем фото квадратным
Чтобы создать бесшовное изображение (текстуру) с помощью данного плагина необходимо открыть нужное изображение (фото) программой фотошоп и сделать данное изображение квадратным – это обязательное требование данного плагина. Т.е. открываете необходимое изображение фотошопом, выбираете инструмент “Прямоугольная область” в левой панели программы и с его помощью (удерживая левую клавишу мыши) выделяете квадратную область из любой части вашего изображения.
Для того, чтобы область выделялась правильным квадратом, а не прямоугольником, необходимо в ходе выделения нужной области, помимо левой кнопки мыши удерживать клавишу “Shift”.
После того, как нужная область выделена, выбираете в верхнем меню “Изображение” – “Кадрировать” и ваша выделенная область будет вырезана и обращена в квадратное изображение.
Теперь настало время воспользоваться “волшебным” плагином. При выделенном слое нашего квадратного изображения нажимаем на значок плагина и у нас открывается панелька.
Получаем бесшовную текстуру
В данной панельке мы указываем размер нашего изображения в пикселях (в нашем случае получилось 864px) и ставим галочку напротив “Difine Pattern”, после чего просто выбираем способ создания бесшовного изображения нажатием на кнопку “Tile” или “Mirror”. Если вы выберите способ “Tile”, то ваше бесшовное изображение будет создано именно из вашей картинки в полном ее размере. Если же выберите способ “Mirror”, то бесшовное изображение будет создано из 4-х ваших картинок, зеркально отраженных и уменьшенных под размер вашего квадрата. Вообщем просто попробуйте и все поймете сами.
Мы выбрали способ “Tile” и в результате получили текстуру высокого качества, размером 864 x 864 пикселя:
Бесшовную текстуру (фон) высокого качества, которою можно использовать в 3D max или фотошопе мы сделали. Но давайте еще придадим ей необходимый нам оттенок. Допустим нам нужна текстура потрескавшегося асфальта не светло-серого цвета, а темно-красного. Для начала мы объединим получившиеся слои в одну картинку, а первоначальное изображение просто удалим за ненадобностью. В правой панели слоев удаляем самый нижний слой с нашим исходным изображением, чтобы оно не мешалось и преобразуем все получившиеся слои из которых состоит бесшовная текстура в одно изображение.
Для этого правой кнопкой мыши кликаем по папке “tile pattern” и выбираем в появившемся меню “Преобразовать в смарт-объект”. После данных действий все содержимое папки будет преобразовано в один слой изображения, с которым мы в дальнейшем и будем работать (менять ему цветовой тон).
Красим текстуру в нужный цвет
Выделяем наш слой с бесшовным фоном, кликнув в панели слоев по нему левой кнопкой мыши и в нижнем меню, под панелькой слоев кликаем на значок коррекции и в появившемся меню выбираем “Цветовой тон/насыщенность”. После этого над нашим слоем с текстурой появится новый корректирующий слой и откроется окошко с настройками цветового тона и насыщенности. В данном окошке вы уже на свое усмотрение регулируете “ползунки” настроек цвета и тона, после чего применяете данные настройки.
Таким образом у вас получится бесшовная текстура с необходимым цветовым тоном. Остается сохранить данное изображение в высоком качестве, для этого в верхнем меню выбираем “Файл” – “Экспортировать” – “Сохранить для web” и в появившемся окне, в настройках качества выставляем 100%, после чего жмем кнопку “Сохранить”.
После данных манипуляций получилась качественная бесшовная текстура с необходимым нам оттенком. И теперь, если мы приложим копии изображения друг к другу, то убедимся, что получается бесшовный фон, стыков (швов) уже нет.
Итак, наша бесшовная текстура готова!
Бесшовный фон |
Как сделать бесшовный фон в программе Фотошоп? Это довольно просто. Бесшовный фон можно сделать из любой понравившейся картинки. Сделаем вот такой фон из одного цветка.
1-Файл создать . Возьмем размер 500 на 500, фон прозрачный.
У Вас будет пустой файл без фона.
Теперь откроем картинку из которой будем делать бесшовный фон. Я взяла картинку на прозрачном фоне ( в формате PNG).
2-Файл-открыть.
3-На вертикальной панели инструментов выбрать инструмент «перемещение» и перетащить картинку на пустой файл.
Если картинка большая, ее нужно уменьшить.
4- Редактирование -свободное трансформирование.
Уменьшить до 80%.
Теперь необходимо поделить изображение на 4 части. Это удобно сделать с помощью направляющих линий.
5-Просмотр-новая направляющая.
6-Выбрать инструмент «перемещение», подвести мышку к боковой стороне файла и передвинуть направляющую в центр.
7-Просмотр-новая направляющая. В появившемся окошке кликнуть напротив»горизонтальная».
8-Подвести мышку к верхней стороне файла и переместить направляющую в середину.
9-Выбрать инструмент » прямоугольная область» и выделить одну часть изображения.
10-Слой-новый-скопировать на новый слой.
11-Инструментом «перемещение» передвинуть кусочек изображения в противоположный угол.
12-В окне слоев активировать слой 2 ( с целым изображением).
13- Выбрать инструмент «прямоугольная область» и выделить другую часть изображения.
14-Слой-новый-скопировать на новый слой.
15- Инструментом «перемещение» передвинуть этот кусок в верхний правый угол.
16-В окне слоев активировать слой 2.
17- Выделить третью часть изображения.
18-Слой-новый-скопировать на новый слой.
19- И передвинуть в противоположный угол.
20- В окне слоев активировать слой 2.
21- Выделить последнюю часть.
22-Скопировать на новый слой.
23- Передвинуть в противоположный угол.
Направляющие линии больше не нужны.
24-Просмотр-удалить направляющие.
25-В окне слоев активировать нижний пустой слой.
26-Редактирование-выполнить заливку. В окошке «заполнить «выбрать «цвет», затем в следующем окошке выбрать нужный цвет.
27-В окне слоев активировать верхний слой.
28-Слой- выполнить сведение.
Уменьшить созданную картинку, чтобы воспользоваться ею, как фоном.
29-Изображение-размер изображения.
Уменьшить до 200 пик.
Чем меньше изображение, тем мельче и чаще будет узор.
30- Редактирование-определить узор. В появившемся окне назовите узор, например «фон», и ok.
Теперь создадим новый файл, на который будем заливать созданный узор.
31- Файл-создать. Размер 500 на 500 , фон прозрачный.
32- Редактирование-выполнить заливку. В окошке «заполнить» выбрать «регулярный» и в квадратике «заказной узор» выбрать созданный узор.
Появится такой бесшовный фон.
Как сделать бесшовный фон мельче? Нужно просто еще уменьшить созданный фон,(в пункте 29) например, до 100 пик. Затем проделать все с 30 пункта и получится такая картинка.
Бесшовный фон двумя способами. Как сделать бесшовный фон
Если фон вашего сайта не монотонного цвета или градиента, а вы хотите наложить определенную текстуру на ваш бекграунд, то далее расскажу как практически из любой картинки сделать бесшовный фон. Возможно для кого-то этот способ сделать бесшовный фон уже давно известен, но думаю будет интересно узнать об одной небольшой особенности. Ниже будет приведен пример как сделать фон из достаточно крупной фотографической картинки. Для нашего фона нам понадобится 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. Полосатый фон
Урок №3. Фон с сохранением изначальной текстуры
Урок №4. Фон — калейдоскоп
Урок №1 .
Зеркальный фон.
Результат:
1. Открываем нашу картинку в Photoshop:
(«File — Open…» — «Файл — Открыть…»)
2. Создаем новый чистый документ («File — New…» — «Файл — Новый документ…»)
3. Вырезаем из нашей картинке тот участок , который пойдет в основу фона. Для тех, кто не знает как это сделать, можно воспользоваться уроком » «
4. Теперь с помощью инструмента Move tool (V) переносим этот фрагмент на наш чистый лист. Для этого просто зажимаем левой кнопкой мыши нашу картинку и тащим ее на новый документ. Потом отпускаем:
6. Теперь снова перетскиваем его на чистый слой и ставим рядом с уже присутствующим там изображением.
7. Снова поворачиваем наш фрагмент , но уже по вертикали. Жмем Image — Rotate canvas — Vertical (Изображение — Повернуть — Вертикально):
8. И снова его перетаскиваем на чистый слой и ставим рядом с уже присутствующими там изображениями.
10. Снова перетаскиваем результат на чистый слой и ставим рядом с уже присутствующим там изображениями:
11. И последний раз жмем на фргменте Image -Rotate canvas- Vertical (Изображение — Повернуть — Вертикально). И снова видим что наш фрагмент перевернулся. теперь снова его перетаскиваем на чистый слой и ставим рядом с уже присутствующими там изображениями.
Теперь мы будем работать только с чистым слоем и наложенными на него фрагментами.
12. Обрезаем лишнее. Если у вас есть на слое «пустое» место — то есть то, где нет фрагментов, то давайте его обрежем, чтобы остался только наш будущий фон. Для этого пользуемся уроком » «
И получаем результат:
Урок №2 .
Полосатый фон.
Результат:
1. Для этого открываем любую понравившуюся вам картинку в Фотошопе
А делаем это так File — open… (Файл -открыть…). Я выбрала вот эту:
2. Находим на панели инструментов инструмент single row marquee tool:
Примечание: а находиться он в самом верху нашей панели, но может быть спрятан за rectangular marquee tool для этого жмем на него левой кнопкой мыши и находим нужный нам инструмент.
Нажимем в центре нашей картинки и появляется вот такая горизонтальная пунктирная линия:
3. Трансформируем линию. Выбираем команду «Edit — Free transform (Редактировать — свободная трансформация) и (сочетание клавиш ctrl + T) видим, что наша пунктирная линия стала просто линией, а на концах ее образовались маленькие квадратики:
Осторожно надвигаем нашу мышку на один из квадратиков и появилась масенькая черная стрелочка и вот этой стрелочкой двигаем вниз и видим что наша картинка уже вовсе не картинка а сплошные полоски:
Я думаю что на этом можно остаовиться, нет смысла дотягивать до конца всей картикни, можно взять всего лишь часть — кусочек ведь узор линии не изменится:
4. Вырезаем наш кусочек, чтоб обрезать изображение пользуемся инструментом «Crop tool» (обрезка). У меня получилось вот так:
Теперь я вижу, что на моем полосатом фоне с одной стороны много светлого цвета, и пришла к выводу что немного все же следует обрезать. Итого вышло вот так.
Ну вот и все, наш фон готов.
Урок №3 .
Бесшовный фон с сохранением изначальной текстуры.
Результат:
1. Открываем любую картинку (желательно с похожими краями) в ФотоШопе.
Наше изображение может быть каким угодно, правда, чем более крупные предметы на нем изображены, тем сложнее будет маскировать швы. Внимательно рассмотрите изображение, размер предметов должен быть примерно одинаковым на всех четырех сторонах картинки. Я подобрала вот такой вариант:
2. Установите направляющие линии View — Rulers (Просмотр — Направляющие), по которым вы планируете работать (они и будут границами готовой текстуры). Убедитесь, что активирована функция View > Snap to Guides (Просмотр — Вспомогательные элементы). Двигайте направляющие по рисунку так, чтобы они проходили по середине предметов (конечно, насколько это возможно). Это делается для того, чтобы вы мысленно представили свой будущий фон, наметили границы так сказать.
Я пронумеровала получившиеся части рисунка, чтобы удобнее было пояснять, с которой частью будем работать:
3. Выбираем инструмент Rectangular Marquee Tool (Прямоугольное выделение):
и выделяем нижнюю часть, ту, что под номером 4. Вокруг нее образовывается пунктирный квадратик:
4. Копируем выделение на отдельный слой, нажимая на клавиатуре «ctrl + j»
5. Перетаскиваем инструментом Move tool (Перемещение) или стрелочками на клавиатуре скопированный кусок вверх части 2, как это показано на рисунке:
Примечание: у вас эта часть не должна светиться. Я применила ей свойства сияния, чтобы наглядно вам показать (чтобы картинка не сливалась и вы видели границы).
6. Так же копируем часть №1 и перетаскиваем копию в правый край части 2:
Левый нижний угол под номером 3 не используется.
7. Прячем слой №4, активизируем 1 , основной слой должен оставаться видимым (на примере основной слой убран для наглядности).
8. Выбираем инструмент Eraser Tool (резинка), кисть hard (жесткая). Начинаем стирать вокруг зерен так, чтобы это смотрелось наиболее естественно на фоне основного слоя.
Должно получиться так:
Без основного слоя —
С основным слоем —
9. Аналогично поступаем и с другим слоем , тем что копия части №4:
С основным —
Красная линия показывает, как правильно убирать границы в углах. В правом нижнем углу тоже надо стереть кусочек части №1 под углом примерно 45 градусов, как и в верхних углах:
10. Сливаем эти три слоя (слой с верхом, с правой частью и основной) при помощи горячих клавиш ctr+E
11. И теперь самое интересное!!! Отрезаем части 1,3,4:
И наш фон готов:
Урок №4
Фон — калейдоскоп.
1. Берем любую понравившуюся картинку. У меня такая:
И сразу же делаем из слоя Background (Задний план) обычный слой. Это важно! Для этого достаточно дважды кликнуть по нему в палитре слоев.
2. Вырезаем интересный квадратный кусочек. (Кто не умеет обрезать, тот смотрит урок » «). Если кусочек окажется великоват по размеру, то можно его уменьшить (урок » «)
Я взяла такой кусочек картинки и сделала его размером 100х100:
3. Теперь основная фишка . Поворачиваем наш рисунок на 45 градусов.
Для этого идем в Image-Rotate canvas-Arbitrary (Изображение-Повернуть холст-Произвольно):
получаем:
4. Нам весь получившийся ромбик не нужен. Наш фон мы будем формировать только из одной четвертинки этого ромбика. Поэтому опять берем инструмент Crop tool , зажимаем Shift и делаем обрезку:
Подготовительные работы закончены.
5. Начнем «склеивать» фон.
а) Увеличиваем ширину холста вдвое. Идем Image-Canvas size (Изображение-Размер холста) и устанавливаем такие настройки:
получаем:
б) Удваиваем треугольник. Дублируем слой Layer-Dublicate layer (Слой-Дублировать слой). Полученный новый слой отражаем по горизонтали Edit-Transform-Flip Horizontal (Редактирование-Трансформирование-Отразить по горизонтали) и сдвигаем стрелочкой так, чтобы получилось такое:
Объединяем эти два слоя (Ctrl+E).
в) Увеличиваем высоту холста вдвое:
г) Дублируем слой и опять отражаем копию, но теперь уже по вертикали. Получаем «бантик»:
Опять объединяем слои (Ctrl+E).
д) Снова дублируем слой. И поворачиваем копию «бантика» на 90 градусов. Для этого идем Edit-Transform-Rotate 90 (Редактирование-Трансформирование-Поворот на 90). Здесь не важно будете вы поворачивать по часовой стрелке или против неё.
Вот такая красота у меня получилась
Совсем как в детском калейдоскопе! И фон из таких кусочков получается оригинальный и совершенно бесшовный:
Приятного вам творчества !
P.S. Если у вас возникли какие-то вопросы по уроку — опишите в комментарии подробно вашу проблему, мы обязательно поможем вам разобраться! И не забудьте подписаться на комментарии к уроку, если хотите получить ответ на свой вопрос как можно скорее .
Лучшее «спасибо» за урок — ваш комментарий! 🙂
В данном уроке вы узнаете, как сделать бесшовную текстуру в Photoshop. Данный урок подойдет также тем, кто хочет узнать, как сделать бесшовный фон для сайта (паттерн для сайта, паттерн для фона) или паттерн для Фотошопа.
Что такое бесшовные текстуры? Зачем нужны бесшовные текстуры и как их использовать?
Прежде чем узнать, как сделать бесшовную текстуру в Фотошопе, давайте посмотрим, зачем они вообще нужны, эти бесшовные текстуры.
В игрострое довольно часто используется техника тайлинга текстур или затайливания текстур (от англ. tile — плитка). Тайлинг позволяет повторять текстуры на поверхности 3D модели. Очень часто затайленные текстуры применяются на ландшафте, либо для текстурирования дорог, домов и так далее. О тайлинге я уже рассказывал в уроке .
Но для того чтобы затайленная текстура хорошо смотрелась на 3D модели, необходимо чтобы она была бесшовной .
На рисунке показана затайленная далеко не бесшовная текстура, на которой видны стыки между противоположными краями текстуры.
Бесшовная текстура представляет собой изображение, элементы противоположных сторон которого совпадают.
Если противоположные стороны текстуры не будут подходить друг к другу, то при затайливании такой текстуры вы получите швы в месте их стыковки. Такие швы возникают вследствие резких переходов между рисунками текстуры на ее противоположных краях.
На рисунке показана не бесшовная текстура, размноженная в Фотошопе (дважды затайленная). Рисунок на краях изображения отличается.
Как вы можете видеть на рисунке выше такую текстуру не стоит использовать для затайливания ландшафта или любого другого 3D объекта, да и просто для заливка фона сайта или холста в Фотошопе. И для создания паттерна для Фотошопа она не подойдет. Чтобы наложить текстуру на 3D модели без стыков (или залить фон сайта или холста), заметных пользователю, необходимо воспользоваться инструментами редакторов изображений.
Как сделать бесшовную текстуру в Фотошопе. Подготовка изображения в Фотошопе
Загрузите текстуру, которую хотите сделать бесшовной, в Фотошоп, открыв файл текстуры из Фотошопа или просто перетащите файл с текстурой из папки, где она у вас хранится, в окно Фотошопе (в этом случае новое изображение создавать не нужно, оно будет создано автоматически). Для данного урока я выбрал текстуру кирпича (кирпичной кладки) размером 512 на 512 пикселей.
На рисунке показана текстура кирпича, которая будет превращена в бесшовную текстуру.
Если вы не нашли текстуру размером 512 на 512 пикселей (1024 х 1024, 2048 х 2048 или 4048 х 4048 пикселей), а нашли, например, текстуру размером 1300 на 700, то обрежьте изображение в Фотошопе до размера в 512 х 512 пикселей при помощи инструмента Рамки/Crop (в панели инструментов слева) или использовав инструмент изменения размера холста «Canvas Size», который вы можете найти во вкладке «Image» главного меню.
На рисунке показаны инструменты, позволяющие обрезать изображение Canvas Size (A) и Crop (B).
Также вы можете использовать инструмент свободного трансформирования (Ctrl + T ) либо инструмент Scale , который вы найдете в меню Transform вкладки Edit главного меню.
На рисунке показан инструмент Scale для изменения масштаба изображения (в данном случае, подгонки изображения) в Photoshop.
Если вы применяли инструмент масштабирования или перемещения текстуры, необходимо выделить все видимое изображение на холсте (Ctrl + A ) и скопировать его на новый слой (Ctrl + C и затем Ctrl + V ). Если этого не сделать, то выступающее за холст изображение нам помешает. Альтернативой копипасту может послужить упоминавшийся ранее инструмент обрезки изображения Crop. Далее мы будем работать с новым созданным слоем: выделите его в панели справа, щелкнув на нем Левой Кнопкой Мыши.
Смещаем изображение в Фотошопе, используя фильтр Смещение («Offset»)
Итак, как сделать бесшовную текстуру в Фотошопе… Фотошоп предоставляет вам отличный инструмент, который подойдет для создания бесшовной текстуры. Данный инструмент представляет собой фильтр в Фотошоп и называется Смещение или «Offset «. Я уже рассказывал про смещение текстур на поверхности 3D моделей (а на самом деле в uv пространстве), в частности, использующихся в компьютерных играх, в статье . Здесь фильтр Смещения также позволяет двигать текстуру по горизонтали и вертикали.
Чтобы сместить изображение текстуры, выберите вкладку фильтров «Filter » в главном меню и в открывшемся выпадающем меню выберите вкладку «Other «, в которой, в свою очередь, выберите вкладку «Offset …».
На рисунке показано окно настроек фильтра Смещения («Offset»).
В окне фильтра «Смещение » выставьте значение для смещения по горизонтали равным 256 пикселям (Horizontal 256 pixels right ) и смещение по вертикали равным также 256 пикселям (Vertical 256 pixels down ), чтобы сместить изображение текстуры на 256 пикселей по горизонтали и вертикали. Нажмите кнопку «OK «, чтобы применить фильтр и сместить текстуру. Как вы можете видеть (и себя на холсте или на рисунке выше) в центре изображения появились швы, поскольку края изображения не совпадают друг с другом.
Для текстуры 1024 на 1024 смещение по вертикали и горизонтали можно выставить в 512 пикселей, для 2048 – 1024 пикселей, хотя и не обязательно.
Данные значения смещения служат лишь рекомендательными и могут для изображения 512 на 512 пикселей (а также для 1024х1024, 2048×2048) составлять 128 пикселей, 256 пикселей и так далее.
На рисунке показано изображение, к которому применен фильтр смещения, значения для которого выставлены в 128 по вертикали и горизонтали.
Главное, чтобы вам было удобно работать в процессе удаления швов текстуры.
Используем инструмент клонирования Штамп («Clone Stamp Tool»), чтобы скрыть швы на изображении
Чтобы удалить швы на текстуре, в Фотошопе существует несколько инструментов. Одним из таких инструментов является «Штамп » («Clone Stamp Tool «), иногда еще называемый кистью клонирования или клонирующей кистью.
На рисунке показан инструмент Штамп в Фотошопе.
Инструмент «Штамп » в Фотошопе позволяет создавать клоны участков изображения и вставлять их в указанное место холста. Чтобы указать место на изображении, с которого будет клонироваться часть изображения, удерживайте клавишу ‘Alt’ и кликните Левой Клавишей Мыши в точке изображения, которая станет точкой отсчета клонирования участка-донора.
Теперь, удерживая Левую Клавишу Мыши, проведите по участку изображения, на который хотите скопировать часть изображения относительно указанной ранее начальной точки участка-донора. Обратите внимание, что параллельно вашей кисти движется окружность, повторяя движение вашей кисти и показывая, с какого участка изображение в настоящий момент осуществляется клонирование текстуры (ее части).
На рисунке показана результирующая бесшовная текстура кирпичной кладки.
А вот так выглядит получившаяся текстура в Unity3D.
На рисунке показана затайленная бесшовная текстура кирпичной стены в Unity3D.
При работе с данным инструментом особое внимание стоит уделить кисти, которая используется для данного инструмента, чтобы избежать резких границ и размытости на стыке краев текстур. Если вы будете использовать слишком мягкую кисть с большим размытием по краям и большой прозрачностью, то на стыке краев текстуры получите заявленное изображение. Если же будете использовать жёсткую кисть с резкими краями, то получите резкие переходы на швах текстуры. Кисть вы можете выбрать в меню сверху, расположенном сразу под главным меню.
Вместо Штампа или в качестве дополнения к нему вы можете использовать инструменты «Заплатка» (Patch Tool), Healing Brush Tool, Spot Healing Brush Tool
Возвращаем текстуру на место
Теперь, когда вы удалили все швы на изображении, превратив ее в бесшовную текстуру, необходимо вернуть её на место. Конечно, вы можете не возвращать ее, а использовать в том виде, в котором она сейчас есть — со смещением. Так можно поступить для бесшовной текстуры травы или бесшовной текстуры камней, каменной или кирпичной кладки. Однако такое смещение и результирующая текстура практически неприемлемы для текстур деталей, например, sci-fi стены или sci-fi плитки пола, создание которой рассматривается в , поскольку оставляет по краям затайленной 3D модели половинки текстур.
Проверка бесшовности текстуры и коррекция швов текстуры
Чтобы проверить, насколько «бесшовной» получилась ваша текстура, вы можете, если сместить текстуру не на 256 пикселей по вертикали и горизонтали, а например на +128 и +128 пикселей, или на -128 и +128 пикселей, или на +128 и 0 пикселей и так далее. Только не забывайте (а лучше записывайте) на сколько пикселей и в какую сторону каждый раз смещали текстуру, чтобы иметь возможность вернуть ей изначальное нулевое смещение. Если подобное смещение выявило нарушение бесшовности, то подредактируйте стыки текстур, как было описано выше, чтобы избавиться от швов на текстуре (смещенной). Не забывайте, что не стоит залезать на края изображения, чтобы опять не пришлось править несовпадения краев текстур.
Повторите проверку несколько раз с разными значениями для смещения по вертикали и горизонтали, чтобы убедиться, что вы создали бесшовную текстуру.
Используем инструмент Осветлитель (Dodge Tool) и Затемнитель (Burn Tool) для осветления изображения в Фотошопе
Если текстура неоднородно освещена, то при затайливании текстуры, например, в игровом движке Unity3d, Unreal Engine, Amazon Lumberyard, Cryengine и других, или в 3D редакторах 3ds MAX, Cinema4D, Blender и т.д., такие затенения образуют повторяющийся узор. На небольших расстояниях камеры или точки наблюдения такой эффект не особо заметен. Чем больше камера будет удаляться от поверхности с такой затайленной текстурой, тем сильнее будет заметен эффект паттерна.
Чтобы избежать подобного эффекта, необходимо, чтобы все участки текстуры были одинаково осветлены/затемнены. Для осветления текстуры (отдельных ее участков) вы можете воспользоваться инструментом «Dodge Tool «, работа с которым более подробно описана в ///уроке про осветление карты высот для создания ландшафта.
На рисунке показаны инструменты осветления и затемнения изображения Dodge Tool и Burn Tool.
Как и где еще используются затайленные текстуры
После того, как вы узнали, как сделать бесшовную текстуру в Фотошопе, давайте посмотрим, где еще могут быть использованы бесшовные текстуры, созданные в Фотошопе.
Получившуюся бесшовную текстуру можно использовать для раскрашивания ландшафтов или 3D моделей в Unity3d.
На рисунке показан 3D ландшафт, созданный в Unity3D в одном из уроков по созданию террейнов в Unity3D.
Результирующую бесшовную текстуру можно также сохранить в качестве паттерна или кисти для Фотошопа.
На рисунке показан процесс создания паттерна для Фотошопа из изображения.
В следующем уроке я расскажу, как сделать бесшовную текстуру в GIMP.
[email protected].com
Post Views: 31 327
Отличный урок от Designshack в котором очень просто можно самому сделать в фотошопе бесшовную текстуру для заливки фона. Сначала мы создадим новую кисть с эффектом боке, потом в новом документе создадим сам узор, а потом воспользуемся замечательным фильтром, который, собственно и создает бесшовный паттерн. И уже напоследок вручную подчистим рисунок.
Шаг 1.
Создаем в фотошопе новый документ размером 800х800 пикс.
Заливаем его цветом #80ac4b.
Шаг 2.
В новом документе создадим кисть с эффектом боке. Для этого выбираем большую жесткую кисть черного цвета. Создаем новый слой и щелкаем ей в центре документа. Задаем стилем слоя небольшое внешнее свечение тоже черного цвета. Потом отключаем задний фон и идем в меню «Редактирование» (Edit) > «Определить кисть» (Define Brush) и сохраняем нашу кисть.
Возвращаемся в наш основной документ. Нажимаем F5 и в настройках кисти устанавливаем следующие параметры: «Динамика формы» (Shape dynamics) > «Колебание размера» (Size Jitter) — 18%, «Рассеиваие» (Scatter) > «Рассеивание» (Scatter) — 789%, «Другая динамика» (Other dynamics) > «Колебание непрозрачности» (Opacity Jitter) — 100%.
Шаг 3.
Теперь выбираем инструмент «Кисть» (Brush) и белым цветом, аккуратными штрихами добавляем круги на зеленый фон. Должно получиться приблизительно так.
Шаг 4.
Теперь главное действие. В меню выбираем «Фильтр» (Filter) > «Другие» (Other) > «Сдвиг» (Offset). Выбираем значения, как на рисунке ниже.
Шаг 5.
На этом шаге выбираем жесткую кисть цвета фона #80ac4b и вручную аккуратно закрашиваем недоделанные круги. Должны остаться только целые круги. Смотрим рисунок ниже.
Шаг 6.
Теперь опять выбираем созданную нами кисть, настраиваем ее как в Шаге 2 (Динамика формы, Колебание размера и Рассеивание) и короткими, аккуратными штрихами добавляем кругов в центр документа. Следим за тем, чтобы круги не попадали на края квадрата, а добавлялись только в центре.
Шаг 7.
Наш бесшовный паттерн готов. Теперь можно уменьшить его до приемлемых размеров и в меню «Редактирование» (Edit) > «Определить узор» (Define Pattern) можно добавить новый узор и использовать его для заливки фона.
Много раз меня спрашивали, и вот я решила выделить время и сделать таки урок по созданию бесшовного узора в Фотошопе. Возможно есть методы намного проще и удобней, но я изобрела вот такой велосипед, на нем и катаюсь.
Итак, приготовьтесь, сейчас я буду очень подробно показывать, как я сделала такой цветочный фон. Картинки большие и их больше десяти штук, хотя по правде сказать можно было бы уложиться и в две, зафиксировав лишь основные моменты. Но раз я пообещала пошаговый процесс, то его и буду демонстрировать. Если что, я предупредила))
Создаем документ 4500х4500 пикселей, с разрешением 300.
Вставляем в наш документ заранее приготовленные элементы. В моем случае, это 3 вот таких цветочных заготовки (все они аккуратно вырезаны по контуру и размещены в разных слоях).
Дублируем наши цветочки и в произвольном порядке заполняем ими верх и левую сторону холста. Как видите элементы в разной степени выступают за край. Теперь выделяем все цветы, что пересекают левую границу холста и дублируем их. *не забываем периодически сохранять документ
Выделив наши дубли, щелкаем по маркеру трансформационной области. Теперь у нас стала активной панелька сверху под главным меню. Выбираем точку отсчета левый верхний угол в «Reference point location». Сейчас мы видим координаты нашей группы объектов относительно верхнего левого угла. Их мы и будем менять.
Поскольку мы работаем с левой стороной, то соответственно и двигать объекты будем относительно оси Х. Сейчас у меня там -1018. Итак, достаем калькулятор и додаем до этой цифры 4500 (ширину нашей рабочей области). В итоге у нас получается 3482, это число мы и вводим в графу Х. Наши цветочки переместились, готово.
Аналогично дублируем весь верхний ряд вниз, вычислив координаты нашей группы объектов по оси Y.*не забываем периодически сохранять документ
Если нужно подвигать наши элементы, то не забываем, что теперь противоположные стороны взаимосвязаны. Так что, для перемещений выделяем объект и его дубль и тогда смещаем.
Всю пустую область заполняем цветочками так, чтобы это было гармонично и красиво. Следим за тем чтобы наши объекты не пересекали границ рабочей области. Вот в принципе, наш бесшовный узор и готов. Но поскольку я параноик, которому надо все перепроверить, то у меня есть еще несколько шагов))
Помещаем все наши слои в папку и дублируем ее. Объекты из дубля сливаем все в один слой. В принципе, дубль мне нужен для того чтобы иметь запасную папку с послойными элементами. Еще я добавила фон. Кадрируем наше изображение по контуру рабочей области.
Дублируем наш слой с цветочным узором. Перемещаем его на 4500 пикселей вправо. Выделяем узор и его дубль и двигаем так чтобы было видно шов, где они соединяются. Для чего я это делаю? Проверяю все ли сошлось)) Иногда, когда слоев очень много, то можно напутать с верхними нижними дублями и какой-то листик в одной части паттерна уйдет под цветочек, а с другой стороны уже будет сверху. Но в нашем случае все замечательно. *не забываем периодически сохранять документ
Как в фотошопе за несколько шагов сделать бесшовную текстуру | DesigNonstop
Как в фотошопе за несколько шагов сделать бесшовную текстуру
16
Отличный урок от Designshack в котором очень просто можно самому сделать в фотошопе бесшовную текстуру для заливки фона. Сначала мы создадим новую кисть с эффектом боке, потом в новом документе создадим сам узор, а потом воспользуемся замечательным фильтром, который, собственно и создает бесшовный паттерн. И уже напоследок вручную подчистим рисунок.
Шаг 1.
Создаем в фотошопе новый документ размером 800х800 пикс.
Заливаем его цветом #80ac4b.
Шаг 2.
В новом документе создадим кисть с эффектом боке. Для этого выбираем большую жесткую кисть черного цвета. Создаем новый слой и щелкаем ей в центре документа. Задаем стилем слоя небольшое внешнее свечение тоже черного цвета. Потом отключаем задний фон и идем в меню «Редактирование» (Edit) > «Определить кисть» (Define Brush) и сохраняем нашу кисть.
Возвращаемся в наш основной документ. Нажимаем F5 и в настройках кисти устанавливаем следующие параметры: «Динамика формы» (Shape dynamics) > «Колебание размера» (Size Jitter) — 18%, «Рассеиваие» (Scatter) > «Рассеивание» (Scatter) — 789%, «Другая динамика» (Other dynamics) > «Колебание непрозрачности» (Opacity Jitter) — 100%.
Шаг 3.
Теперь выбираем инструмент «Кисть» (Brush) и белым цветом, аккуратными штрихами добавляем круги на зеленый фон. Должно получиться приблизительно так.
Шаг 4.
Теперь главное действие. В меню выбираем «Фильтр» (Filter) > «Другие» (Other) > «Сдвиг» (Offset). Выбираем значения, как на рисунке ниже.
Шаг 5.
На этом шаге выбираем жесткую кисть цвета фона #80ac4b и вручную аккуратно закрашиваем недоделанные круги. Должны остаться только целые круги. Смотрим рисунок ниже.
Шаг 6.
Теперь опять выбираем созданную нами кисть, настраиваем ее как в Шаге 2 (Динамика формы, Колебание размера и Рассеивание) и короткими, аккуратными штрихами добавляем кругов в центр документа. Следим за тем, чтобы круги не попадали на края квадрата, а добавлялись только в центре.
Шаг 7.
Наш бесшовный паттерн готов. Теперь можно уменьшить его до приемлемых размеров и в меню «Редактирование» (Edit) > «Определить узор» (Define Pattern) можно добавить новый узор и использовать его для заливки фона.
Создаем детальный бесшовный паттерн в Adobe Photoshop
Большего всего я люблю делать современные бесшовные паттерны, но я как раз являюсь тем человеком, который совсем не силен в математике и всяческих точных расчетах, которые нужны при создании паттерна. Поэтому я придумала довольно безболезненный способ, который не потребует каких-то сложных шагов.
1.Набросок паттерна
Шаг 1.
Для начала сделайте немного зарисовок, чтобы решить, какие именно элементы будут располагаться на рисунке. Веточки и цветы, кстати, это всегда хорошая идея для паттерна, так как они имеют естественную витиеватую форму, которая позволит заполнить пустующее пространство. Они будут в тему почти в любой иллюстрации.
Шаг 2.
Начните рисовать паттерн спонтанно. Серьезно, просто «отпустите» себя, ведь нам сгодится даже сырой черновик, совсем не обязательно чтобы работа выглядела круто — сейчас мы пытаемся задать ритм для маленькой части иллюстрации. Вы можете сделать наброски, которые перерастут в цельный большой рисунок, либо мелкие скетчи – это не важно. В дальнейшем мы все равно их объединим.
Шаг 3.
Если ваш скетч уже доведен до ума и вы хотите приступить непосредственно к созданию паттерна, то отсканируйте ваш рисунок с разрешением примерно 300 dpi.
Чтобы дать самому себе пространство для творчества, создайте новый файл в AdobePhotoshop размера как минимум 5 000 х 5 000 px. Вы всегда сможете изменить размер в настройках, если чувствуете что пространства слишком много. Но вы не сможете масштабировать растровое изображение, а это как раз самая худшая вещь в мире – сделать красивый аккуратный паттерн и понять, что он слишком мал для использования.
Шаг 4.
Если ваш скетч после сканирования вычищен, то его уже можно использовать как отправную точку для создания паттерна. Все что нужно – удалить задний белый фон и оставить на слое лишь ваш скетч.
Можно улучшить набросок, используя настройки Image > Adjustments > Levels. Передвиньте левый ползунок, чтобы выделить черный цвет, правый ползунок для регулировки белого, и напоследок поиграйте со средним ползунком, чтобы выровнять баланс рисунка.
После этого просто выделите белый фон с помощью инструмента MagicWandToolи удалите его. Если ваш скетч нарисован «грубо» и задний фон плохо удаляете, вы всегда можете использовать его как подложку и на новом чистом слое перерисовать контуры. Просто поместите скетч на верхний слой и уменьшите значение Opacity, чтобы получился результат как на рисунке ниже.
2.Создание слоя с паттерном
Шаг 1.
Нет четкого правила о том, сколько иллюстраций вы должны нарисовать для создания паттерна, но чем больше уникальных элементов вы внесете в рисунок, тем богаче и насыщеннее будет смотреться ваш паттерн. Но не перестарайтесь – дикое разнообразие объектов перегрузит работу и сделает ее беспорядочной.
Помните, что один и тот же элемент в паттерне можно использовать несколько раз, всего лишь модифицировав его с помощью функций Edit>Transform>Rotate,Scale, илиFlip. Когда вы добавляете новый фрагмент скетча для своего будущего паттерна, удобнее всего делать его другим цветом, чтобы при финальной обработке было легче рисовать.
Шаг 2.
Поиграйте с различными элементами и свяжите их вместе, чтобы сделать один сплошной участок рисунка. Форма этого участка не важна, но будет лучше, если совместить элемента компактнее.
На данном этапе лучше работать с одним цветов – больше цветов и оттенков мы добавим позднее, когда убедимся что паттерн дублируется правильно. Если мы начнем покраску до того, как сделаем состыковку, мы вынуждены будем вернуться на исходную позицию и перекрашивать буквально каждый слой с неправильным цветом (поверьте моему горькому болезненному опыту!). Зато вы можете установить цвет фона и контура вашей работы как вам больше нравится, это совсем ни на что не влияет.
Шаг 3.
Когда участок рисунка для паттерна продуман до конца и дорисован, вам нужно сделать его копию. Для этого нужно использовать клавиши Ctrl+J и перенести рисунок с одной стороны на другую. Здесь очень важным моментом является то, что копировать наш участок на новый слой нужно строго по прямой линии, без смещений, а сделать это можно зажав клавишу Shift перед началом горизонтального переноса.
Поместите новый слой на маленьком расстоянии от оригинального слоя с паттерном и оставьте достаточно расстояния, чтобы дорисовать связывающие элементы между двумя участками.
Шаг 4.
Вернитесь к слою с первоначальным паттерном и продолжите прорисовку своей иллюстрации к новым границам. Будьте осторожны и не делайте края рисунка слишком плотно прилегающими друг к другу – поддерживайте равномерный поток.
Если вы чувствуете, что вам не хватает пространства между частями паттерна или наоборот, его слишком много, переместите части вперед или назад, пользуясь все той же зажатой клавишей Shift.
Шаг 5.
Когда вы завершите дорисовку между частями паттерна, деактивируйте главный слой и сделайте новую копию оригинального паттерна используя клавиши Ctrl+J. На этот раз используйте Shift для перетягивания нового слоя вверх или вниз.
Если вы чувствуете, что размер будущего паттерна превышает размер холста – изменить его можно в настройках Image>CanvasSize.
Шаг 6.
Вернитесь к слою с оригинальным паттерном и теперь наращивайте рисунок уже к верхним границам. Стремиться надо к бесшовному стыку обоих частей.
И после этого, ура! Мы почти закончили! Основная работа проделана, общий вид паттерна уже ясен и хорошо проглядывается. Удалите второй главный набросок и приступайте к тестированию паттерна.
3.Тестируем повторение рисунка
Шаг 1.
Скопируйте весь паттерн в новый файл (Control-A> Control-C > Control-N>Control-V), чтобы без помех протестировать его там. Размер файла и рисунка нужно выставить в районе 1 000 мегапикселей. При этом пострадает качество изображения, но сейчас это не важно, ведь мы просто тестируем нашу работу. Убедитесь еще раз, что используете копию иллюстрации, а не часть основного файла.
Далее с помощью инструмента выделения выберите справа участок, занимающий примерно 1/5 рисунка, а затем с помощью удержанного Shift перетащите его на крайнюю левую сторону.
Будьте осторожны и не отпускайте выделенный участок, пока не будете удовлетворены результатом. Также вы можете использовать клавиши со стрелками, что перемещать его влево и вправо до тех пор, пока не будут удовлетворены результатом.
С помощью клавиш Ctrl+D повторите тоже самое, но уже с вертикальной частью рисунка – выберите часть снизу и переместите на верхний край иллюстрации. И все! Теперь у вас красивый паттерн!
Шаг 2.
Перетащите вспомогательные линейки Guides, чтобы они располагались вокруг всего нашего паттерна, и нам было легко выделить его полностью с помощью RectangularMarqueeTool. Затем нажмите на Edit>DefinePattern, назовите новый паттерн и сохраните его.
Шаг 3.
Создайте новый файл, который будет больше вашего паттерна как минимум в три или четыре раза. Заполните его нажав PaintBucketTool и заменив заливку на ваш паттерн в выпадающего меню (поменяйте ‘Foreground’ на ‘Pattern’ и в конце будет как раз наш шаблон). Посмотрите на результат, есть ли там нечеткие края, довольны ли вы внешним видом своей работы.
Шаг 4.
Если вы заметили неточности (а они бывают почти всегда), то запомните на каком участке они находились и вернитесь к нашему самому первому файлу, чтобы исправить их. Вполне возможно, что вы будете еще не раз возвращаться к изменениям, ведь всегда хочется достичь наилучшего результата.
То, что вы пытаетесь достичь, это своего рода «упорядоченное разнообразие» — проследите за тем, чтобы отдельные элементы паттерна не выделялись слишком сильно, не были огромными или наоборот, еле заметными. Возможно на маленьком кусочке все смотрится гармонично, но при повторении нашего образца ошибки становятся очень заметными. Уделите больше времени не деталям, а текущей форме рисунка.
4.Добавление цвета
Шаг 1.
Теперь вы готовы добавить цвет к паттерну! Самый простой способ – воспользоваться функцией ColorOverlays.
Для каждого цвета, который вы захотите использовать, придется создавать новый слой и уже на нем устанавливать нужный нам эффект (внизу панели слоев выберите FX, затем ColorOverlay и установите свой цвет). Если пользоваться таким методом, то всегда будет понятно на каком слое работаешь, а также не нужно будет перекрашивать паттерн кистью вручную, так как настройки слоя сделают это автоматически.
Вы можете использовать столько цветов, сколько захочется, но стоит помнить, что при размножении паттерна буйство красок будет только мешать глазам, поэтому я всегда советую брать от 4 до 8 цветов для иллюстрации. Если вы работаете с «твердыми» формами, то ваш основной слой будет внизу, а цветовой над ним. Если вы работаете с контурами, то цветовой слой будет находиться снизу.
Шаг 2.
До того как перейдете к покраске вашего паттерна, кликните по нему зажав клавишу Ctrlи затем нажмите Ctrl-H, чтобы спрятать мигающую прерывистую линию – так при покраске она не будет вам отвлекать. Также можно не волноваться о том, что вы зайдете на контуры рисунка при покраске, так как цвет все равно будет находится под выбранной областью.
Правда, такой способ хорош, если вы работаете с формами, а не с контурами. При использовании последних, как это сделала я, вы можете заполнить их цветом сразу же, создав прочную базу (Ctrl-J, чтобы сделать копию слоя контуров для последующей заливки).
Шаг 3.
Когда вы закончите с добавлением цвета, вы заметите, что цвет контуров в некоторых частях рисунка мог потеряться или ослабеть. К счастью, это легко можно исправить на основном слое ( Ctrl-клик по миниатюре слоя на панели слоев), нажав Select>Modify>Contract, поставив значение «1» и далее ОК.
Данный процесс выделяет рисунок в окружности 1 пикселя. Теперь остается только нажать Ctrl+Shift+Iчтобы инвентировать нашу выделенную область и Delete. Получится к итоге, что по краям контура исчезнет раздражающий неровный край.
5.Последние штрихи
Шаг 1.
Теперь ваша работа действительно закончена, и вы можете протестировать ее, снова сложив в повторяющийся узор, а затем загрузить на определенные сайты для продажи или выслать вашим клиентам.
Как уже говорилось ранее, самый простой способ это сделать – воспользоваться направляющими Guides и линейками (их можно активировать в настройках View>Rulers).
Точное их расположение не важно, на моем рисунке вы видите, где примерно я их поставила. Выберите часть паттерна, которая находится слева от направляющей и перенесите ее на правую часть рисунка с помощью зажатой клавиши Shift.
Шаг 2.
После того, как вы достигли ожидаемого результата, воспользуйтесь Zoom, чтобы приблизить рисунок действительно очень близко и выставить направляющие вплотную к краям паттерна, вплоть до пикселя.
Повторите это действие на всех слоях с цветом, и выбранные для перемещения области будут ровно передвигаться по направляющим в нужное место.
После этого воспользуйтесь Zoom рисунок еще раз, чтобы убедиться, что не осталось маленьких ошибок или неровностей на краях, которые впоследствии принесут лишь головную боль. Если все хорошо, то повторите действия и для вертикальной части рисунка.
И в конце мы должны провести финальный тест, который покажет что паттерн повторяется идеально.
Шаг 3.
Кстати, в таком многослойном файле как мы сделали, легко менять цветовую палитру паттерна. Нужно нажать на эффект Overlay и выбрать любой другой цвет из ColorPalette– можно наблюдать в режиме реального времени как меняется рисунок с новым выбранным оттенком!
Мы закончили!
Разве не получилось легче, чем вы думали?
Если мы хотите отправит свой паттерн для печати или загрузить на оплачиваемые сайты, то лучше сохранить его в форматах PNG,JPGилиTIFF. Но убедитесь, что вы также сохранили PSD файлы, с которыми работали все это время. Созданный файл должен быть закончен и уже готов к трафаретной печати, что, безусловно, является большим плюсом для покупателей. Но вы все равно можете вернуться к своим наработкам и легко что-то подправить.
Что же, надеюсь, вам понравился весь процесс создания бесшовного паттерна. Как видите, здесь бояться совершенно нечего! Большинство молодых энтузиастов быстро отказываются от идеи паттернов, так как их легче всего делать, но сколько же веселья в этом процессе! Особенно когда в результате получаешь шикарный бесшовный оригинальный паттерн.
Не могу дождаться ваших работ! Что вышло у вас?
Как создать бесшовный фон в Photoshop
Время чтения: 3 мин.
Бесшовные узоры можно применить к любому фону, который вы только можете себе представить, от веб-сайта или приложения до фотографии в Tinder.
В этом руководстве мы поговорим о растровых узорах, которые можно создать в Photoshop. Если вы предпочитаете векторы, ознакомьтесь с этим руководством.
Что вам понадобится для выполнения миссии
1.Adobe Photoshop. Если вы наткнулись на это руководство, скорее всего, у вас уже есть эта программа. Однако на всякий случай вот ссылка для скачивания бесплатной тестовой версии.
2. Icons8 для рабочего стола. Это бесплатное приложение, содержащее множество иконок и хорошо работающее с Photoshop.
3. Иконки или другие изображения, которые вы хотите добавить в свой узор. Для этого урока мы взяли наши иконки природы. К вашему сведению, они бесплатны в формате PNG любого размера, поэтому вы можете сохранить их в своей учетной записи и использовать их для шаблона.
8 шагов для создания узора в Photoshop
1. Сделайте основу для вашего выкройки
Создайте новый файл любого размера с одинаковой шириной и высотой. В нашем случае каждая сторона составляет 200 пикселей.
2. Добавьте значки
Перетащите значки из Icons8 для рабочего стола (или любых других значков) в файл Photoshop. Мы пошли за крабом, рыбой, рыбой-клоуном и морским коньком.
Если вы используете монохромные значки, они могут понадобиться разного цвета. Вот как перекрасить значки PNG в Photoshop.
3. Поместите каждый значок на отдельный слой
Нажмите Введите , чтобы завершить процесс вставки значка. Вы должны нажимать на нее столько раз, сколько нужно, пока вы не перестанете видеть черную рамку.
В итоге это должно выглядеть так:
Теперь каждый значок находится на своем собственном слое в вашем файле.
4. Настройте первый уровень
Выберите один слой на панели слоев и перейдите к Filter> Other> Offset :
Установите параметры Horizontal и Vertical так, чтобы они составляли половину длины стороны файла.Помните Ширина и Высота вашего квадрата? Это две настройки, которые вам нужны.
Размер нашего файла составляет 200×200 пикселей, поэтому мы устанавливаем 100 пикселей для обоих параметров. Убедитесь, что вы отметили опцию Wrap Around в нижней части всплывающего окна. Щелкните ОК. Сделан первый слой:
5. Настройте второй уровень
Выберите другой слой на панели слоев. Теперь снова перейдите в Filter> Other> Offset .
Затем установите Horizontal на 0 пикселей и нажмите OK:
6.Настройте третий уровень
Выберите еще один слой и перейдите в Filter> Other> Offset . Теперь переверните значения Horizontal и Vertical . Для нашего случая по горизонтали, будет 100 пикселей, а по вертикали 0 пикселей. Щелкните ОК.
Теперь у нас есть плитка с узором.
7. Объедините слои
Выберите все слои, кроме Фон на панели слоев и используйте комбинацию горячих клавиш Ctrl + E .Выбранные слои будут объединены.
8. Создайте свой узор
Сначала используйте еще одну комбинацию горячих клавиш Ctrl + A (выбрать все).
Затем перейдите в Edit> Define Pattern :
Назовите его и нажмите OK. Та-да! Ваша выкройка готова!
Как применять узор
У вас есть выкройка, хорошо. Теперь давайте посмотрим, как использовать его в фоновом режиме.
1. Создайте новый файл
Сделайте его больше, чем ваш узор, чтобы увидеть результат.У нас 800×600 пикселей.
2. Выберите наложение узора
Дважды щелкните на Background на панели слоев. Во всплывающем окне нажмите ОК.
Перейдите в меню «Слой »> «Стиль слоя»> «Наложение узора». :
Выберите вновь созданный узор во всплывающем окне и нажмите «ОК».
3. Наслаждайтесь своим рисунком!
Дополнительная литература
Попробуйте бесплатные инструменты для разработчиков от команды Icons8
Photo Creator , бесплатное средство для создания коллажей с технологиями на основе искусственного интеллекта для создания индивидуальных фотографий для вашей истории Pichon , настольное приложение для загрузки значков и картинок и использования их в автономном режиме
Также получите списки бесплатных векторных программ и бесплатных программ для редактирования фотографий.
Как создать бесшовные фоновый узор в Photoshop | by Icons8
8 простых шагов для создания растрового фонового рисунка из значков PNG.
Бесшовные узоры можно применить на любом фоне, который вы только можете себе представить, от веб-сайта или приложения до фотографии в Tinder.
1. Adobe Photoshop. Если вы встречали это руководство, велика вероятность, что у вас уже есть эта программа. Однако вот ссылка для загрузки бесплатной тестовой версии.
2. Icons8 для рабочего стола. Это бесплатное приложение, содержащее множество значков и хорошо работающее с Photoshop.
Загрузить значки8
3. Значки или другие изображения, которые вы хотите добавить в свой узор. Для этого урока мы взяли наши иконки природы. К вашему сведению, они бесплатны в формате PNG любого размера, поэтому вы можете сохранить их в своей учетной записи и использовать для шаблона.
Получите значки природы
1. Создайте основу для вашего узора
Создайте новый файл любого размера с одинаковой шириной и высотой.В нашем случае каждая сторона составляет 200 пикселей.
2. Добавьте значки
Перетащите значки из значков Icons8 для рабочего стола (или любых других значков) в файл Photoshop. Мы пошли за крабом, рыбой, рыбой-клоуном и морским коньком.
3. Поместите каждый значок на отдельный слой
Нажмите Введите , чтобы завершить процесс вставки значка. Вы должны нажимать на нее столько раз, сколько нужно, пока вы не перестанете видеть черную рамку.
В итоге это должно выглядеть так:
Теперь каждый значок находится на отдельном слое в вашем файле.
4. Настройте первый слой
Выберите один слой на панели слоев и перейдите в меню Filter> Other> Offset :
Установите параметры Horizontal и Vertical так, чтобы они составляли половину длины стороны файла. Помните ширину и высоту вашего квадрата? Это две настройки, которые вам нужны.
Размер нашего файла составляет 200×200 пикселей, поэтому мы устанавливаем 100 пикселей для обоих параметров. Убедитесь, что вы отметили опцию Wrap Around в нижней части всплывающего окна.Щелкните ОК. Первый слой готов:
5. Настройте второй слой
Выберите другой слой на панели слоев. Теперь снова перейдите в Filter> Other> Offset .
Затем установите Horizontal на 0 пикселей и нажмите OK:
6. Настройте третий слой
Выберите еще один слой и перейдите к Filter> Other> Offset . Теперь переверните значения по горизонтали и по вертикали . В нашем случае по горизонтали будет 100 пикселей, а по вертикали 0 пикселей.Щелкните ОК.
Теперь у нас есть плитка с узором.
7. Объедините слои
Выберите все слои, кроме Фон на панели слоев и используйте комбинацию горячих клавиш Ctrl + E . Выбранные слои будут объединены.
8. Создайте свой узор
Сначала используйте еще одну комбинацию горячих клавиш Ctrl + A (выберите все).
Затем перейдите в Edit> Define Pattern :
Назовите его и нажмите OK. Та-да! Ваша выкройка готова!
У вас есть выкройка, хорошо.Теперь давайте посмотрим, как использовать его на фоне.
1. Создайте новый файл
Сделайте его больше, чем ваш узор, чтобы увидеть результат. У нас 800×600 пикселей.
2. Выберите Pattern Overlay
Дважды щелкните на Background на панели слоев. Во всплывающем окне нажмите ОК.
Перейдите в меню «Слой »> «Стиль слоя»> «Наложение узора». :
Выберите вновь созданный узор во всплывающем окне и нажмите «ОК».
3. Наслаждайтесь выкройкой!
Как создавать бесшовные текстуры в 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: Попробуйте
Самый простой способ протестировать новую текстуру — создать новый слой, залитый любым плоским цветом, и выбрать «Слой»> «Стиль слоя»> «Наложение узора». Новая текстура будет последней в списке. Когда он заполнит слой, переместите диалоговое окно в сторону, и вы сможете перетащить его, чтобы проверить, действительно ли оно бесшовное. Вы также можете уменьшить масштаб, если хотите, чтобы проверить повторы.
Посмотреть видео
Посмотрите видеоверсию этого руководства ниже.
Как очистить бесшовные фоны с помощью Adobe Photoshop
Как очистить бесшовные фоны с помощью Photoshop www.sleeklens.com
Всем привет, надеюсь, у вас все хорошо сегодня.
В этом уроке мы рассмотрим, как очистить фоны с помощью Photoshop.
Это очень распространенная проблема при фотосессии, поскольку день идет, а люди ходят вокруг вашего фона, как правило, со временем немного сбиваются с толку, и когда вы загружаете свои изображения, вы увидите все неприятные маленькие следы и грязь отметки на всех ваших изображениях.
Итак, сегодня я собираюсь показать вам, как с легкостью их убрать и сделать ваше изображение чопорным и правильным.
Давайте приступим.
Когда мы смотрим на мое изображение, вы можете подумать, что все выглядит хорошо и в чем проблема, ну, пока вы не увеличите масштаб до ступней.
Это могло бы быть хорошо при небольшом размере, но изображение Мне пришлось использовать это изображение для огромного плаката для маркетинговой кампании !!
Итак, когда мы увеличиваем масштаб, мы начинаем видеть грязь, которая накопилась за день при всем движении.
Выглядит не очень хорошо.
Первое, что я хочу, чтобы вы сделали, это нажали Ctrl J
Это дублирует ваш слой, я говорю об этом во всех своих уроках, и это важность защиты вашего исходного изображения, чтобы, если вам когда-нибудь понадобится резервная копия, она будет готова вас поймать, если вы, так сказать, упадете.
Обычно вы, вероятно, подумали бы об использовании таких инструментов, как Clone Stamp или, может быть, даже Brush Tool в сочетании с добавлением фильтра шума, но нет более простого способа, и к тому же он не очень общедоступный.
Вам нужно перейти в Filter — Noise — Median.
Таким образом, он выделяет области на изображении с текстурами Photoshop, а затем красиво объединяет их.
По мере того, как я увеличиваю ползунок, вы увидите, что фон начинает сливаться вместе, но, к сожалению, он также смешает остальную часть изображения, но не беспокойтесь, я покажу вам, как это исправить, поэтому пока не обращайте на это внимания.
Для этого изображения все, что мне нужно было выбрать, это радиус 4, иногда вам придется увеличить радиус, а иногда вам придется уменьшить, это действительно зависит от фотографии в то время, так что имейте это в виду, вы не должны догматично следить за тем, что отображается на моем экране, использовать собственные глаза и делать то, что вы считаете правильным.
Что хорошо в Медиане, так это то, что она обычно сохраняет формы, которые, как что-то вроде размытия по Гауссу, смешивают все вместе в огромный беспорядок, который нельзя использовать.
Далее мы собираемся создать маску слоя, поэтому щелкните там, где я указал ниже.
Затем нажмите (Ctrl + I), чтобы инвертировать маску слоя.
Следующий шаг — взять инструмент «Кисть» с белым цветом и кистью с мягкими краями на 100%
И затем вы начинаете рисовать на маске слоя, это означает, что вы рисуете на своем обычном изображении, но у вас должен быть установлен флажок маски, это черный ящик на «Layer 0 Copy» на панели слоев.
Обязательно рисуйте только землю и старайтесь как можно больше избегать ступней, вам не нужно быть полностью точным, потому что фильтр под ним очень поможет и сохранит края нетронутыми, но просто помните о изменения, если вам нужно исправить спину, как вы это сделали, измените вашу кисть с белого на черный и закрасьте его снова, а спину снова на белый, чтобы повторить попытку.
Вы можете прочитать и увидеть разницу между Lightroom и Photoshop.
Время от времени вам придется изменить размер кисти, вы можете легко сделать это, нажав клавиши скобок [&] на клавиатуре для уменьшения и увеличения по мере необходимости.
И теперь вы увидите, что ваше изображение почти идеальное, но есть еще один шаг, который вы можете выполнить, чтобы закончить его, это не всегда необходимо, но если вы посмотрите на мое изображение сейчас, вы увидите, что оно все еще выглядит немного грязный.
Итак, что я могу сделать здесь, так это взять инструмент «Кисть». Удерживая нажатой клавишу Alt, щелкните цвет рядом с ним.
Затем я уменьшаю непрозрачность кисти примерно до 25% и просто начинаю закрашивать эти области, чтобы немного смягчить их.
В итоге у вас будет очень чистый образ.
Рейтинг: 012345 0 на основе 0 Рейтинги
Следующие две вкладки изменяют содержимое ниже.Закончив колледж в 2002 году по специальности «Искусство и дизайн», я начал изучать свой путь в области графического дизайна и профессионального постпродакшна. Фрилансер, работающий полный рабочий день с 2011 года.
Самые популярные сообщения в июне
Как очистить бесшовную фоновую бумагу в Photoshop
Используйте Photoshop, чтобы очистить бесшовную фоновую бумагу там, где полы грязные, а фоновая бумага сморщена.Воспользуйтесь этой техникой, чтобы узнать, как очистить белый фон в фотошопе.
Таким образом, бесшовная бумага может испачкаться, порваться или помяться всего за пару использований. Вместо того, чтобы разрезать эту бумагу после каждой съемки, есть несколько способов очистить ее в Photoshop. В сегодняшнем видео я покажу вам два способа очистки фоновой бумаги в Photoshop. И это может даже сэкономить вам немного денег. Используйте фотошоп, чтобы очистить бесшовную фоновую бумагу там, где полы грязные, а фоновая бумага мята.Воспользуйтесь этой техникой, чтобы узнать, как очистить белый фон в фотошопе.
Чистый белый бесшовный фон
Итак, на этой фотографии этот пол на самом деле выглядит хуже, чем здесь, из-за вспышки. Он как бы убелил все пятна и грязь, которые сейчас на полу, но мы сохраним эту тень здесь. Смотри на тень здесь внизу. Таким образом, с помощью этой техники мы сможем сохранить тень. Итак, что я собираюсь сделать в первую очередь, это сделать копию фонового слоя, Command + J, и перейти сюда к Filter, Noise, Median.Итак, вы сразу видите, что делает медиана. Это искажает пол там внизу. Я бы сказал, что в данном случае это может быть примерно 43 года. А теперь я скажу ОК. И я собираюсь наложить черную маску слоя, удерживая Alt и щелкнув значок «Добавить маску слоя». И затем я собираюсь убедиться, что мой цвет переднего плана белый. B для инструмента кисти, и с помощью мягкой кисти я собираюсь, сначала я немного увеличу здесь масштаб, спущусь сюда и, как вы могли видеть, он уже убирает эту грязь и вижу тень, это даже не беспокоит тень.Итак, я просто уменьшу размер кисти здесь с помощью левой и правой скобок. И, как вы можете видеть, я немного коснулся этой пятки, но если я нажму клавишу X и сделаю кисть черной, я могу вернуть ее. Щелкните X, чтобы продолжить рисование белым цветом. И я могу подойти довольно близко. И, как я уже сказал, если я подхожу слишком близко и получаю немного белого, который попадает на объект, я могу сменить кисть на черную и закрасить ее. Итак, поехали. Я просто рисую в этой области, чтобы убедиться, что у меня все получится.Я поменяю кисть на черную, и у меня тут есть немного. Это до, а это после. Мой пол прибрал, но тень все еще видна. Как я уже сказал, до того, как я сделал снимок, все выглядело намного хуже. Я подумал: о, мне придется разрезать эту бумагу, она слишком грязная, но здесь вы можете сделать это по почте.
Удалите морщины с бесшовного фона
Хорошо, поэтому на этом изображении я хочу сохранить все, что вы видите на этом фоне, включая затенение и свет.Я просто хочу избавиться от морщин и пятен грязи на полу. Но я хочу сохранить все остальное. Итак, первое, что я хочу сделать, это продублировать фон, Ctrl + J, а затем я собираюсь использовать инструмент лассо, чтобы сделать выделение. И я намеренно слишком сильно держусь подальше от краев. Причина, по которой я делаю это, заключается в том, что я хочу убрать объект с фона, чтобы немного поработать с самим фоном, избавившись от морщин и пятен. Итак, теперь я собираюсь подойти сюда, чтобы редактировать, заполнить, и я собираюсь выбрать Content-Aware и убедиться, что Color Adaption отмечен и убедитесь, что режим наложения нормальный и непрозрачность 100.Скажите ОК, и Photoshop сделает все возможное, чтобы удалить объект с этого фона. И я скажу Command + D, чтобы отменить все это. И я собираюсь использовать инструмент заплатки, потому что я хочу удалить некоторые из этих темных пятен. Мне не нужно быть идеальным в этом вопросе, потому что, как я уже сказал, я хочу сохранить много темных пятен здесь в основном в той же области, в которой они находятся. Так что я прямо напротив любой из этих затененных областей. и сделайте его немного светлее. И теперь мне не нужно доводить это до совершенства.Хорошо, теперь я хочу сделать этот слой смарт-объектом. Итак, если я щелкну правой кнопкой мыши и скажу «Преобразовать в смарт-объект», потому что я собираюсь использовать здесь размытие по Гауссу, на случай, если я захочу вернуться и изменить его. Итак, если я подхожу к фильтрации, размытию, размытию по Гауссу, и если я полностью изменю это до того места, где я хочу избавиться от многих этих вещей. Просто размывайте его, чтобы избавиться от грязи на фоне на полу и некоторых морщин на обратной стороне фона. И скажи ОК. Я переименую этот BG, сделаю копию фонового слоя и назову эту тему.И я собираюсь переместить его сюда, наверх. На этот раз я воспользуюсь инструментом выделения объектов. Это новинка Photoshop. Я собираюсь получить свой выбор, и есть несколько способов, которыми вы можете это улучшить, но я просто воспользуюсь инструментом быстрого выбора здесь, чтобы обойти нижнюю часть теннисных туфель. Это хорошо. Теперь я собираюсь создать маску слоя с новым значком маски слоя. А теперь с помощью белой кисти, позвольте мне увеличить здесь, на маске слоя объекта, я нарисую белым, B для инструмента кисти, и добавлю некоторые области, которые инструмент выделения объекта не внес. .Это было немного взлохмачено в его волосах и на штанах, там и здесь, там, где лежат туфли. Вы могли видеть, что это немного вносит. Здесь есть несколько участков прямо вокруг нижней части обуви, которые мы можем внести. И это очень хорошо. Просто хочу убедиться, что здесь есть эта деталь, потому что через минуту мы добавим несколько теней. Итак, теперь я собираюсь продублировать этот предметный слой, Command + J, и я собираюсь удалить эту маску слоя, и я собираюсь добавить маску черного слоя, удерживая Alt + Option и щелкнув значок Добавить маску слоя.И я собираюсь использовать это для того, чтобы закрасить некоторые тени. Итак, с помощью кисти, B для инструмента кисти, убедитесь, что у меня белый цвет, которым я рисую, и я собираюсь спуститься сюда и закрасить некоторые тени в этой области. И если это было слишком много, я думаю, что это было так, поэтому я нажимаю ластик и просто стираю некоторые из них. Если я выключу все это, все будет выглядеть именно так. Для меня это своего рода путеводитель. И я могу немного уменьшить непрозрачность на этих тенях, потому что они слишком темные.И теперь, когда мы сделали это действительно гладким и все такое, я думаю, нам нужно добавить немного шума, поэтому я создам новый слой и подойду сюда, чтобы отредактировать, заполнить, добавить к нему 50% серого и изменить режим наложения для наложения, и теперь я могу перейти сюда, чтобы перейти к фильтрам, шуму, добавлению шума. И трех, вероятно, здесь вполне достаточно. И скажи ОК. Итак, теперь я сохраняю некоторые из этих теней и сглаживаю фон и пол. Итак, вот еще один пример, как если бы я сделал фон почти полностью серым, и я просто аккуратно добавил тени.Так что я тоже мог бы это сделать, но я хочу сохранить это как можно дольше. Итак, теперь к вопросу дня, какие из этих техник вы сочли полезными? Позвольте мне знать в комментариях ниже.
как создать бесшовный фон в фотошопе
После удаления фона ваша текстура будет выглядеть так. Как сделать бесшовные баннер и фон Bandcamp — Урок Photoshop. Это действительно для четырех краев вашей плитки. Сделайте свою собственную бесшовную текстуру травы.Создайте скрытую маску, нажав Alt / Option на кнопку маски слоя. Я хотел, чтобы этот узор был более волшебным, поэтому добавил звезды. Благодарим за интерес к повторяющимся текстурным фонам для образцов дизайна узоров. Мы видели, что многие веб-сайты описывают шаблоны и текстуры как тенденцию в веб-дизайне, но это не просто тенденция. Если вы используете изображение только с фоновым слоем, фильтр смещения будет перемещать ваше изображение по кругу, оборачивая его круговыми движениями. Откройте новый документ шириной 110 пикселей и высотой 110 пикселей.Поделитесь в Твиттере. Бесплатно . Если вы достаточно давно занимаетесь фотографией, скорее всего, вы использовали бесшовный фон из белой бумаги для некоторых своих изображений. Если вы используете внешний источник, такой как типография или производитель, вам необходимо убедиться, что вы следуете инструкциям по преобразованию, упомянутым в разделе «Плоские листы» в лицензии Design Bundles. Вы также можете создать повторяющийся узор, используя свои рисунки или кисти Photoshop. В этом уроке показано, как создавать бесшовные повторы в Photoshop, но обратите внимание, что в Adobe Illustrator есть функция создания узоров, которая позволяет накладывать изображения на слои и видеть узор по мере его развития.Уметь создавать… На этом уроке Крис Лорен из Pretty Little Lines покажет вам, как легко создавать бесшовные узоры с помощью новой функции предварительного просмотра узоров в Photoshop 2021. Создание прозрачного фона для изображения вашего продукта в Photoshop открывает широкий спектр привлекательных вариантов отображения для ваших избранных продуктов. Выберите эту опцию. 2. Нажмите «Изображение»> «Коррекция»> «Заменить цвет», убедитесь, что установлен флажок «Предварительный просмотр», и установите для параметра «Нечеткость» значение 25. Если вы создаете документ с высотой и шириной, равными степени 2, Photoshop всегда будет генерировать бесшовные повторяющиеся узоры, когда вы применяете фильтр облаков.Этот плагин работает с CS3 вплоть до CC +. 3. Выберите шаблон для Instagram, чтобы создать квадратное пространство. Я начал с этой фотографии петуха (сделанной во время недавней поездки на Гавайи). Заполните пространство. Шаг 5. Вот шаги для создания пледа в Photoshop Elements. Создание бесшовных текстур из фотографий в Photoshop. У вас получится хоть что-нибудь сладкое! Теперь скопируйте плитку и вставьте ее в новый документ. 02. Photoshop, серый и черный, а затем наша страница.Я предлагаю вам сделать его довольно большим (например, 512 пикселей), так как вы не хотите, чтобы звезды на заднем плане выглядели повторяющимися. Добро пожаловать в #learnwithkt, где я делюсь одной из вещей, которые мне нравятся в графическом дизайне. Как создать бесшовные фоны в Photoshop. Следуй за мной и попробуй! Вы узнаете, как взять одно изображение и разделить его. Выберите цвет фона, используя палитру образцов или палитру цветов, которую вы получаете, щелкнув цвет переднего плана на панели инструментов. Затем скопируйте и вставьте изображение на первое сканированное изображение, наложив его сверху, чтобы создать бесшовный узор.Шаг 7 Убедитесь, что флажок «Обратные цвета» снят. Нажмите «D», чтобы убедиться, что ваши цвета установлены по умолчанию (черный передний план, белый фон). Pinterest. Шаг 2 В этом уроке вы узнаете, как создать бесшовный узор с помощью клип-арта и Photoshop. Я использую Photoshop, но важна концепция. 10 января 2013 г. — Melly Sews: Tech Tip — Как создать бесшовные фоны в Photoshop Elements с помощью Free Transform Tool. Шаг 9: Выбор правильного фона для вашего рисунка. Создание бесшовного трехмерного геометрического узора в Photoshop. Бесшовные узоры — это приятный и простой способ добавить хобби к вашим фото-проектам.Это та часть, где Photoshop берет на себя ответственность и выполняет хитрый трюк, который экономит нам много времени. Сначала убедитесь, что ваши слои объединены в плоский документ. Теперь перейдите в меню и выберите «Фильтр»> «Другое»> «Смещение». Установите для горизонтального и вертикального смещения половину размера холста в пикселях и выберите вариант обтекания. Вуаля! Photoshop, несомненно, является одним из самых известных фоторедакторов, которые могут быть у вас на рабочем столе. Это работает только с текстурами, но не с узорами. Создавайте бесшовные модели. «Присоединяйтесь к моей академии онлайн-курсов» https: // bit.ly / 36ojvuw. Поворачивайте плед под любым углом, увеличивайте и уменьшайте масштаб, изменяйте узор и цвета. На самом деле, вы можете потратить больше времени на поиски подходящего, чем на изготовление его самостоятельно. Только убедитесь, что цветочные элементы соединены. Если у вас есть набор инструментов Crop Tool, чтобы он не удалял пиксели, что является стандартным, то после того, как вы кадрировали Select All… Размер файла: 580 МБ Это удобный курс для креативщиков и владельцев малого бизнеса, желающих создать свои собственные бесшовные или повторяемый узор тай-дай в фотошопе.Plaid Lite — это плагин Photoshop для создания бесшовных пледов и мозаичных узоров в клетку. Скопируйте или поместите изображения, которые хотите объединить, в один документ. Нажмите кнопку «Добавить маску слоя» на панели «Слои», чтобы добавить маску слоя к активному слою. Нажмите клавишу D, чтобы вернуть цвета переднего плана и фона к черно-белому по умолчанию, затем перейдите в Filte> Render> Clouds. Однако, если изображение текстуры, которое вы используете, меньше, чем область, которой вы собираетесь его заполнить, вам нужно будет совершить небольшое волшебство, чтобы спасти положение.В завершение месяца Photoshop на этой неделе я хотел поделиться одним из моих любимых способов работы с акварелью в Photoshop — превратить их в бесшовные модели текстур! Однако узоры могут быть немного пугающими для некоторых художников, поскольку часто бывает сложно определить, где именно повторяется узор. 3. Выберите текстуру и обрежьте ее так, чтобы она соответствовала размеру окна Photoshop — вы не хотите, чтобы она свисала с холста. В нашем примере тема находится на красном фоне, но плавность сцены несколько меняется.1. Создайте новый холст и выберите нужный размер. Вы когда-нибудь задумывались, как сгладить бесшовную бумагу в Photoshop? Я надеюсь создать больше видеоконтента на Youtube в этом году, поэтому не забудьте подписаться на мой канал! Чтобы получить цельный размытый фоновый эффект, мы конвертируем нашу фотографию в два слоя: один слой для объекта и один слой для фона. Описание. Редактор бесшовных фото фона; Минусы: необходимо покупать после пробного периода; Фотошоп. Бумага для фона также идеально подходит для удаления людей с их фона или устранения отвлекающих факторов.Он бесшовный и векторной, он полностью настраивается и настраивается в несколько кликов! Вы можете подобрать белый бесшовный фон менее чем за 100 долларов, превратив любое пространство в фотостудию. В качестве альтернативы вот действительно быстрый способ создать бесшовные плед в Photoshop Elements. Они будут размещены на противоположной стороне файла. Создание бесшовного повторяющегося узора довольно просто с помощью методов этого класса «Повторение текстурных фонов для образцов дизайна узоров». Мне всегда нравилось создавать бесшовные фоны, и в этом уроке я покажу вам, как создать действительно интересный круговой геометрический фон с помощью векторных инструментов Photoshop.Для этого урока мы создаем бесшовный узор, который вы можете использовать для печати дома, чтобы сделать бумагу для альбомов, использовать ее для печати на виниле или сублимации. Нажмите Control-J, чтобы дублировать ветвь, а затем используйте Правка> Трансформировать> Отразить по горизонтали на копии, чтобы создать отраженную версию. 2 минуты на чтение. Это означает, что элементы, расположенные на границе вашего изображения, должны совпадать с границей изображения следующей плитки, расположенной рядом с ней, чтобы при соединении вы не могли видеть никакого разделения между плитками.Бесшовные повторяющиеся узоры — прекрасный способ использовать ваши произведения искусства для создания ткани, одежды, товаров для дома, настенных покрытий, канцелярских принадлежностей и многого другого! Вы увидите несколько вариантов файлов на основе ваших недавних проектов. Бесшовная текстура бетона очень популярна среди креативщиков и используется для всех видов искусства. Создайте новый документ размером 500 × 500 пикселей. Благодарим за интерес к повторяющимся текстурным фонам для образцов дизайна узоров. Создайте бесшовную текстуру в Photoshop. Бесшовные текстуры травы.Вот почему мы покажем вам, как быстро менять и удалять фон, используя профессиональные методы, чтобы создать цельное окончательное изображение. Эта техника не создает эффекта диагонального саржевого переплетения, но создает красивый повторяющийся узор в клетку. Затем клонируйте текстуру, используя волнистую линию слева направо, закрывающую шов. Seamless — это плагин для фотошопа, помогающий создавать бесшовные / мозаичные узоры или текстуры всего за несколько кликов. Поделиться через фейсбук. Требования. В этой коллекции видео я шаг за шагом проведу вас через процесс создания повторяющихся бесшовных узоров в фотошопе.Как создать бесшовную текстуру фона плитки. Надеюсь, это видео вам поможет. Создайте новый документ любого размера, который вам нравится. У меня 2000 х 2000 пикселей. Выберите фоновый слой на панели «Слои». Перейдите в Edit> Fill (F5). В раскрывающемся меню «Использовать» выберите «Шаблон», а в раскрывающемся списке «Пользовательский шаблон» выберите только что созданный шаблон. Щелкните ОК. Теперь ваш узор будет применен к фоновому слою. Новый документ появится на вашем экране. Это практическое руководство покажет вам два самых популярных метода создания обычного изображения и создания бесшовного изображения с помощью Photoshop CS4; один из самых популярных в отрасли инструментов для редактирования изображений.Вы часто увидите, что они используются в дизайне одежды, полиграфическом дизайне, веб-дизайне и даже архитектурном дизайне. Свободное трансформирование. Обладая лучшими функциями ластика фона, такими как ластик, ластик для фона… Вы можете создавать свои собственные или находить бесплатные бесшовные шаблоны для использования в своих проектах. Один из самых быстрых инструментов для этого — GIMP, популярная бесплатная графическая программа. Создание бесшовных фонов с помощью GIMP из GIMP Tips содержит список конкретных шагов. Щелкните и удерживайте кнопку мыши, чтобы выбрать область, которую вы собираетесь расширить.Когда у вашего клипа будет прозрачный фон, вы можете создать бесшовный узор. В Интернете вы можете найти бесплатную программу для создания выкроек, чтобы создавать собственные выкройки, используя такие простые формы, как треугольники, линии или круги. В большинстве случаев нам нужна бесшовная плитка, чтобы она могла повторяться бесконечно. Для этого урока мы создаем бесшовный узор, который вы можете использовать для печати дома, чтобы сделать бумагу для альбомов, использовать ее для печати на виниле или сублимации. Выберите Pattern Overlay. Новые учебные пособия по дизайну узоров, позволяющие создавать повторяющиеся фоновые узоры за считанные минуты.Создание бесшовных узоров в фотошопе. При активном выделении щелкните слой «Runner» и в нижней части панели слоев щелкните значок «New Layer Mask», чтобы создать маску из выделения. Этот шаг удалит фон с текущего слоя. Создавайте повторяющиеся бесшовные фоны из плитки в Photoshop. Чтобы увидеть результат, сделайте его больше, чем ваш узор. Использование кривых Photoshop и слоев настройки пороговых значений с гистограммой, чтобы увидеть проблемные области на изображении. Мы начнем с расширения фона до нижней части фотографии, а затем я расскажу вам, как быстро и легко удалить морщины с фона.Сделайте любую фотографию и превратите ее в бесшовный узор с помощью плагина. В этом уроке я покажу вам, как расширить и сгладить бесшовный фон в Photoshop. Получите пакет. Узор — это что-то вроде […] Одна из самых больших жалоб новорожденных фотографов заключается в том, что их бесшовные бумажные фоны сморщены и являются… Используйте инструмент перемещения (сочетание клавиш: V) и удерживайте нажатой клавишу Shift, чтобы элементы оставались заблокированными. Это действие удаляет лишнее пространство и правильно размещает кирпичики нашего бесшовного фона.Отключите слой bakcground (в нашем случае розовый, но вы можете выбрать другой цвет). 1. отсканируйте свою работу с разрешением 300 dpi и откройте ее в фотошопе. Создание симметричного узора. Вы можете выбрать размер и цвет холста в соответствии с вашими требованиями. Создание бесшовных текстур мрамора в Adobe Photoshop В этом классе я проведу вас через пошаговый процесс создания современных текстур мрамора непосредственно в Adobe Photoshop. Это настройки, которые мы собираемся использовать для создания этого бесшовного фона.Используйте инструмент «Клонирование» с круглой кистью около 100 пикселей и жесткостью 30%. Как создать бесшовное повторение в блоге Photoshop Spoonflower. вы узнаете, как накладывать узоры на слои, чтобы создавать новые дизайны фона для веб-сайтов, социальных сетей и т. д. Исследовать. Затем щелкните фон изображения; этот оттенок появится в поле с надписью «Цвет». Затем щелкните правой кнопкой мыши, чтобы открыть всплывающее меню, и выберите «Свободное преобразование». спасибо за просмотр. Нет. Однако, в отличие от часто ограниченного и одноцветного фона, который можно найти в портретных студиях, существует поистине неограниченный запас бесшовных фонов, которые можно найти за пределами студии, во всевозможных тонах, текстурах и цветах.Установите цвет переднего плана на # d2dadc, а цвет фона на # 13314b. Обязательно запишите размеры центральной точки вашего дизайна, так как они вам понадобятся позже. Создайте новый файл в Photoshop, выбрав «Файл»> «Создать» (ctrl + n). Сегодня. В меню «Фильтр» есть множество интересных фотоэффектов, которые можно использовать для создания различных текстур, таких как вода, дерево, ткань, снег и т. Д., Очень легко и просто. Мы собираемся использовать бесшовные шестиугольники и создать фон для вашей графики. Откройте свое изображение в Snapseed.Сначала вам нужно выбрать часть изображения, которую вы хотите использовать. Выделите все, что должно быть сплошным цветом, и сделайте это маской слоя. Пользователи сенсорных устройств, исследуйте их на ощупь или с помощью жестов смахивания. Остался один шаг — создать узор в фотошопе. Однако есть некоторые вещи, которые он делать не может. Узнайте, как создать бесшовную текстуру в фотошопе из фотографии и отредактировать ее для 3D-рендеринга. Как расширить и сгладить бесшовный фон в Photoshop. Если вы делаете прозрачный узор, обязательно удалите фоновый слой или щелкните значок глаза, чтобы скрыть фоновый слой.Здесь, в этом посте, вы получите бесплатную ссылку для скачивания сжатого файла CreativeMarket — Seamless Pattern Creation Kit 3810758, расположенного ниже. Извините меня. Вы можете выровнять слои вручную или с помощью команды «Автоматическое выравнивание слоев». Чтобы создать бесшовный узор в Photoshop, откройте желаемое изображение и выберите «Фильтр»> «Другое»> «Смещение». Благодаря полностью продвинутым функциям редактирования фотографий и фонов вы можете точно удалить фон изображения. Создавайте бесшовные текстуры с помощью imageSynth в Photoshop.Старый бетон. С другой стороны, узоры обычно немного пугают пару художников, так как часто бывает трудно точно определить, где узор повторяется. Определите его, выбрав «Правка»> «Определить узор»>, и назовите его примерно как «Акварельный узор». Настройте свои слои; Работаем с предметным слоем; Работаем с фоновым слоем; Примените размытие; Получите ваше окончательное изображение; Шаг 1: Настройте слои. Требования. См. Раздел «Дублирование слоев». Первое, что я делаю, это перетаскиваю изображение в Photoshop: Следующее, что я делаю, это создаю новый слой.Отсканируйте свою работу с разрешением 300 точек на дюйм и откройте ее в Photoshop. На этом мы прекратим создавать элементы. Создайте бесшовную публикацию в Instagram с помощью Photoshop, используя только Snapseed. Читайте неограниченное * количество книг и аудиокниг в Интернете, на iPad, iPhone и Android. Самый простой способ показать вам концепцию — это быстрые демонстрации, поэтому я постарался сделать все уроки краткими и по существу. В этом уроке я рассмотрю метод создания бесшовного повтора с помощью Photoshop Elements (шаги очень похожи, если вы используете Photoshop).Чтобы композиция выглядела реалистично, мы также научимся добавлять свет и тени, чтобы имитировать исходное изображение. Надеюсь, эта коллекция руководств по шаблонам поможет улучшить ваши навыки проектирования в Photoshop и Illustrator, а также научиться быстро и легко создавать бесшовные, круглые геометрические узоры с помощью инструментов Adobe Photoshop и Adobe Illustrator. Убедитесь, что в «Неопределенные области» выбрано «Обтекание», чтобы правильно расположить изображение. Создание бесшовной текстуры. Photoshop, несомненно, является одним из самых известных фоторедакторов, которые могут быть у вас на рабочем столе.10 января 2013 г. — Melly Sews: Tech Tip — Как создать бесшовные фоны в Photoshop Elements с помощью Free Transform Tool. Используйте волшебную палочку, чтобы выбрать белую область вокруг рисунка, затем нажмите удалить. 2. Исходное изображение. Привет! Переместите некоторые элементы вверх и к левому краю файла. Как сгладить бесшовную бумагу в Photoshop. Если вы используете внешний источник, такой как типография или производитель, вам необходимо убедиться, что вы следуете инструкциям по преобразованию, упомянутым в разделе «Плоские листы» в лицензии Design Bundles.Я собираюсь дважды щелкнуть слово (слой 1) и переименовать его в «Медведь». Выберите «Добавить шум» в меню фильтров и установите фильтр на 20, чтобы добавить зернистость к фону. Ширина и высота не обязательно должны совпадать. Перейдите в Файл> Создать (Ctrl + N), чтобы создать новый документ. Вы часто увидите, что они используются в дизайне одежды, полиграфическом дизайне, веб-дизайне и даже архитектурном дизайне. Сегодня. В этой статье вы узнаете, как сделать бесшовный узор из вектора и из фонового изображения. В этом уроке мы будем использовать этот красивый цветок.Чтобы сделать свой собственный, вам понадобится графическая программа. В этом уроке демонстрируется страница http: Выберите все созданные объекты, затем перейдите в Object> Pattern> Make, что переключит нас в режим редактирования Pattern. Вы должны увидеть маркировку, появившуюся вдоль рамки. — Расширение / плагин Photoshop — Простая в использовании панель / пользовательский интерфейс — Помогает создавать бесшовные узоры на основе элементов и текстур — Работает с Photoshop CC + Обзор функций: (Глобальный) — Предварительный просмотр: быстрое отображение / скрытие предварительного просмотра того, как изображение будет выглядеть как повторяющееся шаблон.Создайте новый документ Photoshop размером около 1000×1000 пикселей. Совместимость: Photoshop 7, CS-CS6, CC Из этого туториала Вы узнаете, как создать бесшовную текстуру в Photoshop. Сэкономьте время, которое вы потратите на изучение того, как создать сетку в Photoshop, и используйте этот огромный пакет из 40 бесшовных шестиугольников. Создавайте простые бесшовные модели онлайн. Я включил список инструкций для Photoshop, PaintShop Pro (Corel), GIMP и других графических программ. Пользователи сенсорных устройств, исследуйте их на ощупь или с помощью жестов смахивания.50 гексагональных фонов (EPS, JPG) Если вы торопитесь или просто не хотите научиться создавать сетку в Photoshop, этот небольшой набор гексагональных фонов может стать идеальным решением.
Патогенный грунт для чайников, Организаторы черной свадьбы Атланта, Скрипач Эзинма Собственный капитал, Требования к въезду в Тринидад и Тобаго Covid, Альтернатива программного обеспечения Horus, Амфитеатр Ривер-Сити Джефферсон-Сити, Миссури,
Учебное пособие по повторяющимся узорам в Photoshop
Шаг 1. Создание нового документа
Начнем с создания единой плитки для узора.Для этого нам нужен новый пустой документ, поэтому перейдите в меню File в строке меню в верхней части экрана и выберите New :
Перейдите в Файл> Создать.
Откроется диалоговое окно «Новый документ». Введите 100 пикселей для полей Width и Height . Размер документа будет определять размер плитки, что повлияет на то, как часто узор повторяется в документе (поскольку для меньшей плитки потребуется больше повторений, чем для заполнения такого же объема пространства, чем для плитки большего размера).В этом случае мы создадим плитку размером 100 х 100 пикселей. Позже вы захотите поэкспериментировать с разными размерами, создавая свои собственные выкройки.
Я оставлю значение Разрешение равным 72 пикселя / дюйм . Установите Background Contents на Transparent , чтобы у нашего нового документа был прозрачный фон:
Введите ширину и высоту документа и убедитесь, что для параметра «Содержимое фона» установлено значение «Прозрачный».
Нажмите ОК, когда закончите, чтобы закрыть диалоговое окно.Новый документ появится на вашем экране. Образец шахматной доски, заполняющий документ, — это способ Photoshop сказать нам, что фон прозрачный. Поскольку документ довольно мал — всего 100 x 100 пикселей, я увеличу его, удерживая нажатой клавишу Ctrl (Win) / Command (Mac) и нажимая значок плюс ( + ) несколько раз. Здесь документ увеличен до 500%:
Новый пустой документ, увеличенный до 500%.
Шаг 2. Добавьте направляющие по центру документа
Нам нужно знать точный центр нашего документа, и мы можем найти его с помощью руководств Photoshop.Поднимитесь в меню View вверху экрана и выберите New Guide :
Перейдите в «Просмотр»> «Новое руководство».
Откроется диалоговое окно New Guide. Выберите Horizontal для Orientation , затем введите 50% для Position . Нажмите OK, чтобы закрыть диалоговое окно, и вы увидите горизонтальную направляющую, появившуюся в центре документа:
Выберите «По горизонтали» и введите 50% в поле «Положение».
Вернитесь в меню View и еще раз выберите New Guide . На этот раз в диалоговом окне New Guide выберите Vertical для Orientation и снова введите 50% для Position :
Выберите Вертикально и введите 50% для Позиции.
Щелкните OK, чтобы закрыть диалоговое окно, и теперь вы должны иметь вертикальную и горизонтальную направляющую, проходящую через центр документа. Точка, где они встречаются, и есть точный центр.Цвет направляющих по умолчанию — голубой, поэтому их может быть сложно увидеть на снимке экрана:
Вертикальная и горизонтальная направляющие проходят через центр документа.
Изменение цвета направляющей (дополнительно)
Если вам не удается увидеть направляющие из-за их светлого цвета, вы можете изменить их цвет в настройках Photoshop. На ПК перейдите в меню Edit , выберите Preferences , затем выберите Guides, Grid & Slices .На Mac откройте меню Photoshop , выберите Preferences , затем выберите Guides, Grid & Slices :
Выберите настройки направляющих, сетки и фрагментов.
Откроется диалоговое окно «Настройки» Photoshop с параметрами «Направляющие», «Сетка» и «Срезы». Самый первый вариант вверху списка — это Guide Color . Как я уже упоминал, по умолчанию установлен голубой цвет. Щелкните слово Cyan и выберите другой цвет из списка. Вы увидите предварительный просмотр цвета в окне документа.Поменяю свой на Light Red :
Выбор светло-красного в качестве нового цвета направляющих.
Нажмите ОК, когда закончите, чтобы закрыть диалоговое окно «Настройки». Направляющие в окне документа теперь отображаются в новом цвете (обратите внимание, что Photoshop будет продолжать отображать направляющие в этом новом цвете, пока вы не вернетесь к настройкам и не измените цвет обратно на голубой или не выберете другой цвет):
Направляющие теперь отображаются в новом цвете, что облегчает их просмотр.
Шаг 3: нарисуйте форму в центре документа
Вы можете создавать очень сложные узоры в Photoshop или они могут быть такими простыми, как, скажем, повторяющаяся точка или круг. Нарисуем круг в центре документа. Сначала выберите инструмент Elliptical Marquee Tool на панели инструментов. По умолчанию он скрывается за инструментом Rectangular Marquee Tool, поэтому нажмите на инструмент Rectangular Marquee Tool и удерживайте кнопку мыши в течение секунды или двух, пока не появится всплывающее меню, затем выберите инструмент Elliptical Marquee Tool из списка:
Щелкните и удерживайте инструмент Rectangular Marquee Tool, затем выберите инструмент Elliptical Marquee Tool.
Выбрав инструмент Elliptical Marquee Tool, переместите перекрестие прямо над точкой пересечения направляющих в центре документа. Удерживая нажатыми Shift + Alt (Win) / Shift + Option (Mac), щелкните в центре документа, затем, не отпуская кнопку мыши, растяните круговое выделение. Удерживая нажатой клавишу Shift при перетаскивании, форма выделения станет идеальным кругом, в то время как клавиша Alt (Win) / Option (Mac) заставляет Photoshop рисовать контур выделения из центра.Когда вы закончите, ваш контур выделения должен выглядеть примерно так (не беспокойтесь о точном размере, пока он близок):
Удерживая Shift + Alt (Win) / Shift + Option (Mac), растяните круговой контур выделения из центра.
Шаг 4: Залейте выделение черным
Перейдите в меню Edit вверху экрана и выберите Fill :
Перейдите в меню «Правка»> «Заливка».
Откроется диалоговое окно «Заливка», в котором мы можем выбрать цвет для заливки выделения.Установите для параметра Использовать в верхней части диалогового окна значение Черный :
Установите для параметра «Использование» значение «Черный».
Щелкните OK, чтобы закрыть диалоговое окно. Photoshop заполняет круглое выделение черным. Нажмите Ctrl + D (Win) / Command + D (Mac), чтобы быстро удалить контур выделения вокруг фигуры (вы также можете перейти к меню Select в верхней части экрана и выбрать Deselect , но сочетание клавиш быстрее).Имейте в виду, что мой документ все еще увеличен до 500%, поэтому края круга кажутся блочными:
Выбор закрашен черным.
Плагин шорткодов, действий и фильтров: ошибка в шорткоде [ ads-basics-middle ]
Шаг 5: Дублируйте слой
Добавив только один круг в центр плитки, мы могли бы сохранить плитку как узор, но давайте сделаем это немного интереснее, прежде чем мы это сделаем. Сначала сделайте копию слоя, перейдя в меню Layer вверху экрана, выбрав New , затем выбрав Layer через Copy .Или, если вы предпочитаете сочетания клавиш, нажмите Ctrl + J (Win) / Command + J (Mac):
Перейдите в меню «Слой»> «Создать»> «Слой через копирование».
В окне документа пока ничего не произойдет, но копия слоя, который Photoshop называет «Копия слоя 1», появится над оригиналом на панели «Слои»:
Панель «Слои», на которой отображается копия слоя 1 над оригиналом.
Шаг 6: Применение фильтра смещения
При разработке плиток для использования в качестве повторяющихся узоров есть один фильтр, который вы будете использовать почти каждый раз, и это Смещение , к которому вы можете перейти, перейдя в меню Фильтр вверху экрана, выбрав Другой , затем выберите Смещение :
Выберите «Фильтр»> «Другое»> «Смещение».
Откроется диалоговое окно «Фильтр смещения». Фильтр «Смещение» перемещает или смещает содержимое слоя на указанное количество пикселей по горизонтали, вертикали или по обоим направлениям. При создании простых повторяющихся узоров, подобных тому, который мы здесь разрабатываем, вы захотите ввести половину ширины документа в поле ввода «Горизонтальное» и половину высоты документа в поле ввода «Вертикальное». В нашем случае мы работаем с документом 100 x 100 пикселей, поэтому установите для параметра Horizontal значение 50 пикселей, а для параметра Vertical также значение 50 пикселей.В нижней части диалогового окна, в разделе Undefined Areas , убедитесь, что выбран Wrap Around :
Установите для параметров «Горизонтальный» и «Вертикальный» размер вдвое меньше размера документа и убедитесь, что установлен флажок «Обтекать».
Щелкните OK, чтобы закрыть диалоговое окно. В окне документа мы видим, что фильтр «Смещение» взял копию круга, который мы создали на предыдущем шаге, и разделил ее на четыре равные части, разместив их по углам документа.Круг, оставшийся в центре, — это исходный круг, который мы нарисовали на слое 1:
.Изображение после запуска фильтра «Смещение».
Шаг 7. Определите плитку как узор
Создав плитку, давайте сохраним ее как фактический узор. Этот процесс в Photoshop называется «определение узора». Подойдите к меню Edit вверху экрана и выберите Define Pattern :
Перейдите в Edit> Define Pattern.
Photoshop откроет диалоговое окно с просьбой назвать новый узор.Если вы создаете несколько одинаковых плиток разных размеров, рекомендуется указать размеры плитки в названии рисунка. В этом случае назовите плитку «Круги 100×100». Когда вы закончите, нажмите OK, чтобы закрыть диалоговое окно. Плитка теперь сохранена как узор!
Назовите узор «Круги 100×100».
Шаг 8: Создайте новый документ
Мы разработали нашу плитку и определили ее как узор, а это значит, что теперь мы можем использовать ее для заполнения всего слоя! Давайте создадим новый документ для работы.Как и на шаге 1, перейдите в меню File и выберите New . Когда появится диалоговое окно «Новый документ», введите 1000 пикселей как для ширины , так и для ширины и высоты . Оставьте Разрешение равным 72 пикселя / дюйм , и на этот раз установите Background Contents на White , чтобы фон нового документа был залит сплошным белым цветом. Когда вы закончите, нажмите OK, чтобы закрыть диалоговое окно.На вашем экране появится новый документ:
Создайте новый документ размером 1000 x 1000 пикселей с белым фоном.
Шаг 9: Добавьте новый слой
Мы, , могли бы просто заполнить фоновый слой документа нашим узором, но это серьезно ограничило бы то, что мы можем с ним делать. Как мы увидим в следующем уроке, когда мы рассмотрим добавление цветов и градиентов к узорам, гораздо лучший способ работы — разместить повторяющийся узор на отдельном слое. Щелкните значок New Layer внизу панели Layers:
Щелкните значок «Новый слой».
Новый пустой слой с именем «Слой 1» появляется над фоновым слоем:
Появится новый слой.
Шаг 10: Залейте новый слой узором
Добавив наш новый слой, давайте заполним его нашим узором! Поднимитесь в меню Edit и выберите Fill :
Перейдите в меню «Правка»> «Заливка».
Обычно команда Photoshop «Заливка» используется для заливки слоя или выделения сплошным цветом, точно так же, как мы это делали на шаге 4, когда использовали ее для заливки круглого выделения черным цветом.Но мы также можем использовать команду «Заливка», чтобы заполнить что-либо узором, и мы делаем это, сначала установив для параметра Использовать в верхней части диалогового окна значение Узор :
Измените параметр «Использовать» на «Образец».
При выбранном шаблоне второй вариант, Пользовательский шаблон , появляется непосредственно под ним, где мы выбираем шаблон, который хотим использовать. Нажмите на эскиз шаблона для предварительного просмотра :
Щелкните непосредственно на миниатюре Custom Pattern.
Откроется окно выбора паттернов , в котором отображаются маленькие эскизы всех паттернов, из которых мы в настоящее время должны выбирать. Только что созданный узор круга будет последней миниатюрой в списке. Если у вас включены подсказки в настройках Photoshop (они включены по умолчанию), имя рисунка будет отображаться при наведении курсора на миниатюру. Дважды щелкните по нему, чтобы выбрать его и выйти из окна выбора узоров:
.Выберите узор «Круги 100×100» в палитре узоров.
После того, как вы выбрали узор, все, что осталось сделать, это щелкнуть OK, чтобы закрыть диалоговое окно «Заливка». Photoshop заполняет пустой слой документа круговым узором, повторяя плитку столько раз, сколько необходимо:
Слой 1 теперь заполнен повторяющимся круговым узором.
Куда идти дальше …
Вот и все! Очевидно, что наш черно-белый узор круга не принесет нам много наград, но важные вещи, которые следует извлечь из этого первого урока, — это шаги, которые мы использовали для его создания, проектирование единой плитки, определение плитки как узор, а затем использование Photoshop Команда «Заливка» для заполнения всего слоя узором.Далее мы начнем двигаться дальше, изучая, как добавлять цвета и градиенты к нашим узорам ! Или посетите наш раздел Основы Photoshop, чтобы узнать больше об основах Photoshop!
.