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


Мы начнем этот урок с создания холста, с размерами 294x169px и цветом фона #8e661b.
Затем выбираем инструмент Rounded Rectangle Tool и рисуем прямоугольник, как показано ниже, радиус округления углов 10px, цвет формы #0098d7.
Переименуем этот слой в “Button frame.

Кнопка с водой



Примените следующие стили слоя.
Кнопка с водой

Кнопка с водой

Кнопка с водой

Кнопка с водой

Кнопка с водой


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

Кнопка с водой



Снова выберите инструмент Rounded Rectangle Tool , но в этот раз с радиусом 5px, и цветом #0098d7 нарисуйте еще одну форму как показано ниже.

Переименуйте этот слой в “Button Window

Кнопка с водой



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

Кнопка с водой

Кнопка с водой

Кнопка с водой

Кнопка с водой



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

Кнопка с водой



Теперь выберите инструмент Pen Tool и белым цветом нарисуйте форму волны как показано ниже. Растеризуйте этот слой и переименуйте его в “Waves

Кнопка с водой



Теперь с зажатой клавишей CTRL, щелкните левой кнопкой мыши по слою “Button Window” чтобы создать выделение. Убедитесь, что находитесь на слое с волнами и выберите в главном меню опцию Select > Inverse (CTRL+SHIFT+I), затем нажмите на клавиатуре клавишу DEL.

Кнопка с водой



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

Кнопка с водой

Кнопка с водой


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

Кнопка с водой



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

Кнопка с водой


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

Кнопка с водой



Выберите инструмент Ellipse Tool и нарисуйте маленький кружок белого цвета, как показано ниже.

Кнопка с водой



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


Кнопка с водой

Кнопка с водой

Кнопка с водой

Кнопка с водой


В результате проделанных действий вы получите следующее, продублируйте кружок 3 раза и поместите копии как показано ниже.

Кнопка с водой



Теперь опять же с помощью Ellipse Tool , нарисуйте два овала как показано ниже.
Цвет овалов #e6c360, примените те же стили слоя, что и для слоя “Button Frame” в самом начале урока. Разместите эти слои, ниже самого первого слоя.

Кнопка с водой




Чтобы соответствовать подводной тематике, я добавил несколько элементов на задний фон. Надеюсь, что этот урок вам понравился.
Кнопка с водой

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

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

Дата публикации: 30-07-2012, 03:20

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

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

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

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

Источник - Empire Dezign

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

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

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

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

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

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


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

 

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

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