На сегодняшнем уроке мы с вами будем учиться делать симпатичные кнопки для сайта.

1. Создаем новый документ. Фон и размер значения не имеют.

2. Делаем заготовку.
С помощью инструмента «Прямоугольник со скругленными краями» (Rounded Rectangle) рисуем такую фигуру. У меня радиус закругления 5 пикселей.

Теперь, используя «Эллипс» и удерживая Shift, рисуем круг, который налаживается поверх прямоугольника. Приблизительно так:

Удерживая CTRL, кликаем на слой с кругом, чтобы выделить его.
Далее идем:
Выделение – Модификация – Сжать(5 пикселей)
Select – modify – contract
Создаем новый слой и заливаем его любым цветом.
Ту же операцию проделываем с прямоугольником. После того, как залили и это выделение, снова кликайте на слой с кругом (который больше) и нажмите Delete. Должно получиться так:

Соединяем слои круга и прямоугольника (большие). Применяем к ним эффект:

К меньшему кругу и обрезанному прямоугольнику применяем такие настройки:

Получилось вот такое:

3. Добавление деталей
Выделяем обрезанный прямоугольник.
Опять сжимаем выделение, на этот раз на 2 пикселя.
С помощью инструмента «Выделение», с такими настройками, удаляем нижнюю часть выделения.
Прошу прощения за многочисленную тавтологию…
Создаем новый слой и заливаем выделенную область белым цветом. Уменьшаем «Непрозрачность» (Opacity) до 20%
Подобные манипуляции проделываем и на круглой части кнопки, чтобы и там добавить бликов.

Добавляем картинку и текст. В настройках для нижнего слоя можно добавить тень, по вкусу.
Кнопка готова

Вот и другие варианты, выполненные по данному методу

Надеюсь, пригодится.
Спасибо за внимание, встретимся после перерыва… И не дай бог кто-то решит прогулять!!