Стильная кнопка для сайта, в фотошопе »
Рисуем в
фотошопе круглую стильную глянцевую кнопку, которую можно использовать
на сайте, в качесве логотипа, применить при создании аватарки и др...
Сегодня
мы будем рисовать большую круглую кнопку. Она выглядит очень современно
и стильно, поэтому её можно применить в качестве логотипа, использовать
как аватарку, применить при создании какого-либо скина, или просто в
уменьшенном виде использовать на совём сайте.
Рисуется она
не сложно, несмотря на колличество пунктов (их много для того, чтобы вы
лучше поняли и чтобы у вас меньше было вопросов). Ну что же... начнём!
Стильная кнопка для сайта, в фотошопе
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...) и подвигаем ползунки по вкусу. Получим ту же кнопку, но другого цвета:
.: Дополнительно :.
 Скачать шрифт « Harlow Solid Italic » | ZIP, 30,8 КБ
| 
