Простая горизонтальная навигационная панель
Из этого урока Вы узнаете, как сделать простое горизонтальное навигационное меню для Вашего сайта:
Выбираем цвет #83C7DA и создаем скругленный прямоугольник (Rounded Rectangle Tool) с радиусом в 5px так, чтобы он получился примерно таким:
Теперь к слою с только что созданной формой применяем следующие эффекты:
Drop Shadow
Inner Shadow
Gradient Overlay
Stroke
Теперь наше будущее меню выглядит примерно следующим образом:
Настало время добавлять текст ссылок. Выбирайте понравившийся шрифт и прописывайте ссылки. Я использовал Trebuchet MS regular с мягким контуром в 1px. Вот, что у меня получилось:
Теперь создайте новый слой.
Выберите инструмент «Rectangular Marquee» (клавиша M) и выделяйте небольшую прямоугольную область вокруг каждой ссылки (друг за другом):
..и заливайте эту область на новом слое белым цветом. Не забудьте установить параметр Fill в значение 0%
Теперь нам нужно добавить градиента нашему слою. Сделайте это, задав параметрам такие же значения, как и на этом рисунке:
После этого уменьшите прозрачность слоя до 50%. Теперь это должно выглядеть вот так:
Осталось сделать тоже самое с оставшимися ссылками и все 
Вот, что получилось в итоге:
Смотрите также:
Отличная статья,сайт просто прекрасный,у вас замечательные уроки,спасибо!
Июль 15th, 2007
Большое спасибо за приятные слова! Рады стараться, Кирилл (тезка
)! Приходите еще!
Август 31st, 2007
Вроде бы получилось.
Спасибо!
Октябрь 1st, 2007
ждрасти!!!я вот сейчас делаю сайт для дипломной работы, так вот: ЭТИ УРОКИ ОЧЕНЬ СИЛЬНО МНЕ ПОМОГАЮТ!!! СПАСИБО!!!!!!!!!!!!
Февраль 12th, 2008
Хороший раздел, но мне интересно и не в тему вопрос: какой сайт описывает, как вставить такое меню на сайт. Я html и css знаю, но как это сделать — нет.
Май 21st, 2008
Так класно!
Много чего узнал, чего на других уроках ещё не видел. 
Вот только не знаю как сделать текст с мягким контуром в 1px? 
Ноябрь 16th, 2008