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

Создание стильной кнопки

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

Создание стильной кнопки: делаем заготовку

1. Создайте новый документ размером 1000x500px. Зачем так много? Такой размер документа даст возможность проработать все детали.

2. Возьмите инструмент Rounded Rectangle Tool (U), выставьте значение Radius в верхней панели 3px. Сделайте основной цвет чёрным (#000000). Ну а теперь нарисуйте заготовку для нашей будущей кнопки:

Создание стильной кнопки

3. Сейчас перейдите к стилю слоя (двойной щелчок по нему в панели слоёв) и установите такие настройки:

Создание стильной кнопки

Создание стильной кнопки

Создание стильной кнопки

Создание стильной кнопки

Создание стильной кнопки

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

Сейчас ваша заготовка для стильной кнопки должна выглядеть как-то так:

Создание стильной кнопки

Создание стильной кнопки: украшение

5. Создайте новый слой. На нём жёсткой кистью с размером 13px и цветом #ffd2cb нарисуйте линию в нижней части кнопки:

Создание стильной кнопки

6. Теперь в стиле слоя выставляем следующие параметры:

Создание стильной кнопки

Создание стильной кнопки

Наш результат теперь выглядит примерно так:

Создание стильной кнопки

7. Теперь надо пройти в Layer (Слой) ->Layer Mask (Маска слоя) ->Reveal All (Показать все), взять инструмент градиента

Создание стильной кнопки

И выполнить заливку следующим образом:

Создание стильной кнопки

Получаем нечто похожее:

Создание стильной кнопки

8. Теперь возьмите Pen Tool (Перо) и нарисуйте с его помощью такую фигуру:

Создание стильной кнопки

9. Затем Filter ->Blur -> Gaussian Blur с параметром Radius 2px:

Создание стильной кнопки

10. Ctrl + клик на слое с базовой формой кнопки, чтобы получить выделение. Потом Shift + Ctrl + I для инверсии выделения. И Delete на слое с фигурой:

Создание стильной кнопки

Не забудьте снять выделение (Ctrl + D)

11. Клонируйте слой (Правая кнопка мыши по слою -> Duplicate layer (Дубликат слоя)). Теперь Edit (Редактирование) -> Transform (Трансформирование) -> Flip Horizontal (Отразить по горизонтали) и переместите слой на другую сторону кнопки:

Создание стильной кнопки

12. Создайте новый слой над слоем Shape 1, Ctrl + клик по слою Shape 1 для выделения. Теперь Edit (Редактирование) -> Stroke (Обводка) с параметром Width (Ширина) 2px, белым цветом и Location Inside (Расположение – внутри). Opacity (непрозрачность) слоя на 80%.

Создание стильной кнопки

Создание стильной кнопки

 Создание стильной кнопки: текст

13. Займёмся теперь текстом. Напишите произвольную надпись посередине кнопки любым шрифтом, и настройте стиль слоя:

Создание стильной кнопки

Создание стильной кнопки

Создание стильной кнопки

Создание стильной кнопки

14. Наша стильная кнопка готова. Теперь сохраните ваш psd файл, удалите слой Background, выполните Image (Изображение) ->Trim (Обрезка), и сохраните вашу кнопку как .png. А сейчас внесите изменения во внешний вид полоски (поэкспериментируйте со стилем слоя), можете изменить цвет или силу внешнего свечения. Можете также изменить силу свечения вокруг текста. И сохраните файл опять же как .png, но под другим именем. Ну а теперь можете открыть оба .png файла и уменьшить размер до нужного вам.

Таким образом, мы получили кнопку в 2х вариантах. Первый стандартный, а второй (с усиленным свечением) пригодится, когда пользователь будет наводить на кнопку. Таким образом, она “оживёт” и свечение усилится.

Стильная кнопкаСтильная кнопка

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

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

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

  1. Елена:

    Уважаемый M@X! Большое спасибо за Ваш труд! Сейчас создаю собственный сайт, и Ваши уроки просто неоценимы!
    Создаю стильную кнопу. Все хорошо, все понятно. Но на пункте 10 случился затык… Никак не обрезается лишняя фигура сбоку. Вроде все делаю, как написано, просто по алгоритму. Но, возможно пропущен какой то важный шажочек для таких чайников, как я.
    Не получилось сделать скрин с выделенной областью, поэтому пришлось сфотографировать.
    http://img-fotki.yandex.ru/get/9153/3816999.2a/0_b532e_e8d3947d_XL.jpg
    У меня к Вам вопрос. Те ли области выделены, и если можно, тыкните, в какое место курсором жать и нажимать delet, чтобы обрезать излишки трапеции сбоку.
    Честно, перепробовала несколько раз, не получается.
    Может, от того, что у меня старая версия фотошопа, SC2.
    Заранее спасибо, с уважением, Елена.

    • M@X M@X:

      Елена, в 10 шаге действительно есть неточность (мой косяк :) ), нужно зажать Ctrl и кликнуть по слою с базовой фигурой (в вашем случае это Layer 1). После этого вы получите выделение по форме кнопки, которое нужно инвертировать и нажать Delete.
      В уроке написано что надо кликать по слою Shape 1, и это не верно. Сейчас поправлю.

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

Имя: *

Сообщение: