dle.in.ua » Вебмастеру » Web 2.0 - Стеклянный текст с отражением

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

Автор: alexben от 27-02-2008, 16:52
Web 2.0 - Стеклянный текст с отражением

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


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


Теперь напишем необходимый текст, предварительно выбрав желаемый цвет (хотя его можно изменить и после).
Я написал dle.in.ua цветом 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 для сайта dle.in.ua.
При копировании статьи, ссылка на Dle.in.ua обязательна !!!
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Спасибо за статью ) smile В будущем пригодится. feel Взять теже обзоры к примеру... bully
    • Most_Wanted
    • Регистрация: --
    • Репутация: (||)
    • 27 февраля 2008 17:23
    • 1
    ^
  • Группа: User
  • Icq: 491507769
  • Комментариев: 231
  • Публикаций: 8
  • сильно!) я как раз подумал как это сделать и от ваша стаття) ваш сайт прогрессирует, побольше таких материалов)
    • Nick
    • Регистрация: 8.02.2008
    • Репутация: (0|0|0)
    • 27 февраля 2008 21:25
    • 2
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • постараемся...так же наверно мной будут выкладываться PDS-исходники...(менюшек,блокоФ..и.тд)...так что заходите по чаще... smile
    • alexben
    • Регистрация: --
    • Репутация: (||)
    • 27 февраля 2008 22:48
    • 3
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • у меня один вопрос ,т.к в фотошопе много чего не знаю.Как залить фон градиентом?
    P.S попбольше бы таких статей smile

    Разобрался уже сам
    • Roflex
    • Регистрация: --
    • Репутация: (||)
    • 28 февраля 2008 06:33
    • 4
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Блин, а я все сайты с уроками перерыл, не мог понять, как отражение делается)))
    Спасибо!
    • Kalisha
    • Регистрация: --
    • Репутация: (||)
    • 29 февраля 2008 23:27
    • 5
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Урок полезный, но у аффтара получилось ужасно
    • San4OZE
    • Регистрация: --
    • Репутация: (||)
    • 1 марта 2008 12:21
    • 6
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • San4OZE,
    надо сделай сам....раз такой умный...када время мало а обьянить надо..выхода нет...дай свой урок или только на слабо берешь?? fellow

    тем более критиковать все мы умеем а как самому сразу в кусты)))ЫЫ
    • alexben
    • Регистрация: --
    • Репутация: (||)
    • 1 марта 2008 19:29
    • 7
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Фотошоп рулит! !!
    • Tony
    • Регистрация: --
    • Репутация: (||)
    • 3 марта 2008 16:24
    • 8
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • СПАСИБО!!! Очень пригодилось!!
    • Максим
    • Регистрация: --
    • Репутация: (||)
    • 11 марта 2008 19:09
    • 9
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • alexben,psd выкладывай плз!
    А за уроки спасибо!
    • chelsyk
    • Регистрация: --
    • Репутация: (||)
    • 12 марта 2008 16:30
    • 10
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Спасибо за чудесный урок. А за псд был бы благодарен
    • Domic
    • Регистрация: --
    • Репутация: (||)
    • 17 марта 2008 16:07
    • 11
    ^
  • Группа: User
  • Icq: 288569677
  • Комментариев: 703
  • Публикаций: 245
  • amurip,
    Дятел ты а не новичёк.
    А вернее олень.
    am

    --------------------
    • GauraStyle
    • Регистрация: 21.01.2008
    • Репутация: (0|0|0)
    • 29 декабря 2008 12:26
    • 12
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Спасибо, коротко и ясно))
    • _Sedoy_
    • Регистрация: --
    • Репутация: (||)
    • 2 февраля 2009 21:06
    • 13
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Пасибки=))
    • MisHka
    • Регистрация: --
    • Репутация: (||)
    • 24 мая 2009 12:14
    • 14
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • СПС !!!
    • Pahadp
    • Регистрация: --
    • Репутация: (||)
    • 22 сентября 2010 04:46
    • 15
    ^
  • Группа: User
  • Icq: 373624275
  • Комментариев: 71
  • Публикаций: 0
  • Классно, я в восторге

    --------------------
    • lika004
    • Регистрация: 13.02.2010
    • Репутация: (0|0|0)
    • 23 сентября 2010 01:50
    • 16
    ^
    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.