Как сделать заголовок на сайте

Dizain 89(6) Здравствуйте, дорогие читатели и гости сайта «Тестируем шаблон». Рада нашей новой встрече на блоге. В комментариях мне часто приходится отвечать на вопрос: каким размером нужно брать изображение, чтобы из него получился качественный заголовок, не размазанная картинка, а четкий рисунок, приятный для просмотра и сразу характеризующий вас как хозяина сайта, который знает, что первое впечатление на читателя производит именно картинка в  «шапке» блога. И сегодня я решила посвятить ответу на этот вопрос небольшую статью,  о том как сделать на блоге красивый заголовок для уникального шаблона, когда есть возможность установить не одно изображение, как к примеру в шаблоне Admired (именно для такого шаблона практикуется обрезка изображения для заголовка заранее, и загрузка уже с заданными шаблоном параметрами, а для остальных возможна именно на странице настройки заголовка), а несколько и сделать вывод каждого изображение в «шапке»блога случайным. Но даже если вы в таком шаблоне выводите только одну картинку в заголовок, то у вас есть возможность периодически менять фон и заголовок, например, к новогодним или майским праздникам :rose:

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

Dizain 89(10)

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

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

Dizain 89(1) перейдете в выбор «Библиотеки файлов», выберете нужное изображение и нажмете на синюю кнопочку внизу»Установить в качестве заголовка».

Dizain 89(9)

Размер изображения для фона берется 1920*1200 пикселей, но иногда я пользуюсь картинкой для фона тоже размером 1280*800 пикселей, но только  в том случае, если картинка фона достаточно размыта, с нечетким рисунком по краю, и если даже при  замощении и дублировании рисунка фона, сайт будет выглядеть достойно, без неприятных швов фона по краям…Вот теперь и третья  причина для загрузки на странице фона. Вы сможете использовать картинку загруженную для заголовка и в качестве фона, так как в библиотеке будет хранится не только часть изображения, как если бы оно загружалось через страницу настроек заголовка, а целое размером  1280*800.

Сначала вы решили сделать вот такой фон и заголовок

Dizain 89

Картинку заголовка можно использовать и для фона (см. ниже)

Dizain 89(7)А теперь фон и заголовок первого фото меняем местами.
Dizain 89(8)

Таким образом вы экономите время на загрузке файлов для эксперимента подбора изображений для фона и заголовка. Такие нюансы могут быть связаны  с цветом надписи заголовка блога, особенно если вы не можете самостоятельно поменять цвет. Если название сайта находится не на самой картинке заголовка, то цветовая палитра подбирается в унисон,  Dizain 89(6) а вот если название шаблона просматривается на изображении, то следует подбирать изображения с учетом цветовой палитры и достаточной контрастности для удобного просмотра названия блога.

Dizain 89(5)

Теперь вы знаете знаете, картинку какого размера нужно использовать, а вот где каждый берет такие изображения? Я например пользуюсь двумя сайтами с красивыми обоями на рабочий стол: здесь можно подобрать цветовую палитру, найти подходящий размер и выбор достаточно богатый: это сайт http://www.goodfon.ru/  и сайт http://www.badfon.ru/   

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

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

P.S. Иногда настраиваемый  шаблон имеет хорошее качество: при выборе участка картинки для заголовка пунктирная линия обреза может сдвигаться больше или меньше стандартного размера заголовка, это особенно полезно, если ширина заголовка в настройках шаблона не редактируется. Так что, не просто обрезайте, а экспериментируйте Who-s-the-man

:heart: Расскажи другу, пусть тоже дизайном займется :good:
  • Добавить ВКонтакте заметку об этой странице
  • Мой Мир
  • Facebook
  • Twitter
  • LiveJournal
  • LinkedIn
  • Digg
  • Blogger
  • Блог Li.ру
  • Сто закладок
  • RSS
  • Одноклассники

Об авторе Юлия

Меня зовут Юлия. Этот сайт я начала из-за моей проснувшейся и непонятной любви к рассмотрению настроек шаблонов. Сама я пока создавать темы на Вордпресс не умею, но надеюсь, что это когда-нибудь случится. Пишите в комментариях свои вопросы: я обязательно отвечу. Ну и замечания тоже приветствуются-))
Метки: . Закладка Постоянная ссылка.

