Сделайте профессиональный дизайн блестящих кнопок
С помощью этого простого урока по Photoshop вы сможете научиться профессионально создавать блестящие кнопки. Профессионалы, которые зарабатывают созданием шаблонов для веб-сайтов, смогут использовать эти эффекты и заработать кучу денег!
Приблизительное время выполнения: 10 минут
Шаг 1. Подготовка холста/фона
Сначала создайте документ любого размера или откройте шаблон вебсайта, над которым вы работаете. Я использовал маленький документ размером 400х340, потому что я не собираюсь делать шаблон польностью. Я добавил светло-серый градиент к фону.
Шаг 2. Создаем фигуру
Выберите Rectangular Marquee Tool и выделите область с выранной настройкой Set-Sized размером приблизительно 140 x 140 пикселей где-нибудь на документе.
Шаг 3. Заливка фигуры
При активном выделении убедитесь, что вы находитесь на новом слое и залейте его радиальным градиентом, используя цвета на ваш выбор.
Я использовал цвета #3e94d4 и #336fc1, приятных голубых пастельных тонов. Затем я применил белые (#ffffff) штрихи к главному слою.
Шаг 4. Добавление подсветки
Начните с выбора главного слоя (зажмите Ctrl) и нажмите на иконку слоя.
Сожмите выделение приблизительно на 4-5 пикселей, зайдя в Select > Modify > Contract и введя кол-во в пикселях.
Теперь, выберите Gradient Tool, затем перетащите белый на прозрачный градиент сверху вниз, приблизительно так:
У вас должно получиться следующее:
Теперь выберите Pen Tool и сделайте овальное выделение, как показано внизу.
С все ещё выбранным Pen Tool, кликните на траекторию (path) и затем кликните Make Selection, используя опции по умолчанию.
Создайте ещё один слой и снова с помощью Gradient Tool создайте градиент от белого к прозрачному сверху донизу вашей кнопки, так, чтобы у вас получилось что-то подобное:
Измените layer mode этого слоя на Soft Light, затем снизьте непрозрачность, если нужно. Мне это не понадобилось.
Шаг 5. Финальные штрихи
Для того, чтобы придать работе завершенный вид, я начал с добавления полупрозрачной иконки в левом углу кнопки. (заметка: иконки, которые я использовал в этом уроке, либо с TemplateMonster, либо с Web Design Library)
Добавьте вашей кнопке текст для того, чтобы пользователи знали, для чего кнопка. Настройки шрифта, которые я использовал, были Tahoma, 11 pt, цвет #ffffff, вот с этим drop shadow layer style.
Затем я продублировал все слои, переместил их наверх так, что между ними образовалось расстояние приблизительно в 10 пикселей, затем изменил цвета градиента. Чтобы изменить цвета, просто отредактируйте градиент для первого слоя, затем отредактируйте цвет drop shadow для слоя с текстом.
Вот и все.
Источник: Design Professional Glossy Buttons
Смотрите также:
Встречал аналогичные уроки в учебниках по фотошопу и веб-дизайну. Но данная статья позволила вспомнить настоящее качество в веб2.0
Август 7th, 2008
очень многие шаблоны «монстров»
сделаны с такими плашками
Август 7th, 2008
у меня такое чувство, что этот урок уже был
Август 8th, 2008
Аниматор, согласен тут уже столько уроков практически одинаковых по веб 2.0.
Август 8th, 2008
Очень полезная вещь, спасибо!!
Август 10th, 2008
Мне очень понравился данный урок. Я обязательно добавлю его в свою подборку приемов для PS.
Август 11th, 2008
Кто в теме тот понимает, не в обиду другим
Август 31st, 2008
Огромное человеческое спасибочки !
Сентябрь 9th, 2008
красиво, сделал! Благодарю!!!
Сентябрь 9th, 2008
«смогут использовать эти эффекты и заработать кучу денег!»
смелое утверждение
Январь 28th, 2009
как кликнуть по траиктории там когда выделение карандашом?
Апрель 12th, 2009
Вот это уже и вправду красиво. Может пригодится на сайте. Спасибо.
Январь 12th, 2010
Согласен, красиво!!!
Январь 21st, 2010
Симпатичные, и легко делать.
Апрель 19th, 2011