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

Владимир Молочков (В. Новгород)

Жестких стандартов на размеры кнопок не существует. Но на практике сложились следующие величины (в пикселах, см. рис.).

BIGITALRU_11

Квадратная кнопка

Командой File > New создайте новый документ в формате RGB (размер холста должен соответствовать размеру кнопки).

Для заливки будущей кнопки градиентом выделите все изображение и залейте будущую кнопку линейным градиентом в одном направлении.

Выполните команду Select > All, а затем выделите границу Select > Modify > Border  при ее ширине примерно в 10 пикселов.

Далее заполните выделенную область тем же линейным градиентом, но в обратном направлении.

BIGITALRU_22

На рисунке — варианты квадратных кнопок, в зависимости от интенсивности градиентной заливки

Овальная кнопка

Создайте новый документ в формате RGB с размером кнопки 88 х 31 пикселов. Сформируйте овальную область с помощью инструмента Elliptical Marquee Tool и залейте будущую кнопку белым цветом. Затем примените фильтр Filter > Blur > Gaussian Blur с коэффициентом 4,5.

 

Далее необходимо снять выделение и воспользоваться командой Filter > Stylize > Emboss  с параметрами: Angle (Искажение) — 45; Height (Высота) — 4; Amount (Количество) — 84.

BIGITALRU_33

Результат работы — выпуклая рельефная кнопка — показан на рисунке.

Круглая кнопка с тенью

Создайте новый документ в формате RGB.

Командой Layer > New > Layer добавьте новый слой Layer1.

Cформируйте на слое Layer1 инструментом  Elliptical Marquee Tool, удерживая клавишу Ctrl круглую область под предполагаемую кнопку.

Залейте выделенную область линейным градиентом в одном направлении. Затем уменьшите диаметр выделения командой Select > Modify > Contract  с параметром в 5 пикселов.

image01555

Далее заполните выделенную область тем же градиентом, что и ранее, но в обратном направлении, а потом выделение снимите.

Осталось применить эффекты стиля слоя командой Layer > Layer Style > Blending Options и установить их параметры Drop Shadow, Inner Shadow, Outer Glow и Bevel and Emboss по умолчанию.

По окончании работы над кнопкой слои нужно свести командой Layer > Flatten Image.

image033

На рисунке: Круглая кнопка с тенью (два варианта)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *