Как в фотошопе нарисовать кнопку для сайта
1. Создаём новое изображение с тёмным фоном (на светлом фоне кнопка будет смотреться плохо):
2. Выбираем инструмент Rounded Rectangle Tool, радиус скругления углов выставьте примерно в 15 пикселей (Radius: 15px) и нарисуйте заготовку для кнопки:
3. Заходим в Layer Style данного слоя (для этого на панели слоёв Layers кликните правой клавишей по слою, выберите пункт Blending Options...), там перейдите на вкладку Outer Glow и настройте параметры свечения следующим образом (красным цветом я написал шестнадцатеричное значение используемого цвета):
4. Затем на вкладке Inner Glow выставьте такие значения, как показано ниже:
5. Сейчас переходим на вкладку Gradient Overlay и там настроим градиент:
Ниже показаны подробные настройки градиента (чтобы открыть это окошко, кликните по полосе справа от надписи Gradient):
6. А теперь на вкладке Stroke настроим обводку:
Жмём везде Ok и получаем фон нашей кнопки:
7. Будем рисовать блики. Сразу нужно выделить нашу кнопку. Для этого зажмите клавишу Ctrl и кликните по слою на панели слоёв:
8. Выберите инструмент Elliptical Marque Tool и, зажав Alt, выполните следующее выделение:
9. Создайте новый слой и залейте выделение белым цветом (с помощью Paint Bucket Tool):
10. Теперь к слою с будущим бликом необходимо добавить маску. Для этого на панели слоёв, снизу, нажмите кнопку Add Layer Mask (ввиде прямоугольника, внутри которого круг).
Затем выберите градиентную заливку (Gradient Tool) и, чёрно-белым градиентом, залейте маску снизу вверх:
А получиться должно вот так:
11. Сейчас добавьте какой-нибудь текст белого цвета (шрифт, который я использовал в данном уроке, можно скачать ниже):
12. Заходим в Layer Style и на вкладке Outer Glow добавим свечение:
13. Жмём Ok и получаем слегка светящийся текст:
14. Создадим копию слоя с текстом, отразим его по вертикали (используйте Edit —> Transform —> Flip Vertical) и разместим немного ниже:
15. Добавим к слою с текстом маску и зальём её чёрно-белым градиентом снизу вверх (как мы это делали ранее, при создании блика):
16. Выбираем карандаш (Pencil Tool) и на новом слое рисуем небольшой треугольник, затем добавляем к нему такие же эффекты, как и к тексту:
17. Теперь с помощью Pencil Tool нарисуйте две тоненькие вертикальные полоски — одну белую, вторую чёрную:
18. Измените смешивание (Blend Mode) с Normal на Overlay, а непрозрачность Opacity уменьшите до 60%:
И,
как результат, получаем такую вот неоновую кнопку, которую можно
использовать в дизайне сайта (тут я ещё добавил отражение самой кнопки,
как оно делается вы уже знаете):
Если вам что-то непонятно в это или других уроках — заходите на наш форум или пишите мне лично — отвечу и помогу всем!
.: Дополнительно :.
 Скачать шрифт « Hooge 05_55 Cyr2 » | ZIP, 15.2 КБ
Источник: http://designarts.ru/lessons/photoshop/23/index.html
| 
