Классные кнопки со стеклянным блеском » Уроки Photoshop CS2 :: Уроки фотошопа :: Уроки adobe photoshop :: Регулярные пополнения базы уроков

Важно! Создание прибыльных веб сайтов и поисковое продвижение сайтов в Москве: веб-компания StudioForYou!

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

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

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

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

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

cool_glassy_icon_02.png

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

cool_glassy_icon_03.png

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

cool_glassy_icon_04.png

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

cool_glassy_icon_05.png

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

cool_glassy_icon_06.png

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

cool_glassy_icon_07.png

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

cool_glassy_icon_08.png

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

cool_glassy_icon_09.png

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

cool_glassy_icon_10.png

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

cool_glassy_icon_11.png

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

cool_glassy_icon_12.png

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

cool_glassy_icon_13.png

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

cool_glassy_icon_14.png

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

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

cool_glassy_icon_15.png

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

cool_glassy_icon_16.png

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

cool_glassy_icon_17.png

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

cool_glassy_icon_18.png

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

cool_glassy_icon_19.png

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

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

Готово! ;)

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

Популярность: 14%

+news2.ru +ВааУ.ru +newsland.ru +СМИ2.ru +del.icio.us +bobrdobr.ru +memori.ru +RUmarkz +Mister Wong +Мое Место

Похожие уроки photoshop:


ВНИМАНИЕ! Столкнулись с трудностями при выполнении данного урока? Осталось что-то, что Вам непонятно? Забыли основы работы в Adobe Photoshop? Не расстраивайтесь! Решение всех Ваших проблем находится прямо здесь: "Начальный Курс Photoshop!" - Это Бесплатный Мультимедиа-Курс от Авторов Данного Сайта, пройдя который Вы сможете назвать себя мастером качественной работы в известнейшем графическом редакторе! Узнать о курсе подробнее, а также подписаться на него можно, перейдя на страницу курса: Начальный Курс Photoshop! Подпишитесь и пусть все завидуют тому, как легко и быстро Вы создаете шедевры в Adobe Photoshop! Ждем Вас!




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

  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:

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

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

 


Rambler's Top100