Шапка сайта это очень важная составляющая часть сайта, которая расположена в самом верху сайта. Далеко ходить не будем, рассмотрим шапку нашего любимого форума "masterwebs"
[img]http://gyazo.com/fa4d707c97d8d75fae2dc3b57a7e0c36.png[/img]
Шапка простая, нет никаких графических нагромождений и это не значит что она плохая и не справиться со своей задачей.
Давайте разбирать по порядку, то что я пометил цифрами.
Цифра 1, это и есть сама шапка.
Цифра 2, логотип и под цифрой 3 позиция под баннер.
И так, представьте что вы первый раз зашли на форум masterwebs.ru, представили? Куда вы первым делом смотрите? да, я понимаю, вы зашли с целью добычи нужной вам информации, но как бы вы не пытались ни смотреть на шапку вы ее все ровно увидите, т.к. шапка остается неизменной при навигации по сайту и ее трудно будет не заметить.
Все мы бывали на сайтах разных тематик, замечали сходство?, а именно сходство в одном и том же элементе, это логотип
[img]http://gyazo.com/d8975cd5768fed02ad4d81d46b0fcf38.png[/img]
Что такое логотип и для чего он нужен?
Логотип (от греч. логос — слово и типус — отпечаток, форма, образец) — это знак (символ), состоящий из текста и/или графики, являющийся отличительным для фирмы, компании, организации и т.п. В идеале логотип графическими средствами должен выражать основное направление деятельности фирмы.
Обычно в логотипе используют название адреса сайта или аббревиатуру, т.е.
[img]http://gyazo.com/1db3c931238fc6e157f3e0ecef61fcff.png[/img]
Логотип нужен для того, что бы посетитель смог определить тематику сайта, т.е. если я ищу через интернет где купить картошку, и случайно попал на форум masterwebs.ru, где по-русски написано что это "форум веб-мастеров" не трудно сообразить, что тут нельзя купить картошку, закрою сайт (форум) и пойду со своим вопросом дальше.
Логотип обычно (99%) слева, а не справа, почему? На этот вопрос ответил
FordogeN в статье
"Юзабилити в веб-дизайне"- Логотип в верхнем левом углу. Обратите внимание что на всех сайтах которые я указал выше - он именно в левом верхнем углу. Обосновать это могу тем, что человек читает сверху вниз и слева направо, то есть подсознательно логотип становится первым элементом который видит пользователь;
С логотипом думаю разобрались, идем дальше. С право мы видим баннер, просто баннер 468Х60
[img]http://gyazo.com/db3a9bfc886a76813aff80c529e00961.png[/img]
С баннером все просто и объяснять ничего думаю не нужно, это уже на усмотрение владельца сайта.
Давайте попробуем создать что ни будь на подобие. Для создание шапки я использую всем известный фотошоп версии CS3, запускаем…..
Выбираем пункт меню файл -> новый
[img]http://gyazo.com/3d55e3cdf04fdcbe8732335d787aaffb.png[/img]
Задаем размер нашей шапке в px, пусть будет шириной 1000px и высотой 130px, содержимое фона "Белый"
[img]http://gyazo.com/985d99705d4368c0615b794e4b0c1c54.png[/img]
Готово.
[img]http://gyazo.com/ba3ca94a9250b606c172f33f0df75a63.png[/img]
Ставим основной цвет #8CC1C5
[img]http://gyazo.com/2ddb6db8b29e04ed9720e4ac2219013c.png[/img]
Выбираем инструмент "заливка" [img]http://gyazo.com/44880f19d421fc9bfbfcfeef9e7d85b3.png[/img] и заливаем нашу шапку, должно получиться вот так
[img]http://gyazo.com/e459b269e2617b2dde65b99c013b33f5.png[/img]
Далее, в панели со слоями создадим папку для логотипа, для этого нажимаем на
[img]http://gyazo.com/0358dfb19e4f5cf9eb104d8b081bc6a3.png[/img]
Переименовываем папку на "логотип" и создаем уже в папке новый слой
[img]http://gyazo.com/234e5726812d5b2bf779c829923f0e4e.png[/img]
В "палитре символов и абзацев" выбираем шрифт, я выбрал "
Chaparral_Pro.rar ( 282,49 килобайт )
Кол-во скачиваний: 155" цвет белый и все остальные параметры уже на ваше усмотрение у меня это так
[img]http://gyazo.com/5943933f2f6c6c884bed0471896f2020.png[/img]
Встаем на "слой1" и выбираем инструмент "горизонтальный текст" [img]http://gyazo.com/6064bb11abff101b0360d91908063546.png[/img] ставим курсор в левой части нашей будущей шапки, и начинаем набирать текст логотипа master
[img]http://gyazo.com/79f4650c0b77f95a08874e6160c131cf.png[/img]
Должно получиться так
[img]http://gyazo.com/4c6da685459d45090a271bec7ed67a46.png[/img]
В левой панели ставим основной цвет белый и выбираем инструмент "прямоугольник со скругленными углами"
[img]http://gyazo.com/58ea961d5625f1882b5068acdcea89a1.png[/img]
Создаем новый слой, и рисуем прямоугольник, вот так
[img]http://gyazo.com/4a70d4b0c7f9e90d848fb0be8ca79905.png[/img]
Выбираем пункт меню редактирование -> трансформирование -> наклон
[img]http://gyazo.com/4aa718532607556c0b30b1c0faed193d.png[/img]
И делаем примерно вот такой наклон
[img]http://gyazo.com/774b7b9987ca14333f6b4f4b7fc8fb12.png[/img]
Теперь наша задача дописать "webs" на белом прямоугольнике тем же самым шрифтом что и "мастер" только цветом фона самой шапки и убрать курсив, т.е. вот так
[img]http://gyazo.com/b969479b99e5937e28feebfbbb952f2d.png[/img]
Создаем новый текстовый слой, на котором напишем "форум веб-мастеров" примерно так
[img]http://gyazo.com/f0d65bfffce1588f689df3684c9016d6.png[/img]
Выбираем инструмент линия
[img]http://gyazo.com/44315d45fa921aea682b0901b6b9b703.png[/img]
Задаем толщину нашей линии 2px [img]http://gyazo.com/e9d9a96b702c97ee212dadc54854b874.png[/img] зажимаем на клавиатуре шифт и рисуем под углом линию от буквы "M" т.е. так
[img]http://gyazo.com/f316e4fa44adedcdf25be84fde94d3ff.png[/img]
Создаем текстовый слой, основнй цвет ставим белым, и тем же шрифтом только без курсива пишем букву "О" и двигаем его к нашей линии вот так
[img]http://gyazo.com/b532714d55aa5080e105344370651e13.png[/img]
Нам нужно еще сделать таких 4 типа антенки с кружком на конце, и чтобы не мучаться, мы просто будим дублировать уже готовую антенку и поварачивать под нужным углом и перетаскивать в нужное место. Для этого встаем на слой с буквой "О" зажимаем на клавиатуре шифт, выделяем второй слой с линией, нажимаем правой кнопкой мыши и выбираем "объединить слои"
[img]http://gyazo.com/7e0027db45b162fa679b9058c421056a.png[/img]
Т.е. думаю понятно, у нас теперь эта штука, которую я назвал антенка, стала одним слоем
[img]http://gyazo.com/08ac9782c6ba0ec18477c340c98aac78.png[/img]
Дублируем слой, для этого просто перетаскиваем его на "создать новый слой"
[img]http://gyazo.com/c694e4e7da92bb20328c6acc84d70bae.png[/img]
У нас должна появиться копия слоя
[img]http://gyazo.com/ea411750fd89dc67194309cadc406e1d.png[/img]
Выбираем пункт меню редактирование -> трансформирование -> поворот
[img]http://gyazo.com/e43e4c4ecd2c055c791c1293c81b97d1.png[/img]
И двигаем, крутим нашу вторую антенку как душе угодно, я сделаю вот так
[img]http://gyazo.com/c7eb863c5ce7a6c6d2e00835d77b7b57.png[/img]
Точно также дублируем еще два раза слой с антенкой и перемещаем, крутим, например вот так
[img]http://gyazo.com/b4954b5c51eac471b1032970b1f2187b.png[/img]
Все, с антенками разобрались, теперь наша задача на заднем плане создать несколько текстовых слоев со словами "webmoney, seo, php, яndex, google, javascript" я для примера создам один слой, остальные аналогично создадите сами. И так, выбираем инструмент "горизонтальный текст" [img]http://gyazo.com/65cce8c5400a41fdbf9bc57a55ec35e9.png[/img] и тем же самым шрифтом что мы писали "masters" пишем "webmoney"
[img]http://gyazo.com/ebf72542bdac124ebf99e17041ecdc32.png[/img]
Встаем на только что созданный слой "webmoney" и перетаскиваем его в самый низ, это нужно для того чтобы слой был на заднем плане, ставим непрозр. 50%
[img]http://gyazo.com/935b00dc574902e93e05dca4da846eb7.png[/img]
Выбираем пункт меню редактирование -> трансформирование -> поворот, т.е. точно также как мы двигали и поворачивали антенки, у меня получилось так
[img]http://gyazo.com/86f16013df37a63f2dfe80b57fd0db68.png[/img]
Делаем со словами "seo, php, яndex, google, javascript" то же самое, не забываем включать фантазию, играться с прозрачность и размером шрифта, у меня получилось так
[img]http://gyazo.com/edf5dbeb4506654206f8507a170c56e6.png[/img]
Ну что ж, осталось добавить полупрозрачную окружность и готово
Выбираем инструмент "эллипс"
[img]http://gyazo.com/36f2e274bee5bc9d233d1ea321f9a83d.png[/img]
Создаем новый слой и перетаскиваем его в самый вверх
[img]http://gyazo.com/b5db2f52bba427d1f1697f9879d06ecb.png[/img]
Рисуем примерно вот такую окружность
[img]http://gyazo.com/75bf29cb445fea5b250abac7d88c2e38.png[/img]
Ставим непрозр. 10%
[img]http://gyazo.com/2063e651507b27062fd360911effec5c.png[/img]
И вот что получаем
[img]http://gyazo.com/22ac66d757fc9e4be7b5433c1c94f7fd.png[/img]
Сохраняем для веб, и прикручиваем к сайту.
ps. если где ошибся, пишите, подправлю
Исходник psd ->
masterwebs.rar ( 44,98 килобайт )
Кол-во скачиваний: 127Автор статьи: Игорян