Создаем кнопку в стиле Web 2.0

В этом уроке я покажу как можно сделать простую, но в тоже время красивую Download-кнопку в современном и всеми полюбившемся стиле Web 2.0. Download - как пример, использовать этот метод можно для чего угодно, даже для меню на сайте. Итак, к делу.

1. Создаем новый документ или открываем макет дизайна для вэб-страницы, если Вы хотите создать меню из этих кнопок. Я создала документ размером 400х110px, только для кнопки.

2. Далее берем инструмент Rounded Rectangle Tool (U), чтобы создать форму для кнопки.



В настройках выставим радиус для сглаживания углов 10-15px, Вы можете выбрать и другие значения, зависит от размеров кнопки.



Теперь создайте форму на полотне, цвет формы сейчас не имеет значения.



3. Теперь зададим стили слоя для нашей формы. Идем в свойства Blending Options (двойной клик по слою рядом с названием на палитре слое или же через меню Layer > Layer Style.. > Blending Options) и выставляем значения как показано на скриншотах:

Inner Shadow:



Gradient Overlay:



Вы можете использовать любой цвет какой захотите, но кнопка должна выглядеть объемно, примерно вот так:



4. Теперь время добавить симпатичный глянцевый эффект на нашу будущую кнопку. Создадим выделение в форме нашей кнопки, это можно сделать зажав Ctrl кликнув по иконке слоя на палитре слоев. Далее уменьшим его примерно на 5 пикселей со всех сторон. Для этого идем Select > Modify > Contract и вводим в появившемся окне значение

5. Вот так это должно выглядеть:



Теперь создадим новый слой и зальем наше выделение градиентов от Белого к прозрачному сверху вниз. Вот так:



Далее нам необходимо сделать кривую используя иснтрумент Pen Tool, сделайте кривую прямо поверх выделения, заключив в него нижнюю часть белого градиента кнопки и удалите ее. Вот что получилось у меня:



Я еще использовала большую мягкую кисть для удаления части краев (смягчения), так они выглядят гораздо лучше.

5. Теперь добавим текст на нашу кнопку. Берем иснтрумент Horizontal Type Tool (T) и пишем желаемый текст.



Для верхнего текста я использовала шрифт Black Italic, 24 pt, Sharp, #fff, для нижнего - Semibold Italic, 12 pt, Sharp, #fff и добавила в свойствах Blending Options тень:

Drop Shadow:



Вот так это выглядит:



И красный вариант :)



Источник - http://zerolayer.ru/

Если наш сайт был полезен Вам, НЕ ПОЛЕНИТЕСЬ, нажмите на любую из кнопок ниже, для того, чтобы поделиться с другими людьми полезной ссылкой!
Нравится
!!! Спасибо !!!


Эта новость называется - Создаем кнопку в стиле Web 2.0. Не забудьте добавить в закладки, чтобы не потерять.


Распечатать
1

Очень нужный урок! Автору спасиб)
23 ноября 2008 19:25
2

Здорво! Давно искал что то подобное!!! Сайт очень кульный!!!
22 января 2009 14:21
3

народ а как её вставить на сайт
26 февраля 2009 16:42

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости. Только для зарегистрированных пользователей
теги 2дтуториалс
фотошоп скачать клипарт Кисти шрифтов коллекция скачать иконки набор Обои для рабочего стола иконок Тонкости и секреты Часть шаблоны Новогодние фоторамки разные шаблоны исходники фотошопа кистей Wallpapers текстуры Иконки стилей Стили для фотошоп обоев Подборка скачать обои стиле текстур Скачать текстуры бесплатно текстуры для фотошоп Рамки для фотографий psd исходники фотошоп Клипарт скачать clipart бесплатно бекграундов фоторамок скачать иконки для windows Кисти для фотошопа скачать кисти фотошоп
{slin}
2дтуториалс.ру - проект компании ООО "Российские Интернет Технологии", 2011г.
Офис расположен по адресу - Россия, г. Москва, ул. Обуховской обороны, д. 12, оф.5.

счетчик рамблер   Рейтинг SIMPLETOP.NET   [Valid RSS]   Здесь находится аттестат нашего WM идентификатора 194801541119