Как сделать бесшовный фон для сайта: Как создать бесшовный фон для сайта

Содержание

Как сделать бесшовную текстуру фон для сайта всего за 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%, после чего жмем кнопку “Сохранить”.

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

Итак, наша бесшовная текстура готова!

Как сделать бесшовный фон. Создание бесшовных фонов

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

Photoshop .

Возьмем для примера фото цветов.

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

Если фон нашего сайта просто замостить такой картинкой получится вот так:

Получилось некрасиво и видны швы

В Photoshop»е есть такая замечательная функция как Сдвиг (Фильтр / Другое / Сдвиг). Мы могли бы воспользоваться этой функцией для получения бесшовного фона, но рисунок достаточно непростой и не хотелось бы терять качество фотографии. Потому я делю картинку на 4 равные куска (для этого наверное лучше брать изначально картинку квадратной формы или обрезать ее до квадрата).

Получается вот так:

Далее мы разрезаем эту картинку на 4 части и каждую часть помещаю на отдельный слой. Это можно сделать при помощи Прямоугольного выделения (выделяем ровно четверть, в нашем случае картинка 580 на 580 пикселей, значит четверть равна 290 на 290 пикселей), далее выделенную область копируем Ctrl+C и вставляем тут же Ctrl+V. Также этого можно добиться при помощи инструмента

Раскройка , но тогда наши 4 части сохранятся в отдельную папку и потом их надо будет перенести в один документ для создания 4х слоев.

И перемещаем наши 4 куска следующим образом:

Такого же эффекта можно достичь, как я говорила ранее, используя функцию Сдвиг (Фильтр / Другое / Сдвиг), сдвигая картинку на половину ее высоты и ширины, в данном случае на 290px и 290px. Конечно же это в разы проще, но чтобы сделать качественный бесшовный фон на сайте этого будет недостаточно. Так как если взглянуть на фото выше, мы видим что эффект Размытия сделает картинку банально некрасивой, а дорисовывать цветы очень трудоемкое занятие.

Эта картинка по сути основа для нашего бесшовного фона. Если ваша текстура достаточно не сложная, то достаточно просто замаскировать швы в центре картинки, по периметру стыковка будет идеальная и бесшовная. Без такого перемещения было бы невозможно идеально угадать место стыка, а так мы видим все наши швы в центре.

Убираем стыки на будущем бесшовном фоне

Сейчас наш холст занимает 580х580px. Мы будет сдвигать каждый слой (каждую четверть) в сторону центра на 40px по очереди. Таким образом у нас слои будут накладываться друг на друга. Это можно сделать простым перетаскивание на 40px, либо использовать тот же самый Сдвиг на 40px по вертикали и горизонтали. У нас получится такая картинка, уже с размером холста 500х500px.

Далее будет самый творческий процесс. Берем инструмент Ластик , самый обычный, можно взять с мягкими краями. Выставляем непрозрачность на 50%. Нам нужно будет пройтись по тем слоям, которые расположены сверху, т.е. нетронутым останется у нас только нижний слой. Нам нужно будет пройтись по краям, где у нас наложение слоев, убирая обрезки цветов, те что полностью не поместились. На их месте будут просвечиваться целые цветы нижних слоев. Процесс творческий, потому надо будет поэксперементировать).

У меня получилось вот так:

Швы вышли достаточно незаметными и картинка выглядит целостной. Зато я теперь точно знаю, что раз в центре все аккуратно, то по периметру стыковка будет идеальная.

Посмотрим что у нас получилось в итоге, если замостить фон на сайте:

Вот такой у нас получился бесшовный фон для нашего сайта.

Если вы занимаетесь веб-дизайном, 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%, после чего жмем кнопку “Сохранить”.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

атрибут background=Fon.gif.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Урок №1. Зеркальный фон

Урок №2. Полосатый фон

Урок №3. Фон с сохранением изначальной текстуры

Урок №4. Фон — калейдоскоп

Урок №1 .

Зеркальный фон.

Результат:

1. Открываем нашу картинку в Photoshop:
(«File — Open…» — «Файл — Открыть…»)

2. Создаем новый чистый документ («File — New…» — «Файл — Новый документ…»)

3. Вырезаем из нашей картинке тот участок , который пойдет в основу фона. Для тех, кто не знает как это сделать, можно воспользоваться уроком » «

4. Теперь с помощью инструмента Move tool (V) переносим этот фрагмент на наш чистый лист. Для этого просто зажимаем левой кнопкой мыши нашу картинку и тащим ее на новый документ. Потом отпускаем:

6. Теперь снова перетскиваем его на чистый слой и ставим рядом с уже присутствующим там изображением.

7. Снова поворачиваем наш фрагмент , но уже по вертикали. Жмем Image — Rotate canvas — Vertical (Изображение — Повернуть — Вертикально):

8. И снова его перетаскиваем на чистый слой и ставим рядом с уже присутствующими там изображениями.

10. Снова перетаскиваем результат на чистый слой и ставим рядом с уже присутствующим там изображениями:

11. И последний раз жмем на фргменте Image -Rotate canvas- Vertical (Изображение — Повернуть — Вертикально). И снова видим что наш фрагмент перевернулся. теперь снова его перетаскиваем на чистый слой и ставим рядом с уже присутствующими там изображениями.

Теперь мы будем работать только с чистым слоем и наложенными на него фрагментами.

12. Обрезаем лишнее. Если у вас есть на слое «пустое» место — то есть то, где нет фрагментов, то давайте его обрежем, чтобы остался только наш будущий фон. Для этого пользуемся уроком » «

И получаем результат:

Урок №2 .

Полосатый фон.

Результат:

1. Для этого открываем любую понравившуюся вам картинку в Фотошопе
А делаем это так File — open… (Файл -открыть…). Я выбрала вот эту:

2. Находим на панели инструментов инструмент single row marquee tool:

Примечание: а находиться он в самом верху нашей панели, но может быть спрятан за rectangular marquee tool для этого жмем на него левой кнопкой мыши и находим нужный нам инструмент.

Нажимем в центре нашей картинки и появляется вот такая горизонтальная пунктирная линия:

3. Трансформируем линию. Выбираем команду «Edit — Free transform (Редактировать — свободная трансформация) и (сочетание клавиш ctrl + T) видим, что наша пунктирная линия стала просто линией, а на концах ее образовались маленькие квадратики:

Осторожно надвигаем нашу мышку на один из квадратиков и появилась масенькая черная стрелочка и вот этой стрелочкой двигаем вниз и видим что наша картинка уже вовсе не картинка а сплошные полоски:

Я думаю что на этом можно остаовиться, нет смысла дотягивать до конца всей картикни, можно взять всего лишь часть — кусочек ведь узор линии не изменится:

4. Вырезаем наш кусочек, чтоб обрезать изображение пользуемся инструментом «Crop tool» (обрезка). У меня получилось вот так:

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

Ну вот и все, наш фон готов.

Урок №3 .

Бесшовный фон с сохранением изначальной текстуры.

Результат:

1. Открываем любую картинку (желательно с похожими краями) в ФотоШопе.

Наше изображение может быть каким угодно, правда, чем более крупные предметы на нем изображены, тем сложнее будет маскировать швы. Внимательно рассмотрите изображение, размер предметов должен быть примерно одинаковым на всех четырех сторонах картинки. Я подобрала вот такой вариант:

2. Установите направляющие линии View — Rulers (Просмотр — Направляющие), по которым вы планируете работать (они и будут границами готовой текстуры). Убедитесь, что активирована функция View > Snap to Guides (Просмотр — Вспомогательные элементы). Двигайте направляющие по рисунку так, чтобы они проходили по середине предметов (конечно, насколько это возможно). Это делается для того, чтобы вы мысленно представили свой будущий фон, наметили границы так сказать.

Я пронумеровала получившиеся части рисунка, чтобы удобнее было пояснять, с которой частью будем работать:

3. Выбираем инструмент Rectangular Marquee Tool (Прямоугольное выделение):

и выделяем нижнюю часть, ту, что под номером 4. Вокруг нее образовывается пунктирный квадратик:

4. Копируем выделение на отдельный слой, нажимая на клавиатуре «ctrl + j»

5. Перетаскиваем инструментом Move tool (Перемещение) или стрелочками на клавиатуре скопированный кусок вверх части 2, как это показано на рисунке:

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

6. Так же копируем часть №1 и перетаскиваем копию в правый край части 2:

Левый нижний угол под номером 3 не используется.

7. Прячем слой №4, активизируем 1 , основной слой должен оставаться видимым (на примере основной слой убран для наглядности).

8. Выбираем инструмент Eraser Tool (резинка), кисть hard (жесткая). Начинаем стирать вокруг зерен так, чтобы это смотрелось наиболее естественно на фоне основного слоя.
Должно получиться так:

Без основного слоя —

