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

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

Рисуется она не сложно, несмотря на количество пунктов (их много для того, чтобы вы лучше поняли и чтобы у вас меньше было вопросов). Ну что же... начнём!

Стильная кнопка для сайта, в фотошопе

1. Создадим новое изображение с белым фоном:

2. Рисовать мы будем векторами — нужно это для того, чтобы вы могли легко уменьшить нарисованную кнопку, без потери качества. Для этого выбираем инструмент Ellipse Tool, зажимаем клавишу Shift и в центре рисуем любым цветом такой круг:

3. Добавим немного эффектов: кликаем на слое с кругом правой клавишей и выбираем пункт Blending Options, переходим на вкладку Gradient Overlay и зальём наш круг градиентом со следующими параметрами:

4. На вкладке Bevel and Emboss выставим следующие параметры (для придания эффекта выпуклости):

5. И, чтобы наша кнопка казалась ещё более объёмной, добавим к ней тень (вкладка Drop Shadow):

6. Жмём Ok и смотрим на результат:

7. На кнопку пока это не похоже, а вот если сделать ещё кое что... Значит так. Создаём новый слой, снова выбираем инструмент Ellipse Tool и, зажав Shift рисуем в центре круг, но меньшим радиусом (чтобы во время рисования перемещать наш круг, и разместить в центре, просто зажмите клавишу пробел):

8. На новом слое с кругом так же заходим в Blending Options, на вкладку Inner Shadow (внутренняя тень) и делаем следующее:

9. На вкладке Gradient Overlay кликаем по образцу градиента (полоса справа от надписи Gradient:) и в открывшемся окне создаём такой градиент:

10. Затем кликаем Ok и выставим такие значения:

11. Оставшись на вкладке Gradient Overlay, не закрывая окно Layer Style кликаем на нашем рисунке и перемещаем немного вниз. Теперь переходим на вкладку Stroke и создаём следующий бордюр:

12. Кликаем Ok и получаем более-менее приличную кнопку:

13. Мы на этом не остановимся. Давайте добавим блики, тогда наша кнопка будет похожа на стеклянную. Для этого создаём новый слой с помощью инструмента Elliptical Marque Tool создаём овальное выделение и заливаем его белым цветом (с помощью Paint Bucket Tool):

14. После этого зажимаем клавишу Ctrl и кликаем на слое с верхним кругом (на панели слоёв), отпускаем Ctrl и инвертируем выделение (Shift + Ctrl + I или в меню выбираем Select —> Inverse). Теперь жмём клавишу Delete и получаем следующее изображение:

15. На панели слоёв у слоя с будущим бликом изменим параметр Normal на Soft Light, там же нажимаем кнопку Add Vector Mask (кнопка находится снизу), выбираем инструмент Gradient Tool, выбираем чёрный цвет и заливаем наш блик снизу вверх:

И получаем практически готовый вариант кнопки:

16. Теперь не мешало бы добавить какой-нибудь текст (шрифт, который я использовал, можно скачать ниже):

17. Применим к тексту пару эффектов: добавим внешнее свечение:

Зальём текст градиентом:

И добавим бордюр:

Вот что мы получим:

18. Можно добавить к кнопке мою любимую штриховку. Как это делается можно прочесть в уроке о создании логотипа (пункт №6) или в уроке о создании UserBar'а (в пункте №5):

19. Для разнообразия можно изменить цвет кнопки. Для этого кликаем на слое, цвет которого нам нужно изменить, и заходим в пункт Hue/Saturation (Ctrl + U или в меню Image —> Adjustments —> Hue/Saturation...) и подвигаем ползунки по вкусу. Получим ту же кнопку, но другого цвета:

PS: со своими вопросами по уроку обращайтесь к автору, оставив комментарий ниже!