Перейти к содержимому

Реферальная программа Мегаплана

Партнерская программа Kredov

Создание шапки для сайта

#1 Игорян

Игорян
  • Пользователь
  • 296 сообщений
  • Репутация: 10
0

Отправлено 30 Апрель 2011 - 22:56

Шапка сайта это очень важная составляющая часть сайта, которая расположена в самом верху сайта. Далеко ходить не будем, рассмотрим шапку нашего любимого форума "masterwebs"

Изображение

Шапка простая, нет никаких графических нагромождений и это не значит что она плохая и не справиться со своей задачей.

Давайте разбирать по порядку, то что я пометил цифрами.

Цифра 1, это и есть сама шапка.
Цифра 2, логотип и под цифрой 3 позиция под баннер.

И так, представьте что вы первый раз зашли на форум masterwebs.ru, представили? Куда вы первым делом смотрите? да, я понимаю, вы зашли с целью добычи нужной вам информации, но как бы вы не пытались ни смотреть на шапку вы ее все ровно увидите, т.к. шапка остается неизменной при навигации по сайту и ее трудно будет не заметить.

Все мы бывали на сайтах разных тематик, замечали сходство?, а именно сходство в одном и том же элементе, это логотип

Изображение
Что такое логотип и для чего он нужен?

Логотип (от греч. логос — слово и типус — отпечаток, форма, образец) — это знак (символ), состоящий из текста и/или графики, являющийся отличительным для фирмы, компании, организации и т.п. В идеале логотип графическими средствами должен выражать основное направление деятельности фирмы.


Обычно в логотипе используют название адреса сайта или аббревиатуру, т.е.

Изображение

Логотип нужен для того, что бы посетитель смог определить тематику сайта, т.е. если я ищу через интернет где купить картошку, и случайно попал на форум masterwebs.ru, где по-русски написано что это "форум веб-мастеров" не трудно сообразить, что тут нельзя купить картошку, закрою сайт (форум) и пойду со своим вопросом дальше.

Логотип обычно (99%) слева, а не справа, почему? На этот вопрос ответил FordogeN в статье "Юзабилити в веб-дизайне"

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


С логотипом думаю разобрались, идем дальше. С право мы видим баннер, просто баннер 468Х60

Изображение

С баннером все просто и объяснять ничего думаю не нужно, это уже на усмотрение владельца сайта.

Давайте попробуем создать что ни будь на подобие. Для создание шапки я использую всем известный фотошоп версии CS3, запускаем…..

Выбираем пункт меню файл -> новый

Изображение

Задаем размер нашей шапке в px, пусть будет шириной 1000px и высотой 130px, содержимое фона "Белый"

Изображение

Готово.

Изображение

Ставим основной цвет #8CC1C5

Изображение

Выбираем инструмент "заливка" Изображение и заливаем нашу шапку, должно получиться вот так

Изображение

Далее, в панели со слоями создадим папку для логотипа, для этого нажимаем на

Изображение

Переименовываем папку на "логотип" и создаем уже в папке новый слой

Изображение

В "палитре символов и абзацев" выбираем шрифт, я выбрал "Прикрепленный файл  Chaparral_Pro.rar   282,49К   Количество загрузок: 122" цвет белый и все остальные параметры уже на ваше усмотрение у меня это так

Изображение

Встаем на "слой1" и выбираем инструмент "горизонтальный текст" Изображение ставим курсор в левой части нашей будущей шапки, и начинаем набирать текст логотипа master

Изображение

Должно получиться так

Изображение

В левой панели ставим основной цвет белый и выбираем инструмент "прямоугольник со скругленными углами"

Изображение

Создаем новый слой, и рисуем прямоугольник, вот так

Изображение

Выбираем пункт меню редактирование -> трансформирование -> наклон

Изображение

И делаем примерно вот такой наклон

Изображение

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

Изображение

Создаем новый текстовый слой, на котором напишем "форум веб-мастеров" примерно так

Изображение

Выбираем инструмент линия

Изображение

Задаем толщину нашей линии 2px Изображение зажимаем на клавиатуре шифт и рисуем под углом линию от буквы "M" т.е. так

Изображение

Создаем текстовый слой, основнй цвет ставим белым, и тем же шрифтом только без курсива пишем букву "О" и двигаем его к нашей линии вот так

Изображение

Нам нужно еще сделать таких 4 типа антенки с кружком на конце, и чтобы не мучаться, мы просто будим дублировать уже готовую антенку и поварачивать под нужным углом и перетаскивать в нужное место. Для этого встаем на слой с буквой "О" зажимаем на клавиатуре шифт, выделяем второй слой с линией, нажимаем правой кнопкой мыши и выбираем "объединить слои"

Изображение

Т.е. думаю понятно, у нас теперь эта штука, которую я назвал антенка, стала одним слоем

Изображение

Дублируем слой, для этого просто перетаскиваем его на "создать новый слой"

Изображение

У нас должна появиться копия слоя

Изображение

Выбираем пункт меню редактирование -> трансформирование -> поворот

Изображение

И двигаем, крутим нашу вторую антенку как душе угодно, я сделаю вот так

Изображение

Точно также дублируем еще два раза слой с антенкой и перемещаем, крутим, например вот так

Изображение

Все, с антенками разобрались, теперь наша задача на заднем плане создать несколько текстовых слоев со словами "webmoney, seo, php, яndex, google, javascript" я для примера создам один слой, остальные аналогично создадите сами. И так, выбираем инструмент "горизонтальный текст" Изображение и тем же самым шрифтом что мы писали "masters" пишем "webmoney"

Изображение

Встаем на только что созданный слой "webmoney" и перетаскиваем его в самый низ, это нужно для того чтобы слой был на заднем плане, ставим непрозр. 50%

Изображение

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

Изображение

Делаем со словами "seo, php, яndex, google, javascript" то же самое, не забываем включать фантазию, играться с прозрачность и размером шрифта, у меня получилось так

Изображение

Ну что ж, осталось добавить полупрозрачную окружность и готово

Выбираем инструмент "эллипс"

Изображение

Создаем новый слой и перетаскиваем его в самый вверх

Изображение

Рисуем примерно вот такую окружность

Изображение

Ставим непрозр. 10%

Изображение

И вот что получаем

Изображение

Сохраняем для веб, и прикручиваем к сайту.

ps. если где ошибся, пишите, подправлю ;)

Исходник psd -> Прикрепленный файл  masterwebs.rar   44,98К   Количество загрузок: 103

Автор статьи: Игорян :)


 

 

  • 0

#2 Gagarin

Gagarin
  • Пользователь
  • 323 сообщений
  • Репутация: 0

Отправлено 02 Май 2011 - 17:00

Похоже ;) почему шрифт такой же не выбрали как и в оригинале?
  • 0

#3 Игорян

Игорян
    Topic Starter
  • Пользователь
  • 296 сообщений
  • Репутация: 10

Отправлено 02 Май 2011 - 19:33

почему шрифт такой же не выбрали как и в оригинале?


Я не знаю, какой шрифт использовался в оригинале.

Ps. Антенки с кругляшками маленько не удачно получились, нужно было наверное букву "O" другим шрифтом попробывать….
  • 0

#4 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 02 Июнь 2011 - 17:37

Игорян, дизайнер на скорую руку :D

Про сам логотип практически ничего не сказано, кроме определения и пары фраз:

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

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

Пока что статья больше имеет практический характер для самых самых новичков, которые ни разу не видели фотошоп и хотят просто без идеи сделать шапку, ИМХО. То что расписано всё по шагам, это хорошо, но мне, например, эта информация практически ничего не дала нового.

Спасибо за статью!
  • 0


Оформление форума – IPBSkins.ru