В прошлом уроке по веб-дизайну мы узнали,как нарисовать красивую анимированную кнопку на сайт! В этот раз будем учиться рисовать систему навигации, то есть меню для сайта.
1. Создаем документ, размеры значения не имеют, я выбрал 640х480. Заливаем его цветом #080713
2. С помощью инструмента
[U] рисуем фигуру
3. Применяем настройки в Стиле Слоя (Layer Effects)
Результат:
4. Кисточкой (Brush)[B] белого цвета, диаметром в 3 пикселя, рисуем линии приблизительно на одном расстоянии.
Можно отмерять и высчитать точно, но я, как видите, не стал.
5. И для этого слоя настраиваем стили.
Вышло такое вот
6. Добавим вот такие шарики с обеих сторон.
Как их сделать? С помощью инструмента «Эллипс»
[U], удерживая Shift, рисуем круг и применяем к нему настройки, как и в пункте 3, только меняя размер тиснения в зависимости от диаметра шарика.
Выделяем зону на шарике с помощью «эллипса»
[М] и заливаем ее градиентом 
[G] от белого к прозрачному.
Ставим Непрозрачность(Fill) на 7%, жмет Ctrl+T и слегка поворачиваем слой. Шарик готов. Таким путем делаем и остальные.
7. Дублируем слой с прямоугольником, у которого скругленные углы, который мы создали в самом начале урока. Применяем к нему Фильтр- Рендеринг- Блик (Filter-Render-Lens Flare). Выскочит меню с предложением растрировать слой, жмем «Аха». В появившемся окошке выбираем «Начало ролика» и снова жмем «Да».
Я уменьшил Непрозрачность (Fill) до 15%
8. Создаем новый слой.
Делаем выделение «эллипс» [M] и заливаем его белым цветом. Удерживая Ctrl, жмем на слой с прямоугольником, который расположен ниже. Этим действием мы выделим контур прямоугольника. НО! Активным по-прежнему должен оставаться слой с белым эллипсом. Нажимаем Ctrl+Shift+I и жмем Delete. Результат.
С помощью все того же «Эллипса» [M] делаем такое выделение
и снова Delete. Непрозрачность(Fill) слоя на 3%
9. Дублируем слой с фоном и применяем к нему Фильтр- Рендеринг- Блик (Filter-Render-Lens Flare). Подставляем его в угол меню, удаляем лишнее и уменьшаем Непрозрачность (Fill) до 70%.
10. Теперь нам нужно изменить настройки двух шариков, ближайших к этому блику.
Для маленького:
Параметр Тиснение с прежними настройками. Для того, что крупнее:
Вот собственно и все. Вот так выглядит наше меню:
Когда уже будем размещать его на сайте, то обрежем лишний фон вокруг,
который я оставил для наглядности, и добавим пункты меню, которые
выполним в виде текстовых ссылок, следовательно, рисовать в Фотошопе
нам их не нужно.
А вот это уже окончательный вариант, который будет сиять на сайте:
