Красивая кнопка для сайта »

В этом уроке я вам покажу как нарисовать в фотошопе красивую модную кнопку для сайта...

Конечно, желательно чтобы весь сайт был оформлен в таком стиле, ну или хотя бы в такой цветовой гамме, как и кнопка, иначе же она проста не впишется в ваш дизайн.

Вроде пояснил. А теперь приступим к рисованию. Надеюсь, вы уже заранее запустили фотошоп... :)

Рисуем красивую кнопку для сайта

1. Создадим новое изображение размерами чуть больше будущей кнопки:

2. Наша кнопка будет с немного закруглёнными краями, по этому лучше её нарисовать в векторном формате. Для этого выбираем инструмент Rounded Rectangle Tool, радиус закругления углов (Radius) поставим равным 4 пикселя, цвет любой, и нарисуем такую фигуру:

3. А сейчас будем добавлять к нашей фигуре спецэффекты. Сразу, для начала, нужно выставить прозрачность Fill слоя с фигурой в 0%, а затем залазим в Blending Options (правый клик на слое, и там выбираем такой пункт) на вкладку Gradient Overlay — это мы будем раскрашивать нашу кнопку. Выставим там такие параметры:

4. На вкладке Stroke (обводка или же бордюр) выставим такие значения:

5. На вкладке Inner Glow (внутреннее свечение) такие:

6. А тут добавим внутреннюю тень (вкладка Inner Shadow):

7. Наконец-то сделаем так, чтобы наша кнопка отбросила тень (вкладка Drop Shadow), и тем самым казалась более объёмной (типа она не на плоскости а в пространстве):

После этого наша кнопка примет следующий вид:

8. Сейчас добавим штриховку, блики и пару эффектов. Для этого сразу создадим новый слой и выделим нашу фигуру (зажимаем клавишу Ctrl и кликаем на слой с фигурой, затем отпускаем Ctrl):

9. Не снимая выделения кликаем на новом слое (на панели слоёв) и зальём выделение любым цветом (с помощью инструмента Paint Bucket Tool):

10. Теперь прозрачность Fill нашего нового слоя (точнее непрозрачность) выставим в 0% и в Blending Options добавим несколько эффектов. Сразу добавим внутреннее свечение (Inner Glow):

11. Затем добавим блики с помощью градиента (вкладка называется Gradient Overlay):

Вот тут вы можете увидеть более подробно какой я применил градиент (чтобы открыть данное окошко — кликните на полоске справа от надписи Gradient. Нижние квадратики определяют цвет нашего блика — кликаем по ним и в пункте Color выбираем белый цвет. Верхние квадратики — это прозрачность — выставьте значения прозрачности как я показал на рисунке ниже (кликаем по верхним квадратам и в поле Opacity вписываем соответствующее ему значение). Потом кликаем по среднему верхнему квадрату и ромбики, которые по бокам, пододвигаем как можно ближе к нему:

12. Сейчас добавим штриховку. Для этого нам сразу нужно создать текстуру штриховки (как её создавать вы можете прочесть в уроке о создании логотипа (пункт №6) или UserBar'а (в пункте №5)), а потом на вкладке Pattern Overlay выставить следующие значения параметров:

И как результат получаем красивую кнопку для применения на вашем сайте:

13. И напоследок было бы неплохо добавить к нашей кнопки какой-нибудь текст (шрифт, который я для этого использовал, можно скачать чуть ниже). Финальная версия моей кнопки выглядит следующим образом:

Осталось пожелать вам удачи! Экспериментируйте и у вас обязательно всё получится!

.: Дополнительно :.

Скачать шрифт « Mistral » | ZIP, 115 КБ