Urban Rivals RU
Меню сайта
Категории каталога
Материалы сайта
Облако тегов
Как сделать Эффект загнутой страницы Скачать бесплатно NFS Undercover шаблон Кнопки для форума UCOZ Шаблон сайта для ucoz Шаблон для укоз by EVILMAN (бесплатно) Как нарисовать стильный логотип в фотошопе? Скачать шаблон для футбольного сайта Меняем цвет автомобиля в фотошопе Набор иконок для сайтов на UCoZ Иконки made by avdey=) Скачать шаблон на тему RAP Рисуем лого EURO 2008 Шаблон UCOZ на тему cs by bannerkz Сверкающие глаза Шаблон на тему Warez Шаблон на тему Lineage Скачать новый шаблон на тему "World of Warcraft" ВОВ Скачать шаблон для музыкального портала Скачать кнопки для UCOZ СКАЧАТЬ кнопки для форума Набор иконок для форумов в системе UcoZ - Красные иконки Шаблон для Counter Strike for uCoz Текст на жидкости Скачать сборник скриптов для ucoz за 2008-2009 год Скачать иконки групп ucoz By Saneer
Главная » Статьи » Уроки Adobe Photoshop » Для сайта

Как нарисовать стеклянную кнопку

« Кнопка для сайта в PhotoShop »

Урок по фотошопу о том, как нарисовать красивую стеклянную кнопку с неоновым свечением.

В данном уроке я вам покажу как можно нарисовать довольно неплохую кнопку для использования на вашем сайте.

Кнопка нарисована в стеклянно-неоновом стиле, поэтому она должна размещаться на тёмном фоне.

Урок очень простой и написан для того, чтобы вас натолкнуть на какие-то фантазии, какой-то новый стиль, а не рисовать всё в одном стиле...

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

1. Создаём новое изображение с тёмным фоном (на светлом фоне кнопка будет смотреться плохо):

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

2. Выбираем инструмент Rounded Rectangle Tool, радиус скругления углов выставьте примерно в 15 пикселей (Radius: 15px) и нарисуйте заготовку для кнопки:

неоновая кнопка для сайта

3. Заходим в Layer Style данного слоя (для этого на панели слоёв Layers кликните правой клавишей по слою, выберите пункт Blending Options...), там перейдите на вкладку Outer Glow и настройте параметры свечения следующим образом (красным цветом я написал шестнадцатеричное значение используемого цвета):

стеклянная кнопка для сайта

4. Затем на вкладке Inner Glow выставьте такие значения, как показано ниже:

урок по фотошопу про кнопки

5. Сейчас переходим на вкладку Gradient Overlay и там настроим градиент:

как нарисовать кнопку

Ниже показаны подробные настройки градиента (чтобы открыть это окошко, кликните по полосе справа от надписи Gradient):

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

6. А теперь на вкладке Stroke настроим обводку:

неоновая кнопка для сайта

Жмём везде Ok и получаем фон нашей кнопки:

неоновая кнопка в фотошопе

7. Будем рисовать блики. Сразу нужно выделить нашу кнопку. Для этого зажмите клавишу Ctrl и кликните по слою на панели слоёв:

светящаяся неоновая кнопка для сайта

8. Выберите инструмент Elliptical Marque Tool и, зажав Alt, выполните следующее выделение:

кнопка для сайта

9. Создайте новый слой и залейте выделение белым цветом (с помощью Paint Bucket Tool):

красивая кнопка

10. Теперь к слою с будущим бликом необходимо добавить маску. Для этого на панели слоёв, снизу, нажмите кнопку Add Layer Mask (ввиде прямоугольника, внутри которого круг).

Затем выберите градиентную заливку (Gradient Tool) и, чёрно-белым градиентом, залейте маску снизу вверх:

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

А получиться должно вот так:

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

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

неоновая кнопка в PhotoShop

12. Заходим в Layer Style и на вкладке Outer Glow добавим свечение:

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

13. Жмём Ok и получаем слегка светящийся текст:

стеклянная кнопка для сайта в photoShop

14. Создадим копию слоя с текстом, отразим его по вертикали (используйте Edit —> Transform —> Flip Vertical) и разместим немного ниже:

стеклянная кнопка в фотошопе

15. Добавим к слою с текстом маску и зальём её чёрно-белым градиентом снизу вверх (как мы это делали ранее, при создании блика):

стеклянная кнопка в PhotoShop

16. Выбираем карандаш (Pencil Tool) и на новом слое рисуем небольшой треугольник, затем добавляем к нему такие же эффекты, как и к тексту:

нарисовать в PhotoShop стеклянную кнопку

17. Теперь с помощью Pencil Tool нарисуйте две тоненькие вертикальные полоски — одну белую, вторую чёрную:

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

18. Измените смешивание (Blend Mode) с Normal на Overlay, а непрозрачность Opacity уменьшите до 60%:

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

И, как результат, получаем такую вот неоновую кнопку, которую можно использовать в дизайне сайта (тут я ещё добавил отражение самой кнопки, как оно делается вы уже знаете):

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



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


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

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

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