Создаем уникальную шапку для блога

четверг, 18 февраля 2010 г.

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

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

И попадаем в следующее меню:

В этом окне вы можете выбрать картинку с жесткого диска и загрузить ее выбрав параметр сжать до размеров экрана. Однако ширина картинки останется неизменной , да и не все картинки подойдут по длине и ширине,Ю ведь в каждом шаблоне свои размеры шапки.

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

#header-wrapper {
height:138px;
margin:0 auto;
width:950px;
background:#FF0000;
}

Где красные строчки указывают высоту и длину шапки вашего блога соответственно. Эти параметры желательно запомнить или записать далее они нам пригодятся.

Владея выше перечисленными сведениями можно перейти непосредственно к созданию шапки вашего блога. Для этого я предлагаю использовать бесплатный сервис Xheader, который можно скачать здесь.

В архиве находятся два файла первый Xheader setup – установочный файл программы, второй Xheader Bonus – бонусная часть с 500 бесплатных шапок для блоггер.

Итак скачав и установив эту программу мы можем перейти к созданию шапки блога. Запустив программу вы увидите следующее:

В левом верхнем углу нажмите кнопку NEW для создания уникальной шапки вашего блога. Перед вами откроется окно в котором можно выбрать следующие варианты:

1. Load from Template library – что можно использовать если вы установили бонусные 500 вариантов шапок для блоггер, Советую установить так как там есть более 10 тематик, музыка, бизнес, и тд.. с очень впечатляющими вариациями.

2.Create a blank header – создать чистую шапку.

3. Load XHF – загрузить ранее сохраненные вами недоработанные файлы.

4. Load image from hard disk – возможно наиболее важное так как каждому из нас хочется использовать свои картинки  и фотографии в оформлении блога.

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

Итак выбираем 4 вариант - загрузку с жесткого диска:

Как мы видим я выбрал картинку которая мне понравилась. Изначально она практически подходила по размерам к шапке моего блога, однако как я выяснил раньше ширина моей картинки 950 mpx, а ширина картинки которую я загрузил 900 mpx, для того чтобы изменить длину мы заходим в верхнем меню в Options/ Resize header, и открывается следующее меню:

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

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

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

Вот так красиво получилось.

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

Сразу же хочу вкратце рассказать как работать с ним:

После установки, открываем необходимую вам картинку, в файл/открыть вот так:

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

Во вкладке Изображение/Размер полотна мы можем обрезать необходимый нам участок, вот так:

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

В следующих статьях расскажу как делать тоже самое с нижней частью вашего блога. Если что-то не понятно, то пишите в комментариях.

Похожие статьи