Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

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

Anna | 14.05.2014 | нет комментариев

В этом уроке 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%:

Результат:

Шаг 7:

Теперь создайте новый слой (SHIFT + CTRL + ALT + N) поверх слоя с нашей прямоугольной кнопочкой (новый слой должен расположиться выше всех остальных)

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

Обратитесь в меню  Select, затем Modify > Contract и установите там значение в 1 или 2 px:

Установите в качестве основного цвета белый (#FFFFFF), возьмите инструмент градиент () и заполните это выделение градиентом от белого к прозрачному (white to transparent):

Шаг 8:

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

Нажмите CTRL + T, чтобы вызвать инструмент свободная трансформация.

Зажмите SHIFT + CTRL + ALT и, как уже делали ранее, и перетащите верхний средний узел немного внутрь:

Нажмите ENTER.

Шаг 9:

Поменяйте этому слою режим смешивания на ”Overlay”, и уменьшите прозрачность слоя (opacity) до 68%:

Результат: 

Шаг 10:

Создайте новый слой поверх всех остальных.
Затем возьмите инструмент – выделение эллипсом () и сделайте такое же выделение, как на скриншоте:

Установите основной цвет белый (#FFFFFF), возьмите инструмент градиент и залейте выделение градиентом от белого к прозрачному (white to transparent):

Снимите выделение CTRL + D.

Вызовите инструмент трансформации CTRL + T.

Разместите мышь на среднем нижнем узле, кликните и потяните немного вверх, чтобы сократить блик:

Нажмите ENTER.

Результат:

Шаг 11 он же последний:

Осталось добавить текст на кнопку.
Установите основной цвет: #07577A и выберите подходящий шрифт, например “BM Sly”. Размер - 10 pt.

У вас получилось?

Мы надеемся, что вам понравился данный урок и вы научились рисовать привлекательные и заманчивые веб-кнопки для ваших сайтов.

Источник: photoshop-master.ru

Оставить комментарий
БАЗА ЗНАНИЙ
СЛУЧАЙНАЯ СТАТЬЯ
СЛУЧАЙНЫЙ БЛОГ
СЛУЧАЙНЫЙ МОД
СЛУЧАЙНЫЙ СКИН
НОВЫЕ МОДЫ
НОВЫЕ СКИНЫ
НАКОПЛЕННЫЙ ОПЫТ
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB