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

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

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

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

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
коммент.
//
0 коммент. to "Рисуем кнопку в силе Web 2.0"
Добавь в закладки
Чтобы установить такую кнопку на сайт, блог, форум скопируйте и вставьте код в нужное вам место между тегами body
Скопировать код:
Чем отличается наша кнопка от многих других? В ней собраны только самые известные и популярные сервисы закладок. Присутствуют сервисы В контакте, Мой мир, Blogger, Рамблер закладки, Бобр добр и многие другие. Плюсы нашей кнопки: установив нашу кнопку вам не придется устанавливать кучу скриптов различных сервисов, пользователь может добавить страницу в свои закладки практически одним кликом.
Потом придумаю
Счетчики
Архив блога
-
►
2011
(10)
- ► февраля 2011 (1)
-
▼
2010
(46)
- ► августа 2010 (1)
-
▼
июня 2010
(41)
-
▼
июн. 10
(33)
- Как облить лицо краской в Фотошопе
- Создаем красивые эффекты вокруг танцора
- Шикарный металлический текст в фотошопе
- Сексуальная ретушь (гладкая кожа)
- Урок размещение изображения на искривленных поверх...
- Animated No Smoking Sign
- Авто картина, Использование маски слоя
- Создание иллюстрации
- Рисуем демонов (темная книга фотошоп)
- Магические руки, Эффекты коллажа
- Каменная леди
- Реалистичный Неон под машину
- Урок создаем в фотошопе зебрамобиль
- Урок создание коллажа
- Рисуем смайлик
- Урок по слиянию двух фотографий
- Урок использование инструмента перо
- Анимация - блики на предметах
- Альфа-каналы и маски. Часть 3
- Текст из дыма в Фотошопе
- Анимация в фотошоп
- Альфа-каналы и маски. часть 2
- Ретушь кожи в фентези стиле
- Выделения сложных объектов при помощи альфа-канало...
- Рисуем апельсин (урок для начинающих)
- Рисуем 3D сетку
- Как установить экшены в фотошоп?
- Как создать action (экшен) самому
- Как установить кисти, стили, градиенты и другие до...
- Как разбить блок в Photoshop на равные части
- Рисуем кнопку со значком в стиле web 2.0
- Рисуем кнопку в силе Web 2.0
- Как создать свои кисти в Photoshop.
-
▼
июн. 10
(33)
- ► марта 2010 (1)






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