Urban Rivals RU
Меню сайта
Категории каталога
Материалы сайта
Облако тегов
Film-Online Иконки для форума UCOZ - Иконки Vista icons for ucoz шаблон для сайта "зеленый" Скачать голубой шаблон для сайта Скачать шаблон для онлайн фильмов Шаблон для Counter Strike for uCoz Глянцевая навигационная панель для сайта Как в PhotoShop нарисовать 3D иконку коробки (упаковки)? Скачать шаблон на тему RAP Кс шаблон для ucoz Как нарисовать обои для рабочего стола Шаблон для сайтов на uCoz Иконки с анимацией для форума UCOZ Иконки для форумов в системе UcoZ Скачать DLE to Ucoz Evilman Красивый шаблон для UCOZ Иконки для форума Random Кнопки для меню для вашего сайта! Иконки для форумов UcoZ - Круглые красные иконки. Flash иконки для ucoz Шаблон на тему Lineage Анимированная грозовая молния Скачать шаблон для ucoz Скачать шаблон для ВАРЕЗ-портала
Главная » Статьи » Уроки 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)
Просмотров: 1365 | Рейтинг: 5.0/2 | |Теги:
Пожалуйста! Если вам понравился этот материал напишите свой отзыв. Посетите наш ФОРУМ


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

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

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