Кнопка для сайта в PhotoShop

Как в фотошопе нарисовать кнопку для сайта


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 КБ