Web 2.0 - Стеклянный текст с отражением

Web 2.0 - Стеклянный текст с отражением

Урок Adobe Photoshop по приданию тексту "стеклянного" эффекта и по созданию отражения.
Данный прием часто используется при создании логотипов в стиле Web 2.0.


Создадим новы документ с произвольными размерами. Я установил 600х400.


Теперь напишем необходимый текст, предварительно выбрав желаемый цвет (хотя его можно изменить и после).
Я написал mastermind.pp.ua/datalife-engine цветом 0568b2

Web 2.0 - Стеклянный текст с отражением

Удерживая клавишу Ctrl, нажимаем на иконку слоя в палитре слоев. Появится выделенная область в форме нашей надписи.
Теперь создадим новый слой в палитре слоев и убедившись что выбран именно он идем в меню Выделение - Модификация - Сжать.

Web 2.0 - Стеклянный текст с отражением

Вводим значение 2 пикселя. Получится следующее.

Web 2.0 - Стеклянный текст с отражением

Дальше выбираем инструмент Овальная область и нажимаем на иконку Пересечение с выделенной областью.

Web 2.0 - Стеклянный текст с отражением

Рисуем овальную область примерно как на рисунке...

Web 2.0 - Стеклянный текст с отражением

Должно получиться следующее....

Web 2.0 - Стеклянный текст с отражением

Теперь с помощью инструмента Градиент (цвет от белого к прозрачному) зальем выделенную область. Дополнительно можно поэксперементировать с прозрачностью слоя в палитре слоев.

Web 2.0 - Стеклянный текст с отражением

В результате наш текст уже преобразился, но мы не будем останавливаться на этом. Добавим еще один модный в данное время эффект - отражение.

Для этого продублируем слой с текстом. Дальше заходим в меню Редактирование - Трансформирование - Отразить по вертикали, и с помощью кнопки со стрелкой вниз перемещаем перевернутый текст так как показано на рисунке.

Web 2.0 - Стеклянный текст с отражением

Дальше добавим к этому слою Слой-маску.

Web 2.0 - Стеклянный текст с отражением

Выбираем инструмент градиент (цвет от черного к белому) и проводим линию от нижнего края надписи вверх.
Дополнительно можно уменьшить прозрачность в палитре слоев. Вот что получилось у меня...

Web 2.0 - Стеклянный текст с отражением

Ну и в заключении, я залил фон градиентом. В итоге, мы получаем вот такую симпатичную надпись, которая будет очень эффектно смотреться в качестве логотипа в шапке сайта.

Web 2.0 - Стеклянный текст с отражением


Автор:AlexBen для сайта mastermind.pp.ua/datalife-engine.
При копировании статьи, ссылка на mastermind.pp.ua/datalife-engine обязательна !!!
Другие новости по теме:

Категория: Вебмастеру ----- Просмотров: 5907 ----- Комментариев: 16

Вернуться

  • Группа: Гости
  • ICQ: --
  • Регистрация: --
  • Комментариев: 0
  • Публикаций: 0
^
Спасибо за статью ) smile В будущем пригодится. feel Взять теже обзоры к примеру... bully
  • Nick

  • 27 февраля 2008 21:25
  • Группа: User
  • ICQ: 491507769
  • Регистрация: 8.02.2008
  • Комментариев: 231
  • Публикаций: 8
^
сильно!) я как раз подумал как это сделать и от ваша стаття) ваш сайт прогрессирует, побольше таких материалов)
  • alexben

  • 27 февраля 2008 22:48
  • Группа: Гости
  • ICQ: --
  • Регистрация: --
  • Комментариев: 0
  • Публикаций: 0
^
постараемся...так же наверно мной будут выкладываться PDS-исходники...(менюшек,блокоФ..и.тд)...так что заходите по чаще... smile
  • Roflex

  • 28 февраля 2008 06:33
  • Группа: Гости
  • ICQ: --
  • Регистрация: --
  • Комментариев: 0
  • Публикаций: 0
^
у меня один вопрос ,т.к в фотошопе много чего не знаю.Как залить фон градиентом?
P.S попбольше бы таких статей smile

Разобрался уже сам
  • Kalisha

  • 29 февраля 2008 23:27
  • Группа: Гости
  • ICQ: --
  • Регистрация: --
  • Комментариев: 0
  • Публикаций: 0
^
Блин, а я все сайты с уроками перерыл, не мог понять, как отражение делается)))
Спасибо!
  • Группа: Гости
  • ICQ: --
  • Регистрация: --
  • Комментариев: 0
  • Публикаций: 0
^
Урок полезный, но у аффтара получилось ужасно
  • Группа: Гости
  • ICQ: --
  • Регистрация: --
  • Комментариев: 0
  • Публикаций: 0
^
San4OZE,
надо сделай сам....раз такой умный...када время мало а обьянить надо..выхода нет...дай свой урок или только на слабо берешь?? fellow

тем более критиковать все мы умеем а как самому сразу в кусты)))ЫЫ
  • Tony

  • 3 марта 2008 16:24
  • Группа: Гости
  • ICQ: --
  • Регистрация: --
  • Комментариев: 0
  • Публикаций: 0
^
Фотошоп рулит! !!
  • Группа: Гости
  • ICQ: --
  • Регистрация: --
  • Комментариев: 0
  • Публикаций: 0
^
СПАСИБО!!! Очень пригодилось!!
  • Группа: Гости
  • ICQ: --
  • Регистрация: --
  • Комментариев: 0
  • Публикаций: 0
^
alexben,psd выкладывай плз!
А за уроки спасибо!
  • Domic

  • 17 марта 2008 16:07
  • Группа: Гости
  • ICQ: --
  • Регистрация: --
  • Комментариев: 0
  • Публикаций: 0
^
Спасибо за чудесный урок. А за псд был бы благодарен
  • Группа: User
  • ICQ: 288569677
  • Регистрация: 21.01.2008
  • Комментариев: 703
  • Публикаций: 245
^
amurip,
Дятел ты а не новичёк.
А вернее олень.
am

--------------------
  • _Sedoy_

  • 2 февраля 2009 21:06
  • Группа: Гости
  • ICQ: --
  • Регистрация: --
  • Комментариев: 0
  • Публикаций: 0
^
Спасибо, коротко и ясно))
  • Группа: Гости
  • ICQ: --
  • Регистрация: --
  • Комментариев: 0
  • Публикаций: 0
^
Пасибки=))
  • Pahadp

  • 22 сентября 2010 04:46
  • Группа: Гости
  • ICQ: --
  • Регистрация: --
  • Комментариев: 0
  • Публикаций: 0
^
СПС !!!
  • lika004

  • 23 сентября 2010 01:50
  • Группа: User
  • ICQ: 373624275
  • Регистрация: 13.02.2010
  • Комментариев: 71
  • Публикаций: 0
^
Классно, я в восторге

--------------------