Неоновая кнопка круче чем WEB 2.0

автор: Crazy Belka | 22 апреля 2008 | Просмотров: 305 | Уроки Photoshop » WEB

Итак, для начала создадим новый проект любого размера (я создал с параметрами 180х80px) и сделаем его прозрачным с помощью инструмента Фоновый ластик (Е)

Теперь используя инструмент Rounded Rectangle Tool(Прамоугольник со скругленными углами) с радиусом угла 15px создадим заготовку для нашей будущей кнопки. После чего нужно кликнуть по созданному полю правой кнопкой мыши и нажать Make Selection(образовать выделенную область) (это нужно для более удобной работы со слоем в последующем):

Должно появиться такое окошко:

Проверяем параметры и если они совпадают, жмем ОК. После чего должна появится пунктирная линия полностью повторяющая границы ранее нарисованной заготовки. Растеризуем и удаляем слой с заготовкой (он больше не понадобится), создаем новый слой (Layer->New->Layer(Слой->Новый->Слой)) и заливаем при помощи инструмента Paint Bucket Tool(Заливка) выделенную пунктиром область любым цветом (я выбрал белый):

Теперь открываем свойства слоя (кликаем правой кнопкой по нужному слою и жмем Blending Options (Параметры наложения):

В открывшемся окне нажимаем Outer Glow(Внешнее Свечение) и задаем параметры, показанные на рисунке (цвет-00ff48):

Затем жмем Inner glow (Внутреннее Свечение) и так же задаем параметры показанные на скриншоте (цвет-02ce3c).

После этого кликаем по Gradient Overley(Наложение Градиента):
и задаем параметры показанные на скриншоте (цвета первый зеленый ползунок-00ff48, второй-018e28, третий ползунок черный-000000):

Теперь кликаем по Stroke (Обводка) и устанавливаем параметры как на рисунке (цвет- 00ff48):

В итоге получаем:

Теперь нам нужно сделать блик на кнопке. Это очень просто. Выделяем область кнопки (с нажатой клавишей Ctrl кликаем левой кнопкой мыши по нужному нам слою):

Далее с помощью инструмента Elliptical Marque Tool(Овальная область) и зажатой клавиши Alt создаем область показанную на рисунке:

Теперь создаем новый слой (как написано выше) и заливаем инструментом Paint Bucket Tool(Заливка) его белым цветом:

Далее выделяем этот слой при помощи клавиши Ctrl и создаем векторную маску:

Затем инструментом Gradient Tool с настройками как показано на рисунке

накладываем градиент на нашу маску (векторная маска должна быть выделена):

Давайте теперь напишем на нашей кнопке какой-нибудь белый текст, для этого используя инструмент Horizontal Type Tool нажмем на то место где мы хотим увидеть нашу надпись и с помощью клавиатуры набьем одно, два слова:

Теперь зададим внешнее свечение нашей надписи, чтобы создать иллюзию свечения букв. Для этого опять открываем свойства слоя (на этот раз слоя с текстом) и задаем параметры, указанные на рисунке:

Чтобы подкрепить ощущение того, что наша кнопка сделана из стекла, давайте создадим отражение нашего текста. Для этого создадим дубликат слоя с надписью (кликаем по слою правой кнопкой мыши и выбираем Duplicate Layer...) и отразим его по вертикали (Edit->Transform->Flip Vertical). После чего сдвигаем копию слоя под низ оригинала и повторяем шаги которые мы сделали при создании блика т.е. выделяем граници слоя клавишей Ctrl, создаем векторную маску и заносим ее градиентом с теми же настройками которые мы использовали выше. В итоге должно получится:

Теперь давайте нарисуем разделительную линию. Возьмем инструмент Pencil Tool и создадим 2 тоненькие (1px) полоски, белую, а затем черную и зададим для этого слоя параметры как показано на рисунке:

Теперь все тем же Pencil Tool левее от вертикальной полосы нарисуем стрелку (вобщем то Вы можете нарисовать что-нибудь другое, значения не имеет). Затем применяем к стрелке те же эффекты, что и к тексту (не обязательно каждый раз открывать свойства слоя и настраивать все по новой, программа позволяет просто их скопировать для этого жмем правой кнопкой по слою с которого нужно скопировать свойства и выбираем пункт Copy Layer Style, а затем снова жмем правой кнопкой мыши по теперь уже слою в который необходимо скопировать стили и выбираем пункт Paste Layer Style).

Теперь создадим отражение аналогично тому как мы делали с текстом и в итоге получим готовую неоновую кнопку для сайта!

На этом урок окончен, спасибо за внимание.

Напечатать Комментарии (1)

Новости по теме

Анимированный аватар в PhotoShop

Эффект Гранджа

Четкость фото + выравниваем цвета

Эффект преломления света

Строки (Полоски) на фото

Ссылки на новость

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

#1 написал: tumber (14 сентября 2008 17:02)
Группа: Гости Регистрация: -- Публикаций: 0 Комментариев: 0	Супер круто , реал полный , молодцы .
ICQ: --