Бесшовные фоны как сделать online. Как в фотошопе за несколько шагов сделать бесшовную текстуру

Непременно, что фон ваших WEB страничек в значимой мере определяет стиль и привлекательность всего WEB сайта. Фон в виде рисунка, узора либо текстуры воскрешает WEB страничку. При помощи текстур вы сможете имитировать создание изображений на разных поверхностях, таких как мрамор, брезент либо кирпичная кладка. Совместно с тем следует смотреть, чтобы фон не затруднял чтение основного текста.

Изображение для фона можно взять в одной из бессчетных бесплатных библиотек в WWW. Но можно сделать набросок и без помощи других. Поглядим, как это сделать на примере сотворения обычный фоновой текстуры. Начнем с сотворения нового документа размером 100х 100 пикселов с черным цветом фона и белоснежным цветом фронтального плана.

Щелкните мышью на значке Default Foreground and Background Colors (D)

(Цвета фронтального плана и фона по умолчанию) на панели инструментов (Tools) программки Adobe Photoshop, чтобы установить цвета по умолчанию.

Поменяйте местами цвета фронтального плана и фона, щелкнув мышью на значке Switch Foreground and Background Colors (X) (Переключатель цветов фронтального плана и фона) на панели инструментов (Tools). Цвет фона на образчике станет черным.

Изберите команду меню File - New (Файл - Новый). На дисплее появится диалог New (Новый).

В полях ввода Width (Ширина) и Might (Высота) введите значения ширины и высоты документа - 100 пикселов.

В открывающемся перечне Color mode (Цветовой режим) изберите RGB Color (Цвет RGB).

В открывающемся перечне Background Contents (Содержимое фона) изберите Background Color (Цвет фона).

Нажав кнопку ОК, закройте диалог New (Новый). В рабочем окне программки Adobe Photoshop появится окно нового документа с размерами 100х100 пикселов и черным цветом фона.

При помощи фильтров Clouds (Облака) и Difference Clouds (Облака с наложением) сделаем мягенький узор в виде «облаков». Эти фильтры генерируют узор при помощи случайных величин, которые меняются в спектре от основного цвета к фоновому, в нашем случае от белоснежного к черному.

Изберите команду меню Filter - Render - Clouds (Фильтр - Рендеринг - Облака). Фильтр будет использован, и на изображении появится узор в виде «облаков».

Сейчас применим к изображению фильтр Difference Clouds (Облака с наложением).

Изберите команду меню Filter - Render - Difference Clouds (Фильтр - Рендеринг - Облака с наложением). Узор на изображении поменяется.

Повторное неоднократное применение этого фильтра делает эффект «прожилок», который припоминает текстуру мрамора. Для повторного внедрения последнего использовавшегося фильтра довольно надавить комбинацию кнопок Ctrl+F.

Нажмите пару раз комбинацию кнопок Ctrl+F. При каждом нажатии этой композиции кнопок фильтр будет применяться повторно, а изображение в окне документа - изменяться.

Дальше применим к изображению фильтр Glowing Edges (Свечение краев) из группы фильтров Stylize (Стилизация). Все фильтры этой группы делают ярко выраженные эффекты очерчивания за счет смещения пикселов и увеличения контрастности изображения и в особенности полезны при обработке черно-белых изображений. Фильтр Glowing Edges (Свечение краев) ищет границы цветовых областей и добавляет свечение, схожее неоновому.

Изберите команду меню Filter - Stylize - Glowing Edges (Фильтр - Стилизация - Свечение краев). На дисплее появится диалог Glowing Edges (Свечение краев), в каком следует найти характеристики эффекта.

Переместите ползунковый регулятор Edge Width (Ширина границ) налево так, чтобы в поле ввода над ним появилось значение 1.

Ползунковый регулятор Edge Brightness (Яркость границ) переместите к правому краю так, чтобы значение этого параметра стало равно 20.

Для параметра Smoothness (Сглаженность) установите значение 1.

Закройте диалог Glowing Edges (Свечение краев), нажав кнопку ОК.

После внедрения этого фильтра изображение будет затемнено. Потому воспользуемся

