Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Кнопки со стеклянным блеском
Adobe Photoshop » Уроки 28 октября 2008 naikonПечать


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

alt

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

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

alt

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

 

 

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

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

alt

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

alt

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

alt

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

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

alt

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

alt

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

alt

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

 

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

 

 

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

alt

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

alt

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

alt

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


alt

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

Готово!  dance1

alt



Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

комментарии (8)

#1 написал: nu-metalist | 29 октября 2008 06:17
     

спасибо. очень полезный материал
#2 написал: Aolaxi | 29 октября 2008 07:21
     

Зачот
#3 написал: naikon | 29 октября 2008 11:00
     

Действительно автор постарался empathy
#4 написал: TakeR | 30 октября 2008 07:57
     

хм..унеплохой урок )
#5 написал: Suredg | 30 октября 2008 12:14
     

Запишу в блокнот данный урок)
#6 написал: MAK7 | 2 ноября 2008 13:58
     

класненько !пригодится
#7 написал: Magus | 6 ноября 2008 18:37
     

Материал БОМБА спасибо
#8 написал: DeNRiX | 12 июня 2009 06:33
     

автору спасиб )
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.