Пятница, 29.03.2024, 05:12:22
Приветствую Вас Гость | RSS
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: fawn  
Форум » Серъезное » Программы и софт » Урок по фотошопу: Неоновая кнопка
Урок по фотошопу: Неоновая кнопка
modestДата: Четверг, 20.11.2008, 18:05:25 | Сообщение # 1
министр образования
Группа: Администраторы
Сообщений: 67
Статус: Offline
Урок по фотошопу о том, как нарисовать красивую стеклянную кнопку с неоновым свечением.

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

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

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

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. Сейчас добавьте какой-нибудь текст белого цвета:

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

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

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

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

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

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

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

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

Ссылка http://designarts.ru/lessons/photoshop/23/index.html
Редактирование - modest


 
modestДата: Четверг, 20.11.2008, 18:06:13 | Сообщение # 2
министр образования
Группа: Администраторы
Сообщений: 67
Статус: Offline
Мой вариант :


 
IlluminatIДата: Понедельник, 22.12.2008, 22:17:45 | Сообщение # 3
царъ
Группа: Администраторы
Сообщений: 76
Статус: Offline
хаха, говно какое нарисовал, не смэшы ка людей biggrin

[url=http://userbars.ru/][img]http://img53.imageshack.us/img53/8084 я ЧМО
 
modestДата: Вторник, 23.12.2008, 14:31:25 | Сообщение # 4
министр образования
Группа: Администраторы
Сообщений: 67
Статус: Offline
IlluminatI, помоги мнэ

 
IlluminatIДата: Четверг, 25.12.2008, 22:15:27 | Сообщение # 5
царъ
Группа: Администраторы
Сообщений: 76
Статус: Offline
хрэн тэбэ гнидо biggrin

[url=http://userbars.ru/][img]http://img53.imageshack.us/img53/8084 я ЧМО
 
modestДата: Пятница, 26.12.2008, 15:35:23 | Сообщение # 6
министр образования
Группа: Администраторы
Сообщений: 67
Статус: Offline
/cry

 
fawnДата: Суббота, 27.12.2008, 22:39:17 | Сообщение # 7
министр культуры
Группа: Администраторы
Сообщений: 88
Статус: Offline
sad эй, робята, ну вы ЧООО??(( я же не могу вас в бан за офф топ посадить(((
 
modestДата: Вторник, 06.01.2009, 20:38:40 | Сообщение # 8
министр образования
Группа: Администраторы
Сообщений: 67
Статус: Offline
ыыЫы

 
IlluminatIДата: Четверг, 08.01.2009, 22:17:48 | Сообщение # 9
царъ
Группа: Администраторы
Сообщений: 76
Статус: Offline
хыхы, потому что твой новый ник теперь будет: Soso.

[url=http://userbars.ru/][img]http://img53.imageshack.us/img53/8084 я ЧМО
 
fawnДата: Пятница, 09.01.2009, 16:42:51 | Сообщение # 10
министр культуры
Группа: Администраторы
Сообщений: 88
Статус: Offline
dry мой ник Ольга Игоревна, и еще: у меня самая крутая надпись)))
 
Форум » Серъезное » Программы и софт » Урок по фотошопу: Неоновая кнопка
  • Страница 1 из 1
  • 1
Поиск: