Фотошоп для чайников | Уроки фотошопа
Фотошоп для чайников - портал для любителей фотошопа!
Меню сайта
Категории раздела
Обработка фото [109]
Текстовые эффекты [87]
Анимация [32]
Спецэффекты [142]
Веб-дизайн [40]
Тюнинг [9]
Фотомонтаж [62]
Кнопки [39]
Рисование [55]
Наша группа
Опрос
Уроки каких тематик вам наиболее интересны?
Всего ответов: 581
КтО ОнЛаЙн

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Главная - Уроки фотошопа CS5 на русском - Кнопки - Стильная кнопка для сайта, в фотошопе

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

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

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

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

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

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

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...) и подвигаем ползунки по вкусу. Получим ту же кнопку, но другого цвета:

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



Похожие материалы:


Просмотров: 4418 | Комментарии: 4 | Рейтинг: 0.0/0
Всего комментариев: 3
0  
1 95hitman   (15.11.2010 13:28) [Материал]
А где ссылка на Шрифт????? А так всё кул. Автор спс!

0  
2 Adriano   (15.11.2010 18:59) [Материал]
Сорри вот ссылка на шрифты http://www.silverphoto.my1.ru/load/13

0  
3 AlarmaTarmA   (20.11.2012 04:18) [Материал]
Мне, если честно, понравилось

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

Хостинг от uCoz