Бесплатные генераторы бесшовных фонов (паттернов) для Ваших сайтов

Разместил / Просмотров: 18 041 / комментариев 7

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

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

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

И так, начнем.

Мы будем пользоваться сайтом www.stripegenerator.com.

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

Вот как выглядит сам генератор:

Как видите ничего сложного и всё логически понятно. Но всё равно хотелось бы дать понятия всем разделам:

Функции генератора

  • stripe size — это ширина самой полоски, которая в данном случае красная;
  • spacing — расстояние между красными полосками;
  • stripe color(s) — цвет полоски. Как видите по умолчанию стоит красный цвет, который можно изменить. А также добавить ещё несколько цветов по душе.
  • background style — стиль фона паттерна. На выбор есть два градиента.
  • shadow — классная функция, с помощью которой настраивается тень от полоски. Этот параметр придаёт объёмности паттерну.
  • background color(s) — с помощью этой функции Вы сможете настроить цвет фон. По умолчанию стоит белый.
  • stripe orientation — стиль и наклон полоски. Выбор не большой, но этого вполне хватает.

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

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

Вот в принципе и всё, что хотелось сказать о этом генераторе. Всё просто и качественно.

Ну а теперь представляю Вам ещё несколько простых генераторов бесшовных фонов. Поехали.

Генераторы бесшовных фонов

www.tartanmaker.com

Не плохой и простой генератор, который делает клеточные фоны. Так же есть несколько настроек, которые помогут сделать Вам паттерн.

www.bgpatterns.com

Замечательный генератор паттернов. Есть много настроек, а также есть несколько изображений, которые Вы сможете использовать. Чтобы убрать изображение, прозрачность нужно поставить на 0.

www.stripemania.com

Ещё один отличный генератор полосатых фонов

bgmaker.ventdaval.com

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

lab.rails2u.com

Генератор полосатых фонов

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

  • Классно, спасибо!
    После первого генератора только успела подумать о клеточках — и опа! Следующий про клеточки! Ты мысли читаешь?

  • Александр, спасибо за подборку!
    А есть ли генератор для бесшовного фона с градиентной заливкой? Или надо делать самой в фотошоп?

  • :-) Наталья, наверное совпадение, а может и новые возможности открыл :-)

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

  • Спасибо! Т.е. я в фотошопе делаю фон сайта с градиентной заливкой сверху вниз и в консоли -внешний вид-фон загружаю ?

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

  • Должно так примерно выглядеть
    body {

    background:#f0f0f0 url(ссылка на изображение) repeat-x;

    }