командой Brightness/Contrast (Яркость/Контраст) для роста яркости и контраста.

Изберите команду меню Image - Adjustments - Brightness/Contrast (Изображение - Корректировки - Яркость/Контраст). На дисплее появится диалог Brightness/Contrast (Яркость/Контраст).

Переместите ползунковый регулятор Brightness (Яркость) на право так, чтобы в поле ввода над ним отобразилось значение +50.

Переместив ползунковый регулятор Contrast (Контраст) на право, установите значение этого параметра +30.

Нажав кнопку ОК, закройте диалог Brightness/Contrast (Яркость/Конграст).

Сейчас наше изображение, состоящее пока из цветов сероватого, нужно тонировать либо окрасить.

Изберите команду меню Image - Adjustments - Hue/Saturation (Изображение - Корректировки - Цветовой тон/Насыщенность). На дисплее появится диалог Hue/Saturation (Цветовой тон/Насыщенность).

При помощи этого диалога вы сможете настраивать в изображении цветовой тон, насыщенность и яркость отдельных цветовых компонент.

Удостоверьтесь, что установлен флаг Preview (Подготовительный просмотр), чтобы иметь возможность следить в окне документа результаты конфигурации характеристик.

Установите флаг Colorize (Тонирование). В диалоге поменяется положение ползунковых регуляторов, а в окне документа изображение будет тонировано - приобретет красноватый колер.

Чтобы лучше осознать закономерности опции цветовых компонент, следует представить для себя, что все видимые человечьим глазом цвета диапазона, размещаются на цветовом круге. Каждый цвет на этом круге характеризуется тремя базисными параметрами: цветовым тоном (Hue), насыщенностью (Saturation) и яркостью (Lightness). Такое представление соответствует уже рассмотренной нами ранее цветовой модели HSB.

Для описания цветового тона обычно употребляется заглавие цвета: красноватый, оранжевый, желтоватый, зеленоватый и так дальше Каждый цветовой тон занимает определенное положение на цветовом круге и характеризуется величиной угла от 0° до 360°.

Насыщенность - это степень чистоты цвета, которая определяется соотношением сероватого цвета и данного цветового тона. Насыщенность выражается в процентах от 0% - сероватый - до 100% - стопроцентно насыщенный. На цветовом круге насыщенность возрастает от центра к краю.

Яркость охарактеризовывает относительную освещенность либо затемненность цвета и измеряется в процентах в спектре от 0% - темный - до 100% - белоснежный.

На цветовом круге главные цвета моделей RGB и CMYK находятся в определенной зависимости: каждый цвет размещен против дополняющего его цвета и находится между цветами, из которых он получен. К примеру, сложение зеленоватого и красноватого дает желтоватый. Чтобы усилить какой-нибудь цвет, необходимо ослабить дополняющий его - расположенный напротив него на цветовом круге. Так, чтобы поменять общее цветовое решение в пользу голубых тонов, следует понизить содержание красноватого. По краю цветового круга размещаются так именуемые спектральные цвета, либо цветовые тона. Эти цвета характеризуются наибольшей насыщенностью.

Создадим насыщенность красноватого колера изображения в окне документа наибольшей.

Перемещайте ползунковый регулятор Saturation (Насыщенность) на право и наблюдайте в окне документа, как при всем этом увеличивается насыщенность красноватого цвета. Напомним, что на цветовом круге это соответствует движению от центра к краю. Установите значение этого параметра -100%.

Изменим цветовой тон изображения на голубой.

Перемещайте ползунковый регулятор Hue (Цветовой тон) на право и наблюдайте, как меняется цветовой тон изображения в окне документа. Изменяющееся при всем этом числовое значение в поле ввода над ползунковым регулятором отражает угол поворота на цветовом круге относительно начального красноватого цвета.

Установите значение параметра Hue (Цветовой тон) - 210. Такое значение отражает тот факт, что на цветовом круге голубой цвет, которым тонировано изображение, сдвинут относительно красноватого на 210°.

Нажав кнопку ОК, закройте диалог Hue/Saturation (Цветовой тон/Насыщенность). Установленные цветовые характеристики будут закреплены.