С основным слоем —

9. Аналогично поступаем и с другим слоем , тем что копия части №4:

С основным —

Красная линия показывает, как правильно убирать границы в углах. В правом нижнем углу тоже надо стереть кусочек части №1 под углом примерно 45 градусов, как и в верхних углах:

10. Сливаем эти три слоя (слой с верхом, с правой частью и основной) при помощи горячих клавиш ctr+E

11. И теперь самое интересное!!! Отрезаем части 1,3,4:

И наш фон готов:

Урок №4

Фон — калейдоскоп.

1. Берем любую понравившуюся картинку. У меня такая:

И сразу же делаем из слоя Background (Задний план) обычный слой. Это важно! Для этого достаточно дважды кликнуть по нему в палитре слоев.

2. Вырезаем интересный квадратный кусочек. (Кто не умеет обрезать, тот смотрит урок » «). Если кусочек окажется великоват по размеру, то можно его уменьшить (урок » «)

Я взяла такой кусочек картинки и сделала его размером 100х100:

3. Теперь основная фишка . Поворачиваем наш рисунок на 45 градусов.

Для этого идем в Image-Rotate canvas-Arbitrary (Изображение-Повернуть холст-Произвольно):

получаем:

4. Нам весь получившийся ромбик не нужен. Наш фон мы будем формировать только из одной четвертинки этого ромбика. Поэтому опять берем инструмент Crop tool , зажимаем Shift и делаем обрезку:

Подготовительные работы закончены.

5. Начнем «склеивать» фон.

а) Увеличиваем ширину холста вдвое. Идем Image-Canvas size (Изображение-Размер холста) и устанавливаем такие настройки:

получаем:

б) Удваиваем треугольник. Дублируем слой Layer-Dublicate layer (Слой-Дублировать слой). Полученный новый слой отражаем по горизонтали Edit-Transform-Flip Horizontal (Редактирование-Трансформирование-Отразить по горизонтали) и сдвигаем стрелочкой так, чтобы получилось такое:

Объединяем эти два слоя (Ctrl+E).

в) Увеличиваем высоту холста вдвое:

г) Дублируем слой и опять отражаем копию, но теперь уже по вертикали. Получаем «бантик»:

Опять объединяем слои (Ctrl+E).

д) Снова дублируем слой. И поворачиваем копию «бантика» на 90 градусов. Для этого идем Edit-Transform-Rotate 90 (Редактирование-Трансформирование-Поворот на 90). Здесь не важно будете вы поворачивать по часовой стрелке или против неё.

Вот такая красота у меня получилась

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

Приятного вам творчества !

P.S. Если у вас возникли какие-то вопросы по уроку — опишите в комментарии подробно вашу проблему, мы обязательно поможем вам разобраться! И не забудьте подписаться на комментарии к уроку, если хотите получить ответ на свой вопрос как можно скорее .

Лучшее «спасибо» за урок — ваш комментарий! 🙂

Много раз меня спрашивали, и вот я решила выделить время и сделать таки урок по созданию бесшовного узора в Фотошопе. Возможно есть методы намного проще и удобней, но я изобрела вот такой велосипед, на нем и катаюсь.

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


Создаем документ 4500х4500 пикселей, с разрешением 300.


Вставляем в наш документ заранее приготовленные элементы. В моем случае, это 3 вот таких цветочных заготовки (все они аккуратно вырезаны по контуру и размещены в разных слоях).


Дублируем наши цветочки и в произвольном порядке заполняем ими верх и левую сторону холста. Как видите элементы в разной степени выступают за край. Теперь выделяем все цветы, что пересекают левую границу холста и дублируем их. *не забываем периодически сохранять документ


Выделив наши дубли, щелкаем по маркеру трансформационной области. Теперь у нас стала активной панелька сверху под главным меню. Выбираем точку отсчета левый верхний угол в «Reference point location». Сейчас мы видим координаты нашей группы объектов относительно верхнего левого угла. Их мы и будем менять.


Поскольку мы работаем с левой стороной, то соответственно и двигать объекты будем относительно оси Х. Сейчас у меня там -1018. Итак, достаем калькулятор и додаем до этой цифры 4500 (ширину нашей рабочей области). В итоге у нас получается 3482, это число мы и вводим в графу Х. Наши цветочки переместились, готово.


Аналогично дублируем весь верхний ряд вниз, вычислив координаты нашей группы объектов по оси Y.*не забываем периодически сохранять документ


Если нужно подвигать наши элементы, то не забываем, что теперь противоположные стороны взаимосвязаны. Так что, для перемещений выделяем объект и его дубль и тогда смещаем.


Всю пустую область заполняем цветочками так, чтобы это было гармонично и красиво. Следим за тем чтобы наши объекты не пересекали границ рабочей области. Вот в принципе, наш бесшовный узор и готов. Но поскольку я параноик, которому надо все перепроверить, то у меня есть еще несколько шагов))


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


Дублируем наш слой с цветочным узором. Перемещаем его на 4500 пикселей вправо. Выделяем узор и его дубль и двигаем так чтобы было видно шов, где они соединяются. Для чего я это делаю? Проверяю все ли сошлось)) Иногда, когда слоев очень много, то можно напутать с верхними нижними дублями и какой-то листик в одной части паттерна уйдет под цветочек, а с другой стороны уже будет сверху. Но в нашем случае все замечательно. *не забываем периодически сохранять документ

Рекомендуем также

Как сделать бесшовный фон для сайта онлайн

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

Онлайн генератор бесшовных фонов bgpatterns.com

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

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

Как сделать бесшовный фон

Выбираем цвет основного фона и цвет значка.


Подбираем текстуру фона.


Можно повернуть ряды значков под нужным углом, увеличить или уменьшить.

Скачать бесшовный фон для сайта бесплатно.

Удобное демонстрационное окошко позволяет производить коррекцию цветов и плотность (контрастность) фактуры.

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

StripeMania.com

PatternCooler.com

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

 

[Всего голосов: 0    Средний: 0/5]
Читайте также:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Возьмем для примера фото цветов.

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

Если фон нашего сайта просто замостить такой картинкой получится вот так:

Получилось некрасиво и видны швы

В Photoshop»е есть такая замечательная функция как Сдвиг (Фильтр / Другое / Сдвиг). Мы могли бы воспользоваться этой функцией для получения бесшовного фона, но рисунок достаточно непростой и не хотелось бы терять качество фотографии. Потому я делю картинку на 4 равные куска (для этого наверное лучше брать изначально картинку квадратной формы или обрезать ее до квадрата).

Получается вот так:

Далее мы разрезаем эту картинку на 4 части и каждую часть помещаю на отдельный слой. Это можно сделать при помощи Прямоугольного выделения (выделяем ровно четверть, в нашем случае картинка 580 на 580 пикселей, значит четверть равна 290 на 290 пикселей), далее выделенную область копируем Ctrl+C и вставляем тут же Ctrl+V. Также этого можно добиться при помощи инструмента Раскройка , но тогда наши 4 части сохранятся в отдельную папку и потом их надо будет перенести в один документ для создания 4х слоев.

И перемещаем наши 4 куска следующим образом:

Такого же эффекта можно достичь, как я говорила ранее, используя функцию Сдвиг (Фильтр / Другое / Сдвиг), сдвигая картинку на половину ее высоты и ширины, в данном случае на 290px и 290px. Конечно же это в разы проще, но чтобы сделать качественный бесшовный фон на сайте этого будет недостаточно. Так как если взглянуть на фото выше, мы видим что эффект Размытия сделает картинку банально некрасивой, а дорисовывать цветы очень трудоемкое занятие.

Эта картинка по сути основа для нашего бесшовного фона. Если ваша текстура достаточно не сложная, то достаточно просто замаскировать швы в центре картинки, по периметру стыковка будет идеальная и бесшовная. Без такого перемещения было бы невозможно идеально угадать место стыка, а так мы видим все наши швы в центре.

Убираем стыки на будущем бесшовном фоне

Сейчас наш холст занимает 580х580px. Мы будет сдвигать каждый слой (каждую четверть) в сторону центра на 40px по очереди. Таким образом у нас слои будут накладываться друг на друга. Это можно сделать простым перетаскивание на 40px, либо использовать тот же самый Сдвиг на 40px по вертикали и горизонтали. У нас получится такая картинка, уже с размером холста 500х500px.

Далее будет самый творческий процесс. Берем инструмент Ластик , самый обычный, можно взять с мягкими краями. Выставляем непрозрачность на 50%. Нам нужно будет пройтись по тем слоям, которые расположены сверху, т.е. нетронутым останется у нас только нижний слой. Нам нужно будет пройтись по краям, где у нас наложение слоев, убирая обрезки цветов, те что полностью не поместились. На их месте будут просвечиваться целые цветы нижних слоев. Процесс творческий, потому надо будет поэксперементировать).

