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

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

фон для сайта

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

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

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

мой фон

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

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

фон 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?

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

<body>
</body>

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

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

Ссылка

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

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

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

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

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

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

фон

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

фон

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

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

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

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

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

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

Подпишись и получай новые записи первым!

Подписаться вы можете с помощью

или

, но самый удобный способ это:

Сомневаетесь? Тогда прочитайте: почему необходимо стать подписчиком

Ещё по теме:
Добавляем в WordPress новые варианты Gravatar’ов, а затем выводим их в комментариях
Эффект прозрачности при наведении на ссылку и наоборот
Изменяем цвет выделения текста с помощью небольшого CSS кода
Навигация на блоге, часть вторая – пагинатор
Навигация на блоге, часть первая – список страниц

Информация о статье:
Опубликовано: 13 октября 2011, в рубрику Дизайн.
Теги: блог , как , сайт , фон.

Поделись статьёй с друзьями:

Оставляя комментарий - вы автоматически принимаете участие в конкурсе комментаторов, и имеете возможность выиграть очень, классные призы!
I место - Сквозняк!
II место - Заметка!
III место - 200 Рублей!
Подробнее о конкурсе тут.

Оставь коммент, не будь бякой!

Антон

15.10.2011

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

[Ответить]
Мудрый Кот

15.10.2011

Классный фон у тебя, мне нравиться

[Ответить]
Валерий

15.10.2011

Нормальный у тебя фон, когда читаешь глаза не напрягает

[Ответить]
Роби

16.10.2011

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

[Ответить]
Мудрый Кот

17.10.2011

Спасибо, старался

[Ответить]
Марина Лазарева

31.12.2011

Симпатично! Надо будет попробовать !

[Ответить]
alextm594

05.01.2012

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

[Ответить]
Александра

07.01.2012

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

[Ответить]
Дмитрий Фалелеев

09.01.2012

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

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

[Ответить]
Александра

09.01.2012

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

[Ответить]
Мудрый Кот ответил(а):
особых ограничений нет, но чем меньше тем лучше

[Ответить]
Александра ответил(а):
а порога какого-нибудь не существует? например ментше 20 кб или?

[Ответить]
Мудрый Кот ответил(а):
нет, порога нет

[Ответить]
NMitra

11.01.2012

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

[Ответить]
seoeffector

11.01.2012

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

[Ответить]