Artinblog logo
  • DLE
    • Шаблоны
    • Модули
  • SEO
    • SEO для начинающих
  • Общество
  • jQuery
  • Дизайн
  • Услуги
Главная » Дизайн » Как сделать бесшовный фон для сайта RSS
июл 10 2015 photo

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

Alessa Shtern 16 274
  • 60
  • 1
  • 2
  • 3
  • 4
  • 5

Если фон вашего сайта не монотонного цвета или градиента, а вы хотите наложить определенную текстуру на ваш бекграунд, то далее расскажу как практически из любой картинки сделать бесшовный фон. Возможно для кого-то этот способ сделать бесшовный фон уже давно известен, но думаю будет интересно узнать об одной небольшой особенности. Ниже будет приведен пример как сделать фон из достаточно крупной фотографической картинки. Для нашего фона нам понадобится 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%. Нам нужно будет пройтись по тем слоям, которые расположены сверху, т.е. нетронутым останется у нас только нижний слой. Нам нужно будет пройтись по краям, где у нас наложение слоев, убирая обрезки цветов, те что полностью не поместились. На их месте будут просвечиваться целые цветы нижних слоев. Процесс творческий, потому надо будет поэксперементировать ).

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

Бесшовный фон сайта. Итог

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

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

Бесшовный фон на сайте. Результат


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

Теги: фон фон для сайта

HashFlare
Другие новости по теме:
  • Оптимизация изображений — обзор 8 онлайн сервисов
  • Как сделать сайт бесплатно самому
  • Бесшовный фон для сайта. Обзор 3-х сайтов для создания фона.
  • Лендинг или сайт? Что лучше?
  • Выпадающее меню на jQuery

Комментарии к: Как сделать бесшовный фон для сайта (1)

    1. №1  Валерий 11-08-2018 Цитировать

      Спасибо! Здорово помогло. Хороший урок!

Имя:*
Комментарий:
Сервис не доступен
Похожие статьи:
  • Оптимизация изображений — обзор 8 онлайн сервисов
  • Как сделать сайт бесплатно самому
  • Бесшовный фон для сайта. Обзор 3-х сайтов для создания фона.
  • Лендинг или сайт? Что лучше?
  • Выпадающее меню на jQuery
  • Популярное
  • Авторизация
  • Как закрыть ссылку от индексации при помощи javascript
  • На каком движке делать интернет-магазин. PrestaShop или OpenCart?
  • Принципы резиновой верстки сайта
  • Как выявить дополнительные резервы для продвижения в поиске
  • Обратные ссылки на сайт: чем они полезны в SEO продвижении?
  • Оптимизация изображений — обзор 8 онлайн сервисов
  • Плавная прокрутка страницы сайта
  • Мета-теги для сайта. Мета-тег DESCRIPTION и KEYWORDS
  • Лучшие движки для сайтов: преимущества и недостатки
  • Парсер контента от Datacol
Войти
Забыли? Регистрация
HashFlare
  • Обратная связь
  • Карта сайта
При копировании материалов ссылка на источник Artinblog.ru обязательна. Copyright © 2012 - 2015