У меня получилось вот так:

Швы вышли достаточно незаметными и картинка выглядит целостной. Зато я теперь точно знаю, что раз в центре все аккуратно, то по периметру стыковка будет идеальная.

Посмотрим что у нас получилось в итоге, если замостить фон на сайте:

Вот такой у нас получился бесшовный фон для нашего сайта.

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

Шаг 1


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

Шаг 2


Используйте инструмент Dodge (осветление) для осветления тёмных областей.

Вот наш фрагмент.

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

Выберите инструмент Dodge (O) и большой мягкой кистью немного пройдитесь возле левого и правого краёв, чтобы немного осветлить тень. Не переборщите, иначе трава будет выглядеть слишком размытой.

Шаг 3


Как вы можете видеть выше, трава выглядит более равномерно окрашенной. Но этот листочек слева вверху разоблачит нас, если будет повторяться снова и снова, поэтому мы должны избавиться от него. Возьмите инструмент Patch (Заплатка) (J) и обведите вокруг листа мышкой, захватите эту область и перетащите. (Обратите внимание: инструмент Patch должен быть установлен на Source (Источник), а не на Destination (Назначение),

иначе разница будет несущественная).

Шаг 4


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

Шаг 5


Я оставил промежуток в 1 px, чтобы вы могли увидеть, как соединяются края.

Здесь вы можете видеть, что два слоя почти соприкасаются. Соедините их вместе так, чтобы между ними не было видно белого и объедините два слоя в один

Шаг 6


Теперь мы снова используем инструмент Patch (Заплатка) , чтобы нарисовать неровную линию вокруг кромки, где соединяются два слоя, затем, используя мышь, перетащите выделенную область на близлежащий участок, чтобы заделать его.

Шаг 7


Инструмент patch делает подобного рода операции действительно просто, особенно с такими шумными фонами, как эта трава. Как вы можете видеть, если не приглядываться очень внимательно, совсем незаметно, где была линия перехода. Если вы хотите, вы можете усовершенствовать детали и клонировать отдельные листочки травы — но и этого достаточно для наших целей.

Шаг 8


Теперь мы повторим тот же самый процесс по вертикали. Дублируйте слой и подвиньте один вниз, а другой вверх, пока верхний и нижний края не соприкоснутся. Объедините слои вместе и используйте инструмент patch, чтобы избавиться от кромки.

Шаг 9


Теперь мы готовы к мощению!
Это будет работать, потому что мы практически избавились от краёв, новые края документа уже совпадают, потому что мы подвинули слои равномерно влево и вправо, так что правый край документа действительно является следующим пикселем вдоль левого края.

Шаг 10



Нажмите CTRL+A , чтобы выделить всё и выберите Edit > Define Pattern.

Шаг 11


Дадим паттерну имя.

Шаг 12



Теперь на любом слое, если вы выберете blending options и отметите раздел Pattern Overlay, вы можете выбрать из вашего набора заказных паттернов, как показано, включая паттерн с травой, который мы только что сделали. На рисунке выше вы можете видеть, как я применяю паттерн к фону веб-сайта.
Конечно, вы должны также сохранить изображение паттерна как PSD или JPG, т. к. вам может понадобиться использовать отдельное изображение. Например, если вы будете использовать его как фоновую картинку в HTML-документе, вам понадобится отдельная картинка в формате JPG image, а не «Pattern» для Фотошопа.

Готово!



Вот и наша мощёная травка.

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

На беоне заметно распространены так называемые бесшовные дизайны.
В интернете можно найти множество бесшовных фонов, а вот как сделать бесшовный фон из собственной картинки?
Это я предложу Вам сделать первым уроком.

1. открываем изображение в фотошопе. Пусть оно называется слой 1
Я выбрала вот это:


2. Нажимаем J+ctrl (создаем дубликат слоя). называем его слой 2
3. Идем: фильтр-другие-сдвиг.
Ставим свои настройки.
Для каждого изображения настройки индивидуальны, для своего я выбрала такие:


4. Находясь на слое два идем: фильтр-размытие-размытие по Гауссу.
Я поставила такие настройки:


5. Далее берем ластик (большой, ок. 300 пикс). Стираем немного по бокам слоя 2
Примерно так:

— .
6. Создаем копию слоя 1(слой 3). Перетаскиваем его так, чтобы он находился над слоем 2. Идем: редактирование-свободное трансформирование. Немного уменьшаем слой 3:

— .
7. Ластиком немного подтираем края слоя 3, что они слились с фоном.
Можно дублировать слой и добавить немного размытия в движении.
Итог:

II способ.

Бесшовный фон можно сделать также при помощи фильтра: mehdi.
С ним все значительнее проще.
Если появятся желающие, дам ссылку на скачивание этого фильтра.
Для создание бесшовного фона я выбрала вот это изображение:


Открываем фильтр. Выглядит он так:


Я поставила такие настройки.
Итог:


На этом все.
Буду рада увидеть ваши работы.

скачать фильтр здесь.

Много раз меня спрашивали, и вот я решила выделить время и сделать таки урок по созданию бесшовного узора в Фотошопе. Возможно есть методы намного проще и удобней, но я изобрела вот такой велосипед, на нем и катаюсь.

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


Создаем документ 4500х4500 пикселей, с разрешением 300.


Вставляем в наш документ заранее приготовленные элементы. В моем случае, это 3 вот таких цветочных заготовки (все они аккуратно вырезаны по контуру и размещены в разных слоях).


Дублируем наши цветочки и в произвольном порядке заполняем ими верх и левую сторону холста. Как видите элементы в разной степени выступают за край. Теперь выделяем все цветы, что пересекают левую границу холста и дублируем их. *не забываем периодически сохранять документ


Выделив наши дубли, щелкаем по маркеру трансформационной области. Теперь у нас стала активной панелька сверху под главным меню. Выбираем точку отсчета левый верхний угол в «Reference point location». Сейчас мы видим координаты нашей группы объектов относительно верхнего левого угла. Их мы и будем менять.


Поскольку мы работаем с левой стороной, то соответственно и двигать объекты будем относительно оси Х. Сейчас у меня там -1018. Итак, достаем калькулятор и додаем до этой цифры 4500 (ширину нашей рабочей области). В итоге у нас получается 3482, это число мы и вводим в графу Х. Наши цветочки переместились, готово.


Аналогично дублируем весь верхний ряд вниз, вычислив координаты нашей группы объектов по оси Y.*не забываем периодически сохранять документ


Если нужно подвигать наши элементы, то не забываем, что теперь противоположные стороны взаимосвязаны. Так что, для перемещений выделяем объект и его дубль и тогда смещаем.


Всю пустую область заполняем цветочками так, чтобы это было гармонично и красиво. Следим за тем чтобы наши объекты не пересекали границ рабочей области. Вот в принципе, наш бесшовный узор и готов. Но поскольку я параноик, которому надо все перепроверить, то у меня есть еще несколько шагов))


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


Дублируем наш слой с цветочным узором. Перемещаем его на 4500 пикселей вправо. Выделяем узор и его дубль и двигаем так чтобы было видно шов, где они соединяются. Для чего я это делаю? Проверяю все ли сошлось)) Иногда, когда слоев очень много, то можно напутать с верхними нижними дублями и какой-то листик в одной части паттерна уйдет под цветочек, а с другой стороны уже будет сверху. Но в нашем случае все замечательно. *не забываем периодически сохранять документ

Как создать бесшовный фон при помощи Photoshop? | Техника и Интернет

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

На рисунке изображены крупные предметы. Чем больше предмет, тем сложнее будет с ним работать!

Много четких линий. В этом случае неровности на стыках очень заметны, поэтому это тоже осложняет работу.

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

Открываем картинку в Photoshop’е (у меня версия CS4). Внимание! Далее я буду давать инструкции на английском и русском языке (для оригинальной и русифицированной версий), однако перевод может не совпадать с тем, что есть у вас — это зависит от версии русификатора! Щелкаем меню Image/Mode (Изображение/Режим) и убеждаемся, что у нас стоит галочка напротив RGB color (RGB цвет). Если нет, ставим ее.

Для своих работ я выбрала вот такую картинку (рис. 1, вверху). Как мы видим, она довольно абстрактна и — слава богу! — равномерно освещена. Однако на ней изображены крупные предметы, имеющие очень четкие линии. А как выглядит ваша картинка? Если у нее один край темнее противоположного, то начать нужно с освещения. Освещение можно подкорректировать несколькими способами.

Первый способ. Выбираем Filter/Render/Lights Effects (Фильтр/Освещение/Эффекты освещения) (рис. 2). Дальше настройки индивидуальны и зависят только от вашего рисунка. Покрутите овальчик слева, подергайте ползунки. Совет: если края картинки получаются темными (не хватает света), а при растягивании овала центр получается слишком ярким, увеличьте значение параметра Focus (Фокус). Смотрим на мой пример (рис. 3).

