Уроки » Веб-дизайн → Техническая кнопка  


Начнем урок с создания нового холста с размерами 273x148px, залейте фон черным цветом.

Выберите инструмент Rounded Rectangle Tool и нарисуйте форму как показано ниже с радиусом в 3px, цветом #E2E2E2. Переименуйте слой в «Button Frame»

Техническая кнопка



Примените следующие стили слоя.

Техническая кнопка

Техническая кнопка


Техническая кнопка

Техническая кнопка


В результате вы получите следующее

Техническая кнопка



Снова выберите инструмент Rounded Rectangle Tool и нарисуйте форму как показано ниже, с тем же радиусом и цветом. Переименуйте слой в «Button Window Back»

Техническая кнопка



Примените к этому слою следующие стили.

Техническая кнопка

Техническая кнопка

Техническая кнопка

Техническая кнопка

Техническая кнопка

Техническая кнопка


В результате вы получите следующее.

Техническая кнопка



Продублируйте слой «Button Window Back» (CTRL+J) и очистите от стилей слоя. Для этого щелкните правой кнопкой мыши по слою в палитре слоев и выберите Clear Layer Style. Измените, цвет формы на черный и переименуйте слой в «Button Window Front». Загрузите образец здесь.

Техническая кнопка



Примените к этому слою следующие стили.

Техническая кнопка

Техническая кнопка


В результате вы получите следующее.

Техническая кнопка



Выберите инструмент Horizontal Type Tool и примените следующие настройки.

Техническая кнопка



Напечатайте нужный вам текст.




Примените к тексту следующие стили слоя.

Техническая кнопка

Техническая кнопка

Техническая кнопка


В результате вы получите вот это.

Техническая кнопка


Еще я добавил маленькие кружочки с помощью инструмента Ellipse Tool , с обеих сторон.



Техническая кнопка

Информация к уроку:

Категория - Уроки » Веб-дизайн

Дата публикации: 11-02-2012, 03:01

Опубликовал: killot

Просмотров: 842

Комментариев: 0

Ссылки к этой статье:

Источник - Empire Dezign

Автор - Не указан

Переводчик - Killot

Найти - Все уроки с Empire Dezign

Ключевые слова:

Empire Dezign, button, web, design, tech, кнопка, веб, дизайн

Еще по этой теме:

Кнопка с водой Кнопка с водой
В этом уроке создадим прикольную кнопку, с ...
Красная гелевая кнопка Красная гелевая кнопка
Сегодня снова будем делать кнопку, но эта кнопка ...
Кнопка в стиле чужих Кнопка в стиле чужих
В этом уроке будем создавать кнопку в стиле ...
Кнопка «GO» Кнопка «GO»
И снова кнопки, на этот раз кнопка отправки ...
Меню "Синий металл"
В этом уроке создадим стильное меню для сайта ...
Кнопка закладок Кнопка закладок
В этом уроке создадим прикольную кнопку для ...
Окно для фотографии/изображения Окно для фотографии/изображения
В этом уроке создадим окошко (рамку) для ваших ...
Кнопка «Mail» Кнопка «Mail»
В этом уроке создадим кнопку для отправки почты. ...
Текстовый эффект «Цепная реакция» Текстовый эффект «Цепная реакция»
В этом уроке создадим текстовый эффект "Цепная ...
Цифровой текст Цифровой текст
Создаем цифровой текст ...

Социальные закладки:


Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 

Добавление комментария

 
 
Ваше Имя:
Ваш E-Mail:
Вопрос:
Ты робот? (да-нет)
Ответ:*
Код:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Введите код: