Urban Rivals RU
Меню сайта
Категории каталога
Материалы сайта
Облако тегов
wow шаблон 30 Видеоуроков Photoshop от Сергея и Марины Бондаренко Скачать шаблон для ucoz Скачать шаблон для сайта клана CS 1.6 Abstrakt by r0man Скачать бесплатно NFS Undercover шаблон Сверкающие глаза Новый шаблон на тему КС,CS для UCOZ Выгравированный текст Отличный шаблон для uCoz бесплатно Шаблон беспалатный ДЛЯ ucoz Как нарисовать стильный логотип в фотошопе? Шаблон для онлайн кинотеатра скачать СКАЧАТЬ кнопки для форума Создаём в фотошопе (PhotoShop) дизайн интерфейса в стиле Windows Vista Скачать бесплатно шаблон для ucoz на тему футбол Barca Скачать иконки ucoz Шаблон uCoz СКАЧАТЬ ШАБЛОН ДЛЯ UCOZ cs ! Шаблон для КИноСАЙТа Шаблон игрового поратал для УКОЗ Шаблон беспалатный ДЛЯ ucoz Скачать бесплатно NFS Undercover шаблон (бесплатный) Иконки new для новостей uCoz Шаблон для UCOZ на тему КС от ExTRa_THeMe by ToM@TiK
Главная » Статьи » Уроки 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)
Просмотров: 1656 | Рейтинг: 2.0/1 | |Теги:
Пожалуйста! Если вам понравился этот материал напишите свой отзыв. Посетите наш ФОРУМ


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

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

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