Второй способ. Если светлых (темных) мест совсем немного или же изменение незначительно, то можем воспользоваться кисточками с панели инструментов — Dodge или Burn (Осветление или Затемнение). Совет: кисточка для таких работ должна быть достаточно мягкой: уменьшаем параметр Жесткость (Hardness). Параметр Exposure (Экспозиция) отвечает за интенсивность, им вы можете регулировать для плавных переходов света.

Теперь, когда изображение равномерно освещено, идем Filter/Other/Offset (Фильтр/Другие/Сдвиг) и выбираем опцию Wrap around (Вращать вокруг, в некоторых версиях — Обернуть).

Ставим значения обоих ползунков примерно (точность несущественна) вполовину изображения (например, у меня исходная картинка разрешением 400×300 пикселей, значит, я выставляю значения 200 по горизонтали и 150 по вертикали). Итак, теперь наши швы аккурат посередине (рис. 1, внизу). Наша задача — сделать их как можно менее заметными.

Масштабируем изображение и берем инструмент Clone Stamp (Штамп клонирования). Теперь работа творческая. Зажимаем клавишу ALT и мышкой щелкаем по тому кусочку, который мы хотим клонировать. Отпускаем клавишу и начинаем ретушировать нужную нам область. Обратите внимание, что область штампа (ту, которую вы обозначили с помощью клавиши ALT) будет двигаться за курсором, пока вы не отпустите кнопку мыши.

Кстати, если ваша картинка не содержит никаких геометрических фигур и вообще достаточно однородна, можно попробовать другой способ. Открываем исходное изображение (до сдвига швов) и добавляем в текстуры Edit/Define Pattern (Редактирование/Задать текстуру). Теперь вновь сдвигаем швы (Offset) и берем инструмент Pattern Stamp (Текстурный штамп). Не перепутайте с другим штампом! В верхней панельке выбираем только что сделанную нами текстуру. Теперь молниеобразными движениями закрашиваем наши стыки. Если получается плохо и неаккуратно, то этот способ вам не подходит!

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

Когда наш бесшовный фон будет готов, добавляем его в текстуры (как я описывала ранее). Создаем новый документ в Photoshop, ставим ему размер намного больше нашей картинки, далее идем Layer/New fill layer/Pattern (Слой/Новое заполнение слоя/Текстура) и выбираем нашу новую текстуру. Смотрим, что получилось!

Если вы попытались сделать так, как я рекомендовала, но у вас что-то не получилось — не расстраивайтесь! Существует плагин для Photoshop под названием Tiler, который можно легко найти и скачать в Сети. С его помощью за один клик мыши можно сделать все, что мы с вами пытались сделать!

Только не надо сейчас произносить все слова, которые пришли вам на ум! Плагин этот не идеален, поэтому подойдет лишь для картинок туманов, облаков, шерсти и прочих подобных вещей. Посмотрите что получится, если применить его к моему рисунку (рис. 5)! Правда, у меня красивей?

Как сделать бесшовный фон — Верстка HTML / CSS

Как сделать бесшовный фон

Непременно, что фон ваших 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) и воткните в открывающий тег <body> атрибут background=Fon.gif.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Бесшовный фон |

Как сделать бесшовный фон в программе Фотошоп?  Это довольно просто. Бесшовный фон можно сделать из любой понравившейся картинки. Сделаем вот такой фон из одного цветка.

1-Файл создать . Возьмем размер 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 пункта и получится такая картинка.

 

 

Как создать бесшовный узор

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

Бесшовные узоры можно использовать практически в любом дизайне, чтобы привнести визуальный интерес, текстуру и последовательность. Используйте это руководство, чтобы узнать, как легко создавать свои собственные шаблоны с помощью Gravit Designer.

Начните с создания нестандартного размера документа на экране приветствия Gravit Designer. Проще создать плитку с узором, используя идеально квадратный размер холста, поэтому давайте возьмем 400x400px . Заполните настраиваемые поля вверху экрана приветствия и нажмите « Create!». ».

Вы можете использовать практически все что угодно для создания бесшовного узора, если все это расположено правильно, так что это в значительной степени зависит от темы, которой вы хотите следовать. Давайте воспользуемся некоторыми элементами из библиотеки стикеров Gravit Designer для этого урока.

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

Для этого сначала разместите нужные элементы на верхних и слева краях холста.Вы можете расположить их точно посередине края или нет, решать вам, и вы можете изменить это положение позже.

После размещения элементов вам понадобятся их копии на противоположных сторонах, чтобы создать повторяющийся узор. Выделите все элементы и нажмите Ctrl + C — Ctrl + V или перейдите в меню Правка> Копировать , а затем Правка> Вставить .

Для каждой копии элементов, размещенных на левом краю, вам нужно добавить 400 пикселей (ширина вашего холста) по оси X, используя поля «Положение» на панели «Инспектор».

Для элементов, расположенных на верхнем крае, вы сделаете то же самое, но добавите 400 пикселей к оси Y в поле «Положение».

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

Вы также можете определить цвет фона с помощью палитры цветов на панели инспектора. Давайте воспользуемся цветом # FBF5D8 для этого урока.

Ваша плитка готова! Вы можете щелкнуть Clip Content на панели Inspector, чтобы проверить, как ваш файл будет выглядеть после экспорта. Все, что появляется за пределами области холста, не будет отображаться на конечном экспортированном изображении.

Теперь вы можете экспортировать файл, чтобы получить окончательное изображение, которое можно использовать в качестве шаблона. Перейдите в меню Файл> Экспорт> Изображение PNG (.png) .

Совет. Если вы являетесь пользователем Gravit PRO, используйте расширенный экспорт для экспорта с разрешением 300 точек на дюйм.

Теперь вы можете импортировать обратно экспортированную плитку и опробовать ее, чтобы увидеть, как она выглядит повторяющимся как бесшовный узор. Импортируйте изображение с помощью значка «Поместить изображение» на панели инструментов, через меню Файл> Импорт> Поместить изображение или просто перетащив изображение из папки на холст.

После размещения изображения скопируйте его и выберите «Заливка текстурой» в палитре цветов для цвета фона.

Выбрав «Заливку текстурой» и скопировав изображение, нажмите «Вставить» в настройках «Заливка», чтобы использовать скопированное изображение в качестве текстуры.

С помощью ползунка вы можете изменить размер рисунка. Это хороший способ проверить, выглядит ли ваш узор бесшовным, или даже создать узоры, которые будут использоваться в ваших работах Gravit Designer.

Вы можете использовать аналогичную технику для создания других типов узоров, например геометрического.

Допустим, я хочу использовать этот изометрический куб для создания бесшовного узора:

Сделайте копии и выровняйте несколько строк с этой формой, оставив включенным инструмент Snap.

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

Кубики будут размещены внутри прямоугольника, создавая обтравочную маску. Вы можете выбрать слои куба и перетащить их на слой прямоугольника на панели Layers .

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

Соблюдение краев — основная уловка, и с ее помощью вы можете создавать узоры практически с любыми элементами.

Как создать фон для веб-сайта

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

Частью создания внешнего вида вашего сайта является подбор цветов. В последнем посте я поделился с вами простым способом создать красивую цветовую палитру для вашего сайта.

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

Когда я делал свой обзор темы Divi 2, я создал целый веб-сайт, чтобы я действительно мог узнать тему, ее сильные и слабые стороны. Одной из сильных сторон темы Divi 2 является возможность разбивать разные разделы страницы с разным фоном. Я нашел два отличных ресурса для создания простых мозаичных фонов.

Первый ресурс — bg.siteorigin.com. На этом сайте вы легко сможете создать красивые простые текстуры или геометрические фоны. Это бесплатно и просто в использовании. Он также позволяет вам выбрать основной цвет, который вы хотите использовать для своего фона. Затем вы загружаете одну плитку фона.

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

Второй сайт, patterncooler.com, предлагает гораздо более сложные и смелые шаблоны.Это дает вам простой способ настроить цвет каждого узора с помощью редактора бесшовных узоров. Это отличный инструмент с отличными шаблонами.

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

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

Если вам нужно вставить фон для раздела темы Divi 2, то вот краткое руководство по тому, как это сделать в фотошопе.

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

1. Создайте новый документ. Для использования с темой Divi полной ширины установите ширину 1280 и высоту 400 для большинства приложений.Высота будет зависеть от того, сколько контента вы планируете разместить в разделе.

2. После создания нового документа откройте загруженную плитку, полученную с bg.siteground или patterncooler.com.

3. При открытой плитке выберите Select> All, чтобы выделить всю плитку.

4. Выбрав плитку, выберите «Правка»> «Определить узор». Дайте вашему выкройке имя.

5. Вернитесь к новому документу, который вы только что создали.

