Skip to content
 

Как создать шапку для сайта.

shapka_dlya_saita

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

Скажите честно, как часто вы меняете шапку своего блога или сайта? Это же такая головная боль! – скажете вы.  Позвольте с вами не согласиться, с программой   XHeader – можно менять шапку ежедневно! При этом вы затратите всего лишь один час своего времени, сделав 10 шапок, и загрузив их на сайт в папку, где находится ваша шапка блога.  А потом, зайдя в панель управления сайтом, можно с лёгкостью менять шапки, придавая блогу неповторимость и шарм.

Быстрое создание шапки для сайта или блога.

Скачиваем бесплатную версию программы  XHeader, распаковываем и запускаем. Ссылка на программу в конце статьи. Откроется окно, с предложением купить полную версию программы за 49$. Жмём – «NoThanks».  Открывается такое окно, жмём на верхней панели – New.

shapka_dlya_saita

Открывается следующее окно, нажимаем «LoadformTemplateLibrary».

shapka_dlya_saita

На следующей панели можно выбирать шаблоны. В левой части панели перечень тем. Шаблонов любой тематики очень много. Кулинария, Красота, Бизнес, Спорт, Путешествия, Животные, Детские и ещё множество других тем. Нажимаем на любую тему, и в правом окне просматриваем шаблоны.  Нажимаем на понравившийся шаблон – ОК.

shapka_dlya_saita

Открывается окно редактора. Здесь можно добавлять надпись, картинки, применять различные эффекты. Давайте рассмотрим панель:

  1. перемещение выделенного объекта
  2. добавление  текста
  3. добавление линии
  4. рамка
  5. цветной квадрат
  6. круг
  7. цветной круг
  8. добавление изображения
  9. Последние две кнопки отвечают за перемещение слоёв

О перемещении слоёв расскажу подробнее. Например, вы написали текст, а затем решили сделать этот текст на каком либо фоне.  Берёте цветной круг, или квадрат, и размещаете его поверх слов, а затем при помощи последней кнопки перемещаете выделенный фон под слова. Или, если выделены слова, то предпоследней кнопкой перемещаете их поверх слоя.

shapka_dlya_saita

Написав текст,  выбираете размер, шрифт, щёлкаете по шаблону, и устанавливаете текст в нужном месте.  Ниже, под редактором, можно придать эффект тексту. В колонке справа, поставив галочку (Addshadow),  выбираете тень для текста.  Верхний ползунок отвечает за перемещение  тени по горизонтали, можно,  двигая ползунок, сместить тень вправо или влево.  Нижний ползунок отвечает за смещение тени по вертикали,  вверх или вниз. Ещё ниже в выпадающем окне вы можете выбрать резкость тени. Самое верхнее значение  в списке – резкая тень, каждое последующее значение будет делать тень более размытой.

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

Сохраняете шапку для блога в формате JPEG, или  PNG и загружайте на хостинг. В программе предусмотрен выбор сохранения шапки для сайта в различном качестве и весе. Выбирайте качество не более 80%. Картинка не пострадает, качество изображения отличное, и вес шапки для сайта небольшой.  Во многих темах можно загружать шапку сайта из административной панели блога и там же выбирать, какую шапку сделать видимой. Но если в вашей теме нет такой функции, то не расстраивайтесь. Просмотрите,  в какой папке хранится изображение  шапки блога, и замените его,  на новое изображение.

Если по какой то причине, вы не успели закончить создание шапки сайта, и хотите позже доработать её, то нужно сохранить в формате — XHF, а потом, открыв недоделанную картинку — «Open XHF», закончить  работу.

Отдельно хочу затронуть вопрос о размерах шапки. В программе все шапки создаются одного размера: 950 пикселей по ширине, и 175 пикселей по высоте. Если на вашем сайте нужна шапка другого размера, то открываем картинку в фотошоп.  Нажимаем «Изображение» — «Размер изображения».  В открывшемся окне ставим необходимое значение ширины, а высота поменяется автоматически, жмём «ОК».  Сохраняем измененное изображение. Всё создание шапки для сайта успешно завершилось!

