Получайте секретные материалы проекта на свой E-Mail:

Как подобрать и установить качественный фон для сайта в два клика?

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

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

Сразу хочется отметить, что я не профессиональный веб-дизайнер, не маркетолог и не психолог, чтобы уметь закрытыми глазами определить подойдет ли данный цвет к остальным элементам сайта или нет, но те вещи, о которых я сейчас буду говорить на самом деле банальны и их должен знать каждый! Почему? Дело в том, что дизайн сайта — это одно из главных составляющих, на которое обращает посетитель при первом же визите! Как говорят: встречают по одежке, а провожают по уму! Ну что ж приступим...

Как подобрать фон для сайта?

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

Фон для сайта

Обязательно прочитайте текст на данном изображении, и сделайте выводы!

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

  • http://colorschemedesigner.com/
  • http://www.colorschemer.com/online.html

Эти сервисы позволяют очень качественно подобрать фон под цветовую гамму Вашего Интернет-ресурса. Но не забывайте о том, что эти сервисы по сути роботы, и не стоит останавливаться лишь на том, что они предложат! Вы сами можете поэкспериментировать и посмотреть какой цвет все же лучше смотрится, но не забывайте о следующем понятии «Черным по белому», как ни крути но в большинстве случаев черные буквы лучше всего смотрятся на белом фоне!

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

Где взять фоновые текстуры?

Здесь так же существует множество различных способов, но для себя и своих проектов я выбрал лишь несколько качественных сервисов:

1. Subtle Patterns - данный сайт просто супер! Здесь хранятся тысячи красивых и качественных текстур, что позволяет каждому найти то, что ему по вкусу;

SubtlePatterns

2. BGpatterns - тоже отличное решение. Это сервис представляет из себя конструктор фона. Ваша задача просто выбрать цвет (об этом чуть выше) и подобрать подходящую текстуру;

BgPatterns 3. ava7 patterns - здесь так же множество различных текстур для фона, которые отсортированы по цвету;

ava7patterns

Вот именно этими тремя сервисами я пользуюсь уже несколько месяцев, и ни разу не разочаровался!

Как установить фон?

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

или Административная панель --> Внешний вид --> Фон

Смена фона в WordPress

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

В переходите в файл, отвечающий за стили. В WordPress это файл style.css, об этом мы уже говорили здесь. Но перед тем, как будем редактировать сделайте резервную копию! Кстати, скоро по этой теме будет статья — советую подписаться на обновления. Так вот, открываем файл со стилями и с помощью поиска находим слово html { и ниже прописываем background: url (путь до изображения); то есть, например, у Вас было:

1
2
3
4
html {
width: 100%;
height: 100%;
}

а после изменений становится:

1
2
3
4
5
html {
background: url(//seokos.ru/wp-content/themes/seokos/images/html.jpg);
width: 100%;
height: 100%;
}

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

Ну вот и все! Есть какие-то вопросы? Если да, то пишите в комментариях — я с удовольствием отвечу!

А теперь давайте наградим победителей конкурса комментаторов, хоть и с запозданием.

1 место — Закари (oribal.ru) — 40 комментариев — 250 рублей

2 место — Степан (raskrutkabloga.ru) — 32 комментария — 150 рублей

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

На этом у меня все, мы успешно подобрали фон для сайта, всем большое спасибо за внимание.

Желаю удачи и до встречи в следующей статье.

С уважением, Константин Белан
автор блога SeoKos.RU!

Белан Константин Сергеевич

С уважением, Константин Белан.

Рабочая 634570 Россия, Томская обл., г. Томск, +7 952 160 36 17
Добавить пост в избранныеПерейти к списку →
Сделайте мне приятно - нажмите на любую из кнопок:
Подпишитесь на рассылку блога и получайте новые статьи на свою почту
Количество комментариев к данной статье: 35
  1. Ответить

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

    • Да, к сожалению, мало кто говорит об этом...

      Но почему-то я так устроен, что не могу если что-то сделано некачественно! Я в обязательном порядке буду менять до тех пор, пока не будет стильно, качественно и красиво 🙂

  2. Привет!)

    Я тоже ни у кого не видел статьи о том, как поменять фон. Оказывается, все так просто.

    Константин, давно не было новых статей!)

  3. Спасибо за конкурс! Кошелек выслал 🙂

    На счет фона, не знал, что в обновлении Ворд пресса появилась такая возможность. Буду пробовать.

  4. Ух ты, очень полезные сервисы, как оказалось, спасибо =)

  5. Ответить

    Костя, друзья — с праздником Вас, с днем блоггера !

    Азик, спасибо за напоминание!

    На просторах интернета

    Найдем много мы советов,

    На вопросы все советы,

    Спасибо блогерам за этом!

    Друг дорогой мой, блогер,

    Забудь печали и тревоги.

    В день этот хочу я пожелать,

    Побольше счастья, чтоб не унывать!

    • Привет, Саш! Большое спасибо, и я тебя поздравляю с таким чудесным праздником 🙂

      • Ответить

        Пожалуйста ))

        Если бы не посетители моего блога — наверное и сам бы не вспомнил ))

        • А я тоже как-то совсем забыл... Спасибо твоим посетителям 🙂

        • То есть мне))

          Это я напомнил)

  6. Ответить

    Собственно вопрос — картинка в виде фона не замедляет загрузку страничек? Просто вижу у всех продвинутых блогах стараются не использовать фоновое изображение (да и у вас нету его)...

    • На большинстве продвинутых блогах сами шаблоны собраны из картинок и загрузка медленная

      • Ответить

        Я так понял Александр, что все же я верно понимаю — лучше фон все же не делать из картинок — а использовать возможности CSS3.

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

  7. Спасибо за статью. Постараюсь поменять фон. Раньше менял цвет фона по HTML-цветам, но красиво не было, когда фон из узоров , тогда лучше...

    • Согласен, но вот только главное чтобы не повлияло на скорость загрузки блога

  8. Отличная статья, у меня фон на блоге просто прописан кодом в html смотрится не очень. Попробую приобразить

  9. Ответить

    Благодарю за полезную статью. Добавил выбранный сервис в закладки.

  10. Ответить

    У меня В Вордпресс почему-то нет Внешний вид — Фон, да и стили CSS я сама вряд ли смогу поменять. Я как-то хотела сделать фон, а потом прошло время — я привыкла и полюбила свой блог таким 🙂 Поcмотрите, как со стороны кажется, стоит ли делать фон?

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

  11. Ответить

    Вопрос изменения фонадля меня весьма актуален. Спасибо за статью, обязательно воспользуюсь рекомендациями.

  12. Ответить

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

  13. Ответить

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

    Ведь всё так чётко. понятно и детально расписано!

    Сенк ю, шеф!

  14. Ответить

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

  15. Ответить

    Кстати, рекламировать в подвале Партнер Профит бессмысленно, его ведь закрывают.

  16. Ответить

    Очень интересно, как и многие даже здесь не знала о таком! Спасибо!

  17. Ответить

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

  18. Ответить

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

  19. Ответить

    Здравствуйте! Спасибо за помощь) наконец то нашла нужную информацию. теперь знаю, как подобрать подходящий фон для сайта!! Желаю успехов!

  20. Ответить

    Здравствуйте! Спасибо за помощь) теперь знаю, как подобрать нужный фон! Желаю Вам успехов!

  21. Ответить

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

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

  23. Ответить

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

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

  24. Ответить

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

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

  25. привет у меня нет инструмента фона на вордпресс как ты показал поставил коды нечего не изменился