388x60 Ads

Дизайн сайта - как сделать шапку

Добрый день, уважаемые читатели блога БЛОGГЕР!

Блог БЛОGГЕР - это всегда полезная и интересная информация. В этой статье вы прочитаете о том, как быстро и бесплатно сделать шапку для сайта.

Header или  другими словами "шапка" - один из самых важных элементов дизайна сайта.

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

Допустим, что вы уже знаете название вашего блога и слоган, которые будут размещены на шапке.

Как сделать шапку сайта - простой способ

Теперь о размере хедера. Если вы в каком то графическом редакторе создаете новый шаблон, то вы наверняка знаете размер хедера. Если вы хотите заменить шапку в используемом шаблоне стороннего разработчика - наведите мышку на шапку вашего блога и нажмите правую кнопку мыши. В открывшемся меню вы увидите подменю "Параметры изображения", в котором вы узнаете размеры используемого хедера (например 925рх на 200рх).

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

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

Вам понадобятся:
Программа  Photoshop.
Заготовленные заранее изображения на прозрачном фоне в формате .png .

Дизайн сайта - как сделать шапку


Создаем новое изображение размером 925рх на 200рх с прозрачным фоном. Для этого в меню "Файл" программы "Photoshop" нужно выбрать  "Создать" или удерживая нажатой клавишу CTRL нажать клавишу N.

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

Кроме изображений, нам нужно будет создать два текстовых слоя (кнопка в виде буквы "Т") с названиями "Название" и "Слоган".

Введите в текстовый соответствующий текст, выберите шрифт, размер, цвет. Разместите название и слоган на будущей шапке так, как вам нравится. При желании добавьте к вашим текстовым слоям соответствующие стили.
Стиль слоя

Для это в правом нижнем углу в программе  "Photoshop" нажмите кнопку "fх". Поиграйте с настройками.

При необходимости, переместите текстовые слои вверх или вниз слоя с изображением. Не бойтесь экспериментировать.

Сохраните созданную шапку "для Web" в формате .png .

Указанный способ будет полезен для начинающих веб-дизайнеров.

Конечно, указанный выше вариант довольно примитивный. Давайте рассмотрим другой способ. Интернете выложено достаточно большое количество PSD файлов при помощи который вы можете создать шапку сайта.

Вот пример такой шапки сайта.
как сделать шапку - 3D текст

Для того, чтобы попрактиковаться, скачайте PSD файл с этой шапкой.

Дополнительно читайте
Креативность - создание логотипа

Если эта статья была вам полезна, поблагодарите автора - нажмите кнопку +1 или разместите ссылку на эту статью в Twitter.

Станьте подписчиком блога БЛОGГЕР и вы будете всегда в курсе последних событий, и узнаете как сделать шапку для сайта.






Подпишитесь В закладки НапечататьPrint Friendly and PDF


Вячеслав Вареня
Статус: seo-специалист | Контакты


13 коммент.:

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

Было бы неплохо еще выложить скрины, а то так непонятно для тех, кто вообще не дружит с фотошопом

Павел Чистяков комментирует... [Ответить]

Подобный пример можно уместить в 10 строк кода на CSS. И грузиться будет меньше, и эффектов сделать можно больше.

Вячеслав Вареня комментирует... [Ответить]

@Павел Чистяков

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

Вячеслав Вареня комментирует... [Ответить]

@Александр

ОК. Я напишу подробнее.

DareDevil47 комментирует... [Ответить]

Александр, тогда уж лучше видео))

На блогспоте кстати, можно не заморачиваться с изменением шаблона через HTML редактор, для того чтобы добавить/изменить хеадер. Достаточно зайти в панели настроек блога в меню "Дизайн" => "Заголовок" => "Изменить" и загрузить нужное изображение.

Павел Чистяков комментирует... [Ответить]

@Вячеслав Вареня
Ну знаете, лично для меня легче выучить CSS, чем освоить фотошоп :)
То, что в Blogger-е все ясно и понятно - это и плюс и минус одновременно. Плюс в том, что создать и оформить можно "быстро и дешево", а минус - не будет появления навыков работы с HTML/CSS/JS. И уж поверьте - второе гораздо важнее.

aldous комментирует... [Ответить]

"можно уместить в 10 строк кода на CSS"
Огого, а в двадцать сможете?
Веб-разметка силами css имеет смысл в том случае, если нужно поместить надпись поверх картинки. В остальных случаях скомпресованное изображение избавляет от переизбытка кода, которого и так дофига грузится браузером клиента, к тому же избавляет от перекосов в какой-нибудь опере или осле.
Вот из-за таких верстальщиков я засирал свой прокси на жопорезе: вроде картинки запретишь, сидишь на заду ровно, потом смотришь логи, а там css стянулось 5 файлов с каждой страницы страницы.

Вячеслав Вареня комментирует... [Ответить]

@DareDevil47

Именно под такую тему эта статья.

Вячеслав Вареня комментирует... [Ответить]

@aldous

Стесняюсь спросить, а что такое жопорез? :)

aldous комментирует... [Ответить]

Gprs - мобильная свясь через GSM. Было время, когда 3G было только мечтой.

Вячеслав комментирует... [Ответить]

Вот это правильно! Приятно видеть еще тех, кому не лень сделать что то своими руками и умом! А не просто стащить что то с другого блога, или скачать бесплатный шаблон....

Наталья Голубничая комментирует... [Ответить]

Для начинающих блогеров- статья полезная. Спасибо!

Ольга Дайберт комментирует... [Ответить]

Благодарю за полезную статью!

Отправить комментарий