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


Как сделать бесшовную текстуру фон для сайта всего за 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.

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

Шаг 1. Настройте документ

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

Шаг 2: Покажи свои линейки

Нажмите команду или Ctrl + «R», чтобы показать ваши линейки, если они еще не видны. Отображение ваших линейок позволит вам применить направляющие на следующем шаге.

Шаг 3: Используйте руководства, которые помогут упорядочить ситуацию

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

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

Вы можете создавать свои собственные формы, используя инструмент выделения, инструмент «Перо» или инструмент произвольной формы.

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

Шаг 5: Выберите свой набор форм

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

Шаг 6: Выберите свою форму

Щелкните раскрывающееся меню и выберите украшения. Я выбрал пять ромбов, образующих крест.

Шаг 7. Рисование формы

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

Шаг 8: Раскрасьте узор

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

Шаг 9: Выбор правильного фона для вашего узора

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

Шаг 10: Сохраните шаблон

Выберите «Файл»> «Сохранить для Интернета и устройств».

Шаг 11. Выберите формат файла, который подходит вам

В зависимости от ваших предпочтений вы можете сохранять файлы в трех различных форматах.

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

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

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

Выбор типа файла зависит от желаемого конечного результата. Если вам не нужна прозрачность, и вам нужен простой узор, тогда подойдет файл .jpg. Если вы хотите иметь возможность быстро и легко изменять цвет фона с помощью CSS, выберите.gif или .png.

В этом примере я сохранил файл как прозрачный .png; Мне нужен был четкий повторяющийся узор с возможностью изменения цвета фона с помощью CSS.

Шаг 12. Реализация шаблона с помощью CSS

С помощью CSS я назначил цвет фона #FFC (оттенок желтого), который хорошо сочетается с синим, который мы выбрали ранее. Я также добавил узор, который создал, и установил его повторение по осям X и Y. Вы делаете это, не указывая оси X или Y, в результате чего узор по умолчанию повторяется по обеим осям.

  body { фон: #FFC url (images / bluedia.png) repeat; }  

В результате все ромбы выстроены в одну линию и образуют сетку с выбранным оттенком желтого в качестве фона.

Шаг 13: Создайте повторяющийся узор границы вместо

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

Шаг 14: Создайте горизонтальный узор

Измените повторение графического изображения шаблона с «repeat» на «repeat-x». Вы можете указать верх, центр или низ, чтобы указать, где он будет повторяться.

Примечание: чтобы создать нижнюю границу, измените «верх» на «низ» в приведенном ниже коде.

  body { фон: #FFC url (images / bluedia.png) repeat-x top;  

Шаг 15: Создайте узор из горизонтальных полос

Если вы измените «верх» на «центр», в результате появится горизонтальная полоса по центру макета.

  body { фон: #FFC url (images / bluedia.png) repeat-x center; }  

Шаг 16: Создайте вертикальный узор

Для «repeat-y» вы можете указать влево, по центру или вправо, и вы получите разные результаты.

Шаг 17: Создание шаблона вертикальной границы

Примечание: чтобы создать правую границу, измените «влево» на «вправо» в приведенном ниже коде.

  body { фон: #FFC url (images / bluedia.png) repeat-y слева; }  


Шаг 18: Создайте узор из вертикальных полос

При изменении «слева» на «центр» в центре макета появится вертикальная полоса.

  body { фон: #FFC url (images / bluedia.png) repeat-y center;  

Заключение

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

.

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

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

Шаг 1: Стартовая текстура

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

Шаг 2: Смещение текстуры

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

Шаг 3: повторить текстуру

Удерживайте Option / Alt, перетаскивая текстуру вверх с помощью инструмента «Перемещение», чтобы сделать копию, удерживая Shift, чтобы она двигалась точно по вертикали, пока нижняя часть повторяющейся текстуры не встретится с верхом существующей.Затем используйте Command / Ctrl + E, чтобы объединить эти два слоя вместе.

Шаг 4: Повторить еще раз

Теперь перетащите слой вправо, снова удерживая Option / Alt и Shift, чтобы сделать копию. Слейтесь еще раз. Теперь вы сместите исходную текстуру так, чтобы края оказались посередине. Соединения здесь очевидны - но вы знаете, что там, где текстура выходит за пределы верхнего края, она плавно повторяется снизу, и то же самое для левого и правого.

Шаг 5. Исправьте соединения

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

Шаг 6: Исправьте ошибки

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

Шаг 7: Сохраните текстуру

Выберите все, затем перейдите в Edit> Define Pattern.Дайте новому шаблону имя и нажмите ОК. Теперь вы сможете использовать его в любой работе в Photoshop.

Шаг 8. Попробуй

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

Посмотреть видео

Посмотрите видеоверсию этого урока ниже.

Категории: Фото Редактирование изображений

Теги.

фоновых рисунков: 10K + бесшовные модели

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

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

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

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

.

20 красивых бесшовных узоров для фона вашего веб-сайта


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

0003

0003

0003


Ищете альтернативы премиум-класса?

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


Обширная коллекция геометрических узоров, вдохновленных механизмом ар-деко и интерпретированных в современной современной манере. (покупка 22 $)

Люблю рисовать! Я использую карандаши, акварель, фломастеры, а иногда даже палец на пыльном стекле. Я впервые рисую выкройки и даже не ожидала, что это будет так весело! Итак, я хочу представить вам 25 веселых бесшовных геометрических узоров в трех стилях, которые делают его по-настоящему универсальным.Надеюсь, они привнесут яркость и выразительность в ваши дизайнерские проекты. (покупка 24 доллара)

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

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