Рисуем кнопку в силе Web 2.0

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

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



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



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



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






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



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 тень:



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



В заключение я добавил отражение и шестеренку для красоты.


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


0 коммент. to "Рисуем кнопку в силе Web 2.0"

Отправить комментарий

Добавь в закладки

Чтобы установить такую кнопку на сайт, блог, форум скопируйте и вставьте код в нужное вам место между тегами body


Скопировать код:


Чем отличается наша кнопка от многих других? В ней собраны только самые известные и популярные сервисы закладок. Присутствуют сервисы В контакте, Мой мир, Blogger, Рамблер закладки, Бобр добр и многие другие. Плюсы нашей кнопки: установив нашу кнопку вам не придется устанавливать кучу скриптов различных сервисов, пользователь может добавить страницу в свои закладки практически одним кликом.

Потом придумаю

Счетчики


Архив блога

PhotoshopCS4.ru
Весь софт тут
Photoshop CS4. Все для фотошоп !