6. Выберите инструмент «Ведро с краской» и выберите «узор» в качестве типа заливки в селекторе вверху.Рядом с рисунком есть небольшой выпадающий квадрат. Выберите узор, который вы только что создали.

7. Используйте инструмент «Ведро с краской», чтобы заполнить холст новым узором.

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

Другие статьи, которые могут вам понравиться:

Как подобрать отличные цвета для своего веб-сайта, даже если вы не дизайнер
Тема Divi 2 для обзора WordPress
Простые изображения и графика для веб-сайтов

Связанные

Как сделать бесшовный фон веб-страницы

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

1 — Создание квадрата фона веб-страницы

Для этого примера создания фона веб-страницы я создал этот облачный квадрат. Может использоваться любая однородная текстура.

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

2 — Обрезка фона веб-страницы

Щелкните «Фильтр»> «Искажение»> «Сдвиг». Переместите обе точки до упора вправо (я выделил их красными стрелками.) Это перемещает все изображение вправо. Некоторые облака отодвигаются с правой стороны и снова появляются с левой стороны.

3 — Стриженное изображение

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

4 — Снова обрезка фона веб-страницы

Необходимо повторить тот же процесс, но в порядке «вверх-вниз».Функция сдвига работает только слева направо, поэтому сначала необходимо повернуть фон веб-страницы (щелкните Изображение, Повернуть холст, на 90º по часовой стрелке). Теперь снова обрежьте изображение.

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

5 — Атака клонов

Простое размытие краев здесь не сработает — линии все равно будут видны.

Выберите инструмент Clone Stamp Tool, выберите размытую кисть, удерживайте Alt и щелкните где-нибудь.Это установит «исходную точку» инструмента. Теперь используйте инструмент, как любую другую кисть, и попробуйте закрасить линии. Инструмент «Кисть клонирования» не раскрашивает какой-либо конкретный цвет, он просто дублирует то, что находится в «исходной точке». Исходная точка следует за кистью — поэтому, когда вы рисуете вверх, исходная точка тоже будет двигаться вверх.

6 — Плиточные обои

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

<< Вернуться к урокам Photoshop

Создание бесшовных текстур и бесшовных фонов в Illustrator

Я думаю, вы все согласитесь, что Illustrator просто потрясающий, и с постоянными улучшениями, которые мы видим с каждой новой версией, он становится все лучше и лучше. Раньше я создавал бесшовные текстуры для типографики и бесшовные фоны для своих веб-проектов и иллюстраций с помощью Photoshop. Но мы заметили значительные улучшения в панели «Оформление» в более поздних версиях Illustrator, поэтому теперь я создаю эти текстуры и фон исключительно в Illustrator — на самом деле это очень просто!

Итак, в сегодняшнем уроке я расскажу вам, как создавать различные бесшовные текстуры и фоны в Adobe Illustrator.

Подробности руководства: бесшовные текстуры и бесшовные фоны

  • Программа: Adobe Illustrator CC (Вы сможете создать этот учебник в CS4 +, но некоторые изображения могут выглядеть иначе.)
  • Сложность: Начальный / Средний
  • Темы: панель внешнего вида, эффекты, заливка узором, стили графики
  • Примерное время выполнения: каждые 15-20 минут

Добавление бесшовных текстур в Illustrator

Если вы какое-то время работали с иллюстратором, вы, вероятно, знаете, что можете легко добавить текстуру как изображение, настроить ее на умножение, и все готово.Одна из замечательных особенностей использования техник, описанных в этом уроке, заключается в том, что вы можете легко создать бесшовную текстуру или фон, не добавляя маску и не проверяя, чтобы она соответствовала вашему рисунку должным образом. Если вы ищете более бесшовные текстуры, я бы рекомендовал проверить FreeVector.com. Кроме того, мы будем использовать панель «Оформление», чтобы быстро создать уникальный графический стиль — это должно упростить применение эффектов к другим текстовым и векторным объектам. (Psst … Я знаю, что некоторые из вас говорят, что использование растровых эффектов в Illustrator является обманом, потому что это не векторная графика, и вместо этого вы должны просто использовать Photoshop.Но я обнаружил, что создавать такие эффекты в Illustrator намного проще и быстрее. Еще одно ключевое преимущество создания этого в Illustrator — масштабируемость векторов даже с применением растровых эффектов. Если вы не расширите эффекты, вы сможете корректировать изображения, не беспокоясь о создании пиксельных изображений. Так почему бы не попробовать? 🙂)

Растровые эффекты

Если вы знакомы с некоторыми текстурными эффектами и фильтрами в Photoshop, вы почувствуете себя как дома с этой техникой.Для этих эффектов я оставил Document Raster Effects Settings на 300 ppi . Вы можете изменить это разрешение, выбрав «Эффект»> «Параметры растрового эффекта документа».

Шаг 1

Создайте новый документ и нарисуйте прямоугольник с помощью инструмента «Прямоугольник» (M).

Шаг 2

Снимите обводку и залейте прямоугольник линейным градиентом. Измените первую цветовую границу в градиенте на зеленовато-синий цвет, измените вторую цветовую границу на более темный зеленовато-синий цвет и измените Угол на -90.

Шаг 3

На панели «Внешний вид» откройте всплывающее меню и выберите Добавить новую заливку . Выберите самую верхнюю заливку на панели «Оформление» и измените цвет заливки на серый.

Шаг 4

С новой серой заливкой, выбранной на панели Appearance, перейдите Effect> Texture> Grain . В диалоговом окне «Зерно» измените интенсивность на 90 , контрастность на 50 и тип зерна на разбрызгивание. Затем нажмите ОК.На панели «Оформление » нажмите стрелку слева от заголовка и в подсписке щелкните ссылку «Непрозрачность» и измените режим наложения на «Умножение ».

Шаг 5

Во всплывающем меню панели «Оформление» добавьте еще Новая заливка , как и раньше. Выберите верхнюю заливку и измените градиент на Радиальный градиент . Затем установите белый цвет на обоих стопах и измените Непрозрачность первого белого цвета на 40, а второго на 0.В подменю нового радиального градиента нажмите Opacity и измените режим наложения на Overlay , как показано на изображениях ниже.

Шаг 6

Это делает то же самое с бесшовной текстурой фона, но мы также можем добавить похожие текстуры к нашей копии, сохраняя при этом редактируемый текст! (Разве не потрясающая панель внешнего вида ?!) Для начала выберите инструмент «Текст» (T) и введите текст. Я использовал шрифт Museo Slab 900 для текста «Растровый».Затем, используя панель Color , удалите обводку и заливку с текста.

Шаг 7

На панели «Внешний вид » щелкните всплывающее меню, выберите Добавить новую заливку и залейте его линейным градиентом. Измените первый ограничитель цвета на белый, второй на светло-серый и измените угол на -90.

Шаг 8

Создайте еще одну новую заливку из панели «Оформление » и залейте ее серым цветом. Затем выберите новую серую заливку и перейдите в Effect> Texture> Texturizer .В диалоговом окне Texturizer измените текстуру на Burlap, Scaling на 200, Relief на 50 и Light to Top. Измените режим наложения заливки на Умножение и установите Непрозрачность на 5.

Шаг 9

Выберите нижний линейный градиент на панели Appearance и перейдите в Effect> Stylize> Drop Shadow . В диалоговом окне Drop Shadow измените непрозрачность на 60 , X и Y Offset на 0, и Blur на 1 . Теперь у вас должен быть эффект светлой текстуры и тень на вашем тексте!

Шаг 10

Для текста «Эффекты» я использовал Museo Sans 300 (я как бы помешан на семействе Museo).Снова введите текст, затем, используя панель Color , удалите обводку и заливку. Затем создайте новую заливку из панели «Оформление » и добавьте линейный градиент к тексту, изменив первый цвет на черный, а второй — на серый. Затем измените угол на -90. Создайте еще одну новую заливку, убедитесь, что вы редактируете последний элемент списка заливок на панели «Оформление », измените заливку на более светлый цвет, чем ваш фон, и перейдите в Effect> Distort & Transform> Transform .В диалоговом окне Transform Effect измените вертикальное перемещение на 1. Это сделано для примера растровой текстуры! Как получилось у тебя?

Играя около

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

Заливка узором

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

Шаг 1

Начальные шаги почти такие же, как в предыдущем примере растра. Создайте прямоугольник, удалите и обведите. На панели «Градиент» залейте его линейным градиентом, используя зеленовато-желтые цветовые точки, и измените угол на -90.

Шаг 2

