Фотошоп

Saturday, July 6, 2013

Кнопка Buy Now

Конечный результат:
Кнопка 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 файл
Ссылка на источник урока

No comments:

Post a Comment