Анимация, Веб-дизайн » Анимация: переход текста с размытием


9 июня 2009 от Mark
В урок включён PSD файл
В этом уроке я расскажу Вам как создавать мощный анимированный эффект размытия в Photoshop CS3. К уроку прикреплён PSD файл, в нём вы увидите результат.

Шаг 1:
Для того, чтобы начать, откройтесь подходящий банер или документ на котором Вы хотите применить эффект. Я использовал следующий бенер.
Анимация размытого текста

Шаг 2:
В принципе этот эффект выглядит так: у Вас есть одна строчка текста, и затем она размывается и появляется новая строка текста. Для того чтобы написать текст выберите инструмент Text tool и напишите три строчки текста. Каждая строка на отдельном слое друг над другом. В данном случае использовался текст:
“Only quality tutorials”
“New updates every 3 days”
“Downloadable PSD’s and Video”
http//foto.tut.by/albums/userpics/m/u/1000010013/2527784.jpg
Шаг 3:
Теперь мы должны создать три размытых слоя. Для этого просто сделайте копию одного из ваших слоёв (CTRL+J), растрируйте слой с копией (Layer>Rasterize>Type), и примените фильтр Motion Blur (Filter -> Blur -> Motion Blur) со следующими настройками:
http//userpics.foto.tut.by/m/u/1000010013/3859463.jpg
Шаг 4:
Продублируйте три раза размытый слой (CTRL+J x3), затем объедините полученные слои (CTRL+E x3). Мы это делаём для того, чтобы эффект размытия был более заметен. Теперь вы можете сделать разытия слоя как вам нравится.
http//userpics.foto.tut.by/m/u/1000010013/4795986.jpg
Шаг 5:
Создайте размытый слой для каждой имеющейся строчки с текстом (в нашем случае трех). У вас должно получиться что-то вроде этого:
http//foto.tut.by/albums/userpics/m/u/1000010013/56333569.jpg
Шаг 6:
Отключите отображение всех слоёв с текстом и размытых слоёв за исключением неразмытой первой строки текста. Чтобы отключить отображение слоя, щёлкните по изображению глаза в палитре слоёв.
http//userpics.foto.tut.by/m/u/1000010013/6081233.jpg
Шаг 7:
Откройте окно анимации (Windows -> Animation). Это будет выглядеть приблизительно так:
http//foto.tut.by/albums/userpics/m/u/1000010013/7509069.jpg
Замечание: в старых версиях Photoshop вы должны будете переключиться в Imageready.
Шаг 8:
Установите задержку первого кадра в 3 секунды. Создайте новый кадр, теперь отключите строку с текстом, и включите отображение размытого слоя. Второй кадр должен выглядеть так:
http//foto.tut.by/albums/userpics/m/u/1000010013/8246400.jpg
Шаг 9:
Создайте новый кадр, в этом кадре уменьшите непрозрачность размытого слоя до 10%. Продолжайте создавать новые кадры с низким уровнем непрозрачность вплоть до 20%.
http//foto.tut.by/albums/userpics/m/u/1000010013/9946897.jpg
Шаг 10:
На кадре с 20-ю процентами непрозрачности включите отображение второй строчки с текстом. Теперь создайте новый кадр и отключите размытый слой, оставляя только вторую строку текста. Установите задержку в 3 секунды. У вас получится приблизительно это:
http//userpics.foto.tut.by/m/u/1000010013/10347845.jpg
Шаг 11:
Повторите этот процесс для остальных двух строк текста, когда Вы закончите у Вас должно получиться что-то похожее на это:
Анимация размытого текста (53.83 Kb)

Скачать PSD к уроку:
Уважаемый пользователь, вам необходимо зарегистрироваться, чтобы посмотреть скрытый текст!

Источник: tutorialpear.com
Перевод: Mark