60 комментариев: Как сделать заголовок на сайте

  1. Елена пишет:

    А мне как раз надо шапку менять :scratch: Сделать ее более яркой и четкой .
    Юлечка а у нас сегодня +26 Я пришла домой варенная :yes:

  2. Елена пишет:

    А у меня почему-то фоновое изображение не меняется, хотя пишет, что сайт обновлен — буду все менять

    • Юлия пишет:

      А сейчас Вашу тему Indose на свой экспериментальный блог загрузила, фон у меня меняется, а вот слайдер на главной работать отказался…

      • Елена пишет:

        У меня был неплохой шаблон, но потом я проверила его ТАС и оказалось, там вирусный код. Ищу — ничего не нравится — взяла этот нейтральный Indose — не рыба, ни мясо. Но что-то видимо и с ним не так…

  3. Лариса пишет:

    Юля, как всегда — своевременно. Как раз устанавливаю шапку и фон в шаблоне, и никак не получалось отцентрировать заголовок. Теперь поняла свою ошибку. Единственное, в чем не разобралась: обрезаю картинку заголовка в медиафайлах, а когда выбираю на странице заголовка, показывает необрезанный вариант. Но я додумаюсь. За неделю не получилось уложиться. Скорее всего, еще столько же провожусь.

    • Юлия пишет:

      Обрезаешь именно после выбора в библиотеке на странице заголовка. Можешь и туда сразу картинку загружать, только если что-то не получится, придется по новой ее загружать, а так она уже в библиотеке будет. Кстати в твоем шаблоне заголовок можно при желании сделать шире, если захочешь…Я вроде в статье об этом писала, где в настройках что нажать, и в комментариях после статьи про это тоже есть….

      • Лариса пишет:

        Да-да, ширину заголовка отрегулировала как раз по твоей статье. Про хитрости с загрузкой картинок благодаря тебе разобралась. Экспериментирую пока на тестовом. Он у меня называется Трансформер блог. Искусство перемен. :-)

  4. Арина пишет:

    Большое спасибо, Юлия! Так все обстоятельно написали- очень понятно! Не запутаешься! : :good:

  5. mrs.interesno пишет:

    Юля, мне твои заглавные картинки понравились.
    Особенно, листик на воде.
    Так романтично и даже поэтично. :-)

  6. Larisenok пишет:

    да, лист на воде — вообще нечто

  7. Любовь пишет:

    Юля, ты вот пишешь, что не нужно подписывать фон Devilish и заголовок. Я с тобой согласна, но вот у меня заголовок получился подписан. Это не специально. Просто у меня стоит плагин, который подписывает изображения Devilish

  8. Лидия пишет:

    У меня почему-то картинка в шапке блога расплывается. Может загружала меньшего формата , чем положено.

  9. madonna4ka пишет:

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

  10. madonna4ka пишет:

    Хотелось, чтобы картинка не обрезанная была вот и всё.

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

    • Юлия пишет:

      У Мурзика вроде симпатичный шаблончик ;-)

      • Мурзик пишет:

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

        • Юлия пишет:

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

          • Мурзик пишет:

            вот это новость, не так то с ним проблем нет. а может вы его качали с неправильно сайта, а неправильные сайты делают не правильные шаблоны :)

          • Юлия пишет:

            Шаблон d6_animal_17.zip, а скачала с сайта, адрес которого нашла у Вас в коде _http://templatesforjoomla.ru/

  12. Мурзик пишет:

    Да, вроде с этого сайта качали.

  13. Ольга пишет:

    Вот это интересно! Хочется попробовать на деле Wink

  14. Ольга пишет:

    Не получилось поиграться, у меня нет раздела «фон»

  15. Светлана пишет:

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

    • Юлия пишет:

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

      • Светлана пишет:

        Помучилась еще пол дня. В итоге сделала новый заголовок и все встало, как нужно. Спасибо большое, очень полезный сайт! :rose:

  16. Eugene пишет:

    Юля здраствуйте! Я установил тему Graphene на свой сайт и все вроде неплохо но меня попросили установить логотип в шапку сайта И как его установить понятия не имею. Можете мне в этом помочь- объяснить как это можно сделать в этой теме. В любом случае буду благодарен.

    • Юлия пишет:

      У Вас есть картинка с логотипом пропорциональная размерам заголовка? Или Вас попросили на какое-то изображение совместить логотип? Тогда Вам нужен фотошоп, а потом уже загрузить картинку в настройки заголовка, учитывая настроенные параметры, ведь высота заголовка может редактироваться в настройках, так же ширина, потому что шаблон резиновый…

  17. Людмила пишет:

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

  18. Светлана пишет:

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

    • Юлия пишет:

      Светлана, Вы говорите про фон. В Вашем шаблоне iFinance такая функция существует.Если не поняли в статье, то посмотрите первое видео в этой статье http://test-shablon.ru/vtoroj-video-urok-nastraivaem-shablon-mantra/ Хоть шаблон другой, но установка фона такая же, как и Вашем шаблоне. Только изображение загрузите на блог не меньше 1200 на 800 пикселей…

  19. Маша пишет:

    Юленька, посмотрите мой сайт пожалуйста, какие советы можете дать? Спасибо Valentine-s-Day

    • Юлия пишет:

      Мария, у Вас достаточно интересный шаблон: мне понравилось как организована главная, как представлены рубрики, единственно мне бы захотелось обычных комментариев, потому как в этом браузере активна не моя страница ВК, и еще нет карты сайта. Я например, увидела в лучших статьях видеоответ на «Должна ли женщина работать», мне захотелось еще найти что-то в этом духе, но пересматривать архивы и рубрики долго, а вот была бы страничка со всеми публикациями сразу и не с картинками, а просто с перечислением..Кстати, с картинками к постам: очень тщательно подбирайте те, которые становятся заголовком над статьей, например про стрижку детей там виден один вихор, и тем самым хороший блог с полезной информацией становится каким-то неопрятным. Качество фото тоже имеет значение. Маленькое изображение в заголовке смотрится размытым.Когда открываешь статью с длинным названием, оно частично просматривается под «Главная» . И мне показалось на главной сверху очень много черного, эти рамочки лучше бы сделать более светлыми, тогда дизайн будет более лаконичным и законченным..И вот, виджет от ВК вообще по цвету не подходит к палитре блога: его зелень как-то не к месту, уж лучше тот оттенок синего, который в датах на блоге …Наверное, Вам будет обидно за такие замечания, но совет спросили Вы сами, уж не обессудьте..

  20. Юрий пишет:

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

Добавить комментарий

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

[+] Жми на плюс- Открой тайник- Чтоб прикольный СМАЙЛ возник!
:bye: 
:good: 
:negative: 
:scratch: 
:wacko: 
:yahoo: 
B-) 
:heart: 
:rose: 
:-) 
:whistle: 
:yes: 
:cry: 
:mail: 
:-( 
:unsure: 
;-)