Сохраните документ в папке WEB, в файле Fon.psd в формате Adobe Photoshop.

На этом создание фоновой текстуры можно считать законченным. Но, потому что набросок

будет повторен на WEB страничке много раз, между кусками фона будут видны швы.

В Adobe ImageReady имеется особый фильтр - Tile Maker (Конструктор повторений), который позволяет удалить швы, создавая таким способом бесшовный фон.

Нажмите кнопку Edit In ImageReady (Shift+Ctrl+M) (Редактировать в ImageReady (Shift+Ctrl+M)) в нижней части панели инструментов (Tools). Будет запущена программа Adobe ImageReady, и в ее рабочем окне раскроется документ Fon.psd.

Изберите команду меню Adobe ImageReady Filter - Other - Tile Maker (Фильтр - Другие - Конструктор повторений). На дисплее появится диалог Tile Maker (Конструктор повторений).

Данный фильтр смешивает пикселы на краях изображения для сотворения бесшовного фона. При установленном переключателе Blend Edges (Размытие краев) будет производиться размытие краев рисунка для исключения швов между плитками при повторении изображения на WEB страничке.

В поле ввода Width (Ширина) следует указать ширину полосы у края изображения, в границах которой должен происходить плавный переход. Обычно употребляются значения от 5% до 15%, максимум до 20%. Воспользуемся значением этого параметра, предлагаемым по умолчанию, - 10 процентов.

При установленном флаге Resize Tile to Fill Image (Поменять размер плитки для наполнения изображения), размер плиток подгоняется под размер изображения. Если данный флаг скинуть, то плитки будут меньше размера изображения на величину, определенную параметром Width (Ширина), и на WEB страничке они не будут впритирку прилегать друг к другу.

Установка переключателя Kaleidoscope Tile (Калейдоскоп) создаст фон в виде калейдоскопа, в каком изображение отражается по горизонтали и вертикали, создавая таким способом уникальный узор.

Установите флаг Resize Tile to Fill Image (Поменять размер плитки для наполнения изображения).

Закройте диалог Tile Maker (Конструктор повторений) нажатием кнопки ОК. Установленные характеристики будут использованы.

Чтобы узреть, как будет смотреться в программке просмотра WEB страничек сделанный фон, следует поначалу указать программке, что данное изображение должно употребляться как фон.

Изберите команду меню File - Output Settings - Background (Файл - Характеристики вывода - Фон). На дисплее появится диалог Output Settings (Характеристики вывода).

Установите переключатель Background (Фон), чтобы использовать активное изображение в качестве фона WEB странички.

Закройте диалог Output Settings (Характеристики вывода), нажав кнопку ОК.

Сейчас можно просмотреть фон в .

Изберите команду меню File - Preview in (Файл - Подготовительный просмотр в) и в показавшемся подменю - программку просмотра WEB страничек. Будет запущен избранный браузер, и в его окне вы увидите сделанный бесшовный фон.

Для пуска браузера, установленного по умолчанию, вы сможете надавить кнопку Preview In Default Browser (Ctrl+Alt+P) (Подготовительный просмотр в браузере по умолчанию (Ctrl+Alt+P)) на панели инструментов (Tools).

Не считая фонового рисунка в окне программки просмотра выводится информация о формате изображения (Format), его размерах (Dimensions), размере файла (Size) и параметрах оптимизации (Settings), а ниже - HTML код автоматом сгенерированного файла.

Закройте окно браузера, нажав кнопку в правом верхнем его углу.

Чтобы сделанное изображение можно было использовать как фон WEB странички, его нужно улучшить и сохранить в WEB формате.

Щелкните мышью на ярлычке 2-Up (2 варианта) в высшей части окна документа. Будет выполнена оптимизация с последними установленными параметрами, и вы увидите оригинальное и оптимизированное изображения.

Подберите лучшие, с вашей точки зрения, характеристики оптимизации в формате GIF.

Сохраните оптимизированный документ в папке WEB под именованием Fon.gif, выбрав команду меню File - Save Optimized (Файл - Сохранить оптимизированный документ).

