Фотошоп для фотографа 2013

Рисуем стильное меню для сайта используя Фотошоп

| Категория: Уроки по созданию дизайна в Фотошопе | Сложность урока: Средняя

В данном уроке Фотошопа мы рассмотрим, как сделать стильное навигационное меню для вашего сайта.


Финальный результат

Рисуем стильное меню для сайта используя Фотошоп

Приступаем к уроку Фотошопа


Создайте документ с размерами → 500x200 (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")) и залейте его серым цветом (Paint Bucket Tool Инструмент - Заливка (Инструмент Заливка / Клавиша "G")).


Рисуем стильное меню для сайта используя Фотошоп

Далее используйте Rectangular Marquee Tool Инструмент - Прямоугольная область выделения (Прямоугольная область выделения / Клавиша "M") и создайте примерно такое выделение (извините за разные цвета фонов в этом и предыдущем изображении, просто не обращайте внимание на это): ↓


Рисуем стильное меню для сайта используя Фотошоп

Далее залейте выделение цветом на ваш вкус. Переходим в стили слоя и делаем настройки как у автора: ↓


Параметры градиента: ↓

Рисуем стильное меню для сайта используя Фотошоп

Drop Shadow (Тень). ↓

Рисуем стильное меню для сайта используя Фотошоп

Stroke (Обводка). ↓

Рисуем стильное меню для сайта используя Фотошоп

Inner Shadow (Внутренняя тень). ↓

Рисуем стильное меню для сайта используя Фотошоп

Выделите свое меню, зажав Ctrl нажимая левой кнопкой мыши на изображения на панеле слоев. Далее идем Select > Modify > Contract (Выделение > Модификация > Сжать), 2 пикселя.


Рисуем стильное меню для сайта используя Фотошоп

Создайте новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")) и залейте выделение белым цветом (Paint Bucket Tool Инструмент - Заливка (Инструмент Заливка / Клавиша "G")), теперь с помощью трансформации (Ctrl+T), сделайте чтобы этот слой покрывал половину нашего меню.


Рисуем стильное меню для сайта используя Фотошоп

Измените opacity (непрозрачность) на 25%.


Рисуем стильное меню для сайта используя Фотошоп

Давайте поработаем над кнопочками на меню.

Создайте примерно такое выделение, как на рисунке ниже, залейте его любым цветом. ↓


Рисуем стильное меню для сайта используя Фотошоп

Далее идите в стили слоя и делайте настройки примерно как тут: ↓

Drop Shadow (Тень), Gradient Overlay (Наложение градиента).


Параметры градиента: ↓

Рисуем стильное меню для сайта используя Фотошоп

Рисуем стильное меню для сайта используя Фотошоп

Рисуем стильное меню для сайта используя Фотошоп

Выделите свою кнопку, зажав Ctrl нажимая левой кнопкой мыши на изображения на панеле слоев. Далее идем Select > Modify > Contract (Выделение > Модификация > Сжать), 2 пикселя.


Рисуем стильное меню для сайта используя Фотошоп

Создайте новый слой и залейте выделение белым цветом, и с помощью трансформации (Ctrl+T), сделайте чтобы этот слой покрывал половину нашей кнопки.


Рисуем стильное меню для сайта используя Фотошоп

Теперь измените opacity (непрозрачность) так, чтобы вы могли едва обратить внимание на белый слой. Я ставил 6%.


Рисуем стильное меню для сайта используя Фотошоп

В конце добавим текст (Horizontal Type Tool Инструмент - Горизонтальный текст (Инструмент "Горизонтальный текст" / Клавиша "T")), используйте какой нибуть четкий и строгий шрифт, цвет светлосерый на кнопке и темносерый на меню.


Рисуем стильное меню для сайта используя Фотошоп

Текст пишите какой вам нужен. В конце должно получится так: ↓


Финальный результат

Рисуем стильное меню для сайта используя Фотошоп

Brian;

Урок подготовлен для Вас командой сайта PhotoshopPro.ru