Urban Rivals RU
Меню сайта
Категории каталога
Материалы сайта
Облако тегов
CS icons for Ucoz Замерзшее окно в PHOTOSHOP Скачать Набор кистей в стиле техно... Как нарисовать красивый логотип в фотошопе... Как нарасовать UserBar в фотошопе (Photoshop) Как сделать 3D-фото эффект Шаблон для ЮКОЗ (красивый) Скачать бесплатно шаблон Call of Duty4_dising_by_WolF Скачать CS шаблон Иконки для форумов в системе UcoZ Cs portal by -=Wolf=- Как превратить современный город в руины Синие кнопки для укоз Скачать шаблон для uCoz Stalker шаблон для uCoz на тему игры Stalker Эффект свечения в Photoshop Красивый шаблон для UCOZ Скрипты для UCOZ Скачать шаблон на темуWarcraft 3 Portal by -=Wolf=- Иконки груп для ucoz Orange icons Скачать бесплатно NFS Undercover шаблон PSD шаблон для УКОЗ сайта Скачать Адаптация Вареза для ucoz Красивый шаблон для ucoz
Главная » Статьи » Уроки Adobe Photoshop » Для сайта

Стильная кнопка для сайта, в фотошопе

Стильная кнопка для сайта, в фотошопе »

Рисуем в фотошопе круглую стильную глянцевую кнопку, которую можно использовать на сайте, в качесве логотипа, применить при создании аватарки и др...

Сегодня мы будем рисовать большую круглую кнопку. Она выглядит очень современно и стильно, поэтому её можно применить в качестве логотипа, использовать как аватарку, применить при создании какого-либо скина, или просто в уменьшенном виде использовать на совём сайте.

Рисуется она не сложно, несмотря на колличество пунктов (их много для того, чтобы вы лучше поняли и чтобы у вас меньше было вопросов). Ну что же... начнём!

Стильная кнопка для сайта, в фотошопе

1. Создадим новое изображение с белым фоном:

стильная кнопка для сайта в фотошопе

2. Рисовать мы будем векторами — нужно это для того, чтобы вы могли легко уменьшить нарисованную кнопку, без потери качества. Для этого выбираем инструмент Ellipse Tool, зажимаем клавишу Shift и в центре рисуем любым цветом такой круг:

стильная кнопка для сайта в PhotoShop

3. Добавим немного эффектов: кликаем на слое с кругом правой клавишей и выбираем пункт Blending Options, переходим на вкладку Gradient Overlay и зальём наш круг градиентом со следующими параметрами:

рисуем стильную кнопку для сайта

4. На вкладке Bevel and Emboss выставим следующие параметры (для придания эффекта выпуклости):

рисуем в фотошопе стильную кнопку для сайта

5. И, чтобы наша кнопка казалась ещё более объёмной, добавим к ней тень (вкладка Drop Shadow):

как нарисовать в фотошопе стильную кнопку для сайта

6. Жмём Ok и смотрим на результат:

рисуем в фотошопе круглую стильную глянцевую кнопку

7. На кнопку пока это не похоже, а вот если сделать ещё кое что... Значит так. Создаём новый слой, снова выбираем инструмент Ellipse Tool и, зажав Shift рисуем в центре круг, но меньшим радиусом (чтобы во время рисования перемещать наш круг, и разместить в центре, просто зажмите клавишу пробел):

круглая стильная глянцевая кнопка в фотошопе

8. На новом слое с кругом так же заходим в Blending Options, на вкладку Inner Shadow (внутренняя тень) и делаем следующее:

круглая стильная глянцевая кнопка для сайта в фотошопе

9. На вкладке Gradient Overlay кликаем по образцу градиента (полоса справа от надписи Gradient:) и в открывшемся окне создаём такой градиент:

круглая стильная глянцевая кнопка для сайта

10. Затем кликаем Ok и выставим такие значения:

стильная кнопка для сайта в фотошопе

11. Оставшись на вкладке Gradient Overlay, не закрывая окно Layer Style кликаем на нашем рисунке и перемещаем немного вниз. Теперь переходим на вкладку Stroke и создаём следующий бордюр:

стильная кнопка для сайта в фотошопе

12. Кликаем Ok и получаем более-менее приличную кнопку:

стильная кнопка для сайта в фотошопе

13. Мы на этом не остановимся. Давайте добавим блики, тогда наша кнопка будет похожа на стеклянную. Для этого создаём новый слой с помощью инструмента Elliptical Marque Tool создаём овальное выделение и заливаем его белым цветом (с помощью Paint Bucket Tool):

стильная кнопка для сайта в фотошопе

14. После этого зажимаем клавишу Ctrl и кликаем на слое с верхним кругом (на панели слоёв), отпускаем Ctrl и инвертируем выделение (Shift + Ctrl + I или в меню выбираем Select —> Inverse). Теперь жмём клавишу Delete и получаем следующее изображение:

стильная кнопка для сайта в фотошопе

15. На панели слоёв у слоя с будущим бликом изменим параметр Normal на Soft Light, там же нажимаем кнопку Add Vector Mask (кнопка находится снизу), выбираем инструмент Gradient Tool, выбираем чёрный цвет и заливаем наш блик снизу вверх:

стильная кнопка для сайта в фотошопе

И получаем практически готовый вариант кнопки:

круглая глянцевая кнопка для сайта, в фотошопе

16. Теперь не мешало бы добавить какой-нибудь текст (шрифт, который я использовал, можно скачать ниже):

круглая глянцевая кнопка для сайта, в фотошопе

17. Применим к тексту пару эффектов: добавим внешнее свечение:

круглая глянцевая кнопка для сайта, в фотошопе

Зальём текст градиентом:

круглая глянцевая кнопка для сайта, в фотошопе

И добавим бордюр:

круглая глянцевая кнопка для сайта, в фотошопе

Вот что мы получим:

круглая глянцевая кнопка с текстом

18. Можно добавить к кнопке мою любимую штриховку. Как это делается можно прочесть в уроке о создании логотипа (пункт №6) или UserBar'а (в пункте №5):

нарисовать в фотошопе кнопку для сайта

19. Для разнообразия можно изменить цвет кнопки. Для этого кликаем на слое, цвет которого нам нужно изменить, и заходим в пункт Hue/Saturation (Ctrl + U или в меню Image —> Adjustments —> Hue/Saturation...) и подвигаем ползунки по вкусу. Получим ту же кнопку, но другого цвета:

круглая стильная глянцевая кнопка для использования на сайте

.: Дополнительно :.

Скачать шрифт « Harlow Solid Italic » | ZIP, 30,8 КБ



Категория: Для сайта | Добавил: cinemania (28.12.2008)
Просмотров: 2008 | Рейтинг: 2.0/1 | |Теги:
Пожалуйста! Если вам понравился этот материал напишите свой отзыв. Посетите наш ФОРУМ


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма Входа
Среда, 02.07.2025, 07:34
-й день

Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!
 
Друзья сайта
Статистика
Рейтинг сайтов
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Лучшие фильмы | Уроки Adobe Photoshop | Шаблоны для uCoz | Онлайн-TV | Кнопки для сайта UCOZ | Иконки для сайтов UCOZ | Скрипты для uCoz