Закройте программку Adobe ImageReady без сохранения документа Fon.psd, нажав кнопку в правом верхнем углу ее окна.

Поглядим сейчас, как будет смотреться сделанный фон на WEB страничке other.html.

Откройте файл other.html из папки WEB в программке Блокнот (Notepad) и воткните в открывающий тег атрибут background=Fon.gif.

Откройте в браузере файл other.html.

Видите ли, WEB страничка с сделанным фоном смотрится существенно увлекательнее, чем с однородным. Направьте внимание также, что швы между плитками фактически неприметны.

Закройте программку просмотра WEB страничек.

Удалите из HTML кода файла other.html вставленный атрибут background=Fon.gif.

Закройте программку Блокнот (Notepad).

Мы познакомились со методом сотворения бесшовного фона на базе фоновой текстуры, приобретенной при помощи фильтров Clouds (Облака) и Difference Clouds (Облака с наложением). Применяя разные эффекты к одноцветным либо полутоновым изображениям, вы сможете создавать самые различные текстуры. Ниже коротко описаны еще некие методы производства фоновых текстур. При этом обозначенные характеристики фильтров не являются строго неуклонными. Вы сможете разнообразить их в широких границах, получая всякий раз новый эффект.

Шероховатость

В программке Adobe Photoshop сделайте новый документ размером 100 x 100 пикселов с белоснежным цветом фона и черным цветом фронтального плана.

Залейте изображение черным цветом.

Примените фильтр Add Noise (Добавить шум), выбрав команду меню Filter - Noise - Add Noise (Фильтр - Шум - Добавить шум) с установленным переключателем Uniform (Равномерное), флагом Monochromatic (Сохранить цвета) и параметром Amount (Эффект) равным 400.

Примените фильтр Emboss (Рельеф), воспользовавшись командой меню Filter - Stylize - Emboss (Фильтр - Стилизация - Рельеф), с параметрами: Angle (Угол)=45, Height (Высота)=2, Amount (Эффект)=30.

Тонируйте изображение, выбрав команду меню Image - Adjustments - Hue/Saturation (Изображение - Корректировки - Цветовой тон/Насыщенность).

Шлифованная плитка

Сделайте новый документ размером 100 x 100 пикселов и с белоснежным цветом фона.

Примените фильтр Add Noise (Добавить шум) с установленным переключателем Gaussian (По Гауссу), флагом Monochromatic (Сохранить цвета) и параметром Amount (Эффект) равным 125.

Примените фильтр Motion Blur (Размытие в движении), воспользовавшись командой меню Filter - Blur - Motion Blur (Фильтр - Размытие - Размытие в движении), с параметрами: Angle (Угол)=-45, Distance (Расстояние)=100. Последний параметр должен быть не меньше размера изображения.

Примените фильтр Emboss (Рельеф) с параметрами: Angle (Угол)=45, Height (Высота)=2, Amount (Эффект)=35. Направьте внимание, что параметр Angle (Угол) должен отличаться от такого же параметра фильтра Motion Blur (Размытие в движении).

Тонируйте изображение, воспользовавшись диалогом Hue/Saturation (Цветовой тон/Насыщенность), применив последующие характеристики: флаг Colorize (Тонирование) - установлен, Hue (Цветовой тон)=180, Saturation (Насыщенность)=10, Lightness (Яркость)=+20.

Облицовочная плитка

Сделайте новый документ размером 100х 100 пикселов и с белоснежным цветом фона.

Примените фильтр Add Noise (Добавить шум) с установленным переключателем Uniform (Равномерное), флагом Monochromatic (Сохранить цвета) и параметром Amount (Эффект) равным 120.

Примените фильтр Emboss (Рельеф) с параметрами: Angle (Угол)=45, Height (Высота)=1, Amount (Эффект)=30.

В гамме Channels (Каналы) сделайте новый канал Alpha 1, нажав кнопку Create new channel (Сделать новый канал).

Выделите изображение альфа-канала в окне документа командой Select - All (Выделение - Все) и сделайте рамку выделения шириной 3 пиксела командой Select - Modify - Border (Выделение - Модификация - Граница).

