Статья 6. Как в фотошопе нарисовать вертикальное меню для сайта.

Мне частенько задают вопрос:  «Как в Фотошопе сделать меню для сайта?» На что я и отвечаю: » Меню для сайта в Фотошопе можно только оформить». Придать ему надлежащий вид и показать верстальщику как это меню должно выглядеть в готовом шаблоне.  Само по себе меню есть ничто иное как обычный маркированный список. При помощи  CSS  меню превращается в то что вы видите открыв тот или иной сайт.
Меню как вы заметили бывает горизонтальное и вертикальное. Для оформляемого нами макета шаблона я задумал вертикальное меню в шапке сайта. Меню будет простое, состоящее из вертикального списка ссылок. Блок меню не будет иметь фона.  В общем смотрим.  Открою создаваемый макет и установлю направляющие элементы.

Высота свободного поля составляет 300 px   значит я смогу вместить 15 ссылок текста,  нормального и читабельного размера. Выставляю направляющие через каждые 20 px.

В папке «header»  создам папку «nav» (навигация).  В эту папку помещу все  текстовые слои.  Слои растрировать не нужно. Открыв текстовый слой верстальщик сразу поймёт что это за шрифт, его размер  и прочие атрибуты текста. В дальнейшем верстальщик пропишет все эти свойства в CSS.

Ну а далее в каждую ячейку пропишу список меню. Центрирую каждый элемент согласно выставленным направляющим.

Вот и всё.  Вот так будет выглядеть простое вертикальное ( без вложений) меню для создаваемого макета. На следующем уроке оформляем форму  Авторизации/Регистрации на сайте.

А создаваемый макет шаблона, после небольших и незначительных  доработок, сейчас выглядит вот так.  Для просмотра в оригинальном размере следует «кликнуть»  в поле картинки.

Удачи!  :)