Urban Rivals RU
Меню сайта
Категории каталога
Материалы сайта
Облако тегов
Скачать ШАБЛОН Game RaCiNG PoRtaL Коррозия текста Красивые иконки для сайта ucoz Набор иконок для форумов в системе UcoZ - Красные иконки Как сделать шапку сайта в фотошопе (PhotoShop) СКАЧАТЬ кнопки для форума ucoz Иконки с исчезающемися надписями by AleX Скачать сs шаблон для uCoz Скачать шаблон для сайта клана CS 1.6 Рисуем сайт для хостинговой компании Скачать шаблон для БЛОГА Скачать набор кнопок для ucoz Шаблон для ЮКОЗ (красивый) Иконки групп для uCoz Иконки для форума UCOZ - Круглые чёрныеиконки Скачать новогодний шаблон для ucoz Скачать бесплатно шаблон для укоз Rip By lera шаблон для сайта "зеленый" Скачать набор абстракций для фотошопа Скачать EVILMAN DLE TO UCOZ Как сделать Анимированный аватар в PhotoShop Шаблон UCOZ на тему cs by bannerkz Как сделать макияж в Adobe Photoshop Скачать бесплатно Mediazone шаблон для юкоз Скачать голубые иконки для 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)
Просмотров: 1974 | Рейтинг: 2.0/1 | |Теги:
Пожалуйста! Если вам понравился этот материал напишите свой отзыв. Посетите наш ФОРУМ


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

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

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