Анимация печатного текста

[Elektra]

Для баннера или аватарки полезен рассмотренный в уроке анимированный эффект.



1.   Открываем в фотошоп любую исходную картинку. Я взяла достаточно большое изображение из которого вырежу аватарку размером 150х150 px.



2.   Кадрируем картинку. Берем инструмент Crop и выставляем ширину и высоту картинки в окнах Width и Height. Теперь выбираем любой интересный для нас кусочек картинки.



Сгруппированный фрагмент можно передвигать с помощью инструмента Move. И жмем Enter. У нас получилась необходимая заготовка.

3.   В окне навигатора выставляем масштаб изображения. Лучше 100%, так мы будем видеть реальную величину аватарки.



4.   Создадим рамку для аватарки. Создаем копию фона. Сделать это можно несколькими способами, рассмотрим два: 1) пр.кнопкой по слою Background – Duplicate Layer



2) Перетащить слой Background на кнопку Create a new layer.



5.   Берем инструмент Rectangular Marquee и обводим нашу заготовку, она выделилась пунктиром.



Layer – Layer Style – Stroke. Position – Inside. Color – выберите из палитры любой подходящий вам цвет, я взяла черно-зеленый оттенок, т.к. он подходит к исходной заготовке. Жмем кнопку Ok.



6.   Чтобы снять пунктир жмем Ctrl+D.

7.   Теперь пишем текст по центру: Music style. Шрифт желательно печатный. Так эффект будет выглядеть лучше.



Посчитаем сколько символов в нашем тексте: 10. Для каждого символа нужен свой слой. Создаем еще 9 копий текстового слоя. (См.пункт 4).
8.   Снимем все глазки, кроме первого текстового слоя. Возьмем инструмент Horizontal Type и щелкнем по тексту сотрем (Backspace) все, кроме первой буквы.



9.   Идем в следующий текстовый слой, с первого снимем глазок. Во втором слое сотрем все буквы, кроме 2х первых. Так же поступаем с остальными текстовыми слоями. На последнем слое весь текст целиком.



10.   Снимите глазки со всех текстовых слоев. Переходим в ImageReady.



11.   Создаем копию кадра. И ставим глазок еще и на первом текстовом слое.



12.   Снова создаем копию кадра, но снимаем глазок с первого тестового слоя и ставим на втором. И так далее со всеми слоями.



13.   Установим время: на первый и последний кадр ставим 0,5 сек на все остальные 0,1 сек.



14.   Запустите анимацию (кнопка Plays) и посмотрите результат.



15.   Сохраним анимацию. File – Save Optimized as…- gif



Наш результат:




идея урока  http://all-graphics.narod.ru/

[Pash0k]

урок хороший вот только я не пойму что такое "УЭМ"? О_о

[Elektra]

Мои инициалы)))

[Парниша]

Надо будет попробовать!!!

[bartyara]

ыы както на досуге обязательно попробую )) классно смотрица )

[Elektra]

Пробуйте! Жду результатов!

[Lana★]

Я незнаю, что делаю не так, но у меня текст не выезжает, а просто печатается, я три раза переделывала   MYSTERY
Так я и раньше умела, а вот чтоб выезжал -ну ни в какую :be:



Если только ручками передвигать по напрвляющим, но я не хочу ручками, если можно по-уроку..




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

[Elektra]

Сейчас

[Elektra]

zwezdaletit, этап со слоями текста, нужно посмотреть более внимательно. Пишется слой с текстом целиком. Потом этот слой копируется столько раз, сколько символов в слове. Нижний слой оставляем целиком, в седующем стираем последний символ, в следущем стираем последний и предпоследний символ, т.е. 2 крайних символа справа и т.д.

[Lana★]

Вот у меня текст из 6 букв, копируем сколько букв- 6 раз, а еще тот слой, который копировали? С ним получается 7 и из-за этого путаница. Или всего должно быть, сколько букв? Что-то меня заклинило на этом((

[Elektra]

Пардон, моя ошибка, подкорректировала п.7 Конечно 7 слоев: 6 на каждую букву и 1 слой целиком слово.
И посмотри картинку в п.9 там хорошо видно.

[Lana★]

Наверное, мне не дано этот урок понять.
Вот 7 букв и семь слоев + один с которого копировали, начинаю стирать текст, оставляя по одной- два и тд. букве и в конце выходит, что слоев с целым текстом оказывается два (один в конце и плюс с которого копировали- если делаю без этого слоя, то получается так же как в начале, текст просто печатается сначала, а не выезжает)
Наверное, нужно дождаться, чтоб кто-нибудь еще сделал этот урок))

[Elektra]

ну, пожалуйста, посмотри слои мои http://radikal.ru/F/s58.radikal.ru/i159/0904/18/98892a15dc36.jpg.html

[Elektra]

там видно всю последовательность
слои двигать не нужно!!!!

[Lana★]

Elektra, я тебя поди уже замучала))
У тебя там десять слоев, все правильно и 10 букв текста, а где одинадцатый? Он, тогда получается не участвует в анимации. Счас еще раз попробую, я этот урок уже наизусть выучила, только конечный результат не получается.

[Elektra]

хех!
вот я еще одну сбацала vala_02

все работает!!!
так хочется, чтобы у тебя получилось  ah

[Lana★]

Я заметила, что при удалении лишних символов у тебя буковки как-бы сами встают куда нужно ( это видно на рис 13 относительно яблока и 12), а у меня остаются на месте, возможно я как-то не так удаляю, ну ладно, наверное, я умру, не узнав этой тайны)))

[Elektra]

Не умирай, плиз! Расскажи как удаляешь буковки на текстовом слое? Я вставала за словом и нажимала клавишу BackSpase, так как текст в текстовом блоке выровнен по центру, то текст без одной буковки центрируется сам автоматом. Поэтому такой эффект и получается!!!!

[Lana★]

Так вот это и было, текстовые настройки тоже важны)) Я исправила в палитре абзац и все заработало, а как вот догадаешься, вот общими усилиями только s18

[Elektra]

Ай, да умница!!!!  s18Ай да, молодчина!!!!  s18 aj aj aj