Инвертируйте выделение командой Select - Inverse (Выделение - Направить выделение) и залейте выделенную область белоснежным цветом. Отмените выделение.

Примените к альфа-каналу фильтр Gaussian Blur (Размытие по Гауссу), воспользовавшись командой меню Filter - Blur - Gaussian Blur (Фильтр - Размытие - Размытие по Гауссу) с параметром Radius (Радиус)=2.0 пиксела, чтобы размыть границу.

В гамме Layers (Слои) выделите слой Background (Фон) и сделайте эффект трехмерности при помощи фильтра Lighting Effects (Эффекты освещения), воспользовавшись командой меню Filter - Render - Lighting Effects (Фильтр - Рендеринг - Эффекты освещения).

Тонируйте изображение, воспользовавшись диалогом Hue/Saturation (Цветовой тон/ Насыщенность).

Для сотворения фоновых текстур, не считая обрисованных фильтров, попытайтесь использовать фильтры Colored Pencil (Магический карандаш), Sponge (Губка), Grain (Зерно), Craquelure (Кракелюры), Chalk & Charcoal (Мел и уголь), Mezzotint (Меццотинто), Mosaic (Мозаика), Halftone Pattern (Полутоновой узор), Note Paper (Почтовая бумага), Polntillize (Пуантилизм), Reticulation (Ретикуляция), Glass (Стекло), Texturizer (Текстуризатор), Texture (Текстура), Ink Outlines (Тушь) и Mosaic Tile (Цветная плитка). Заметим, что применение неких фильтров, к примеру, Glass (Стекло), к сплошному цвету дает очень малозначительный либо нулевой эффект.

Которое мы можем использовать. Несмотря на это, если мы размножим картинку как есть, результат будет не очень хороший. Как вы можете видеть выше, места, где картинка повторяется, очень заметны, и тёмные пятна выглядят просто жутко. Чтобы превратить это фото в мощёный фон, нам сначала нужно удалить все неравномерности, а затем сделать плавный переход у краёв.

Все это я покажу вам на примере фотографии джинсов.

Выбираем инструмент создания прямоугольной области выделения Rectangular Marquee Tool , зажимаем Shift и создаем квадратную область выделения как на рисунке:

Нажимаем Ctrl+C , чтобы скопировать часть изображения. Затем создайте новый документ File > New… При этом, если вы скопировали часть изображения, программа автоматически подставит размеры этого фрагмента для нового документа.

Вставьте скопированное изображение, нажав Ctrl+V .

Итак, это заготовка для создания паттерна. Если мы создадим его сейчас, то при заливке изображения большего размера, чем 331х331px, будут видны швы (места стыковки). Для тех, кто не понял, показываю на примере.

Обратите внимание на выделенные фрагменты. Такие швы возникают из-за того, что при заливке паттерны стыкуются друг с другом, начиная с левого верхнего угла, правый край к левому и низ к верху. А далеко не все края изображений совмещаются стык-в-стык. Решить это проблему поможет фильтр Filter > Other > Offset…

Как можно догадаться, первый параметр указывает на какое количество пикселей сместить изображение по горизонтали. Второй – по вертикале. Сместите изображение так, чтобы стыки получились ближе к центру изображения, здесь проще с ними работать. После этого, используя наборы инструментов из вкладки Healing или Stamp , уберите швы.

Я использовал инструмент Spot Healing Brush Tool . Просто выбрал его и провел два раза по швам: вверх и вниз. Вот, что получилось:

Теперь создадим Pattern . Для этого перейдите Edit > Devine Pattern… и укажите название паттерна.

Все! Теперь давайте проверим, что у нас получилось. Создайте новый документ любого размера. Выберите инструмент заливки Paint Bucket Tool , в настройках укажите, что заливать будем паттерном, а не цветом, и выберите ваш, только что созданный, паттерн.

Заливаем изображение и получаем

Как сделать бесшовную текстуру (фон)

Если вы занимаетесь веб-дизайном, 3D моделированием или другим творчеством, связанным с 3D max или Photoshop, то вам периодически требуются качественные бесшовные текстуры и фоны. Найти нужную текстуру или фон в сети порой бывает очень не просто, поэтому решением данной проблемы может послужить вариант сделать бесшовную текстуру (фон) самостоятельно. При этом, вы сами сможете сделать текстуру нужного вам качества и оттенка.

