В этом Photoshop уроке мы будем проектировать простое меню в стиле минимализма.
1. Создайте новый документ размером 500 на 300px и протяните линейный градиент Фотошоп инструмент: Градиент с учтановленнми цветами от #ffffff к #d5dfe0, сверху вниз.

2. Возьмите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool), установите радиус скругления углов 7px, основной цвет белый (#FFFFFF) и нарисуйте фигуру, как на рисунке ниже.

3. Добавьте стиль этому слою стиль слоя - Внешнее свечение (Outer Glow). Установите значения как показано на рисунке ниже.

Внутреннее свечение (Inner Glow).

Обводка (Stroke).

Результат будет следующим:

Теперь мы можем приступить к основной части урока, создание меню. Прежде всего создадим подложку под кнопками.
4. Выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool), установите радиус скругления углов 7px и нарисуйте еще одну фигуру выше первой, как на рисунке ниже.

5. Теперь добавьте стиль стиль слоя - Внешнее свечение (Outer Glow).

Наша подложка должна принять прмерно следующий вид:

6. Далее приступим к созданию самих кнопок. Для этого опять воспользуемся инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool) с радиусом 5px.

7. Добавляем кнопке стили стиль слоя - Внутренняя Тень (Inner Shadow).

Наложение градиента (Gradient Overlay).

Обводка (Stroke).

В итоге получим примерно следующее:

8. Теперь займемся добавлением бликов на кнопку. Возьмите инструмент Фотошоп инструмент: Перо (Pen Tool) и нарисуйте фигуру схожую с той, что на рисунке ниже.

9. Растрируйте только что созданную фигуру. После этого примените режим быстрой маски (Quick Mask Mode) с градиентом, как на рисунке ниже:

10. Теперь вернитесь в стандартный режим. У нас останется выделенная область. Нажмите на кнопку Delete, чтобы очистить изображение в этой области.

11. Нажмите Ctrl + D, чтобы убрать выделение. Выберите слой с кнопкой и перейдите Выделение > Загрузить выделенную область (Select > Load Selection). Затем необходимо сжать выделение на 1px, для этого перейдите Выделение > Модификация > Сжать (Select > Modify > Contract).
Нажмите Ctrl + Shift + I, чтобы инвертировать выделение. Вернитесь на слой с бликом и нажмите на клавишу Delete. Снимите выделение при помощи клавиш Ctrl + D и установите уровень непрозрачности 60%.

12. Создайте дубликат слоя с бликом, нажав Ctrl + J. Возьмите инструмент Прямоугольная область (Rectangular Marquee Tool), установите растушевку (feather) 2px и создайте выделение как на исунке ниже.

13. Нажмите Delete для очистки выбранной области, снимите выделение (Ctrl + D), а затем переместите этот слой на 1px вниз.

14. Возьмите инструмент Карандаш (Pencil Tool) и зажав клавишу Shift, нарисуйте две серые линии снизу и сверху кнопки. Используйте #e5f3ff цвет.

15. Напечатайте текст белого цвета на кнопке, воспользовавшись инструментом Горизонтальный текст (Horizontal Type Tool).

16. Добавьте стиль тексту - Тень (Drop Shadow).

17. Добавьте кнопки для остальных разделов сайта. Вот и все! Надеюсь урок был Вам полезен. Спасибо за то что посетили psdtop.ru.
