Классные кнопки со стеклянным блеском - Школа Photoshop
Кнопки для сайта Photoshop Кнопка фотошоп

Классные кнопки со стеклянным блеском

21.05.2007Категория урока: Кнопки и Иконки

Кнопка фотошоп

Этот урок научит Вас создавать классные кнопки с отблеском, как у стекла, которые Вы сможете использовать не только на своем сайте, но и на баннерах, печатных материалах и т.п.

Создайте документ любого размера (я использовал размер 500х500 px). Используя инструмент Rounded Rectangle с радиусом в 8px, нарисуйте квадрат (зажав клавишу Shift). После этого откройте меню Blending Options для этого слоя и выберите пункт Gradient Overlay. Задайте два цвета, как на рисурке ниже и назовите этот слой «bg«.

Стеклянный блеск

Теперь копируйте этот слой и назовите копию «glass«. Выберите его и переместите выше слоя «bg«. Залейте его белым цветом и измените его прозрачность (Opacity) на, примерно, 50%. Используя инструмент Square Marquee (клавиша М) и создайте выделение примерно таким, как на рисунке ниже. Проверьте, выбран ли слой «glass» и нажмите клавишу Delete.

Glass rectangle Photoshop

Мы добились эффекта стеклянного блеска. Чтобы немного его смягчить, используйте инструмент Round Marquee. Создайте выделение, как на рисунке ниже. Далее выбирайте Select > Feather (Ctrl+Alt+D) и вводите значение в 30px. Нажимайте клавишу Delete.

Фотошоп кнопки

Зажав клавишу Ctrl, кликните по слою «bg«, чтобы выделить его содержимое, и выбирайте Select > Modify > Expand. Вводите 1px и нажимайте ОК. Создавайте новый слой ПОД слоем «bg«, заполняйте выделение белым цветом и называйте слой «shine«.

Как нарисовать стеклянный квадрат Photoshop?

После этого шага Вы не заметите изменений из-за белого фона. Чтобы все было нагляднее, создайте еще один слой ПОД слоем «shine» и нарисуйте на нем черный прямоугольник. Вы увидите, чего мы добились. Назовите этот слой «black-bg«.

Кнопки Photoshop

Теперь выбираем инструмент Round Marquee и создаем выделение, как на рисунке ниже. Затем отправляемся в меню Select > Feather (Ctrl+Alt+D) и вводим 30px. Выбираем слой «shine» (не снимая выделения) и дважды нажимаем клавишу Delete.

Как сделать эффект стеклянного изображения?

Повторяем действие с верхней частью рисунка, но нажимаем Delete уже только один раз.

Создание блеска кнопок для сайта онлайн

Теперь, если хотите, можете настроить прозрачность (Opacity) слоя «shine«.

Классные кнопки сайта

Зажав Ctrl, щелкаем по слою «bg» и отправляемся в меню Select > Modify > Expand. Вводим значение в 2px. Создаем новый слой над слоем «black-bg» и под слоем «shine» и называем его «frame«. Заполняйте его любым цветом (я выбрал черный).

Кнопки для фотошопа

Теперь скройте слой «black-bg» и Вы увидите, что у нас получилось. Все почти готово.

Кнопка на сайт Photoshop

Откройте панель Blending Options для слоя «frame» и выберите пункт Gradient Overlay. Задайте цвета, как на рисунке:

Photoshop кнопки

Вот мы почти и закончили. Осталось только добавить нужный нам символ в иконку. Я попробую добавить символ RSS-подписки.

Создать стеклянное меню

Добавьте параметр Inner Shadow, если хотите, и все! Вы только что сделали классную иконку с эффектом стеклянного блеска!

Стеклянная кнопка

Теперь с этой иконкой можно делать все, что угодно. Давайте рассмотрим, как сделать отражение.

Создайте слой под основными слоями, используя инструмент Ellipse. Нарисутйе длинный тонкий эллипс, как на рисунке ниже. Залейте его черным цветом.

Стеклянный эффект в фотошопе

Используя фильтр Gaussian Blur, размойте его с радиусом в 1px. Затем немного поиграйтесь с прозрачностью (Opacity).