Вместо того, чтобы использовать эффект на следующем шаге, мы собираемся использовать некоторые стандартные образцы шаблонов Illustrator.На панели Swatches нажмите кнопку Swatch Library Menu в нижнем левом углу панели и выберите Patterns> Basic Graphics> Basic Graphics_Textures . Выделив прямоугольник, выберите новую заливку на панели «Оформление » , выберите самую верхнюю заливку и залейте ее образцом Bird Feet из библиотеки, которую мы только что открыли. (Самый простой способ увидеть имена образцов в библиотеке — выбрать «Большой список» во всплывающем меню на панели образцов.После того, как вы заполнили новую заливку образцом Bird Feet, измените режим наложения на Overlay .

Шаг 3

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

Шаг 4

Обработка текста очень похожа на обработку растрового изображения. Чтобы создать текст «Узор», я сделал то же, что и в шаге 10, с растровым изображением.Я использовал Susa Heavy для шрифта, а с помощью панели «Оформление » я залил ее темно-серым линейным градиентом, добавил новую заливку, сместил новую заливку и изменил заливку смещения на более светлый цвет фона.

Шаг 5

Под текстом «Узор» я добавил 2 простых контура с помощью инструмента Line Segment (/) . Для этого просто нарисуйте путь, равный длине текста. Перейдите в Window> Stroke , чтобы открыть панель Stroke, и измените обводку на 1 pt, а цвет на серый.Создайте еще один путь прямо под первым и измените цвет обводки на светлый фоновый цвет.

Шаг 6

Для текста «Образец» я использовал Museo Slab 900. Удалите обводку и заливку, а на панели «Оформление » и добавьте новую заливку. Измените новую заливку на линейный градиент с первым цветом, остановленным белым, второй — более темным желтым цветом, и измените Угол на -90. Выбрав новую заливку, перейдите в Effects> Stylize> Drop Shadow . В диалоговом окне Drop Shadow измените Непрозрачность на 50, Смещение по X и Y на 0, и Размытие на.5 пикселей.

Шаг 7

Создайте новую заливку из панели «Оформление» и залейте ее линейным градиентом. Затем измените первую цветовую границу на светло-желтый цвет, измените вторую на такой же, более темно-желтый цвет, как в предыдущем шаге, и установите Угол на -90. Выбрав новую заливку, перейдите в Effects> Path> Offset Path . В диалоговом окне Offset Oath измените Offset на -1 px .

Играя около

С ними действительно весело играть.Возьмите только что созданную фоновую текстуру, найдите элемент Bird Fill и измените его любым из образцов Basic Graphics_Textures, чтобы увидеть, что у вас получится! Также попробуйте комбинировать несколько разных узоров на одном фоне, чтобы увидеть, какие крутые эффекты это дает.

Комбинирование растровых эффектов и заливки узором

Эта техника, наверное, моя любимая. Интересно исследовать и экспериментировать со всеми разными результатами. В основном мы комбинируем методы заливки растром и узором.Это очень похоже, поэтому, если у вас не было проблем с предыдущими методами, у вас не будет проблем с ними!

Шаг 1

Я не буду вдаваться в подробности, потому что вы уже выполнили начальные шаги в первых двух примерах. По сути, создайте прямоугольник, залейте его красным линейным градиентом, создайте узор с зернистостью Sprinkle и создайте радиальный белый градиент.

Шаг 2

Добавьте еще одну заливку в панель « Appearance» и выберите узорную заливку « Diamond » из Basic Graphic_Textures.Установите Режим наложения новой заливки узором на Overlay и измените Непрозрачность на 50 .

Шаг 3

Для типа «Combo» я использовал RadioTime для шрифта и использовал тот же градиент серого и смещение, что и в предыдущих примерах. Вторичный текст — это просто Museo Sans 300 с желтой заливкой.

Играя около

Как и раньше, сейчас хорошее время, чтобы поиграть и посмотреть, какие варианты обработки текстуры вы можете придумать!

Создание стилей графики

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

Шаг 1

Чтобы создать графический стиль, просто выберите текстуру и нажмите кнопку New Graphic Style (Новый стиль графики) на панели Graphic Style (Стиль графики) . Серьезно, это так просто. Теперь выделите текст или другой объект и нажмите новый стиль на панели стилей графики и все готово! Вы даже можете создавать графические стили для каждой из созданных нами текстовых обработок.

Шаг 2

Иногда я корректирую текстуру на панели Appearance , чтобы включить другие элементы.В приведенных ниже примерах кнопок я добавил заливку со смещением на 1 пиксель и добавил тень к заливке. Фоновая текстура — это просто заливка графическим пером (Эффект> Эскиз> Графическое перо) , и значки обработаны так же, как мой текст в некоторых примерах текстуры.

Игра с бесшовными текстурами и бесшовным фоном

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

Эти значки ссылаются на сайты социальных закладок, где читатели могут делиться и открывать новые веб-страницы. Учебное пособие

: создание 5 тонких фоновых узоров

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

Конечно, эти типы шаблонов легко найти в Интернете, поэтому все, что вам нужно сделать, это сохранить их и использовать, но разве вы не хотели бы знать, как сделать их с нуля, чтобы добавить немного индивидуальности вашему? веб-дизайн? Итак, сегодня мы собрали 5 коротких руководств, которые помогут вам создать пять различных типов тонких фонов.

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

Первый образец

Для этого первого паттерна я хотел имитировать что-то немного шероховатое с небольшой текстурой.

Шаг 1.

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

Шаг 2.

Создав документ, вы хотите выбрать цвет фона. Вы можете выбрать один из образцов или открыть диалоговое окно «Палитра цветов». На этот раз я хотел использовать красивый темно-синий цвет.

Шаг 3.

Первое, что мы собираемся сделать для создания фона, — это добавить немного шума. Перейдите в Фильтр> Шум> Добавить шум, чтобы открыть это диалоговое окно. Измените количество (шума) на 3% с распределением Гуасса и убедитесь, что установлен флажок Монохроматический.

Шаг 4.

Далее мы собираемся применить фильтр, необходимый для создания оставшейся части гранжевого образа. Перейдите в Фильтры> Мазки кистью> Акцентированные края. Появится диалоговое окно «Галерея фильтров», которое будет выглядеть следующим образом. Вы хотите поиграть с настройками, пока не найдете то, что вам нравится. Я использовал следующие настройки: Ширина края 6, Яркость края 18 и Гладкость 6.

Шаг 5.

Чтобы сделать этот узор бесшовным, мы собираемся обернуть пиксели по краям.Выбрав Filter> Other> Offset, мы открываем диалоговое окно, которое готово помочь нам перемещать пиксели. Что вы хотите сделать, так это использовать количество, которое будет вдвое меньше вашей длины и / или ширины. У нас длина и ширина по 100 пикселей каждая, поэтому мы хотим обернуть их на 50 пикселей вот так.

Шаг 6.

Как вы можете видеть на шаге 5, когда вы выбираете «Смещение пикселей», вы фактически можете видеть, где пиксели начинаются и заканчиваются. Чтобы очистить это, возьмите лечебную кисть (J) на палитре, Alt + левый клик по пятну на заднем плане и закрасьте его.После того, как вы разгладите его кистью Healing, он должен выглядеть примерно так, как на картинке выше.

Шаг 7.

Последний шаг в создании выкройки — это определение вашего шаблона. Перейдите в Edit> Define Pattern, и появится диалоговое окно с просьбой назвать ваш узор. Назовите его как хотите. Чтобы извлечь узор, возьмите ведро с краской (G) и убедитесь, что он находится в режиме узора. Ваш новый узор, скорее всего, будет последним. Выделите его и залейте узор на холст.

Окончательное изображение

Второй узор

Этот второй шаблон позволяет нам использовать некоторые геометрические формы с тонким оттенком гранжа.

Шаг 1.

Опять же, конечно, мы собираемся создать наш новый документ, следуя шагам, описанным в предыдущем коротком руководстве. Мы также используем тот же размер холста 100 на 100 пикселей. На этот раз мы выберем два разных серых цвета. В качестве первого цвета мы выбираем светло-серый (# d7d7d7).Заполните холст более светлым цветом.

Для второго цвета мы выбираем более темный серый (# c2c1c1). Позже мы будем использовать этот цвет для линий.

Шаг 2.

Выберите инструмент «Линия» (U), убедитесь, что вы находитесь в режиме формы, и измените толщину линии примерно на 2 пикселя.

Шаг 3.

Создайте новый слой (Ctrl / Cmd + Shift + N). Щелкните левой кнопкой мыши и перетащите инструмент «Линия» по диагонали от угла к углу (удерживайте Shift, чтобы свет был точным).

Шаг 4.

Создайте еще один новый слой. Проделайте то же самое с инструментом линии для другой стороны. Как только я закончил свои линии и правильно разместил их, я обнаружил, что проще всего объединить эти два слоя. Если вы находитесь в режиме формы, это должно быть так же просто, как выделить самый последний (верхний) слой и нажать Ctrl / Cmd + E, чтобы объединить его со слоем под ним.

Шаг 5.

Чтобы упростить задачу, я предпочитаю использовать опцию «Обрезать», чтобы удалить все лишнее, чего вы не видите. Для этого выберите «Изображение»> «Обрезать», и обычно вы можете нажать «ОК», и все, что вы не видите, будет удалено.

Шаг 6.

После слияния линий вы хотите уменьшить их масштаб, чтобы между знаком «X» и краями оставался небольшой промежуток. Для этого нажмите Control / Cmd + T и удерживайте клавиши Shift и Alt, чтобы сохранить пропорции и уменьшить масштаб от центра. Уменьшите его, как хотите.

Шаг 7.

Я хотел, чтобы мой «X» выглядел немного рельефным, поэтому я продублировал слой (Control + J) и решил сделать его светлее, перейдя в Image> Image Adjustments> Brightness / Contrast.Я полностью увеличил яркость до приятного светло-серого / белого цвета. Когда у вас есть цвет, который вы одобряете, нажмите ОК.

Шаг 8.

Затем вы хотите настроить более светлый слой, как вам нравится. Возьмите инструмент со стрелкой (V) и перемещайте слои, нажимая кнопки со стрелками. Я также перемещал слои, чтобы изменить внешний вид. Поиграйте с ним, пока не получите то, что вам нравится. (В итоге я положил свой более светлый слой «X» под другой и подтолкнул его только один раз).

Шаг 9.

Когда вы закончите выяснять, как вы хотите расположить более светлый и темный значок «X», добавьте немного шума к серому фону. Он слишком тонкий, поэтому выберите «Фильтр»> «Шум»> «Добавить шум» и добавьте только 1% шума. Сохраните распределение по Гауссу и убедитесь, что установлен флажок Монохроматический.

Шаг 10.

Как только вы это сделаете, вы захотите изменить размер вашего изображения. Выберите «Коррекция»> «Размер изображения» и уменьшите его до нужного размера.Я установил размер 75 на 75 пикселей. И снова, вы захотите определить свой паттерн, перейдя в Edit> Define Pattern, назвав свой паттерн и нажав OK. Ниже то, что хотелось бы финальному изображению.

Окончательное изображение

Третий образец

Этот узор все еще немного геометрический с менее заметными вариациями.

Шаг 1.

Для этого паттерна я начал с холста большего размера 150 на 150 пикселей, потому что здесь мы будем немного точнее.Начните с выбора действительно темно-серого цвета для заливки холста.

Шаг 2.

Как и в предыдущем шаблоне, мы воспользуемся инструментом Line Tool (U). Для создания линий выберите более светлый серый цвет. Он не обязательно должен быть идеальным. Что-то вроде вышеперечисленного подойдет.

Шаг 3.

Затем возьмите инструмент Brush Tool (B) и возьмите мягкую кисть, чтобы нарисовать мягкую кисть большего размера поверх второй светло-серой линии. Я использовал более темный цвет (черный) для своей линии.Не стесняйтесь экспериментировать с разными типами цветов.

Шаг 4.

Теперь мы собираемся уменьшить размер этого шаблона, перейдя в Image> Image Size; Я изменил его на 10 на 10 пикселей. После того, как вы изменили размер, вы хотите перейти в меню «Правка»> «Определить узор»> назвать свой узор и затем нажать «ОК».

Шаг 5.

Создайте новый документ — на этот раз я выбрал размер 615 на 450 пикселей, хотя ваш не обязательно должен быть таким большим. Все, что больше 200 пикселей с каждой стороны, должно работать.Возьмите ведро с краской (G), убедитесь, что оно находится в режиме узора (появится раскрывающееся меню с параметрами «Передний план» и «Узор»), и возьмите только что созданный узор. Заполните холст этим узором, как на изображении выше.

Шаг 6.

Обычно мы бы закончили, но мы хотим внести некоторые изменения во внешний вид линий. Перейдите в Filter> Brush Strokes> Angled Strokes, чтобы получить желаемый эффект. Опять же, я рекомендую вам поиграть, пока вы не найдете то, что вам нравится, но вот настройки, которые я использовал: баланс направления 73, длина штриха 6 и резкость 4.Нажмите ОК, чтобы подтвердить изменения.

Шаг 7.

Это окончательный результат, но для того, чтобы сделать его бесшовным, я взял свой инструмент «Кадрирование» (C) и выделил квадратную область (Shift + левый щелчок), которая мне показалась довольно последовательной. На такие вещи легко смотреть — вы просто хотите убедиться, что ваша левая сторона начинается там, где заканчивается ваша правая сторона, а верхняя часть начинается там, где заканчивается нижняя часть. Опять же, когда вы нашли подходящий регион, выберите Edit> Define Pattern и попробуйте его.

Окончательное изображение

Четвертый узор

Еще немного грязи с постоянным повторяющимся, но едва различимым значением.

Шаг 1.

Для нашего четвертого паттерна мы будем использовать другой тип линии основы. Снова мы собираемся начать с нового документа размером 100 на 100 пикселей. Для цвета у меня обычный белый фон, а в качестве цвета линии я выбрал очень светло-серый. Мы возьмем инструмент Line Tool (U) и проведем горизонтальную линию на самом верху, а также линию посередине.

Шаг 2.

Теперь этот будет немного более «грязным», чем остальные, поэтому мы хотим добавить к нему немного шума. Выделив белый фоновый слой, перейдите в Filter> Noise> Add Noise и измените Amount на 15%, Distribution на Gaussian и установите флажок Monochromatic.

Шаг 3.

Для этого мы снова собираемся сделать размер немного меньше, поэтому мы перейдем в Image> Image Size, и для этого я изменил размер на 15 пикселей на 15 пикселей.Как только вы это сделаете, создайте свой узор, выбрав Edit> Define Pattern>, назвав его и отправив изменения. Используйте как хотите! Однако имейте в виду, что если вы хотите, чтобы ваш узор выглядел менее повторяющимся, попробуйте увеличить размер холста, чтобы можно было увеличить вариации.

Окончательное изображение

Пятый узор

Для этого последнего паттерна я хотел попробовать что-то темное с небольшой текстурой.

Шаг 1.

Я снова создал новый документ с размером холста 100 на 100 пикселей. Для этого последнего паттерна мы выберем очень темно-серый цвет для фона.

Шаг 2.

Чтобы сразу приступить к работе, мы собираемся добавить очень полезный шум, перейдя в Filters> Noise> Add Noise: Amount 5%, Uniform Distribution, с включенным Monochromatic.

Шаг 3.

Чтобы создать здесь желаемый эффект, мы собираемся перейти в Фильтры> Эскиз> Полутоновый узор.Не стесняйтесь поиграть здесь, но я использовал следующие значения: Размер 1, Контрастность 0, Тип узора точки.

Шаг 4.

Ранее мы использовали эту функцию смещения, чтобы помочь нам создать бесшовный узор. Мы собираемся сделать то же самое снова. Перейдите в Filter> Other> Offset и введите половину ваших значений высоты и ширины. Убедитесь, что для неопределенных областей установлено значение «Обтекание», и нажмите «ОК». Как только это произойдет, вы захотите снова использовать Восстанавливающую кисть (J), чтобы попытаться сгладить менее гладкие области.Как только вы попали в нужное вам место, перейдите в Edit> Define Pattern> назовите свой рисунок, нажмите OK и используйте новый рисунок.

Окончательное изображение

Имейте в виду…

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

Какие техники вы любите использовать для создания своего собственного утонченного фона?

Как сделать бесшовный узор в Inkscape

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

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

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

Есть много отличных радужных картинок, доступных в Design Bundle. Сегодня мы будем использовать яркие радуги от VR Digital Design.

Шаг 1. Создание нового шаблона бесшовного узора

Поскольку в Inkscape уже установлен шаблон, настройка холста выполняется очень быстро.В шаблоне есть руководство и набор слоев.

Щелкните Inkscape и выберите «Новый документ». Щелкните Файл и выберите Новый из шаблона . В появившемся меню прокрутите вниз до Бесшовные шаблон и щелкните, чтобы выбрать. С правой стороны отрегулируйте ширину и высоту. Мы устанавливаем размер нашего узора на 500 x 500. Затем нажимаем Create from Template .

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

Шаблон бесшовного узора состоит из двух слоев: Узор переднего плана и Узор фона . Они находятся на вспомогательном уровне. Чтобы просмотреть панель слоев, щелкните View Layers в верхней части экрана.С правой стороны откроется панель «Слои». Передний план узора — это слой вашего дизайна, на котором размещаются изображения.

Шаг 2 — Добавьте фон для узора

К фоновому слою будет добавлен квадратный фон. Сначала удалите текущее изображение на холсте. Щелкните + перетащите рамку выбора вокруг элементов и нажмите «Удалить». Затем не забудьте нажать Enable Snapping в правой части экрана.Далее вниз по панели нажмите Привязать к странице граница . Это упростит привязку фона к холсту.

На панели «Слои» щелкните «Фон узора», чтобы выбрать его. На левой боковой панели щелкните Создать прямоугольники и квадраты , затем щелкните + перетащите квадрат. Начните с одного угла холста. Когда вы будете рисовать фигуру, она будет прикрепляться к углу.

Увеличьте масштаб, нажав Z, а затем щелкнув левой кнопкой мыши.Чтобы уменьшить масштаб, нажмите Shift + щелчок. Увеличьте масштаб так, чтобы холст заполнил экран.

Используйте панель «Заливка и обводка» для изменения цвета. Если не отображается, щелкните меню Object вверху, затем Fill and Stroke . Выберите светлый цвет для фона.

Шаг 3 — Вставьте картинку

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

Вы можете копировать и вставлять картинки или перетаскивать их из места расположения файла. Мы будем использовать метод перетаскивания. Используйте форматы PNG, так как они имеют прозрачный фон. Когда вы импортируете изображение, Inkscape откроет меню Import . Оставьте настройки как есть и нажмите ОК. Это будет происходить каждый раз при добавлении нового клип-арта.

Изображение может быть довольно большим при загрузке, поэтому уменьшите масштаб и щелкните, чтобы активировать ручки регулировки.При уменьшении размера изображение может выходить за пределы холста. Выбрать и переместить изображение станет сложно. Но у нас есть решение.

Щелкните меню «Объект» вверху и выберите Выровнять и распределить . Он будет отображаться справа. Измените параметр Relative To: так, чтобы он отображал Page . Нарисуйте рамку выделения вокруг изображения. Затем щелкните Центр по вертикальной оси , затем Центр по горизонтальной оси .Изображение будет расположено посередине страницы.

Теперь вы можете перемещать изображение по своему усмотрению. Поместите изображение рядом с краем или углом. Inkscape разместит противоположную часть изображения на другой стороне холста или во всех углах. Это позволит бесшовно соединить узор.

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

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

Шаг 4. Выровняйте и распределите картинки

Панель Выровнять и распределить упрощает размещение картинок.Рядом с относительно: убедитесь, что выбрано значение Page . Это выровняется по центру или стороне страницы.

Мы будем использовать Центр по вертикальной оси и Центр по горизонтальной оси. Какой из них вы будете использовать, будет зависеть от того, где вы разместите свое изображение. При добавлении в центр вверху страницы выберите «Центр по вертикальной оси». При выравнивании по краям используйте «Центр по горизонтальной оси».

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

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

Шаг 5 — Экспорт бесшовного узора как PNG

Мы хотим сохранить этот узор как файл PNG для использования в других программах. Под панелью слоев щелкните правой кнопкой мыши слой с узором вверху.

Щелкните меню «Правка» вверху и выберите Выбрать все .Затем нажмите File и Export as PNG . Справа откроется меню экспорта. Убедитесь, что для области экспорта установлено значение . Выбор , и измените значение DPI на 300 для получения максимального качества. Местоположение имени файла можно изменить, щелкнув «Экспортировать как». Наконец, нажмите «Экспорт».

Теперь ваш бесшовный узор готов, и его можно использовать в других программах, таких как Silhouette Studio. Откройте файл PNG в Silhouette Studio и продублируйте, а затем выровняйте.

Если вам понравился этот урок, ознакомьтесь с нашими уроками по использованию цифровой бумаги в Inkscape и созданию эффекта неонового текста в Inkscape.

Научитесь создавать бесшовные текстуры и работать с ними

Часто незамеченные герои набора инструментов дизайнера, бесшовные текстуры находят множество применений для Интернета, печати и 3D-дизайна.

Здесь вы узнаете, как бесшовные текстуры могут помочь вам воплотить вашу дизайнерскую A-игру, добавив реализма и профессионализма в различные макеты.Вы также найдете быстрое и простое руководство по созданию профессиональных бесшовных текстур — из стоковых изображений или ваших собственных фотографий.

Макет веб-сайта с использованием бесшовной текстуры из зеленого мрамора от автора Амелии Остин.

Что такое бесшовные текстуры?

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

Набор бесшовных текстур высокого разрешения из библиотеки Shutterstock.

Хотя обычно их называют «текстуры», эти изображения, как правило, являются плоскими, 2D-изображениями (например, JPEG), которые могут использоваться сами по себе (например, в веб-дизайне и печатном дизайне) или наложены друг на друга с другими JPEG или текстурными «картами». »Для фотореалистичных 3D-рендеров. Изображения могут быть простыми или узорчатыми, но, как правило, содержат элементы, которые можно легко повторить без риска того, что изображение будет выглядеть искусственно увеличенным.

Вы можете создавать свои собственные бесшовные текстуры, редактируя исходное изображение в программном обеспечении, таком как Adobe Photoshop, или находить готовые бесшовные текстуры в библиотеке Shutterstock.


Когда использовать бесшовные текстуры?

3D-художники и пользователи САПР знакомы с преимуществами бесшовных текстур для создания ультрареалистичных изображений продуктов, мебели и окружающей среды. Тем не менее, полиграфические и веб-дизайнеры также найдут бесшовные текстуры незаменимыми для крупномасштабных макетов. Они могут привнести реалистичность и цельный профессиональный вид на веб-сайты, плакаты, вывески или САПР.

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

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

Вы также можете найти применение бесшовным текстурам в других типах дизайна, которые имеют особенно широкие или высокие размеры, например, в журнальных разворотах, плакатах, инфографике, веб-баннерах, обложках книг, меню или баннерах событий.Как только вы поймете, как легко собрать макет с бесшовным фоном, вы никогда не оглянетесь назад!

Ниже вы узнаете, как создавать свои собственные бесшовные текстуры всего за шесть простых шагов с помощью Photoshop.


Как мне создавать собственные бесшовные текстуры?

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

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

Пример изображения, используемого в этом руководстве. Изображение автора Федоров Алексей.

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

Шаг 1. Выпрямление изображения

После открытия изображения в Photoshop , продублируйте слой Background , чтобы сохранить копию исходного изображения.

В Photoshop продублируйте фоновое изображение.

Первый этап подготовки базового изображения — его выпрямление. Этот совет относится к изображениям, которые содержат любые визуальные линии, идущие вертикально или горизонтально, например узоры или изображения кирпичей, проволоки или тканого материала.

Используйте направляющие, вытянутые из линейок ( View> Rulers ), чтобы отметить вертикальные и горизонтальные точки на изображении. перед поворотом изображения , чтобы убедиться, что оно идеально совмещено с ними.

Совместите вертикальные и горизонтальные точки на изображении.

Шаг 2. Обрезка изображения

Некоторые изображения, такие как это, будут иметь элементы, пересекающие край изображения. В этом случае половинчатые камни не позволят нам разместить изображение бесшовно, поэтому определите область изображения, которая может быть повторена без потери бит и элементов. Используйте инструмент Crop Tool ( C ), чтобы обрезать все выступающие края.

Используйте инструмент «Обрезка», чтобы обрезать ненужные края.

Шаг 3. Создание постоянного освещения

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

Перейдите в Image> Adjustments> Shadows / Highlights .

Выровняйте свет и тень, отрегулировав тени / светлые участки.

Отрегулируйте ползунки Shadows / Highlights до тех пор, пока количество света и тени не выровняется по всему изображению.

Есть несколько вариантов на выбор при настройке теней / светлых участков.

Шаг 4. Увеличьте холст

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

Растяните полотно по горизонтали и вертикали.

Шаг 5. Разложите изображение мозаикой

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

Здесь я вставляю кирпичи в место, где они могли бы поместиться, выравнивая копию по оригиналу.

Выравнивание дубликатов.

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

Расположите копии поверх оригиналов.

Выберите все слои изображения на панели Layers и продублируйте , поместив их над исходными изображениями, а затем вставив текстуру на место.

Переместите текстуры на место.

Повторяйте, пока не будет заполнен весь холст.

Повторяйте этот процесс, пока не будет заполнен весь холст.

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

Шаг 6. Отрегулируйте всю текстуру

На панели Layers создайте новую папку и поместите в нее все слои изображения.

Создайте новую папку на панели «Слои».

Затем переключите режим наложения папки с Pass Through на Normal . Это позволит вам добавить корректирующий слой над другими слоями изображения и применить эффект ко всем слоям, рассматривая их как одно бесшовное изображение.

Переключите режим наложения со сквозного на нормальный.

Попробуйте использовать корректирующий слой Curves или Levels , чтобы вернуть в изображение больше глубины и тона.

Придайте изображению дополнительную глубину и тон с помощью корректирующего слоя «Кривые» или «Уровни».

Когда вы закончите работу над текстурой, вы можете Файл> Сохранить как изображение как JPEG , готовое для использования в печатном или веб-проекте.

Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован.