Urban Rivals RU
Меню сайта
Категории каталога
Материалы сайта
Облако тегов
Рисуем в фотошопе Sticky Notes Использование Actions в анимации. Основы анимации для новичков Игровой шаблон на тему Mirror Edge Иконки скачать для сайта Скачать Шаблон For Counter-Strike UCOZ Скачать бесплатно шаблон для ucoz Скачать сборник скриптов для ucoz за 2008-2009 год Кнопки для форума Набор иконок для чёрного фона.иконки UCOZ/ Набор иконок для форумов в системе UcoZ - Зелёные иконки. Скачать красивые кисточки для фотошопа Шаблон для UCOZ (автомобиль) Огненные иконки для форума UCOZ Скачать кнопки на тему "Warcraft" Скачать сs шаблон для uCoz Cs portal by -=Wolf=- Иконки для форума UCOZ - Круглые зелёные иконки. Эффект стекла в фотошопе Скачать шаблон для uCoz на тему NFS Pro Street Шаблоны под uCoz Шаблон UCOZ на тему Новый ГОД Скачать шаблон для ВАРЕЗ-портала Шаблон на тему кино Скачать RedDragon Diz Шаблон для ЮКОЗ (красивый)
Главная » Статьи » Уроки 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)
Просмотров: 1695 | Рейтинг: 5.0/2 | |Теги:
Пожалуйста! Если вам понравился этот материал напишите свой отзыв. Посетите наш ФОРУМ


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

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

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