Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

Конечный результат:

Кнопка Buy Now


Шаг 1 – Создание документа
Наша кнопка будет размером 170х50 пикселей, но я создам холст размером 600х600 пикселей, чтобы можно было спокойно работать.

Кнопка Buy Now


Шаг 2 – Базовая форма
Инструментом Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) с радиусом 5 пикселей создайте фигуру размером 170х50 пикселей.

Кнопка Buy Now


Шаг 3 – Применение стилей слоя
Внешний вид кнопки будет в основном зависеть от стилей слоя. Стили слоя также дают возможность вам изменить что-то в дизайне, если вы захотите. Кликните дважды на иконку слоя с прямоугольником:

Кнопка Buy Now


Примените эти стили:

Наложение градиента: Режим – Нормальный, Стиль – Линейный, Цвет:

Color Stop #1 – Color: #2877ac, Location: 0%
Color Midpoint #1 – Location: 40%
Color Stop #2 – Color: #87bfe6, Location: 95%
Color Midpoint #2 – Location: 40%
Color Stop #3 – Color: #c2def1, Location: 100%

Кнопка Buy Now

Кнопка Buy Now


Обводка: Положение – Внутри, Режим – Нормальный, Тип обводки – Цвет, Цвет - #2877ac.

Кнопка Buy Now

Кнопка Buy Now


Шаг 4 – Создание диагонального узора
Создайте новый документ размером 4х4 пикселя.

Кнопка Buy Now


Приблизьте холст и создайте новый слой (Create New Layer). Фоновый слой нужно удалить.

Кнопка Buy Now


Инструментом Карандаш (Pencil Tool) нарисуйте белый узор показанный ниже.

Кнопка Buy Now


Перейдите в меню Редактирование»Определить узор (Edit > Define Pattern) и сохраните узор.

Кнопка Buy Now


Вернитесь в наш основной документ, сделайте выделение слоя с прямоугольником (Ctrl+Click).

Кнопка Buy Now


Создайте новый слой над слоем с фигурой и перейдите в меню Редактирование»Заливка (Edit > Fill), там выберите сохранённый узор.

Кнопка Buy Now


Я хочу оставить обводку кнопки не тронутой узором. Для этого сделайте выделение слоя с прямоугольником ещё раз (Ctrl+Click) и примените Сжатие (Modify – Contract) со значением 2 пикселя. Инвертируйте выделение (Select – Inverse) и нажмите Delete.

Кнопка Buy Now


Нужно немного ослабить узор. Установите Режим наложения – Мягкий свет (Blending Mode – Soft Light) и Непрозрачность – 20%.

Кнопка Buy Now


Шаг 5 – Добавление текста
Выберите инструмент Горизонтальный текст (Horizontal Type Tool), шрифт – Museo Slab 500 размером 24pt. Напишите текст на кнопке.

Кнопка Buy Now


К текстовому слою примените стиль Отбрасывание тени (Layer Style - Drop Shadow): Режим – Умножение, Цвет - #2877ac.

Кнопка Buy Now


Шаг 6 – Добавление стрелки
Выберите инструмент Произвольная фигура (Custom Shape Tool), выберите фигуру “Shape 2”.

Кнопка Buy Now


Создайте фигуру размером 13х13 пикселей.

Кнопка Buy Now


Инструментом Перемещение (Move Tool) расположите название кнопки и стрелку в центре кнопки.

Кнопка Buy Now


Шаг 7 – Создание нажатой кнопки
Поместите все слои, кроме фонового, в группу (выберите их и нажмите Ctrl+G).

Кнопка Buy Now


Сделайте копию кнопки и опустите её ниже.

Кнопка Buy Now


Перейдите в меню Стилей слоя с прямоугольником и измените Наложение градиента: нужно инвертировать цвета (можете просто установить значение Инверсия (Reverse), но предпочитаю настраивать вручную).

Color Stop #1 – Color: #87bfe6, Location: 0%
Midpoint #1 – Location: 40%
Color Stop #2 – Color: #2877ac, Location: 95%
Midpoint #2 – Location: 40%
Color Stop #3 – Color: #4c9fd7, Location: 100%

Кнопка Buy Now

Кнопка Buy Now


Шаг 8 – Обрезка и сохранение
Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение вокруг двух кнопок, оно должно быть 170х170 пикселей.

Кнопка Buy Now


Перейдите в меню Изображение»Кадрировать (Image > Crop). Скройте фоновый слой. Перейдите в меню Файл»Сохранить для Web и устройств (File > Save for Web & Devices), выберите формат PNG-8 и установите значение Прозрачность (Transparency). Сохраните кнопку под именем web_button.png.

Кнопка Buy Now


Шаг 9 – HTML
Создайте документ HTML и поместите в одну папку с кнопкой.

Кнопка Buy Now


Откройте HTML файл в любом редакторе и скопируйте туда код, показанный ниже. Мы ещё воспользуемся CSS, поэтому я поставил идентификатор для кнопки между тегами .





Web Button


Buy Now



Вот, что будет, если открыть HTML док в браузере:

Кнопка Buy Now


Шаг 10: CSS
Лучше создавать отдельно CSS файл и там писать код, но я вставлю его прямо в HTML файл и заключу между тегами ….


#web_button {
display: block;
width: 170px;
height: 50px;
background: url(web_button.png) no-repeat 0 0;
/* Hide "Buy now" text by moving it beyond
* the browser viewport */
text-indent: -9999px;
/* Because of the outline:none property, we must visually style
* the :focus pseudo-class for keyboard users */
outline: none;
}
/* :hover and :focus have the same style property */
a:hover#web_button, a:focus#web_button {
/* -50px for the y-axis value of the background-position property
* places the background on the bottom-half of the CSS sprite */
background: url(web_button.png) no-repeat 0 -50px;
}


Вот, что получится:

Кнопка Buy Now


Если Вы всё сделали правильно, то в браузере у вас должно быть так.


Финальный результат:

Кнопка Buy Now





Обсудить данный урок на форуме





PSD файл

Ссылка на источник урока