Давайте самостоятельно создадим бесшовную текстуру (фон) в программе фотошоп. И так, главной особенностью бесшовной текстуры (фона) является отсутствие границ, т.е. взяв данную текстуру и соединяя ее с копией с любой стороны мы в итоге получим бесшовное изображение, без каких либо разделений и границ. В качестве примера посмотрите картинку ниже, где справа расположена текстурка камня, а слева несколько данных текстур соединены.

Подобное бесшовное изображение, будь то текстура или фон, можно достаточно легко сделать в программе Photoshop с помощью специального плагина. Сейчас мы все это в подробностях рассмотрим.

Для начала работы нам потребуется сам фон или текстура который(ую) мы и будем “превращать” в бесшовный(ую). Естественно, что качество нашей будущей бесшовной текстуры или фона будет напрямую зависеть от качества исходного изображения или фото. Допустим, вам необходимо сделать бесшовную текстуру асфальта, в таком случае вам потребуется фото данного асфальта и чем качественнее данное фото будет, тем качественнее получится бесшовная текстура. Вы можете найти нужное вам изображение в интернете, либо сделать фото объекта самостоятельно, но фото должно быть качественным.

Возьмем, для примера фото асфальта, найденное в сети, фото специально подберем побольше размерами, чтобы текстура получилась высокого качества. В нашем случае размер фото составляет 1300 x 864px, чего будет достаточно.

Данная картинка (фото) не является бесшовным и это легко проверить состыковав данное изображение с копией. По итогу мы видим, что стыки (швы) на общей картине видны.

Принцип создания бесшовного изображения заключается в отражении краев (стыков), что в результате дает идеальное соединение изображения, тем самым создавая вид единой поверхности, а не разных кусков изображения. Для легкого и быстрого “превращения” фото (изображений) в бесшовные текстуры существует специальный плагин для фотошопа, который автоматически выполняет указанные выше функции (отражение и подгонка швов изображения).

Данный плагин разработан для фотошопа, начиная с CS3 и заканчивая последней на сегодняшний день версией CC. Плагин является бесплатным и скачать его можно с нашего сайта:

Скачайте плагин для вашей версии фотошоп и установите его. После установки плагина у вас в правой боковой панели программы фотошоп появится значок плагина:

Чтобы создать бесшовное изображение (текстуру) с помощью данного плагина необходимо открыть нужное изображение (фото) программой фотошоп и сделать данное изображение квадратным – это обязательное требование данного плагина. Т.е. открываете необходимое изображение фотошопом, выбираете инструмент “Прямоугольная область” в левой панели программы и с его помощью (удерживая левую клавишу мыши) выделяете квадратную область из любой части вашего изображения.

Для того, чтобы область выделялась правильным квадратом, а не прямоугольником, необходимо в ходе выделения нужной области, помимо левой кнопки мыши удерживать клавишу “Shift”.

После того, как нужная область выделена, выбираете в верхнем меню “Изображение” – “Кадрировать” и ваша выделенная область будет вырезана и обращена в квадратное изображение.

Теперь настало время воспользоваться “волшебным” плагином. При выделенном слое нашего квадратного изображения нажимаем на значок плагина и у нас открывается панелька.

В данной панельке мы указываем размер нашего изображения в пикселях (в нашем случае получилось 864px) и ставим галочку напротив “Difine Pattern”, после чего просто выбираем способ создания бесшовного изображения нажатием на кнопку “Tile” или “Mirror”. Если вы выберите способ “Tile”, то ваше бесшовное изображение будет создано именно из вашей картинки в полном ее размере. Если же выберите способ “Mirror”, то бесшовное изображение будет создано из 4-х ваших картинок, зеркально отраженных и уменьшенных под размер вашего квадрата. Вообщем просто попробуйте и все поймете сами.

Мы выбрали способ “Tile” и в результате получили текстуру высокого качества, размером 864 x 864 пикселя:

