• Авторизация


Без заголовка 17-01-2010 22:59 к комментариям - к полной версии - понравилось!

Это цитата сообщения SneznyBars Оригинальное сообщение

Кнопка для сайта



[показать]

1. Создаём новое изображение с тёмным фоном (на светлом фоне кнопка будет смотреться плохо):

[222x151]

2. Выбираем инструмент Rounded Rectangle Tool, радиус скругления углов выставьте примерно в 15 пикселей (Radius: 15px) и нарисуйте заготовку для кнопки:

[222x151]

3. Заходим в Layer Style данного слоя (для этого на панели слоёв Layers кликните правой клавишей по слою, выберите пункт Blending Options...), там перейдите на вкладку Outer Glow и настройте параметры свечения следующим образом (красным цветом я написал шестнадцатеричное значение используемого цвета):

[508x444]

4. Затем на вкладке Inner Glow выставьте такие значения, как показано ниже:

[508x444]

5. Сейчас переходим на вкладку Gradient Overlay и там настроим градиент:

[508x444]

Ниже показаны подробные настройки градиента (чтобы открыть это окошко, кликните по полосе справа от надписи Gradient):

[429x497]

6. А теперь на вкладке Stroke настроим обводку:

[508x444]

Жмём везде Ok и получаем фон нашей кнопки:

[222x151]

7. Будем рисовать блики. Сразу нужно выделить нашу кнопку. Для этого зажмите клавишу Ctrl и кликните по слою на панели слоёв:

[222x151]

8. Выберите инструмент Elliptical Marque Tool и, зажав Alt, выполните следующее выделение:

[222x151]

9. Создайте новый слой и залейте выделение белым цветом (с помощью Paint Bucket Tool):

[222x151]

10. Теперь к слою с будущим бликом необходимо добавить маску. Для этого на панели слоёв, снизу, нажмите кнопку Add Layer Mask (ввиде прямоугольника, внутри которого круг).

Затем выберите градиентную заливку (Gradient Tool) и, чёрно-белым градиентом, залейте маску снизу вверх:

[212x187]

А получиться должно вот так:

[222x151]

11. Сейчас добавьте какой-нибудь текст белого цвета (шрифт, который я использовал в данном уроке, можно скачать ниже):

[222x151]

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

[508x444]

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

[222x151]

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

[222x151]

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

[222x151]

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

[222x151]

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

[222x151]

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

[212x192]

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

[217x114]


 

вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Без заголовка | WWWILD_WIND - Для Всех и Каждого... WWWILD_WIND | Лента друзей WWWILD_WIND / Полная версия Добавить в друзья Страницы: раньше»