Бесшовный фон в фотошопе: Повторяющиеся бесшовные узоры в Photoshop
Содержание
Повторяющиеся бесшовные узоры в 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 пункта и получится такая картинка.
Как в фотошопе за несколько шагов сделать бесшовную текстуру | 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) можно добавить новый узор и использовать его для заливки фона.
в Photoshop, в Gimp и вручную – DIY и мастер-классы
Создавать сложные паттерны, оказывается, очень просто. Показываем, как это делать.
Легкомысленные цветочные мотивы на обоях, уютная и основательная клетка на пледе, яркий узор на упаковочной бумаге… согласитесь, без принтов и орнаментов наш быт был бы намного скучнее. Мы часто рассказываем вам, как использовать их в интерьере, а на этот раз решили поделиться секретом создания.
Бесшовные паттерны — это узоры, состоящие из повторяющихся элементов, граница между которыми не очевидна. Конечно, это весьма условное определение: даже на принтах, которые называют бесшовными, найти границу может быть проще или сложнее. Посмотрите на примеры ниже. В первом мы легко находим «элементарную частицу» и понимаем, что это просто нарисованные на квадратном холсте четыре арбузные дольки. А вот как сделать паттерн наподобие второго, не настолько очевидно. Что ж, этим мы сегодня и займемся!
Фото
Вручную
Написать этот материал нас вдохновил мастер-класс иллюстратора Джулии Ротман, в котором она показала, что паттерны можно создавать и без компьютера под рукой. Бумага, фломастер, ножницы и скотч — вот все, что вам понадобится, чтобы понять основной принцип.
1. Берем лист бумаги (любого формата) и рисуем на нем часть будущего принта. Постарайтесь заполнить большую его часть, при этом не касаясь краев.
2.Теперь лист нужно очень аккуратно разрезать на четыре части. Сдвиньте фрагменты по диагонали (так, чтобы левый нижний оказался вверху справа, левый верхний — внизу справа и т.д.) и очень аккуратно соедините с изнанки скотчем. Чем незаметнее будут швы, тем меньше времени придется тратить потом на доработку изображения.
3.Заполните изображением образовавшуюся пустоту.
На этом бумажная часть работы заканчивается. На основе этого паттерна уже можно сделать, например, трафарет. Впрочем, практика показывает, что идеально разрезать и склеить фрагменты не получается, так что лучше довести рисунок до ума в графическом редакторе.
4. Отсканируйте изображение и попробуйте вручную соединить несколько копий, оставляя между ними зазор в один пиксель. Вы наверняка обнаружите, что во многих местах стыки заметны. Исправьте недостатки, работая только с основным, центральным фрагментом, и после этого удалите все лишние копии.
5. Все готово к тому, чтобы использовать ваш рисунок для создания паттерна. Переходите к пункту № 5 в инструкциях ниже!
Photoshop
Совсем не обязательно уметь рисовать — тем более на бумаге.— чтобы создать паттерн. Вполне можно обойтись красивыми кистями для графического редактора. Показываем, как это сделать, и рассказываем о всех этапах создания цифрового паттерна.
1. Создайте пустой документ небольшого размера с длиной сторон, пропорциональной двум.
Файл → Создать
2. Заполните любым узором пространство в центре листа. Важно оставить пространство по краям листа; в любом случае нужно следить, чтобы узор не касался его краев.
3. В эксперименте с бумагой нам пришлось вручную разрезать лист и склеивать его снова. В Photoshop это делается одним нажатием кнопки, с помощью инструмента Сдвиг/Offset.
Фильтры → Другое → Сдвиг
Go to Filter → Other → Offset
Значение сдвига сделайте равным половине ширины/высоты вашего изображения. Отметьте пункт «Вставить отсеченные фрагменты».
4. Заполните пустоту, продолжая следить, чтобы рисунок не выходил за края изображения.
5. Сохраните изображение как паттерн.
Редактирование → Определить узор.
Edit → Define Pattern
6. Теперь паттерном можно заполнять любую выбранную область, просто используйте инструмент Заливка (G) и в его настройках вместо «Основной цвет» выберите «Узор».
Заливка, Узор
Paint Bucket Tool, Pattern
Gimp
Gimp — открытый аналог Photoshop, который можно скачать совершенно бесплатно. Для профессиональных нужд его используют не часто, но он вполне заменит продукт Adobe, если вам нужно подкрутить резкость на фотографии или — создать паттерн.
1. Создайте новое изображение. Мы уже знаем, что длина и ширина его должны быть пропорциональны двум.
2. Создайте в центре листа рисунок.
3. Для того, чтобы разрезать и склеить изображение, воспользуемся инструментом Смещение.
Слои → Преобразования → Сместить
Layer → Transform → Offset
В отличие от Photoshop, здесь не обязательно в уме делить размеры изображения на два, достаточно нажать на кнопку под полями ввода значений. Не забудьте отметить пункт «Залить изображением»/Wrap around.
4. Дорисуйте недостающие фрагменты паттерна.
5. Сохраните изображение как паттерн.
Правка → Вставить как → Новая текстура
Edit → Paste as → New pattern
6. Заполните паттерном лист любого размера, используя инструмент Плоская заливка/Busket fill (Shift + B) и выбрав в меню Цвет заливки/Fill type опцию Текстурой/Pattern fill.
P. S. Для чего мне уметь создавать паттерны, можете спросить вы? Для того, чтобы создать уникальный трафарет для декора стен, упаковать рождественские подарки в бумагу с именами одариваемых, сделать на заказ подушку с принтом мечты, которую все не удавалось найти в продаже… Мы верим, что творчески подойти можно ко многим делам, а умение пользоваться разными инструментами никогда не бывает лишним.
DIY, программы, мастер-класс, принты
Как сделать бесшовную текстуру в Photoshop
В данном уроке вы узнаете, как сделать бесшовную текстуру в 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 пространстве), в частности, использующихся в компьютерных играх, в статье Эффекты в Unity3D. Часть III. Билборды (биллборды), бегущая строка, неоновая реклама, информационные щиты, реклама, рекламные щиты, баннеры.. Здесь фильтр Смещения также позволяет двигать текстуру по горизонтали и вертикали.
Чтобы сместить изображение текстуры, выберите вкладку фильтров «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 модели sci-fi плитки пола в Blender. Превращаем 3D модель в sci-fi текстуру через запекание карт. Создание текстуры сетки для забора или пола для Unity3D, поскольку оставляет по краям затайленной 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.
Также если заменить черный фон прозрачным фоном и изменить режим получившейся бесшовной текстуры на 8 бит или 16 бит в градациях серого (Grayscale, оттенки серого), то можно использовать получившуюся текстуру в качестве кисти для изменения формы/создания ландшафта в Unity3D. О создании кисти и использовании ее в Unity3d для редактирования ландшафта более подробно рассказывается в статье Террейн в Unity 3D. Часть Вводная – для затравки. Создание лабиринтов и подземелий в Unity3D.
Результирующую бесшовную текстуру можно также сохранить в качестве паттерна или кисти для Фотошопа.
На рисунке показан процесс создания паттерна для Фотошопа из изображения.
Вы можете сохранить получившуюся текстуру и использовать ее в качестве кисти в Blender для раскрашивания 3D модели текстурой в Blender или использовать для редактирования 3D модели в режиме скульптинга.
В следующем уроке я расскажу, как сделать бесшовную текстуру в GIMP.
Скачать бесшовную текстуру кирпича бесплатно (free seamless texture — seamless-texture-brick-wall.jpg) (1784 Загрузки)
Автор: Максим Голдобин aka MANMANA
Post Views:
99 508
Создаем детальный бесшовный паттерн в 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 | 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 . Теперь переверните значения Horizontal и Vertical . В нашем случае по горизонтали, будет 100 пикселей, а по вертикали, 0 пикселей.Щелкните ОК.
Теперь у нас есть плитка с узором.
7. Объедините слои
Выберите все слои, кроме Фон на панели слоев и используйте комбинацию горячих клавиш Ctrl + E . Выбранные слои будут объединены.
8. Создайте свой узор
Сначала используйте еще одну комбинацию горячих клавиш Ctrl + A (выберите все).
Затем перейдите в Edit> Define Pattern :
Назовите его и нажмите OK. Та-да! Ваша выкройка готова!
У вас есть выкройка, хорошо.Теперь давайте посмотрим, как использовать его на фоне.
1. Создайте новый файл
Сделайте его больше, чем ваш узор, чтобы увидеть результат. У нас 800×600 пикселей.
2. Выберите Pattern Overlay
Дважды щелкните на Background на панели слоев. Во всплывающем окне нажмите ОК.
Перейдите в меню «Слой »> «Стиль слоя»> «Наложение узора». :
Выберите вновь созданный узор во всплывающем окне и нажмите «ОК».
3. Наслаждайтесь выкройкой!
Как создать бесшовное повторение в Photoshop
В какой-то момент своей жизни вы, вероятно, потратили пять минут на рисование на салфетке или клочке бумаги.Но задумывались ли вы, как ваш рисунок может выглядеть как повторяющийся узор? Графический дизайнер Spoonflower, Алексис, заходит в блог, чтобы показать вам, как легко перенести рисунок с бумаги на экран, чтобы создать цельный повтор в Photoshop. Загрузите бесплатную пробную версию и приступайте к созданию следующего дизайна ткани!
Обратите внимание: это руководство лучше всего подходит для рисования на белой бумаге.
1.Отсканируйте свою работу с разрешением 300 точек на дюйм и откройте ее в Photoshop. Используйте Replace Color , чтобы убедиться, что фон изображения чисто белый. Щелкните Изображение> Коррекция> Заменить цвет , убедитесь, что установлен флажок Предварительный просмотр , и установите для параметра Нечеткость значение 25.
2. Затем щелкните фон изображения; этот оттенок появится в поле с надписью Color . Перетащите ползунок Lightness до упора вправо — поле Result станет белым.Вы должны увидеть, как фон вашего изображения также станет ярко-белым. Нажмите ОК .
СОВЕТ: Для дальнейшей настройки цветов изображения используйте Image> Adjustments> Hue & Saturation и отредактируйте по мере необходимости.
3. Фокусируясь на одном элементе за раз, используйте инструмент «Лассо » (на боковой панели инструментов), чтобы обвести элемент как можно ближе. Скопируйте (команда + C) и Вставьте (команда + V) ваш выбор; это поместит его на новый слой.Вернитесь к исходному слою и повторите этот процесс со всеми оставшимися элементами.
4. Настройте новый холст для создания повторения, перейдя в Файл> Новый . Подойдет любой размер (но проще всего квадрат). Установите разрешение «DPI» на 150, цветовой режим на RGB и нажмите Create . Обязательно запомните размеры центральной точки вашего дизайна, так как они вам понадобятся позже. Например, если ваш холст представляет собой квадрат размером 1200 пикселей, центральная точка будет 600 пикселей.
5. Вернитесь к первому холсту и щелкните один из слоев элемента. Сделайте выбор этого слоя в меню Select> All (команда + A) и Copy его. Затем Вставьте элемент в новый холст. Измените размер (при необходимости) и поместите его в центр.
СОВЕТ: Чтобы изменить размер элемента, используйте инструмент «Преобразование» в меню Правка> Преобразование> Масштаб (команда + T). Удерживая Shift , щелкая и перетаскивая из углов, нажмите Введите , чтобы подтвердить новый размер.
6. Сделайте копию вашего первого слоя, щелкнув «Слой»> «Дублировать слой» и нажав «ОК» (команда + J). Выберите новый слой и выберите в меню «Фильтр»> «Другой»> «Смещение».
7. В инструменте смещения введите центральную точку холста (см. Шаг 3) в поля по горизонтали и по вертикали . Нажмите ОК .
8. Теперь ваш элемент должен повторяться в каждом углу холста, а первый элемент все еще находится в центре.Теперь просто заполните любое пустое пространство на холсте дополнительными элементами дизайна (если хотите), стараясь не касаться краев холста другими элементами.
9. Вот и все! Когда вы довольны результатом, сохраните изображение в формате JPEG или PNG в меню «Файл »> «Сохранить как » и загрузите его в Spoonflower.
Теперь, когда вы научились создавать повторяющийся дизайн, почему бы не проверить свои навыки во время одного из наших еженедельных заданий по дизайну? Нам не терпится увидеть, что вы создаете!
Как очистить бесшовные фоны с помощью Adobe Photoshop
Как очистить бесшовные фоны с помощью Photoshop
www.sleeklens.com
Всем привет, надеюсь, у вас все хорошо сегодня.
В этом уроке мы рассмотрим, как очистить фоны с помощью Photoshop.
Это очень распространенная проблема при фотосессии, так как день идет и люди ходят вокруг вашего фона, как правило, со временем немного сбиваются с толку, и когда вы загружаете свои изображения, вы увидите все неприятные маленькие следы и грязь. отметки на всех ваших изображениях.
Итак, сегодня я собираюсь показать вам, как с легкостью их убрать и сделать ваше изображение чопорным и правильным.
Давайте приступим.
Когда мы смотрим на мое изображение, вы можете подумать, что все выглядит хорошо и в чем проблема, ну, пока вы не увеличите масштаб до ступней.
Это могло бы быть хорошо при небольшом размере, но изображение Мне пришлось использовать это изображение для огромного плаката для маркетинговой кампании !!
Итак, когда мы увеличиваем масштаб, мы начинаем видеть грязь, которая накопилась за день при всем движении.
Выглядит не очень хорошо.
Первое, что я хочу, чтобы вы сделали, это нажали Ctrl J
Это дублирует ваш слой, я говорю об этом во всех своих уроках, и это важность защиты вашего исходного изображения, чтобы, если вам когда-нибудь понадобится резервная копия, она будет готова вас поймать, если вы, так сказать, упадете.
Обычно вы, вероятно, подумали бы об использовании таких инструментов, как Clone Stamp или, может быть, даже Brush Tool в сочетании с Add Noise Filter, но нет более простого способа, и к тому же он не очень общедоступный.
Вам нужно перейти в Filter — Noise — Median.
Таким образом, он выделяет области на изображении с текстурами Photoshop, а затем красиво объединяет их вместе.
По мере того, как я увеличиваю ползунок, вы увидите, что фон начинает сливаться вместе, но, к сожалению, он также смешает остальную часть изображения, но не беспокойтесь, я покажу вам, как это исправить, поэтому пока не обращайте на это внимания.
Для этого изображения все, что мне нужно было выбрать, это радиус 4, иногда вам придется увеличить радиус, а иногда вам придется уменьшить, это действительно зависит от фотографии в то время, так что имейте это в виду, вы не должны догматично следить за тем, что отображается на моем экране, использовать собственные глаза и делать то, что вы считаете правильным.
Что хорошо в Медиане, так это то, что она обычно сохраняет формы, которые, как нечто вроде Размытия по Гауссу, смешивают все вместе в огромный беспорядок, который нельзя использовать.
Далее мы собираемся создать маску слоя, поэтому щелкните там, где я указал ниже.
Затем нажмите (Ctrl + I), чтобы инвертировать маску слоя.
Следующий шаг — взять инструмент «Кисть» с белым цветом и кистью с мягкими краями на 100%
И затем вы начинаете рисовать на маске слоя, это означает, что вы рисуете на своем обычном изображении, но у вас должен быть установлен флажок маски, это черный ящик на «Layer 0 Copy» на панели слоев.
Убедитесь, что вы рисуете только на земле и избегаете ступней как можно больше, вам не нужно быть полностью точным, потому что фильтр под ним очень поможет и сохранит края неповрежденными, но просто помните о изменения, если вам нужно исправить спину, как вы это сделали, измените вашу кисть с белого на черный и закрасьте его снова, а спину снова на белый, чтобы повторить попытку.
Вы можете прочитать и увидеть разницу между Lightroom и Photoshop.
Время от времени вам придется изменять размер кисти, вы можете легко сделать это, нажав клавиши скобок [&] на клавиатуре, чтобы уменьшить или увеличить по мере необходимости.
И теперь вы увидите, что ваше изображение почти идеальное, но есть еще один шаг, который вы можете выполнить, чтобы закончить его, это не всегда необходимо, но если вы посмотрите на мое изображение сейчас, вы увидите, что оно все еще выглядит немного грязный.
Итак, что я могу сделать здесь, так это взять инструмент «Кисть». Удерживая нажатой клавишу Alt, щелкните цвет рядом с ним.
Затем я уменьшаю непрозрачность кисти примерно до 25% и просто начинаю закрашивать эти области, чтобы немного смягчить их.
В итоге у вас будет очень чистый образ.
Рейтинг:
012345
0 на основе 0
Рейтинги
Следующие две вкладки изменяют содержимое ниже.
Закончив колледж в 2002 году по специальности «Искусство и дизайн», я начал изучать свой путь в области графического дизайна и профессионального постпродакшна. Фрилансер, работающий полный рабочий день с 2011 года.
Самые популярные сообщения августа
Проект Photoshop: Бесшовный фон |
Loopy!
Вы когда-нибудь смотрели анимационный фильм, в котором фон движется и повторяется, но вы не видите очевидного места, где начинается повтор? Это потому, что аниматоры использовали бесшовный фон, чтобы скрыть края.Вы можете сделать их в фотошопе!
Перед тем, как начать. В Photoshop есть инструмент для создания бесшовных плиток, но он не всегда хорошо работает. Мы собираемся использовать другой метод.
Начнем с изображения фона. Необязательно начинать с фотографии. На самом деле, сделать бесшовный фон проще, если нарисовать его самостоятельно!
Мы также собираемся создать большое изображение, которое можно будет использовать в качестве фона в фильмах, но вы можете использовать тот же метод для создания фона для анимированного GIF.
Метод 1: более сложный, но красивый способ
- Найдите большое изображение для фона. Попробуйте найти что-нибудь, в котором левый и правый края выглядят примерно одинаково. Я выбрала эти обои с изображением леса и озера.
- Исходный размер этого изображения — 1920 на 1200 пикселей. Это хорошо. HDTV имеет разрешение 1920 × 1080, так что он немного выше, чем нам нужно. Это не проблема. Когда мы используем его в фильме, мы просто теряем несколько пикселей вверху и / или внизу.
- Откройте изображение в Photoshop.
- В верхнем меню выберите «Фильтр» -> «Другое» -> «Смещение».
- Смещение по горизонтали на достаточное количество пикселей, чтобы шов был виден посередине. Необязательно быть точным.
Как видите, предстоит много работы — ничего не совпадает! Посмотрим, насколько хорошо мы сможем добиться растушевки. - Создайте новый слой. Дайте ему имя, которое объясняет, что он делает (например, «заплатка по краю» или «закрытие шва»).
- Выберите инструмент клонирования на панели инструментов. Похоже на штамп.
- В верхней части экрана установите «Образец:» на «все слои» или «текущий и ниже». Либо будет работать.
- На вашем только что созданном слое выберите области с одной стороны, которые позволят вам скрыть шов. Это займет некоторое время. Используйте большую мягкую кисть и не бойтесь отменять и переделывать части по мере необходимости. Помните: оно может полностью отличаться от исходного изображения, если оно смешивается!
Вот как выглядит мой слой с патчем: А вот и готовый патч:
Неплохо! Большинство людей не смогут сказать вам, где находится патч.
.
Метод 2: более простой, но худший способ
- Найдите большое изображение для фона. Я собираюсь использовать тот же, что и выше.
- Откройте в Photoshop
- Создайте новый документ точно такой же высоты и ровно в два раза шире фонового изображения. Мое исходное изображение имеет размер 1920 × 1200, поэтому мое новое изображение будет 3840 × 1200.
- Выберите инструмент перемещения на панели инструментов. Это первый инструмент.
- Переместите копию фонового слоя исходного изображения на новое изображение.
- Разместите копию слева от большого изображения.
- Сделайте копию слоя изображения. Самый простой способ — нажать command-J (на ПК Ctrl-J).
- В верхнем меню выберите Правка -> Преобразовать -> отразить по горизонтали.
- Переместите перевернутое изображение в правую часть большого изображения. У вас будет действительно широкий зеркальный фон. Достаточно легко увидеть, где находятся швы, но этот метод может легко сработать для движущегося фона, особенно если вы используете его как один из многих движущихся слоев или если фон очень простой.
Использование масок для бесшовного фона
Вы когда-нибудь задумывались, откуда берутся все эти бесшовные фоны? Как создатель заставляет их сочетаться так … ну, безупречно? Если вы пытались создать свои собственные, я уверен, что вы прочитали по крайней мере дюжину руководств по этой теме. Некоторые из них могли получить отличные результаты, а некоторые — не очень. Я не собираюсь ставить здесь оценку качества чьих-либо учебных пособий.Я знаю по собственному опыту, что одна ошибка в технике или неправильный шаг принесет автору небольшую лавину электронных писем. Был там, но я не жалуюсь. Вы, ребята, держите меня в курсе, и мне это нравится!
На этой неделе я собираюсь внести личный поворот в старую нишу создания бесшовного фона. Я разогрел цифровую камеру (моя верная Мавика … простите меня, Джим Паттерсон, но я люблю эту камеру) и сделал несколько снимков.Посмотрим, получится ли создать что-нибудь интересное.
Я называю это «Шипы на шлакоблоке»… моя попытка индустриальной фотографии.
1. Прежде всего, продублируйте фоновый слой, перетащив его на значок нового слоя в нижней части палитры слоев.
2. Выберите скопированный слой. Перейдите в Edit> Transform> Flip Horizontal.
3. Щелкните значок «Добавить маску» в нижней части палитры слоев.
3. Если вы не знакомы с масками, вы заметите, что цвета переднего плана / фона — белый / черный соответственно. Мы собираемся применить градиент к маске слоя, который сделает половину слоя видимой (которая покрыта белым) и покажет слой ниже (черная часть градиента).
4. Выбрав маску, щелкните инструмент градиента.Щелкните внутри градиента на панели параметров, чтобы открыть редактор градиента.
5. Щелкните белый значок и вручную введите «35%» для местоположения. Выберите ограничитель черного цвета и вручную введите «65%» для местоположения.
6. Щелкните поле «Маска» для скопированного слоя на палитре слоев. Как можно прямее, нарисуйте градиент слева направо по слою.
7. Взгляните на свое изображение. Вы должны увидеть что-то подобное.
8. Не снимая выделения с верхнего слоя, нажмите Command / CTRL + E, чтобы объединить слои вместе.
9. Снова продублируйте фон. Мы собираемся следовать тем же процедурам, что и выше, только на этот раз мы перевернем новый слой по вертикали, а не по горизонтали. Кроме того, на этот раз примените градиент к маске сверху вниз, а не слева направо.По завершении это должно выглядеть так:
10. Снова объедините слои.
11. Выберите Изображение> Настроить> Размер изображения. Снимите флажок «Сохранить пропорции» и введите одинаковые размеры для ширины и высоты.
Вот изображение:
Так это бесшовно? Ну вот и быстрый тест. Первый. Я снова уменьшу размер. Затем я перейду в Edit> Define Pattern.В-третьих, я создам новый документ. Затем я протестирую свой фон, заполнив новый документ новым шаблоном.
Попробуйте сохранить этот учебник как действие. Вот еще пара примеров:
Надеюсь, вам понравится этот. Береги себя, увидимся в следующий раз!
http://actionfx.com
Как удалить морщины на заднем фоне в Photoshop
Если вы только начали снимать портреты в студии, вы, вероятно, столкнулись с одной проблемой — это фон, который не всегда остается плоским.Практически неизбежно вы сделаете несколько портретов, которые вам нравятся, но позже поймете, что на заднем фоне есть отвлекающая складка или складка. Или, что еще более неприятно, некрасивые выбившиеся волосы от вашего объекта разрушают то, что в противном случае было бы идеальным портретом.
К счастью, если вы знаете несколько приемов Photoshop, вы можете быстро очистить смятый фон и избавиться от волосков при постобработке, так что вам не придется переснимать портреты. В видео-уроке ниже профессиональный фотограф Кейли Джун покажет вам, как это сделать.
«Сегодняшнее руководство будет посвящено тому, как удалить складки на заднем фоне (т. Е. Сгладить морщинистые фоны) и обработать выбившиеся волоски в Photoshop», — говорит Джун. «Это действительно распространенная проблема для многих начинающих студий, и это то, с чем у меня часто возникали проблемы с тех пор, как я впервые начал покупать ткань для фонов».
Используя простой пошаговый метод, который она демонстрирует в видео ниже, вы можете решить обе проблемы одновременно.
«Если вы когда-либо пытались избавиться от них раньше, они могут быть очень упрямыми даже при использовании множества различных техник, поэтому я хотел показать вам, ребята, действительно простой способ сделать это, который также действительно может помочь в совершенствовании. волосы тоже », — объясняет она.«Это еще одна проблема, которую многие люди действительно находят в косметической фотографии. Поскольку фотографии расположены так близко, волосы очень заметны, и многие из них могут выглядеть немного растрепанными. Итак, я хочу показать вам способ одновременно избавиться от этих морщинистых складок на заднем фоне и одновременно избавиться от этих беспорядочных волосков ».
Вот процедура в Photoshop, которую июнь демонстрирует на видео внизу этого поста. (И мы настоятельно рекомендуем вам следить за видео, чтобы понять все инструкции июня.)
Шаг 1: Дублируйте фоновый слой и перейдите к кнопке нового слоя
Шаг 2: Выберите инструмент лассо с растушевкой, установленной на ноль пикселей
Шаг 3: Обведите контур вокруг портрета, оставляя промежуток, чтобы захватить все волосы
Шаг 4: Перейдите в Edit> Fill (убедитесь, что в раскрывающемся меню выбран Content Aware)
Шаг 5: Оставьте флажок «Цветовая адаптация» и непрозрачность равным 100%, затем нажмите «ОК».
Шаг 6. Подождите несколько секунд, пока портрет не исчезнет.
Шаг 7: Перейдите в Filter> Blur> Gaussian Blur, затем нажмите OK
Шаг 8: морщины на заднем фоне теперь должны быть удалены
Шаг 9: Чтобы вернуть портрет обратно, замаскируйте его, нажав Layer Mask
.
Шаг 10: Выберите инструмент «Кисть для рисования», установите его на большой размер и установите жесткость на ноль процентов
Шаг 11: Установите непрозрачность и поток на 100%, а фоновый слой копии на 50%.
Шаг 12: Выберите черный, чтобы позволить фоновому слою просвечивать
Шаг 13: Теперь, когда портрет виден, начните рисовать на фоновой копии Layer Mask.
Шаг 14: Выбрав маску слоя, используйте кисть меньшего размера для детализации частей портрета, включая края.
Шаг 15: Детализируя края портрета, начните уточнение и / или удаление выпадающих волосков.
Шаг 16: Уменьшите масштаб и проверьте прогресс маски, удерживая Alt и щелкая по самой маске.
Шаг 17: Устраните все оставшиеся пропущенные пробелы.
Шаг 18: Удерживая Alt, щелкните маску еще раз, чтобы увидеть окончательный результат!
Первоначально опубликовано 15 июня 2021 г.
Как создать бесшовный узор в Photoshop
Следуйте этому руководству, чтобы узнать, как быстро и легко превратить вашу графику в бесшовный узор в Photoshop.
Я собираюсь использовать нарисованные от руки иллюстрации из моей коллекции «Волшебные единороги», но вы можете использовать клип-арт, рисунки, акварельные иллюстрации или даже кисти Photoshop.
Photoshop против Illustrator
Я обычно использую Illustrator для создания бесшовных узоров. Photoshop так же прост в использовании, но векторные узоры, которые вы можете создать в Illustrator, легко масштабировать и перекрашивать. Вы также можете редактировать их после сохранения рисунка. Этого нельзя сделать в Photoshop, поэтому я рекомендую использовать Illustrator.
Я использую Photoshop для создания бесшовных текстур и считаю, что он отлично подходит для акварельной и рисованной графики.
Посмотрите, как я создаю бесшовный узор в Photoshop на YouTube
Недавно я открыл новый канал на YouTube, где я покажу вам, как использовать Photoshop и Illustrator для создания бесшовных узоров и графики для вашего блога, бизнеса или социальных сетей. . Подпишитесь на канал Elan Creative Co, если хотите увидеть больше видеоуроков.
Вот как создать бесшовный узор в Photoshop:
Как создать бесшовный узор в Photoshop
Сначала откройте Photoshop и создайте новый документ.У меня размер холста 400×400 пикселей при 72 пикселях на дюйм. Если вы хотите распечатать изображение, используйте более высокое разрешение и цветовой режим CMYK.
Используйте инструмент «Заливка», чтобы перекрасить фон, а затем заблокируйте слой, щелкнув значок замка на панели «Слои».
Перетащите иллюстрации, которые вы хотите использовать, в центр холста.
Используйте ограничивающую рамку, чтобы изменить размер изображения. Вы также можете повернуть его. Нажмите Enter, чтобы сохранить изменения.
Добавьте другую графику и попробуйте заполнить холст.Убедитесь, что изображения находятся внутри рабочего пространства.
Когда дизайн вас устраивает, перейдите на панель «Слои», выберите все слои, щелкните их правой кнопкой мыши и выберите в меню «Объединить». Теперь у вас должен быть фоновый слой и один слой со всей графикой.
Мы собираемся использовать фильтр Offset , чтобы создать повторяющийся узор.
Выберите верхний слой и перейдите в Filter> Other> Offset .
Убедитесь, что выбрано значение Wrap Around , и введите половину ширины холста для горизонтального значения и половину высоты холста для вертикального значения.
Вы можете использовать другую графику, чтобы заполнить пустые области, которые теперь находятся посередине.
Когда узор готов, перейдите на панель Layers и объедините все слои.
Чтобы сохранить узор, перейдите в Edit> Define Pattern и дайте вашему паттерну новое имя.
Чтобы проверить свой узор, откройте новый документ и создайте холст, который больше, чем плитка вашего узора.
Перейдите в Edit> Fill , установите Contents на Pattern и выберите новый узор из списка Custom Pattern .