Как создать фон для своего блога? Не знаешь? Тогда читай!

фон для сайта

Всем привет.
Хотите создать фон для сайта? И неважно для своего сайта или для сайта знакомого. Главное это создать, и создать самостоятельно.

Сегодня я научу вас создавать фоны для своих сайтов и блогов, мы будем рассматривать вариант создания фона для сайта развлекательной тематики.
Допустим наш фон, будет для сайта который посвящён различным интернет-комиксам, таким как «блеать», «fuuu» и т.д.
Мы будем создавать фон, который будет иметь свойство повторяться, тоесть имея всего одну картинку, мы сможем заполнить ею всё пространство нашего сайта.

Посмотреть пример повторяющегося фона вы можете на моём блоге, я использую для фона всего одно фоновое изображение, вот оно:

мой фон

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

Для фона я выбрал вот такие вот составляющие (не забывайте, что я создаю фон для сайта развлекательной тематики):

фон 1

фон 2

фон 3

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

фон

Я работал с картинками при помощи программы Photoshop, если вы не можете сделать себе подобный фон из-за того что не умеете работать с данной программой рекомендую вам посетить сайт Photoshop-Master.ru, на этом сайте вас научат работать в Photoshop. Причём вы сможете каждый день учиться чему-нибудь новому, поднимать свой уровень и в итоге сказать:
«Я Photoshop-мастер!».

Обратите внимание, что границы стоят не везде, это сделано для того, чтобы при стыке картинок границы бы не наскакивали, а наоборот дополняли друг друга.
Кстати эта картинка весит всего 26 кб, к чему я это?

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

Петя платит за Интернет 1000 рублей в месяц, у него очень скоростной Интернет и даже самые «тяжёлые» сайты грузятся у него за пару секунд

Вася платит за Интернет 100 рублей в месяц и загрузка простых – не «тяжёлых» сайтов занимает у него 30-50 секунд, а загрузка «тяжёлых» длиться более 5 минут. Как вы думаете, будет ли Вася ждать 5 минут, чтобы прочитать статью о носках?
А ведь таких как Вася в Интернете огромное множество!
Поэтому именно о пользователях с медленным Интернетом мы заботимся, когда создаём повторяющиеся фоны. Ведь для того чтобы загрузить повторяющийся фон нужно загрузить только одну картинку, которая является главной составляющей!
И Вася доволен и ваша посещаемость не страдает!

Теперь о моём фоне.
Посмотреть демонстрацию этого фона вы можете, кликнув по данной картинке:

смотреть демо

Теперь я коротко расскажу о том, как вставить данный фон к себе на сайт, в css файле вашего сайта или css файле шаблона WordPress, вы должны прописать следующее:

body{
background:#f4e6c4 url(адресс фоновой картинки);
}

Что такое css?
Не знаете?
Тогда обязательно ознакомьтесь:

Что такое css?

Ну а сам фон вставляется на нужную страницу при помощи команд:


  
  

Как видите всё довольно просто.
Именно так и создаются любые фоны для сайтов. Но разуметься не на каждом фоне есть какие то рисунки и изображения, например у меня фон просто серый, у кого то просто чёрный, а у кого-то просто белый. Главное чтобы фон сильно не раздражал глаза и нравился самому администратору.

Что значит не раздражать глаз?
Что ж, всё очень просто!
Нажмите на эту ссылку и посмотрите пример неправильного фона:

Ссылка

Видите?
Как вы думаете, если на вашем сайте будет такой фон, ваши читатели смогут спокойно читать ваши статьи?
Данный фон создан только при помощи html цветов и картинок в нём не используется, разуметься я не хочу сказать о том, что все html цвета плохие, нет!
Но среди них попадаются очень яркие или очень тёмные экземпляры, которые люди, по каким то причинам ставят на свои блоги, а потом удивляются:
«А почему посещаемость то не растёт?».

Чтобы не допускать ошибок в выборе html цвета советую вам обратиться за помощью к знаменитому веб-дизайнеру Артемию Лебедеву, который специально создал список «безопасных» html цветов.
Посмотреть этот список вы сможете, пройдя по ссылке:

Таблица «безопасных» цветов

Запомните!
Вы создаёте свой блог для себя и разуметься, что дизайн должен нравиться вам, но всё таки не забывайте ставить себя на место вашего читателя который впервые зашёл на ваш блог.
И подумайте:
- понравиться ли ему здесь?
- удобно ли ему будет читать?
- не режет ли глаза ваш фон?
- не отвлекает ли ваш фон читателя от чтения?

