Шапка сайта.

Приветствую дорогие читатели моего блога sitecraft. Недавно я писал свои мысли по поводу создания своего бренда .

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

Сегодня решил заняться созданием шапки для своего сайта. Шапка это один из главных элементов нашего сайта, в ней название, девиз, возможно логотип и т.п. Шапка сайта это тот элемент, на который, пришедший на наш сайт пользователь, сразу обращает внимание. Думаю, нужно постараться выделить время или деньги, кстати, небольшие, и заняться созданием красивой шапки для нашего сайта. Те, кто не желает тратить свое время на освоение Photoshop хотя бы на начальном уровне, может заказать шапку для своего сайта у дизайнера. Статья входит в цикл статей “Картинки для сайта, блога ” в разделе “Дизайн “.

Вариантов море, фрилансеры могут сделать вам шапку совсем недорого, цена стартует от 5$ и выше. Хотя есть люди, которые умудряются заказывать такие вещи «нахаляву», за отзыв и поднятие репутации. Если вы не имеете возможности выделить хотя бы 5 долларов на шапку, то вам остается два варианта, либо делать самому, либо вылавливать начинающего дизайнера-фрилансера, который сделает вам ее за отзыв. Поищите специализированные форумы для вебмастеров, там часто появляются новички, которые занимаются этим для создания своей клиентской базы. Я же люблю и стараюсь все делать сам, думаю, неторопливое освоение Photoshop пригодится мне в будущем. Когда делаешь сам, то понимаешь, что ты можешь сделать и за какой промежуток времени.

Создание шапки сайта в программе XHeader .

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

В появившемся меню выбираем создание новой шапки, вторая кнопка, как на картинке.

После этого нужно указать размеры шапки для нашего сайта. У меня блог на WordPress и узнать точные размеры, я смог зайдя в редактор и открыв для редактирования таблицу стилей style.css, в таблице ищем описание нашей шапки сайта (header), где-то в описании заданы размеры в пикселях (px). У меня например размеры шапки были заданы 892х150px. А изображение для фона шапки(заголовка) прописано так background-image: url(‘images/_header.jpg’). То есть,  я уже знаю, какие размеры мне нужны для моей шапки – 892х150 пикселей.

После задания размеров шапки, попадаем в окно редактора, которое выглядит следующим образом.

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

Создание шапки сайта в Photoshop

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

Очень уныло, правда? Повторюсь я конечно не гуру дизайна, люблю минимализм, но не в таких минимальных количествах. Так что, сделав большую чашку крепкого кофе, выкурив сигаретку, я запустил Photoshop и приступил к созданию шедевра,



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

Создаю новое изображение размер 892х150 пикселей. Заливаю его тем же цветом, что и предыдущий вариант шапки, темно-серым, а инструмент заливки горячая кнопка [ G ] .

Совет: Кстати, я уже в какой-то статье говорил о том, что желательно записать значения основных цветов своего сайта, они вам наверняка еще не раз пригодятся, чтобы каждый раз не использовать пипетку, лучше сделать это один раз. Чтобы определить значения основных цветов нашего сайта, можно воспользоваться программой FastStone Capture, ее главная задача делать скриншоты экрана, но в ней есть и «пипетка». Пипетка, инструмент, который при наведении на какую-то область показывает нам значение цвета в этой области, точнее конкретного пикселя, на который наведен курсор. Так вот в этой программе есть такой инструмент. Последняя кнопочка в мини меню программы, там иконка в виде листочка с галочкой. Выбрав пипетку и наведя курсор на то место, цвет которого нам нужно определить, в окне видим значение цвета в 3 вариантах – RGB, десятичном(dex) и шестнадцатеричном(hex).

После этого выбрал инструмент текст, горячая кнопка [ T ]. установил основным светло-серый цвет, такой, каким у меня было написано название в старой шапке. Выбрал шрифт impact , нравится он мне почему-то, и написал название блога. Вы можете поэкспериментировать с разными вариантами шрифтов и настройками, такими как жирность, курсив, размер шрифта и т.п. Смотрим картинку

После того как я написал название блога, я решил добавить название доменной зоны, решил сделать это таким интересным способом, поменял местами фон и основной цвет. Сделал выделение прямоугольной области, инструмент выделения, горячая кнопка [ M ] и залил ее, область в смысле,  цветом текста названия, а уже домен написал противоположным цветом. Так как в основных цветах у меня еще есть темно красный, решил добавить небольшой элемент в виде красной точки. Получился у меня такой вариант.

Выбрал карандаш, кнопка [B]. к этой кнопке относится так же и кисточка, но если карандаш рисует отчетливую линию, то кисточка размазывает края, линия получается мягкой, вы попробуйте, выберите себе тот вариант, который вам больше понравиться. Нарисовал прямую линию, чтобы нарисовать прямую линию, нужно удерживать кнопку[shift]. ее можно вести или поставить точку, а затему держивая [shift] поставить другую, в этом случае точки соединятся линией. Затем добавил немного текста про тему блога. В конце решил добавить небольшую надпись об авторстве блога, над названиема, так как планирую создавать не один блог, то надпись, надеюсь, какую-то роль сыграет в будущем. Такой вариант в итоге у меня получился.

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

Как поставить шапку на сайт.

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

Завтра-послезавтра появятся первые материалы на моем личном блоге, читать больше .

Выкладываю еще один пример создания шапки, смотрите видеоролик.

Источник: sitecraft.info

Другие товары