Как сделать меню веб-сайта в Фотошоп

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

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

Ниже шапки сайта  расположен блок "контент" со своим фоновым цветом. Например вот так.

Теперь традиционно, на стыке блоков "шапка" и "контент" расположится простое горизонтальное меню с быстрой обработкой в Фотошоп. Как сделать меню  в "строчку" понятно,но скучновато и мой вам совет: " Старайтесь применять хоть капельку оригинальности к любой части веб-странички. И тогда дизайн сделанный вами будет нарасхват в среде сайто-строителей".  При помощи инструмента "прямоугольник со скруглёнными углами" сделаю на новом пустом слое вот такую штуку. 

как сделать меню

Не пугайтесь - это не будущее меню. Это основной слой на котором будет построено горизонтальное меню. Сделаю этот слой полу-прозрачным и на отдельном слое сделаю для него обводку белым цветом.

Сделаю ещё одну обводку слоя, но только чёрного цвета. Обрезав верхнюю часть получу  обводку прямоугольника  двух-цветной. Выглядит это вот так. 

Сделанная мной "штука" напоминает стекло и для полного сходства мне нужно размыть находящийся под ним слой "шапки". Получится вот так. 

Естественно значение непрозрачности для стекла и обеих обводок (все трое находятся на отдельных слоях) подбираются индивидуально.

Теперь непосредственно приступим к организации самой строки горизонтального меню. Тем же инструментом "прямоугольник со скруглёнными углами" на новом слое нарисую эту саму строку. Цвет стараемся выдерживать в общей цветовой гамме. 

Сделаю обводку вновь созданного слоя чёрным цветом с толщиной линии в 1пикс. Обводка призводится  с расширением области в 5пикс. Выделение -Модификация - Раширить. 

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

Далее  попробую заполнить меню ссылками. Выглядит это вот таким образом. 

А сейчас можно добавить самую малость объёма для всей композиции. Для этого воспользуюсь инструментом тень. Совсем совсем чуть-чуть. Можно убрать обводку строки меню. Можно оставить. По желанию. 

Пожалуй на этом всё.  Главное как бы не наваять лишнего и вовремя остановиться. Окончательно строка горизонтального меню будет выглядеть вот таким образом.

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

как сделать меню