Основное меню

Начнем с создания нового документа. Создайте в Photoshop документ размером 400 x 110 пикселей и используя инструмент Rounded Rectangle Tool (Инструмент "Прямоугольник со скругленными углами") нарисуйте прямоугольник, задав для него следующие параметры:

Профессиональная кнопка "Download"

Профессиональная кнопка "Download"

Теперь нужно применить стили для слоя с прямоугольником. Откройте палитру слоев, правой кнопкой мыши кликните по слою с прямоугольником и выберите из меню пункт Blending Options (Параметры наложения). Установите параметры согласно картинкам ниже:

Профессиональная кнопка "Download"

Профессиональная кнопка "Download"

Вы можете использовать любой цвет, которые вы захотите, но ваша кнопка должна выглядеть примерно так:

Профессиональная кнопка "Download"

Теперь пришло время добавить красивый, глянцевый блеск на кнопку. Начните с выделения вокруг вашей кнопки, нажмите Select -> Load Selection (Выделение -> Загрузить выделенную область), уменьшим выделенную область на 5 пикселей, нажмите вкладку Select -> Modify -> Contract (Выделение -> Модификация -> Сжать...), в поле "сжать на" поставьте цифру 5, то есть тем самым мы уменьшаем выделенную область на 5 пикселей по всему периметру.

Профессиональная кнопка "Download"

Создайте новый слой, не убирая выделения, залейте выделенную область градиентом (Бело-прозрачным), проведя линию сверху вниз.

Профессиональная кнопка "Download"

Теперь нужно сделать извилистую выделенную область, используя Pen Tool (Инструмент"Перо") и удалить нижнюю половину градиента:

Профессиональная кнопка "Download"

Следующим этапом будет добавление текста на кнопку, используя инструмент Horizontal Type Tool (Инструмент "Горизонтальный текст"):

Профессиональная кнопка "Download"

Для верхней строки использовался шрифт Myriad Pro с параметрами: "Курсив", Кегль - "24 pt", Метод сглаживания - "Острый"
Для нижней строки текста я использовался шрифт Semibold с параметрами: "Курсив", Кегль - "12 pt", Метод сглаживания - "Острый"

Добавьте для шрифта немного тени используя параметры наложения для слоя:

Профессиональная кнопка "Download"

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

Профессиональная кнопка "Download"

Так же можно добавить зубчатую шестеренку, с ней кнопка будет смотреться еще лучше:

Профессиональная кнопка "Download"

Профессиональная кнопка "Download"

На этом создание кнопки "Загрузка" закончено.

Источник материала

Раздел: Статьи для веб-дизайнера

магазин плетеной мебели


Дополнительно Популярное
Дизайнерский веб-ресурс: Дле, Вордпресс, Джумла, фотошоп, плагины, иконки, шаблоны, текстуры, смайлики, логотипы.