Urban Rivals RU
Меню сайта
Категории каталога
Материалы сайта
Облако тегов
СКАЧАТЬ КНОПКИ ДЛЯ ucoz Кнопки для меню для вашего сайта! Скачать иконки ucoz Красивый шаблон для UCOZ Скачать шаблон для ucoz Игровой шаблон на тему Mirror Edge Скачать Шаблон сайта для Кс Скачать Шаблон для UCOZ на тему REP Иконки для УкоЗ Скачать шаблон бесплатно Rip ICQ By EVILMAN Шаблон на тему Lineage 2 Gracia Шаблон FALL out BOY Красный шаблон для ucoz шаблон для сайта для блога Скачатькисти для Photoshop Game Brushes Скачать шаблон для ucoz Иконки групп для uCoz Скачать бесплатно шаблон Call of Duty4_dising_by_WolF Шаблон для сайта на тему Counter Strike Иконки скачать для сайта Анимированная грозовая молния Кнопки для форума MegaSoftconsRed by Newsvip Эффект старости фотографию Скачать бесплатно шаблон Design Vista Создание композиции в фотографиях
Главная » Статьи » Уроки Adobe Photoshop » Для сайта

« Кнопка для сайта в 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 (02.10.2008)
Просмотров: 1690 | Рейтинг: 5.0/2 | |Теги:
Пожалуйста! Если вам понравился этот материал напишите свой отзыв. Посетите наш ФОРУМ


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

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

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