Классные кнопки со стеклянным блеском
![]()
Этот урок научит Вас создавать классные кнопки с отблеском, как у стекла, которые Вы сможете использовать не только на своем сайте, но и на баннерах, печатных материалах и т.п.
Создайте документ любого размера (я использовал размер 500х500 px). Используя инструмент Rounded Rectangle с радиусом в 8px, нарисуйте квадрат (зажав клавишу Shift). После этого откройте меню Blending Options для этого слоя и выберите пункт Gradient Overlay. Задайте два цвета, как на рисурке ниже и назовите этот слой «bg«.
![]()
Теперь копируйте этот слой и назовите копию «glass«. Выберите его и переместите выше слоя «bg«. Залейте его белым цветом и измените его прозрачность (Opacity) на, примерно, 50%. Используя инструмент Square Marquee (клавиша М) и создайте выделение примерно таким, как на рисунке ниже. Проверьте, выбран ли слой «glass» и нажмите клавишу Delete.
![]()
Мы добились эффекта стеклянного блеска. Чтобы немного его смягчить, используйте инструмент Round Marquee. Создайте выделение, как на рисунке ниже. Далее выбирайте Select > Feather (Ctrl+Alt+D) и вводите значение в 30px. Нажимайте клавишу Delete.
![]()
Зажав клавишу Ctrl, кликните по слою «bg«, чтобы выделить его содержимое, и выбирайте Select > Modify > Expand. Вводите 1px и нажимайте ОК. Создавайте новый слой ПОД слоем «bg«, заполняйте выделение белым цветом и называйте слой «shine«.
![]()
После этого шага Вы не заметите изменений из-за белого фона. Чтобы все было нагляднее, создайте еще один слой ПОД слоем «shine» и нарисуйте на нем черный прямоугольник. Вы увидите, чего мы добились. Назовите этот слой «black-bg«.
![]()
Теперь выбираем инструмент 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» и Вы увидите, что у нас получилось. Все почти готово.
![]()
Откройте панель Blending Options для слоя «frame» и выберите пункт Gradient Overlay. Задайте цвета, как на рисунке:
![]()
Вот мы почти и закончили. Осталось только добавить нужный нам символ в иконку. Я попробую добавить символ RSS-подписки.
![]()
Добавьте параметр Inner Shadow, если хотите, и все! Вы только что сделали классную иконку с эффектом стеклянного блеска!
![]()
Теперь с этой иконкой можно делать все, что угодно. Давайте рассмотрим, как сделать отражение.
Создайте слой под основными слоями, используя инструмент Ellipse. Нарисутйе длинный тонкий эллипс, как на рисунке ниже. Залейте его черным цветом.
![]()
Используя фильтр Gaussian Blur, размойте его с радиусом в 1px. Затем немного поиграйтесь с прозрачностью (Opacity).
![]()
Теперь скопируйте всю иконку, отразите ее вертикально (Edit > Transform > Flip Vertical) и подвиньте настолько, чтобы нижние части иконок соприкасались.
![]()
Используя Round Marquee, создайте выделение, как на рисунке ниже и добавьте Feather величиной в 30px. Нажмите клавишу Delete 3-4 раза.
![]()
Подстройте прозрачность слоя, и у Вас есть замечательная иконка! Поздравляю!
![]()
Манипуляции с цветами тоже могут принести интересные результаты, например, как тут:
![]()
Готово!
Источник: http://boonage.pjss2.net/2007/03/09/photoshop-cool-glassy-icon-creation/
Смотрите также:
- Как из фотографии сделать рисунок?
- Изменить фото
- Как скруглить углы в фотошопе?
- Как поставить неубираемый копирайт?
- Как увеличить грудь в фотошопе?
- Эффект фотографии кино
- Как сделать отражение в фотошопе?
- Как сделать кровь в фотошопе?
- Photoshop текст в стиле hi tech
- Как сделать черные глаза в фотошопе?

У меня фотошоп 9-ый и он на русском нельзя ли сделать всё тоже самое на русском а то не пойму где какая кнопка:sad:
Июнь 26th, 2007
Июль 11th, 2007
Август 30th, 2007
Пару дней назад сделал себе такую кнопку на сайт:
http://www.gurbanov.com
Вроде, неплохо смотрится
Август 31st, 2007
полезный урок!
мне как раз надо кнопки рисовать заказчику))
Сентябрь 7th, 2007
Ну вот! Пригодилось
Надеюсь, заказчику понравятся такие кнопки
Спасибо за коммент!
Сентябрь 7th, 2007
Кирилл Гурбанов, спасибо за урок, очень красиво!
, а то как-то не профессионально…
А подчеркивание на своем сайте, с кнопочки, можно и убрать
Ноябрь 13th, 2007
Спасибо, Наталья!
Уберу, я как-то этого и не замечал особенно
Ноябрь 14th, 2007
Подчеркивание
Гыгыгы
Февраль 5th, 2008
Кирилл, Вы кроме словосочетания «классная кнопка» при описании уроков попробуйте использовать какие-нибудь еще эпитеты, а то уже глаза режет этот «классный» в каждом уроке!
Февраль 8th, 2008
Замечательный урок. Просто очень хорошо дан иполезен. Благодарю.
Апрель 5th, 2008
Просто офигенный урок!! )))
Июль 10th, 2008
Вот хоть стреляйте не получается у меня второй шаг в этом уроке, слой glass наверху однакож все равно первый shape ему мешает, уже все испробывала ничего не помогает!!!! МОжет кто нить подскажет в чем дело?
Июль 30th, 2008
у кого проблемы с английским — смотрите, там почти для всего клавиатурные шорткаты есть
Август 2nd, 2008
Кнопки не плохие, хотя идея не нова…
Ноябрь 7th, 2008
мне интересно как эту кнопку теперь привязать на сайт? при том чтобы при наведении менялся цвет. Уже всё посмотрел, нигде не могу найти…помогите плз с html…
Ноябрь 24th, 2008
Нарисовал RSS иконку на сайт, выглядит классно
Февраль 12th, 2009
Ого! Спасибо огромное — сейчас попробую что-нибудь в фотошопе сделать оригинального ручками, до этого пользовался автоматическими сервисами по созданию кнопок сайт онлайн, типа этого Сервис для создания кнопок на сайт онлайн — кстати, кто не сильно с фотошопом советую! Сам сейчас его уже более менее освоил — теперь буду творить шедевры — как сделаю выложу похвалиться!
Июнь 15th, 2010
Чудно!
Июль 29th, 2010
Спасибо очень пригодилось. Сделал подобные кнопки на двух своих сайтах
Август 16th, 2010
а по русски команды нельзя написать?
Май 4th, 2011
Не очень-то на стеклянный эффект похоже
Май 24th, 2011