Я показал вам, как создаются самые простые фоны, но если вы умеете работать с Photoshop или другими подобными программами, то вы с лёгкостью сможете «забабахать» что-нибудь этакое :) .
Хочу показать вам пару достаточно красивых, фоновых картинок, которые так же имеют свойство повторяться:

Фон с блога Netbloga.ru, красивый и оригинальный фон.

фон

Фон с блога B-red.ru, тоже очень оригинальный и приятный глазу фон.

фон

Создать что-нибудь подобное для своего проекта не так уж сложно, главное это желание, а всё остальное приложиться!
Ну пожалуй с уроками на сегодня всё, теперь хочу рассказать вам несколько новостей:

1) Выиграл 5$ в конкурсе от Арчила, нужно было сделать ретвит статьи, а потом программа случайно выбрала 3 победителей, среди которых оказался и ваш покорный слуга.

2) Так и не смог заполнить боковую колонку, время идёт, а она всё пустует…

3) Потихонечку пытаюсь увеличить посещаемость, но как-то с этим пока что плоховато…

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

Раз уж статья у нас про дизайн, то и видео должно быть соответствующее, итак представляю вашему вниманию «Дизайн обоев», от «Comedy Club».

Как создать фон для своего блога? Не знаешь? Тогда читай!: 59 комментариев

  1. Антон

    Вспомнил как менять фон :arrow: Зделал фон более осенним)) Жалко только что кэш при смене фона нужно чистить :-x

  2. Роби

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

    1. Maxim

      А вот на некоторых сайтах бывают ужасные фоны в виде фотографии! Ужас как долго грузятся!!! :(

  3. alextm594

    Нашел этот сайт, благодаря этой статье. Спасибо за сайт, за статью, +1 подписчик.

  4. Александра

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

  5. Дмитрий Фалелеев

    Егор было бы не плохо если бы ты еще написал про то как делать начальное положение фонового рисунка. Например как тут. Для новичков вроде меня было бы очень полезно разжеванные статьи почитать :?:

    1. Мудрый Кот Автор записи

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

  6. Александра

    Кстати, я тут хотела поменять фон и столкнулась с проблемой: а сколько должен весить этот повторяющийся рисунок, чтобы не вредить скорости загрузки? 8-O

      1. Александра

        а порога какого-нибудь не существует? например ментше 20 кб или?

  7. Уведомление: Гостевой пост: “Раздражающий дизайн веб-сайта” | DesignFire

  8. NMitra

    Если говорить о сайтах, то можно вспомнить о таких значениях background, как fixed (пример, http://www.madonna.com/) и scroll (http://www.shakira.com/). Странно, что они не применяют и background-size: cover; .

  9. seoeffector

    Что бы не париться вручную есть множество онлайн сервисов для подбора фона.

  10. Уведомление: Основы зарабатывания денег или формулы к прибыли!

  11. sdlprofi

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

    1. Мудрый Кот Автор записи

      А где именно анимашка?
      Если про котика справа, то это как бэ кнопка наверх, сделал div класс и вставил в подвал

  12. Уведомление: Как раскрутить блог? Раскрыт главный секрет - спешите узнать!

  13. Уведомление: В Facebook вводится новый интерфейс брендовых страниц « RCE.SU

  14. АлеКсандра Д. - Tyrise

    Котик, а помнишь ты обещал подборку фонов? Я все жду ее.
    Пропустила чтоль?

    1. Мудрый Кот Автор записи

      У меня пока, что с этим задержки, архив был — готовый, но удалился засранец поэтому скорее всего ближе к лету :cry:

      1. АлеКсандра Д. - Tyrise

        оо( пичалька, пичалька((
        а там какие-нибудь фото-театро-кино фоны будут?
        Я, конечно, понимаю всю узкость и неликвидность, но.. вдруг?).. :)

  15. SEOpmr

    Егор давай помогу если что то надо — что б читатели получили что ждут! Ну в общем ты знаешь как мне написать :arrow:

      1. АлеКсандра Д. - Tyrise

        ххх. Так я тоже могу помочь. Сам себе не поможешь, как говориться :-x

  16. Виктория

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

    1. SEOpmr

      :oops: может лучше оригинальную какую то а не ту что на половине всех твиттерах?

  17. madden 09 images

    ахахахаххх вот это прикольно.. поржал на славу

    P.S. Please review our icons for Windows and windows13icons.

  18. icon package

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

    P.S. Please review 24×24 Free Toolbar Icons from gentlefacecom88

  19. icon collection

    Извиняюсь, что ничем не могу помочь. Надеюсь, Вам здесь помогут. Не отчаивайтесь.

    P.S. Please review iPhone Style Toolbar Ikons from popavidi3nr

  20. VagpagSeary

    Понравилась статья про [url=http://albatrahotel.com/index.php?page=shop.product_details&flypage=flypage.tpl&product_id=207&category_id=14&option=com_virtuemart&Itemid=8]Кофеварка Kenwood CM 170[/url] многим друзьям также приглянулся эта статья

  21. Normiodinny

    Представляем вашему вниманию новый сайт [url=http://sozdaysayt.ru/]контент для сайта[/url] Заходите и тестируйте.

  22. unfomaimmorgo

    Хотя моя лучшая тема [url=http://medvrach.com/intellekt-i-myshlenie/]взаимосвязь мышления и интеллекта[/url]. Если уж планируете пообщаться — терпите

  23. DyeddyObesk

    Нравится веселится на пати, находить [url=http://www.geprint.ru/films/fantesi/10906-robotropolis-robotropolis-2011dvdrip700mb.html]роботрополис онлайн бесплатно[/url]

  24. clomycleDooli

    Мне еще довольно приглянулась публикация [url=http://www.cs-pc.ru/load/vse_dlja_cs_1_6/patchi_dlja_cs_1_6/skachat_patch_pravilnogo_otobrazhenija_russkogo_teksta_v_cs_1_6/4-1-0-884]counter strike source патч v69[/url]

  25. Gliplepam

    Просто сейчас занимаюсь наполнением новостного блога [url=http://exeportal.ru/filmi/6443-prevratnosti-lyubvi-playing-b.html]дамочка или превратности любви[/url]

  26. accoryDakkker

    Мне также довольно нравится статья [url=http://getbonuss.info/pay.php?agent=48562&id_d=1091478]Самоучитель по HTML — HTML в примерах купить[/url]

  27. VagpagSeary

    Вообще-то моя самая лучшая тема [url=http://skripts.org.ua/pay.php?agent=48562&id_d=631011]icq на iPhone (BeejiveIM) продажа[/url]

  28. Normiodinny

    Очень нравится портал где есь [url=http://cityformat.net/index.php?page=shop.product_details&flypage=flypage.tpl&product_id=347&category_id=9&option=com_virtuemart&Itemid=8]Навигатор Navman S100[/url]

  29. unfomaimmorgo

    Еще планирую просмотреть [url=http://www.arealmusic.com/igry/8047-spellforce-2-shadow-wars-2006rusrepack-by-sxsxl.html]spellforce 2 прохождение[/url], если кто может сказать что-либо об этом, ответьте мне

  30. DyeddyObesk

    Очень понравился портал на котором нашла [url=http://shop.mobildar.org/buy.php?tovid=22536]Скальпер Another_9.1 Бескомпромиссная прибыль[/url]

  31. clomycleDooli

    Многим пользователям советую посмотреть [url=http://dollartree.info/node/9445]Супервайзер торговых представителей: поиск вакансии[/url]

  32. Gliplepam

    Многим посетителям советую изучить [url=http://pmp-com.at.ua/news/socialnaja_set_the_social_network_2010_dvdrip/2010-11-19-2836]Социальная сеть[/url]

  33. accoryDakkker

    Мне очень понравился сайт где нашла [url=http://antirip.ws/main/5453-mezhdu-yunostyu-i-zrelostyu.html]смотреть Между юностью и зрелостью[/url]

  34. VagpagSeary

    Мне еще вполне стала интерестна публикация [url=http://super.real-warezok.ru/video/114-gde-to-tam-elsewhere-2009-dvdrip.html]Где-то там в хорошем качестве[/url]

  35. unfomaimmorgo

    Очень приглянулся сайт на котором можно найти [url=http://www.4youpc.ru/filmy/fantastika/7679-chuzhoy-protiv-nindzya-alien-vs-ninja-2010dvdrip.html]фильм ниндзя против чужого[/url]

  36. Уведомление: Уходящий 2011 год в цифрах и что ждет нас в 2012 году на WPnew.ru?

Добавить комментарий для Maxim Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>