Уроки фотошопа, графика, дизайн
arrow

Создаём кнопку меню

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

Так будет выглядеть кнопка меню в результате:

Создаем кнопку меню

Создаём кнопку меню

1. Создайте новый документ с размером 500x500px и залейте его градиентом от чёрного (#000000) до тёмно-синего цвета (#12263b):

Создаем кнопку меню

2. Возьмите инструмент Rounded Rectangle Tool (U) (Скруглённый прямоугольник) с радиусом 25px и нарисуйте с его помощью такую форму:

Создаем кнопку меню

3. Растеризуйте форму (правой кнопкой мыши по слою -> Rasterize Layer):

Создаем кнопку меню

4. Перейдите в стиль слоя, дважды кликнув по нему мышью, и установите такие параметры:

Создаем кнопку меню

Создаем кнопку меню

На данном этапе кнопка меню должна выглядеть примерно так:

Создаем кнопку меню

5. Возьмите инструмент Rectangular Marquee Tool (M) (Прямоугольное выделение), выделите верхнюю часть кнопки:

Создаем кнопку меню

и удалите её:

Создаем кнопку меню

6. Теперь нужно создать внутреннюю часть кнопки меню. Для этого выполните выделение вокруг кнопки (Ctrl+клик мышью по миниатюре слоя), затем пройдите в Select (Выделение) -> Modify (Изменение) -> Contract (Сжатие) на 1px:

Создаем кнопку меню

7. Залейте цветом #222224:

Создаем кнопку меню

Создаём свечение для кнопки меню

8. Ну а теперь мы сделаем свечение внутри кнопки: создайте новый слой (Shift+Ctrl+N), возьмите Elliptical Marquee Tool (Эллипс) и нарисуйте небольшое выделение в середине кнопки:

Создаем кнопку меню

Залейте его голубым цветом (#4ad1dc), снимите выделение (Ctrl+D) и примените Filter (Фильтр) -> Blur (Размытие) -> Gaussian Blur (По Гауссу) со значением Radius равным 14px:

Создаем кнопку меню

9. Теперь примените Filter -> Blur -> Motion Blur (Размытие в движении) с такими параметрами:

Создаем кнопку меню

Результат выглядит следующим образом:

Создаем кнопку меню

10. Используйте инструмент Polygonal Lasso Tool (Полигональное лассо) для создания похожей формы в верхней части кнопки меню:

Создаем кнопку меню

11. Создайте новый слой, залейте выделение белым цветом, примените Filter -> Blur -> Gaussian Blur (не забыв перед этим нажать Ctrl+D ;)) с радиусом 5px, а потом Filter -> Blur -> Motion Blur со значением Distance (Дистанция) 100px:

Создаем кнопку меню

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

Создаем кнопку меню

Нажмите Shift+Ctrl+I для его инверсии, удалите содержимое клавишей Delete и уберите его (Ctrl+D или кликните в любом месте на холсте). Теперь блик выглядит так:

Создаем кнопку меню

Текстура для кнопки меню

12. Для создания верхней и нижней части кнопки меню нам понадобится такая текстура:

Создаем кнопку меню

Её созданием мы сейчас и займёмся.

Создайте новый документ размером 3x3px, увеличьте его для удобства работы, и нарисуйте карандашом (Pencil Tool) с размером 1px узор, аналогичный показанному выше.

Для серого я использовал цвет #d6d6d6.

13. Перейдите в Edit (Редактировать) -> Define Pattern (Определить узор), и дайте новому узору имя:

Создаем кнопку меню

Всё, этот документ больше не понадобится, так что можете его закрыть.

14. Создайте выделение по размеру блика (смотрите, чтоб оно не залезало на обводку). Рекомендую на этом шаге приблизить изображение, дабы работать стало удобнее:

Создаем кнопку меню

Залейте выделение белым цветом, и снимите его (Ctrl+D), установите режим смешивания на Darker Color и Opacity (Непрозрачность) 15%:

Создаем кнопку меню

Перейдите в стиль слоя, и установите такие параметры Pattern Overlay (Перекрытие текстурой):

Создаем кнопку меню

Теперь кнопка меню выглядит так:

Создаем кнопку меню

Создаём кнопку меню: доработка деталей

15. Пришло время добавить больше деталей. В первую очередь создайте похожую фигуру в нижней части кнопки и залейте её белым цветом на новом слое:

Создаем кнопку меню

16. Снимите выделение и примените Filter -> Blur -> Motion Blur с Distance 80px:

Создаем кнопку меню

17. С помощью карандаша белого цвета размером 1px нарисуйте на новом слое с Opacity 80% стрелку:

Создаем кнопку меню

18. Нажмите сочетание клавиш Ctrl+J для создания копии слоя, и примените уже знакомый Motion Blur с Distance 16px:

Создаем кнопку меню

19. Создайте ещё один слой и нарисуйте всё тем же карандашом, но уже с цветом #2de7e9 три полоски:

Создаем кнопку меню

20. И снова создайте новый слой, установите его непрозрачность (Opacity) на 30%, сделайте на нём выделение как на картинке ниже и залейте его тем же цветом, что полоски:

Создаем кнопку меню

21. Нажмите Ctrl+D, объедините этот слой с предыдущим (Ctrl+E), а затем примените фильтр Motion Blur с дистанцией 100px:

Создаем кнопку меню

22. Удерживая клавишу Ctrl кликните по миниатюре слоя с кнопкой меню (появится выделение), создайте новый слой (Shift+Ctrl+N) и залейте его чёрным цветом. Снимите выделение и примените Filter -> Noise (Шум) -> Add Noise (Добавить шум):

Создаем кнопку меню

23. Режим смешивания установите на Soft Light (мягкий свет), а непрозрачность слоя сделайте 60%. В итоге получилась стильная кнопка меню:

Создаем кнопку меню

24. Остался лишь один финальный штрих для нашей кнопки меню – написание текста. Тут я обойдусь без особых комментариев. Возьмите любой шрифт и цветом #86eff3 напишите всё, что душе угодно:

Создание кнопки меню

На этом всё, мы создали красивую кнопку для меню, которая теперь наверняка украсит ваш сайт. Урок получился длинный, если что-то осталось непонятным, спрашивайте в комментариях, а также нажимайте на социальные кнопки, если урок вам понравился. А я прощаюсь с вами до новых встреч на страницах нашего сайта.

M@X
Веб-дизайнер, основатель проекта psforce.ru и студии веб-дизайна Disarto.

Комментарии (4)

  1. Mike:

    Интересный урок, многое почерпнул для себя. Спасибо)

  2. Viktor:

    Урок понравился только есть непонятности , не получается сделать заливку на 7 шаге (Залейте цветом #222224) объясните пожалуйста поподробнее спасибо.

    • M@X M@X:

      Нужно выбрать инструмент Paint Bucket Tool (Заливка), нажать на квадратик с цветами, в нижнее поле с 6 цифрами вставить #222224. Это число соответствует нужному цвету. Затем просто тыкнуть в то место, которое необходимо залить.

  3. Viktor:

    Спасибо за ответ, но я нашел решение. Не получается залить фон именно после 6 шага не знаю почему но не получилось, а решил проблему путем добавления нового слоя между 6 и 7 шагами.
    Спасибо еще раз за урок действительно очень познавательно, класс!

Оставить комментарий

Имя: *

Сообщение: