Urban Rivals RU
Меню сайта
Категории каталога
Материалы сайта
Облако тегов
30 Видеоуроков Photoshop от Сергея и Марины Бондаренко КС шаблон Скачать Замерзшее окно в PHOTOSHOP STALKER-LIVE-(ZONA) v1.2 by для УКОЗ Шаблон для дизайн студии Скачать иконки групп ucoz By Saneer Icons for uCoz Космический неон Скачать бесплатно шаблон для укоз Rip By lera Как делать панораму в Photoshop Зелёные иконки , для тёмного форума UCOZ Скачать Шаблон на тему Call of Duty 4 Скачать шаблон для uCoz эффект ePlastic Иконки made by avdey=) Шаблон сайта для uCoz Скачать бесплатно шаблон для UCOZ от CS-sahaby Bannerkz Иконки для форума UCOZ - Круглые зелёные иконки. Скачать иконки групп Скачать бесплатно шаблон для ucoz на тему футбол Barca Скачать шаблон на тему RAP icons for ucoz Шаблон на тему Lineage 2 Gracia Кнопки для меню для вашего сайта! Скачать кнопки для форума ucoz
Главная » Статьи » Уроки 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)
Просмотров: 1447 | Рейтинг: 5.0/1 | |Теги:
Пожалуйста! Если вам понравился этот материал напишите свой отзыв. Посетите наш ФОРУМ


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

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

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