Уроки » Веб-дизайн → Кнопка для девочек  


Начнем урок с создания нового документа с размерами 300x155, фон белый. Выберите инструмент Rectangle Tool и нарисуйте форму как показано ниже, цвет формы: #8F8F8F.
Переименуйте слой в «Button»

Кнопка для девочек



Теперь на эту форму нужно добавить пару якорных точек, для этого выберите инструмент Add Anchor Point Tool и поставьте точки там, где у меня указано стрелками.

Кнопка для девочек



Теперь нужно удалить пару якорных точек, для этого выберите инструмент Delete Anchor Point Tool и удалите точки как показано ниже.

Кнопка для девочек



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

Кнопка для девочек

Кнопка для девочек

Кнопка для девочек

Кнопка для девочек

Кнопка для девочек

Кнопка для девочек



Выберите инструмент Horizontal Type Tool и установите такие параметры как показано ниже.

Кнопка для девочек



Напечатайте ваш текст




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

Кнопка для девочек

Кнопка для девочек

Кнопка для девочек



Зажав CTRL, щелкните по слою «Button» чтобы загрузить его выделение. Затем выберите в меню Select > Modify > Contract > 2px. Создайте новый слой и выберите в меню Edit > Stroke, Width (ширина): 1px, Color (цвет): черный, Location (расположение): Inside.

Можно снять выделение CTRL+D и переименовать слой в «Stroke»

Кнопка для девочек



Понизьте заполнение слоя «Stroke» до 13%

Кнопка для девочек


Еще я добавил сердечки, блики и отражение к кнопке. К сердцам применил те же стили слоя, что и к кнопке.

Результат
Кнопка для девочек


Можете загрузить фон здесь girliebackground.rar [1,04 Kb] (cкачиваний: 4) (это стиль слоя!)

Кнопка для девочек

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

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

Дата публикации: 20-02-2012, 10:22

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

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

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

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

Источник - Empire Dezign

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

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

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

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

Красная гелевая кнопка Красная гелевая кнопка
Сегодня снова будем делать кнопку, но эта кнопка ...
Кнопка в стиле чужих Кнопка в стиле чужих
В этом уроке будем создавать кнопку в стиле ...
Темное меню - Заголовок Темное меню - Заголовок
В этом уроке создадим красивый заголовок (Хидер) ...
Кнопка «GO» Кнопка «GO»
И снова кнопки, на этот раз кнопка отправки ...
Техническая кнопка Техническая кнопка
В этом уроке мы создадим техническую кнопку. ...
Кнопка закладок Кнопка закладок
В этом уроке создадим прикольную кнопку для ...
Кнопка «Mail» Кнопка «Mail»
В этом уроке создадим кнопку для отправки почты. ...
Значок Значок
В этом уроке будем создавать значок, по этому ...
Окошко Окошко
В этом уроке мы создадим небольшое окошко которое ...
Основы инструмента Pen Tool (Перо) Основы инструмента Pen Tool (Перо)
В этой статье я предоставляю основные понятия ...

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


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


Vikka       5 июня 2012 07:57 /
Фон я скачала, но не пойму, как его применить. В стилях слоя все облазила... Подскажите... winked

        Цитировать

killot       5 июня 2012 08:22 /
В смысле, вторым постом писать? Тогда будет два сообщения подряд.

Да можно вторым сообщением, ничего страшного что два сообщения подряд.
Первое как бы говорит о том что здесь обсуждается такой-то урок а во втором сообщении уже вопрос там или что-то еще.

Про фон написал на форуме Ссылка
        Цитировать

Vikka       5 июня 2012 12:17 /
Значит, пусть так и будет! smile

Про фон очень детально и понятно все написали, спасибо!
        Цитировать
 

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

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