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

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. Теперь нам нужно изменить настройки двух шариков, ближайших к этому блику.

Для маленького:

Параметр Тиснение с прежними настройками. Для того, что крупнее:

Вот собственно и все. Вот так выглядит наше меню:

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