2. Создать кнопок навигационного меню

2.1. Простое навигационное меню

Для того, чтобы создать навигационное меню при помощи инструментов Adobe Photoshop CS5 нужно проделать следующие шаги: сначала с помощью прямоугольника со скругленными краями я создал фигуру, потом наложил на нее стиль слоя для придания объема. Далее оформил круглый маркер навигационного меню. Потом с помощью текста создал указатель-стрелку. В заключении раскопировал созданную кнопку и написал на каждой из них свой текст. Ниже я привел каждый шаг более подробно с иллюстрациями:

 

Шаг 1. Создал в Photoshop CS5 новый документ, залил его цветом #0c1b26.

Рис.9: Новый документ, залитый общим фоном

Шаг 2. На панели инструментов выбрал инструмент «Прямоугольник со скругленными краями» (Rounded Rectangle Tool). В строке настроек под верхним меню выставил «Радиус» (Radius) 50 пикселей и создал фигуру как на рисунке ниже, цвет любой.

Рис.10: Создание фигуры «Прямоугольник со скругленными краями»

Шаг 3. К созданной фигуре применил стиль слоя «Наложение градиента» (Gradient Overlay). Цвет слева #6d78a5, справа #9ea4c4.

Рис.11: Окно «Наложение градиента»

Шаг 4. Далее стиль слоя «Внутренняя тень» (Inner Shadow).

Рис.12: Окно «Внутренняя тень»

Шаг 5. Далее стиль слоя «Тень» (Shadow).

Рис.13: Окно «Тень»

Шаг 6. Получил такой результат.

Рис.14: Результат применения теней

Шаг 7. На новом слое создал небольшой кружок, цвет белый.

Рис.15: Результат добавления кружочка

Шаг 8. К созданной фигуре применил стиль слоя «Наложение градиента» (Gradient Overlay). Цвет слева #6d78a5, справа #9ea4c4.

Рис.16: Окно «Наложение градиента»

Шаг 9. Далее стиль слоя «Внутренняя тень» (Inner Shadow), цвет #0a1a28.

Рис.17: Окно «Внутренняя тень»

Шаг 10. Далее стиль слоя «Тень» (Shadow).

Рис.18: Окно «Тень»

Шаг 11. Получил такой результат.

Рис.19: Результат проделанной работы с кружочком

Шаг 12. Выбираю и настраиваю шрифт, как на рисунке ниже, и с помощью знака «больше» (или треугольная скобка) на английской клавиатуре делаю указатель для меню.

Рис.20: Результат добавления указателя

Шаг 13. Выбираю и настраиваю шрифт, как на рисунке ниже, и пишу текст на кнопке. В данном случае «Практика для новичков».

Рис.21: Результат добавления надписи на кнопке

Шаг 14. Применяю к тексту стиль слоя «Тень» (Shadow).

Рис.22: Окно «Тень»

Шаг 15. Получили такой результат.

Рис. 23: Результат готовой кнопки

Шаг 16. Теперь аналогичным образом создаю еще четыре кнопки, пишу на них текст и получаю готовое меню навигации.

Рис.24: Готовое меню с кнопками и надписями

 Таким образом, можно сделать любые кнопки с любым стилем и дизайном, Photoshop позволяет проделать все это без особых навыков и знаний основ web-дизайна.

2.2. Навигационное меню с выпадающим подменю

Также я создал стильное современное навигационное меню  с выпадающим списком подменю и красивой лентой, используемой в качестве кнопки «На главную».

Для создания такого меню я начал с того, что создал новый документ с размерами 600x450px, залил его серым цветом (# e6e6e6). Хотя можно использовать и ширину документа большего размера, это на вкус каждого.

Рис.25: Окно «Новый»

Мое меню будет состоять из 6 пунктов, каждый по 95px в ширину. Высота меню будет 55 пикселей. Итак, выбираю инструмент Закругленный прямоугольник (U), радиус установил 5px. Рисую прямоугольник 570px (95 * 6) х 55 пикселей.

Рис.26: Панель инструмента «Закругленный прямоугольник»

Теперь использую следующие настройки стиля слоя:

Рис.27: Окно «Стиль слоя»

Рис.28: «Стиль слоя»

Рис.29: «Стиль слоя»

Для разделения каждой кнопки используем инструмент Линия. Добавляю по две вертикальные линии на каждом 95 пикселе (как на картинке ниже). Эти линии создадут красивый эффект глубины.

Рис.30: Добавление линий для эффекта

Теперь дублирую эти прямые еще 4 раза и располагаю их так, чтобы получить 6 пунктов меню по 95px каждый. Первый пункт оставляю без текста (там будет ссылка на главную страницу). А к остальным добавляю текст. Я использовал шрифт Georgia 13px.

Рис.31: Добавление надписей ко всем кнопкам

Переходим к выпадающему меню. Выбираю инструмент Прямоугольник и рисую прямоугольник 94x53px. Использую для фона цвет #70939f . Главное, чтоб прямоугольник находился поверх панели меню. Перемещаю его. Затем выбераю инструмент Произвольная фигура (U) и добавляю маленькую стрелку рядом с кнопкой из готовых фигур.

Рис.32: Добавление второго прямоугольника и стрелки

Далее выбираю Закругленный прямоугольник (U) с радиусом 5px. На заднем плане относительно панели меню рисую прямоугольник 140x150px. Цвет фигуры должен быть тот же что и у нажатой кнопки Portfolio.

Рис.33: Добавление прямоугольника для выпадающего списка

Теперь добавляю текст и те же линии-разделители, что я добавлял к панели меню. Копирую их и поворачиваю на 90 градусов, это несложно.

Рис.34: Добавление текста и линий разделителей

Переходим к ленточке. Этот шаг посвящен созданию нестандартной фигуры с использованием Пера (P). Выбираю Прямоугольник (U) и рисую как на рисунке ниже, примерный размер 50x70px. Далее правой кнопкой мыши на слое и нажимаю «Растрировать слой».

Рис.35: Добавление ленточки

Выбираю Перо (P)в режиме «Контур». Затем создаю контур как на рисунке ниже. Щелкаю правой кнопкой мыши, нажимаю «Образовать выделенную область». Есть способ проще: выделяю часть фигуры Выделением, к примеру, Прямолинейным Лассо.

Рис.36: Создание контура ленточки

Теперь смело нажимаю кнопку Delete, чтобы удалить выделенную область.

Рис.37: Результат проработки ленточки

Пером (P), но в в режиме «Фигура» рисую серую фигуру как на картинке ниже, чтобы создать красивый эффект тени.

Рис.38: Создание тени для ленточки

Кнопка почти готова. Теперь создам эффект швов. Используя пунктирную Линию (U), чтобы добавить небольшие вертикальные полоски на правую и левую сторону кнопки.

Рис. 39: Добавления «эффекта швов»

Последний шаг: добавляю маленькую иконку дома в середину кнопки (ее можно найти в произвольных фигурах). Заливку оставил белой, затем добавил эффект тени.

Рис.40: Окно «Стиль слоя»

Готово! Теперь посмотрим, что у меня получилось:

Рис. 41: Результат создания меню с выпадающим списком

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