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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

Тэги: blogger, вебдизайн, сделать, шапка