QuickTUTS.ru - УРОКИ PHOTOSHOP, САЙТОСТРОЙ, БЕСПЛАТНЫЕ ФАЙЛЫ

Шаг 1 – Создание фона

Будущая кнопка лучше всего смотрится на сером шумном фоне. Чтобы получить такой фон, создайте новый документ и залейте его серым (#575757) цветом.

И добавьте немного шума Filter > Noice > Add Noice

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

Шаг 2 – Создание форм для кнопки

Большинство кнопон на сайтах имеют прямоугольную форму. Но не с четкими углами, а с закругленными. Поэтому необходимо, используя инструмент Rounded Rectangle Tool с параметром Radius 4px, создать прямоугольник нужного Вам размера.

Щелкните правой клавишей мыши по форме и выберите пункт Make Selection. После этого слой с формой можно удалить. Создайте новый слой и назовите его Внутренний. Нажмите Shift+F5 или выберите Edit > Fill и залейте область выделения любым цветом.

Теперь выберите Select > Modify > Expand и увеличьте область выделения на 2 пикселя. Также создайте новый слой, назвав его Основа, переместите его под слой Внутренний и залейте область выделения любым цветом.

Также расширьте область выделения на 2 пикселя, создайте новый слой, назвав его Внешний, расположите его под слоем Основа и залейте область выделения любым цветом. Снимите выделение Ctrl+D.

Шаг 3 – Основа кнопки

Перейдите на слой Основа и добавьте следующие стили слоя Layer > Layer Style > Blending Options

Шаг 4 – Внутреннее наполнение кнопки

Теперь активируйте слой Внутренний. Удерживая клавишу, Ctrl щелкните левой клавишей мыши по изображению слоя в палитре слоем – это создаст область выделения вокруг изображения. Перейдите Select > Modify > Contract и уменьшите область выделения на 1 пиксель.

Перейдите Layer > Layer Mask > Hide Selection. Данное действие оставит одну тонкую полоску.

Теперь осталось добавить стиль слоя Gradient Overlay (Наложение градиента). Причем снизу цвет должен быть чуть светлее и соответственно верх тоже немного светлее верхнего края. Это придаст немного блеска кнопке.

Шаг 5 – Встраиваем кнопку в общий фон

Чтобы кнопка не была «чужой» на фоне, ее необходимо визуально встроить. Для этого добавьте следующий стиль к слою Внешний.

Шаг 6 – Добавление текста на кнопку

Само собой разумеется, кнопка должна содержать какой-то информативный текст. Добавьте Ваш текст с помощью инструмента Type Tool и цветом #8e8e8e.

Теперь необходимо добавить эффект вдавленности. Создайте дубликат слоя с текстом (Ctrl+J) и расположите его ниже первоначального слоя. Измените цвет текста на #333333 и переместите слой на один пиксель выше (можете выбрать инструмент Move Tool и нажать стрелку вверх на клавиатуре).

Шаг 7 – Коррекция кнопки

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

Вот теперь можно посмотреть на окончательный результат!