Бесшовную текстуру (фон) высокого качества, которою можно использовать в 3D max или фотошопе мы сделали, но давайте еще придадим ей необходимый нам оттенок. Допустим нам нужна текстура потрескавшегося асфальта не светло-серого цвета, а темно-красного. Для начала мы объединим получившиеся слои в одну картинку, а первоначальное изображение просто удалим за ненадобностью. В правой панели слоев удаляем самый нижний слой с нашим исходным изображением, чтобы оно не мешалось и преобразуем все получившиеся слои из которых состоит бесшовная текстура в одно изображение.

Для этого правой кнопкой мыши кликаем по папке “tile pattern” и выбираем в появившемся меню “Преобразовать в смарт-объект”. После данных действий все содержимое папки будет преобразовано в один слой изображения, с которым мы в дальнейшем и будем работать (менять ему цветовой тон).

Выделяем наш слой с бесшовным фоном, кликнув в панели слоев по нему левой кнопкой мыши и в нижнем меню, под панелькой слоев кликаем на значок коррекции и в появившемся меню выбираем “Цветовой тон/насыщенность”. После этого над нашим слоем с текстурой появится новый корректирующий слой и откроется окошко с настройками цветового тона и насыщенности. В данном окошке вы уже на свое усмотрение регулируете “ползунки” настроек цвета и тона, после чего применяете данные настройки.

Таким образом у вас получится бесшовная текстура с необходимым цветовым тоном. Остается сохранить данное изображение в высоком качестве, для этого в верхнем меню выбираем “Файл” – “Экспортировать” – “Сохранить для web” и в появившемся окне, в настройках качества выставляем 100%, после чего жмем кнопку “Сохранить”.

После данных манипуляций получилась качественная бесшовная текстура с необходимым нам оттенком. И теперь, если мы приложим копии изображения друг к другу, то убедимся, что получается бесшовный фон, стыков (швов) уже нет.

Бесшовные фоны как сделать online. Использовать такие фоны можно как background для сайтов и виртуальных открыток, так и для создания любых изображений.

Вы можете задавать любой нужный вам цвет на всех элементах рисунка. Уменьшать и увеличивать орнамент, делать прозрачный фон, но правда функцию прозрачности поддерживают не все экземпляры.

Регистрация и оплата не требуются. Хотя предлагают пожертвовать если вам этого хочется. Сейчас я покажу вам как тут можно работать. Переходим по ссылочке https://patterncooler.com/ . Выбираем и кликаем по нему левой кнопкой мыши

И оказываемся в редакторе фонов. Если хотим посмотреть какую палитру предлагают нам для выбранного изображения, то надо нажать на кнопочку Show color

Если же мы хотим выбрать случайные цвета, то жмём на чикбокс Случайные

Чтобы отредактировать цвет, жмём на него либо на экране, либо на квадратики внизу

Редактирование может происходить либо движением ползунка, либо на экране с цветовой палитрой, либо установкой кода цвета в обведённое красным цветом на скриншоте окошко

Изображению можно задать текстуру, для это кликаем на кнопку textur

И выбираем подходящую

А ещё здесь же можно изменить масштаб элементов дизайна (обведено зелёным)

Функция прозрачности к сожалению работает не на всех изображениях. И такие картинки никоим образом не помечены. Поэтому узнавать это придётся нам самим. Отрываем картинку в редакторе и если внизу слева, стоит бегунок Прозрачность, то двигаем его. Для того чтобы добиться нужного эффекта

Если мы всё сделали так, как нам нужно, то нажимаем на кнопку Скачать

После этого открывается папочка на нашем компьютере, чтобы сохранить файл, выбираем нужную папку, даём название файлу и сохраняем. Думаю, что как это делать особо объяснять не надо. А теперь посмотрите видеоурок, где всё я объясняю более подробно

Итак, я рассказала как сделать бесшовный фон или бекграунд в on-line сервисе. Если что то не понятно, то пожалуйста задавайте вопросы на блоге. А не в соцсетях или скайпе. Так как это будет полезно как остальным посетителям блога, так и вам. Потому что частенько в комментариях пишут полезные подсказки.

Бесшовные фоны как сделать online.