Создание полосатого фона для сайта

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

В сети есть около десятка сервисов (а может и больше), которые помогут вам сгенерировать правильный фон, задавая лишь некоторые его параметры — цвет, узор и т.п. Если у вас нет желания вникать во все азы Photoshop`а — воспользуйтесь одним из сайтов ниже.

Stripe Generator

Stripe Generator - генераток фона для сайта

Дословно название переводится как «генератор полос» — в принципе, его оправдывает на все 100%. Вы можете выбрать расположение полос, расстояние между ними, их ширину, цвет, наличие тени — в общем, практически все:

сервис генератор background

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

StripeMania

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

фон background для сайта / блога

Tartanmaker

Этот сервис имеет, пожалуй, самый оригинальный дизайн. Генерирует достаточно необычные узоры:

красивый фон для сайта

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

P.S. Если у вы ведете тематический блог о дизайне — предлагаю обменяться постовыми. Для иных тематик предлагаю купить ссылку за $3 — скоро ап и показатели как раз подрастут:)

Burn Commercial — реклама энергетического напитка на грани фола.

Понравился пост? Подпишись на обновления блога по Дизайн Мания RSSRSS, Дизайн Мания RSSEmail или твиттерtwitter!
А еще можно опубликовать ссылку на статью в своем блоге:
Опубликовать в twitter.com        

Комментариев - 15 для поста Создание полосатого фона для сайта
  1. ]]> WebMast ]]> (Октябрь 28, 2008)

    Из первых дувух я бы не выбрал лучшего. По крайней мере сразу..

  2. ]]> Tod ]]> (Октябрь 28, 2008)

    WebMast, у них и возможности слегка отличаются.

  3. ]]> Anton ]]> (Ноябрь 1, 2008)

    Полезные сервисы

  4. ]]> KH93b ]]> (Июль 6, 2009)

    Спасибо! Искал то, что нужно было. Сэкономил немного времени.

  5. ]]> Лаборант ]]> (Август 13, 2009)

    Второй сервис как мне кажется намного лучше.
    Хотя на вкус и на цвет все фломастеры разные))))

  6. ]]> TOE-MAY-TOE ]]> (Январь 23, 2010)

    большое спасибо!!! отличные сервисы долго искал чтото подобное

  7. ]]> kr1z ]]> (Февраль 9, 2010)

    Хорошая подборка.
    Можно еще к этому списку добавить — http://bgpatterns.com/

  8. ]]> Владимир ]]> (Август 29, 2010)

    ОГОГО! Я чуть не кончил от результатов их работы, спасибо!

  9. ]]> Юрий ]]> (Октябрь 11, 2010)

    Все это делается в фотошопе Экшенами за две минуты.

  10. ]]> Пирожок с тестом ]]> (Декабрь 15, 2010)

    2 Юрий. Не совсем обязательно овладевать фотошопом, чтоб склепать паттерн на фон сайта))

  11. ]]> Григорий ]]> (Август 16, 2012)

    То что нужно! Спасибо большое!

  12. ]]> Спасибо ]]> (Сентябрь 17, 2012)

    Спасибо супер! То что искал.

  13. ]]> Victoribu ]]> (Ноябрь 28, 2012)

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

  14. ]]> Rimond ]]> (Апрель 9, 2013)

    Спасибо! Действительно полезные сервисы.
    А тому кто пишет «Все это делается в фотошопе Экшенами за две минуты» хочется дать пинка! Зачем ковыряться 2 и более минуты в фотошопе если через вышеописанные сервисы это можно сделать за полминуты. К тому же далеко не все знают фотошоп и не всем нравится в нем ковыряться. Например я стараюсь им пользоваться только в самых крайних случаях, когда без него никак.

  15. ]]> Оксана ]]> (Май 7, 2014)

    Хорошие сервисы. Можно и фотошоп знать, и иногда побаловаться «автоматизацией». Почему бы и нет?

Оставить комментарий
для статьи Создание полосатого фона для сайта