Автор: Глобатор
Разместил: Rhainer
Дата размещения: 2.12.2008
Источник: http://globator.net/animation/44-animac … eksta.html

Создайте в Фотошопе новый документ с белым фоном. Мой размер 300х200 пикселей. Сделайте надпись. Для этого урока предпочтительнее использовать рукописный шрифт.

http://smages.com/i/f2/7f/f27f11065969c3d70860f8916383b118.jpg

Для первого раза не делайте надпись длиннее 3-4 знаков, так проще и быстрее научиться. Затем уже можете использовать текст любой длины.

Теперь зайдите в
Layer-Rasterize-Type
(Слои-Растеризовать-Текст),
чтобы перевести текст в растр (мы сможем закрашивать надпись). В окне слоев будут два слоя (нажмите F7, если это окно закрыто):

http://smages.com/i/ab/1b/ab1bd13014572fc62fffb27ecbdd031b.jpg

В окне слоев кликните правой мышкой на слое с надписью и выберите
Duplicate Layer (Сделать дубликат слоя).

http://smages.com/i/16/41/1641079b58026a75395bc1de037f7b29.jpg

Повторите операцию еще раз:

На этот раз нам предстоит создать много слоев- примерно по два-три слоя на каждую букву и знак нашей надписи. У меня 4 знака, я создам 10 слоев. В процессе работы я добавил еще несколько слоев. Но если будете добавлять слои в конце работы, то добавленные слои будут видимы в каждом кадре, и надо будет делать их невидимыми. Так что делайте все слои сразу. В идеале на каждую букву нужно около 4-5 слоев. Для начала сделайте 2-3.

http://smages.com/i/d1/17/d1176c87e433a65566aa723419ce2064.jpg

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

http://smages.com/i/a1/cd/a1cd9822ba2baa645128b36dfc0c7a58.jpg

Теперь перейдем в программу для анимации ImageReady, кликнув на указанной иконке или нажав Shift+Ctrl+M на клавиатуре.

http://smages.com/i/df/83/df832532822f54a32ef6a4c7e62cca9c.jpg

Убедитесь, что в ImageReady у Вас открыты окна анимации и слоев. Если нет, откройте их через
Window-Animation (Окна-Анимация)
и
Window-Layers (Окна-Слои).

Затем на палитре инструментов ImageReady возьмите Brush tool (Кисть)ю
Убедитесь, что у Вас активны только слой с белым фоном и первый слой с надписью. Остальные слои должны быть невидимы:

http://smages.com/i/a1/cd/a1cd9822ba2baa645128b36dfc0c7a58.jpg

Установите цвет кисти на белый, и начинайте закрашивать свою надпись.

http://smages.com/i/26/36/26365dc00f91ca5123f69abb5b36ac9f.jpg

Оставьте только самый крайний участок первой буквы:

http://smages.com/i/23/2f/232f6217aaf63eb1e66a882195fe2cc5.jpg

Теперь перейдем к окну анимации. Кликните на указанной иконке, чтобы сделать дубликать кадра:

http://smages.com/i/3f/68/3f68be9763d394dbdd806e25fd5d0667.jpg

Появится второй кадр- точная копия нашего первого кадра. Для того, чтобы каждый кадр немного отличался от предыдущего, мы будем немного менять каждый кадр, оставляя большую часть буквы, чтобы в итоге получился эффект анимации. Суть этого урока в том, чтобы каждому кадру соответствовал свой слой, который мы будем слегка изменять. Звучит сложно, но на самом деле это легко и просто. Итак, у нас теперь появился второй кадр:

http://smages.com/i/9f/50/9f50a0fb97afafce18b4a4d46e28c1de.jpg

Второму кадру должен соответствовать следующий слой (Вам нужно сделать этот слой видимым, кликнув на значке глаза. Соответственно, другие слои, за исключением белого фона, должны быть невидимы). Не забудьте, что активный слой должен быть выделен синим:

http://smages.com/i/91/29/912930511ce035ac725774884b2890dc.jpg

Теперь для второго кадра стираем надпись, оставляя чуть большую часть буквы:

http://smages.com/i/a6/04/a60444d8d82425a2f9053d59e69f85c6.jpg

Теперь снова кликаем на указанной иконке, чтобы создать очередной дубликат кадра:

http://smages.com/i/74/38/7438cea80ef104ec81ff98e04727d015.jpg

Для третьего кадра перейдем к следующему слою:

http://smages.com/i/71/2e/712efbfb9b38a589dd5828cea143b622.jpg

Кадр создан:

http://smages.com/i/0f/11/0f11a353fcaec4905d7a8a2f410b5863.jpg

Закрашиваем надпись и оставляем чуть большую часть буквы:

http://smages.com/i/0f/11/0f11a353fcaec4905d7a8a2f410b5863.jpg

Аналогично создаем очередной дубликат кадра и делаем видимым очередной слой:

http://smages.com/i/c5/46/c5464e26d5a9f563fb47c577cd5cb0a6.jpg

Стираем надпись и оставляем еще большую часть буквы:

http://smages.com/i/18/aa/18aa2c79313b7ec866021581a095b339.jpg

Далее действуем по той же схеме- создаем очередной кадр:

http://smages.com/i/98/fb/98fb3ada7748358bb28177106eb178fb.jpg

Для нового кадра переходим к новому слою:

http://smages.com/i/d2/0f/d20fd07195bfc2bed2c1bb258e4989fd.jpg

На этот раз оставляем первую букву целиком:

http://smages.com/i/72/7a/727a50cb826da5fc4ca36bbc0dc28392.jpg

Повторяем операции- создаем дубликат кадра:

http://smages.com/i/25/dd/25ddb79cf1dabdcf9c5cb4b16a23e84b.jpg

Для нового кадра делаем видимым очередной слой:

http://smages.com/i/c1/6a/c16ac51cb04901b2be6b095857759c58.jpg

Закрашиваем все меньше и меньше:

http://smages.com/i/82/9f/829fb1b5b0e252c91d834ca2f3ab029b.jpg

Делаем новый дубликат кадра:

http://smages.com/i/21/2a/212a63f81c3aad1a0235f1beed9863b7.jpg

Для нового кадра делаем видимым следующий слой:

http://smages.com/i/a0/ab/a0abb881c61dd371495b901c39bbb8d7.jpg

Закрашиваем и оставляем чуть больше надписи:

http://smages.com/i/57/34/5734dafd37eb4437dc57c7ae1a30ec0d.jpg

Тут главное- не торопиться. Делаем очередной дубликат кадра:

http://smages.com/i/79/37/7937930a194943a7e691e333e7222ea2.jpg

Для которого делаем видимым следующий слой:

http://smages.com/i/04/74/04743bcc51bdb1b49ab554d442035f31.jpg

При закрашивании оставляем все больше надписи:

http://smages.com/i/a8/7e/a87eb2757ab8dba070639ccb42de6618.jpg

Проделайте эти шаги со всеми буквами и знаками своей надписи. Затем в окне анимации кликните на маленьком треугольнике около каждого кадра, чтобы выставить задержку в 0.1 секунды:

http://smages.com/i/ab/8a/ab8a298be43e3d5b67e31c5acc5da092.jpg

У последнего кадра поставьте задержку в 1 секунду. Для того, чтобы анимация была непрерывной, выберите установку
Forever (Навсегда) в левой части окна анимации. Осталось нажать на волшебную кнопку Play:

http://smages.com/i/f0/d8/f0d8bfe9bed2f509421808496f9ed8d2.jpg

Результат

http://smages.com/i/41/f3/41f32f328030c84a96473ef30260d8d9.gif