Блеск кнопок

Теперь скопируйте всю иконку, отразите ее вертикально (Edit > Transform > Flip Vertical) и подвиньте настолько, чтобы нижние части иконок соприкасались.

Черные кнопки фотошоп

Используя Round Marquee, создайте выделение, как на рисунке ниже и добавьте Feather величиной в 30px. Нажмите клавишу Delete 3-4 раза.

Как сделать кнопку для сайта стекло?

Подстройте прозрачность слоя, и у Вас есть замечательная иконка! Поздравляю! Кнопки для сайта в фотошопе

Классная кнопка в фотошопе

Манипуляции с цветами тоже могут принести интересные результаты, например, как тут:

Photoshop кнопка

Готово! Классный фотошоп онлайн

Источник: http://boonage.pjss2.net/2007/03/09/photoshop-cool-glassy-icon-creation/




Смотрите также:

Понравился урок? Поделитесь им в социальных сетях:



22 комментария(-ев) к уроку “Классные кнопки со стеклянным блеском”

  1. У меня фотошоп 9-ый и он на русском нельзя ли сделать всё тоже самое на русском а то не пойму где какая кнопка:sad:

    Agatron

  2. :lol:

    konkoff

  3. :grin:

    Alish

  4. Пару дней назад сделал себе такую кнопку на сайт:

    http://www.gurbanov.com

    Вроде, неплохо смотрится :)

    Кирилл Гурбанов

  5. полезный урок! :wink:
    мне как раз надо кнопки рисовать заказчику))

    May

  6. Ну вот! Пригодилось :) Надеюсь, заказчику понравятся такие кнопки :) Спасибо за коммент!

    Кирилл Гурбанов

  7. Кирилл Гурбанов, спасибо за урок, очень красиво!
    А подчеркивание на своем сайте, с кнопочки, можно и убрать :wink: , а то как-то не профессионально…

    Наталья

  8. Спасибо, Наталья! :) Уберу, я как-то этого и не замечал особенно :)

    Кирилл Гурбанов

  9. Подчеркивание :shock: Гыгыгы

    Максим

  10. Кирилл, Вы кроме словосочетания «классная кнопка» при описании уроков попробуйте использовать какие-нибудь еще эпитеты, а то уже глаза режет этот «классный» в каждом уроке!

    Ольга

  11. Замечательный урок. Просто очень хорошо дан иполезен. Благодарю. :razz:

    Подарочек

  12. Просто офигенный урок!! )))

    MrAnarki

  13. Вот хоть стреляйте не получается у меня второй шаг в этом уроке, слой glass наверху однакож все равно первый shape ему мешает, уже все испробывала ничего не помогает!!!! МОжет кто нить подскажет в чем дело?

    Juliya

  14. у кого проблемы с английским — смотрите, там почти для всего клавиатурные шорткаты есть

    Horeca

  15. Кнопки не плохие, хотя идея не нова…

    Андрей

  16. мне интересно как эту кнопку теперь привязать на сайт? при том чтобы при наведении менялся цвет. Уже всё посмотрел, нигде не могу найти…помогите плз с html…

    Вячеслав

  17. Нарисовал RSS иконку на сайт, выглядит классно :wink:

    Скачать Фотошоп

  18. Ого! Спасибо огромное — сейчас попробую что-нибудь в фотошопе сделать оригинального ручками, до этого пользовался автоматическими сервисами по созданию кнопок сайт онлайн, типа этого Сервис для создания кнопок на сайт онлайн — кстати, кто не сильно с фотошопом советую! Сам сейчас его уже более менее освоил — теперь буду творить шедевры — как сделаю выложу похвалиться! :mrgreen:

    Олег

  19. Чудно! :idea:

    wolski

  20. Спасибо очень пригодилось. Сделал подобные кнопки на двух своих сайтах

    Виталий

  21. а по русски команды нельзя написать?

    константин

  22. Не очень-то на стеклянный эффект похоже :???:

    Роман

Прокомментировать урок

 


Rambler's Top100