Главная » Статьи » Веб-дизайн

Заманчивая кнопочка I

Заманчивая кнопочка

В этом уроке Photoshop вы научитесь создавать стильную кнопку для веб-сайта. Такой стиль кнопок, кстати, очень популярен в западном Интернете.

Шаг 1:

Создайте новый документ.
Возьмите инструмент - прямоугольное выделение  (Rectangular Marquee Tool) и сделайте прямоугольное выделение как показано на скриншоте:

Шаг 2:

Обратитесь в меню Select, далее Modify > Smooth и установите следующие параметры:


Результат:

Шаг 3:

Установите в качестве основного цвета: #1A7CA1
а фоновый цвет: #09A5D7:


Возьмите инструмент - градиент  и заполните ваше выделение градиентом от светлого к темному:


Нажмите CTRL + D чтобы снять выделение.

 

Шаг 4:

Нажмите CTRL + T чтобы вызвать инструмент свободная трансформация. Зажмите клавиши SHIFT + CTRL + ALT, разместите курсор мыши около нижнего правого узла.

Перетащите его немного внутрь по направлению к центру прямоугольника. Это действие изменит пропорции в равном соотношении и сделает для нас красивую заготовку для будущей кнопки.


Нажмите ENTER чтобы завершить трансформацию.

Результат: 

Шаг 5:

Дважды щелкните на окошке с этим слоем, чтобы применить следующие стили: 

Drop Shadow - отбросить тень:


Inner Shadow - внутренняя тень:


Результат:


Шаг 6:

Зажмите CTRL и кликните по слою с фигурой, чтобы появилось выделение.

Затем создайте новый слой - нажмите на клавиатуре CTRL + SHIFT + ALT + N.

Перетащите этот новосозданный слой ПОД существующий:


Залейте этот слой черным цветом (#000000).

Обратитесь в меню Filter, затем Blur > Gaussian Blur и установите следующие значения:


Нажмите букву 'V' на клавиатуре, чтобы вызвать инструмент перемещения  и нажмите на верхнюю стрелку 3 раза, чтобы перенести это выделение выше на 3 px:

Установите прозрачность слоя (opacity) на 60%:


Результат: 

Категория: Веб-дизайн | (28.08.2010)
Просмотров: 424 | Теги: кнопка | Рейтинг: 0.0/0
Всего комментариев: 0