Как сделать динамическую кнопку (Photoshop и CSS)

Нажмите на картинку что бы посмотреть окончательный демо вариант кнопки с эффектом при наведении курсора на нее.

Если хотите, то можете скачать исходные файлы. В папке находиться файл PSD, изображение PNG, а так же HTML.

Наша кнопка будет размером 250(ширина) х 50(высота). Так как мы хотим создать эффект при наведении курсора, то соответственно нам нужно создать файл размером 250(ширина) х 100(высота).

Поделим наш лист на две половинки. Для этого нужно вызвать линейку (Ctrl + R), ухватите мышкой верхнюю линейку и перетащите ее ровно на середину листа.

Выберите Rounded Rectangle Tool (инструмент «Прямоугольник» U)и установите радиус закругленных углов на 3px.

Нарисуйте прямоугольник в первой половине листа в новой слое. Цвет не важен, но размер должен быть 250х50.

Создайте выделение (муравьиную дорожку) этой формы при помощи Ctrl + щелчок левой кнопки мыши по миниатюре изображения.

Не снимая выделения, создадим новый слой (Ctrl + Alt + Shift + N). Назовите его Idle. И заполните теперь этот слой нашим выделенным прямоугольником Edit> Fill (Shift + F5).

Теперь можете удалить слой с прямоугольной формой, он нам больше не понадобиться.

Дважды клацните мышкой (или щелкните правой кнопкой мыши -> Blending Options (Параметры наложения)…) на слое миниатюре, чтобы открыть Layer Styles (Стиль Слоя).

Добавьте Gradient Overlay (Наложение градиента). Дважды щелкните на градиент, чтобы открыть Редактор градиентов диалоговом окне.

Для левого Color Stop (Контрольная точка цвета), используйте темно-зеленый цвет # 618926, для правого Color Stop (Контрольная точка цвета) используйте светло-зеленый цвет: # 98ba40. Переместить Color Midpoint (Средняя точка цвета) до 35%.

Добавить Inner Shadow (Внутренняя тень). Измените режим смешивания на Normal. Изменение цвет на светло-зеленый # c6d894. Установить прозрачность до 100%. Установите Distance (Смещение) – 2 px.

Добавьте стиль Stroke (Обводка). Установите Size (Размер) – 1 px и Position(Положение): Inside (Снаружи). Поменяйте цвет на темно-зеленый (# 618926)

Вот что должно получиться

Создайте новый слой поверх слоя Idle, назовите его Radial_Gradient. Выберите цвет #b8cf69. Сделайте выделение прямоугольника в слое Idle и затем перейдите опять на слой Radial_Gradient.

Выберите инструмент Gradient Tool (Инструмент Градиент) (G). Установите радиальный стиль градиента. Нажав на градиент вызовите редактор в диалоговом окне.

Выберите градиент от цвета к прозрачному, и убедитесь что цвет у вас выбран светло-зеленый (# b8cf69).

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

Отрегулируйте прозрачность слоя до 80%.

Создадим теперь форму кнопки, которая будет появляться при наведении мышки.

Выберите слой Idle и Radial_Gradient зажав Shift и нажав на каждый из слоев. Вызовите контекстное меню правой кнопкой мыши и выберите Duplicate > Duplicate Layers…(Создать дубликат слоя)

Переместите дублируемые слои в нижнюю часть нашей кнопки. Переименуйте слои в Rollover и в Radial_Gradient_Rollover .

Мы будем делать все тоже самое с нижней кнопкой, за исключением цветов. Дважды щелкните на слое Rollover что бы вызвать меню Layer Styles (Стили слоя). Для Shadow измените цвет на синий # 839dbf. Для Gradient Overlay (Наложение градиента), измените цвет слева на темно синий # 0f2557 и справа на # 245293.

Цвет Stroke (обводка) измените на # 0f2557.

Изменем цвет для Radial_Gradient_Rollover. Дважды щелкните на этом слое что бы вызвать меню Layer Styles. Добавте стиль Color Overlay и установите синий цвет # 5c737c.

Добавляем текст.

Я буду использовать самый просто шрифт Arial. Вы же можете взять любой другой и поэкспериментировать с ним.

С помощью инструмента Horizontal Type (Горизонтальный текст (T)), установите шрифт Arial, стиль шрифта жирный, размер шрифта 16рх, плавное сглаживание, цвет белый (# FFFFFF). Введите нужный вам текст.

Добавление теней.

Дважды щелкните на слой с текстом который вы только что создали что бы вызвать меню Layer Styles. Установите режим смешивания Normal, цвет темно-зеленый (# 618926), непрозрачность до 100%, снемите флажок Use Global Light (Глобальное освещение), угол до -60% , Size (Размер) и Distance (Смещение) установите 1рх.

Центрирование текста.

Ctrl + клик на Idle слое для появления «муравьиной дорожки». Убедитесь, что текстовый слой является активным слоем.

Сначала выровняем текст по вертикали, выбрав Layer > Align Layers to Selection > Vertical Centers. (Слой >Выровнять слой по области > Центры по вертикали)

Выравнивание текста по горизонтали Layer > Align Layers to Selection > Horizontal Centers. (Слой >Выровнять слой по области > Центры по горизонтали)

Продублируйте этот же текст слой Rollover и отцентрируйте его. Дважды щелкните на продублированный слой что бы вызвать меню Layer Styles. Установите цвет темно-синий (# 0f2557), все остальные настройки оставьте такими же.

Первая часть готова!

Если вы следовали инструкциям то кнопка должна выглядеть подобным образом

Теперь давайте сделаем HTML и CSS для корректной работы кнопки.

Сохраните свою кнопку на хостинге, назовите ее к примеру campaign-monitor-button.png

Создайте документ HTML. Сохраните его там же где и картинка для кнопки.

HTML

Вот содержание этого документа

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>How to Create a Slick and Clean Button in Photoshop Demo</title>

<style type="text/css">

<!--

.button {

        display:block;

        width:250px;

        height:50px;

        text-indent:-9999px;

}

.button a {

        display:block;

        width:100%;

        height:100%;

        background:url(campaign-monitor-button.png) no-repeat top left;

        outline:none;

}

.button a:hover {

        background-position:0 -50px;

}

-->

</style>

</head>

<body>

<p class="button"><a href="#null">Click this button</a></p>

</body>

</html>

Все, если верно следовали инструкциям, то все должно работать)))

Отзывы

Ваш отзыв

Имя (*)

E-mail (*)

Сайт

Ваш отзыв