X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Создание шапки для сайта
Игорян_mw
Игорян_mw
Topic Starter сообщение 30.4.2011, 23:56; Ответить: Игорян_mw
Сообщение #1


Шапка сайта это очень важная составляющая часть сайта, которая расположена в самом верху сайта. Далеко ходить не будем, рассмотрим шапку нашего любимого форума "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


Автор статьи: Игорян :)
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Gagarin_mw
Gagarin_mw
сообщение 2.5.2011, 18:00; Ответить: Gagarin_mw
Сообщение #2


Похоже ;) почему шрифт такой же не выбрали как и в оригинале?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Игорян_mw
Игорян_mw
Topic Starter сообщение 2.5.2011, 20:33; Ответить: Игорян_mw
Сообщение #3


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


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

Ps. Антенки с кругляшками маленько не удачно получились, нужно было наверное букву "O" другим шрифтом попробывать….
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
сообщение 2.6.2011, 18:37; Ответить: ZiTosS
Сообщение #4


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

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

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

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

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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Партнерская программа для Эзотерики, Магии, Таро
партнерка для эзотерики
0 LiveExpert 330 Сегодня, 15:13
автор: LiveExpert
Открытая тема (нет новых ответов) Партнерская программа для Эзотерики, Магии, Таро
партнерка для эзотерики
0 LiveExpert 307 Сегодня, 15:13
автор: LiveExpert
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыAzinomoney.com - гемблинг-партнерка с 65%RS для каждого
Гарантированный заработок на гемблинг-трафике
65 AzinoMoney 29174 Вчера, 19:10
автор: AzinoMoney
Горячая тема (нет новых ответов) Продвижение молодого сайта
30 maxmer 6365 26.3.2024, 21:49
автор: c4p1t4l15t
Открытая тема (нет новых ответов) SEO-текст на главной странице сайта и в категориях
5 boltuk 1352 26.3.2024, 21:43
автор: c4p1t4l15t


 



RSS Текстовая версия Сейчас: 28.3.2024, 23:28
Дизайн