Вот вроде бы и всё, что я хотела рассказать вам о создании шапки для сайта. Всего в статье описать не возможно, но зная основные функции панели в программе XHeader, вы можете создавать самостоятельно неповторимые по красоте и уникальности шапки для сайта. А можете применить эту программу для создания уникальных баннеров в формате JPEG, или  PNG.

Сняла процесс создания шапки для блога на видео. Если из описания вам что то показалось непонятным, то посмотрите видео ролик, и всё поймёте.  Простите за голос, я простыла.  Приятного просмотра!

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

Скачать программу можно здесь — https://www.dropbox.com/s/kczbhaa6q95gzvz/xheadersetup1215.exe

Или здесь — https://cloud.mail.ru/public/97e1fb7e1e4d/xheadersetup1215.exe 

С любовью, ваша Ирина Баталова.

Я хочу быть в курсе событий на сайте!

Подпишитесь прямо сейчас, и получайте обновления на свой E-Mail:

Ваш E-Mail в безопасности

Google

92 комментария

  1. У вас в настройках темы наверно можно легко менять темы?!) Во многих темах такой функции нет!)
    У меня например нет!) Но статья полезная, спасибо!
    Надо попробовать заработать на шапках!)

    • @Азик, у меня предусмотрена функция замены шапки. А для тех, у кого нет такой возможности, нужно шапку закачать на хостинг в папку, где хранятся шапки для блога, и заменить существующую на новую. Это не сложно, у меня тоже были темы, в которых я меняла шапки подобным образом. Для того, что бы заменить существующую шапку на новую, нужно узнать: точный размер шапки, точное название шапки, папку в которой она храниться. Сделать новую шапку такого размера и с таким же названием, и закинуть новую шапку в папку со старой шапкой, с заменой существующего файла. Вот и всё, и у вас будет красоваться новая шапка! Дело на полчаса!

      • @Ирина, Дело на полчаса?) Смешно!)
        Я в последнее время очень стал ценить время. И время на то, что каждый раз, когда буду менять шапку, можно потратить на что-то более полезное. Но это тем, кто часто меняет шапки.
        Вот я думаю, а шапки не грузят блог? Ну, имеются в виду, шапки в виде картинки))

        • Смотря какой вес у вашей картинки. Ведь картинка — картинке рознь. Вот такая как у меня — не грузит, а такая как у А.Борисова — грузит. Но ему это не страшно, у него места много на отдельном сервере. 😉 А полчаса я имела в виду для первого раза, и потом, не будешь же ты в самом деле менять дизайн еженедельно. А если возникнет необходимость сменить шапку сайта, то можно выделить на это полчаса.

      • С трудом можно поверить, что справлюсь за пол часа. Наверное, перед этим надо не раз потренироваться и освоить все функции програмы. Тогда может и за пол часа справлюсь.

  2. Как много сейчас различных сервисов и программ появилось и появляется, я даже читать о них не успеваю, а Ирина еще и изучает их подробно 😉 Спасибо за статью.
    Я пока свою тему трогать ну совсем не желаю, так долго выбирала ее, возилась — то, одна не подходила, то вторая не нравилась, поэтому выбрала, поставила и трогать ничего не хочу. Единственное, что не устраивает — это фон, так и тот подбирать пока лень.
    А видео сравнить не получилось, так как в первом практически не было звука, Ирина, проверь или все нормально. Зато про второе могу сказать — очень понравилось: все понятно, хоть и без слов, красиво и динамично. Действительно красивые шапки в этой программе 🙂

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

    • Юрий, без знаний трудно что либо сделать самостоятельно. А когда знаешь как — то всё легко и просто. Сейчас бы вы с лёгкостью сделали шапку для блога самостоятельно.

      • @Ирина, Ну, как с вами не согласится, ведь когда начинаешь что-то делать, то знания приходят во время процесса. Я имею ввиду блоггинг, много чего не знал, а затем создал блог и уже в процессе много чего понял.

        • Верно, Юрий, все мы прошли путь от чайника до профи. Без этого не бывает, и здорово, что в блоггинге все помогают друг другу, поддерживают и объясняют. Сначала учимся мы, потом учим других. 😉

  4. Согласно с Юрием. Я промучилась с шапкой несколько дней, при том,что хотелось сделать красиво, а знаний Фотошопа нет, а потом поручила дизайнеру. Сейчас довольна. Но за программку большое спасибо. Вдруг приспичит что-то поменять)

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

      • @Ирина, кажется у Вас есть ответы на все вопросы))

        • Галина, все вопросы имеют ответы. Нужно лишь найти правильный! 😉 Это то же самое, что и у вас в занимательной науке! Ищем правильные ответы на поставленные вопросы!

      • Татьяна Суркова:

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

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

  5. Интересная статья. Сама недавно искала шапки для сайта, провозилась целый вечер, а потом плюнула и просто повырезала картинки из понравившихся фото и фонов 😀 . Вроде и непрофессионально, но мне пока нравится)). И быстро — за 10 минут целую пачку шапок настрогала)). А статью возьму на заметку — у меня часто руки чешутся чего-то поменять на блоге, прям болезнь уже).

  6. Ира, какая у тебя полезная статья! я даже не имела понятия. как создавать шапку блога. надо скачать программу и попробовать. Это все понятно, но потом как ее на свой блог ставить можно? В этом будет загвоздка.
    Видео понравились. Первое больше, потому что ты все сама объясняла. Спасибо большое.

    • @Ольга, на блог поставить не сложно. Нужно закачать картинку на хостинг, в ту папку, где находится шапка. Главное, чтобы всё работало нормально, нужно сохранить размеры старой шапки. Твоя шапка лежит по адресу: — deti-i-vnuki.ru/wp-content/themes/organicblog/images/wrapper.jpg
      и имеет размеры: 1400 * 186.
      Значит новая шапка должна быть таким же размером, и загружена в папку images с заменой существующего файла. Да название новой шапки должно быть — wrapper.jpg
      Но в твоей теме, не стоит менять шапку целиком, разве что только внутреннюю часть шапки, так как она у тебя тесно связана с общим фоном страницы.

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

  8. Андрей Назыров:

    Если бы было все так легко, как написано в заголовке 🙂
    Я со своей шапкой намучался, все никак не могу сделать что-нибудь стоящее. Наверное, придется у фрилансеров заказывать. Быстрее и намного качественне будет.

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

    • @Андрей Назыров, без обид, но пора делать новую, ведь знания у тебя есть. Блог молодой, красивый, добавь в шапку что-то новое.

    • Андрей зачем заказывать. Попробуйте одну сделать потом ещё одну или пару. Потом посмотрите на все у Вас появится мысль как сделать такую, которая Вам нравиться. Я в этом уверен. Ну конечно если у Вас есть на это время.

  9. Доброй ночи!
    Лучше всего использовать фотошоп, чем такие программы аля пэйнт.

  10. Чтобы заказать шапку, надо заплатить. А если блог ничего еще не приносит, то это накладно очень получается.

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

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

        • @Ирина, ты так написала»без особых усилий». Это для кого как. Для меня техническая сторона всегда тяжело дается.

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

    • Да, ты права, заказывать дизайн можно когда пойдут заработки, а на первых порах нужно всё делать самому.

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

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

  13. Здравствуйте, Ирина! Приглашаю в эстафету, которая началась ещё вчера… 😀
    Не забудьте оствавлять отчёты, иначе я не вижу вашего присутствия! ➡

    • Забыла, Галина, меня не было три дня, но я обязательно всё наверстаю.

      • @Ирина, простите, но я вас уже заменила — Вы не предупредили и отсутствовали три дня…
        А желающие присоединиться были.

        • @Галина Нагорная, жалко, что заменили. Вы же знаете, что я выполняю все условия марафона, и если бывают задержки, или дни отсутствия, то я всегда позже всё навёрстываю. Но раз уж так случилось, то так тому и быть. 🙁 А я зашла на форум, смотрю — меня нет. Поняла, что пролетела. 😐

          • @Ирина, мне тоже жаль, что Вы не участвуете, но…
            У меня в правилах эстафеты прописано, если не можете комментировать — предупредить. Два человека, несмотря на мои неоднократные обращения, молчали три дня, хотя мне приходили на почту их ответы на другие комментарии на блоге. Тем более — Вы же участвовали у меня! И правила читали… Сори.
            😥

          • Да ладно, не страшно. Поучаствую в следующей эстафете. Зачем же сразу плакать? 😉 Сырость на блоге заведётся!

  14. Это больше подойдет для моего старого сайта, когда-то даже проблема у меня такая была, тогда бы очень пригодилось ❓ Сейчас мне сделали индивидуальный дизайн сайта, так что уже ничего не изменить. Да и ни к чему))) Но для новичков информация очень полезная! 💡

  15. Да, Ирина, статья для новичков. И спасибо, что ты так конкретно, подробно описала ее. Для меня вообще это новое. Я даже не думала, что шапки можно так менять. И надписи в них тоже. Буду изучать твой материал. Прекрасный материал.

  16. Хорошая программулина! И хотя меня тема, которую я использую в своих блогах, пока что устраивает, прграмму возьму в запасник. Кто его знает, какие мысли и планы в моей головушке появятся. Может быть, ещё и шапку придётся рисовать. В общем, запас беды не чинит (с). 😉
    Спасибо, Ирина!
    З.Ы. Сегодня проводили в пригородном лесу соревнования, а ещё и сам бегал (около 11 км плюс пешком 6 км). Добрался домой «без задних ног». Вот только сейчас к компу подключаюсь. 🙄

    • @Виталий, я не устаю поражаться вашим успехам в спорте! Вы мой кумир! Беру с вас пример и начинаю вести активный образ жизни! Зайду к вам посмотреть отчёт о соревнованиях! ➡

  17. Раньше пользовался этой программой. Нормальная и еще бесплатная. Люди раньше спрашивали как сделал шапку сайта:)

  18. Хорошее решение для создания шапки. Но я больше склонна к созданию в фотошопе. У меня на компьютере уже столько установлено разных программ, что я уже задумываюсь, когда хочется что-то установить.
    Ира по-поводу видео, мне нравится больше первый вариант. Не люблю обучающие ролики с музыкой. Трудно думаю для новичков, по себе помню, никогда не обучалась по таким видео. А в первое видео очень хорошее, но слабый звук, нужно было подключать колонки, чтобы что-то разобрать. Когда монтируешь видео в камтазии, обязательно в первую очередь редактируй звук. Там есть функция увеличить звук, добавить тембры. 😉

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

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

  19. Да, с помощью этой программы действительно шапку для сайта создать — в одно удовольствие, особенно когда сам конкретно знаешь чего хочешь. Возьму програмку на заметку — думаю пригодится, как раз у себя еще шапку сделать для блога не успел…

  20. А у меня странная тема и шапка похоже не меняется.Очень хочу поменять шапку,но похоже,что сначала придется менять тему

  21. Какая полезная информация! Хочу поменять шапку на другом своем блоге, а как это сделать не знаю, фотошопом не владею. Попробую использовать Вши рекомендации.

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

  23. Скачал программу спасибо, буду пробовать

  24. Юрий:

    День добрый! Помогите! После скачивания программа не запускается «unable to find a version of runtime to run this aplication»

    • Юрий, попробуйте скачать другую версию этой программы. Я даю две программы для скачивания. Должна одна из них запуститься. Я просто сегодня первый день в интернете, два месяца не было доступа. Вели новый кабельный интернет. Если будут вопросы, то обращайтесь, я теперь буду на связи, и сразу вам отвечу.

  25. Отличная прога, теперь сайты станут красивее, раньше делал только надписи в шапке!)) 🙂

  26. Интересно, а как можно поменять кнопки разделов меню под шапкой на сайте? У меня они такие неинтересные. Подскажите, если можно.

    • Кнопки поменять можно в файле стилей. Но для этого нужно хотя бы немного уметь работать со стилями. Хотя бы базовые знания должны быть.

      • А вы код выложите, если можете. Я попробую.

        • Юрий, тут нет кода. Это не HTML. Вы должны зайти в файл стилей, в редакторе админки. Найти в этом файле стили отвечающие за кнопки (у всех они разные), и заменить значения на нужные вам. Например вы можете поменять размер, (ширину и высоту), цвет, градиент, цвет текста, да почти всё можно поменять. Только в каждой теме шаблона свои стили, поэтому нет одного кода, который подойдёт всем. Я попробую в первых числах сентября написать урок по вашему вопросу. Может быть посмотрев его вы поменяете стиль своих кнопочек.

  27. Здравствуйте! А вам можно заказать шапку сайта?

Написать отзыв

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: