Основы анимации в PS/ImageReady

Это урок, который я намеревалась разместить очень, очень давно. Я получала много просьб об этом, и вот он, наконец, готов!
Я использовала PS CS (8) для написания урока. Если у вас другая версия, ваши скриншоты могут немного отличаться от моих, но инструкции будут верны.

Графическая анимация это как короткое кино. Мы обычно делаем их либо в Flash (swf) или как анимированный GIF. Здесь мы поработаем в Photoshop и ImageReady, для создания анимированного GIF.
Как и кино, анимация состоит из кадров, и вы делаете эти кадры, как слои в Photoshop. Конечно, можно анимировать что угодно, но я собираюсь делать фильм из этого смайла, придуманного в моей немного шальной голове.



Начнем!
1. Начнем с создания основного изображения на отдельном от фона слое.
Так как мы собираемся делать все кадры из этого изображения, сделайте несколько копий слоя. (Я закончила, в конце концов, с 10 кадрами, все были созданы из первого слоя)



3. Создаем разные кадры… как слои.
Выключите видимость всех слоев кроме нижнего. Затем начинайте работать на нижнем слое и работайте вверх, делая каждый следующий кадр на собственном слое.

4. Называйте слои по мере работы
Это позволит видеть, что делает каждый слой. Если вам нужен одинаковый кадр, вы можете копировать его дублированием слоя и переместить его туда, куда вам нужно на палитре слоев.



5. Теперь мы собираемся прыгнуть в ImageReady.
На старт… внимание…прыгаем!
Нажмите кнопку Jump to ImageReady внизу панели инструментов.
Это откроет ImageReady!



6. Оглянитесь.
Если это ваш первый взгляд на ImageReady, успокойтесь немного. Он не похож в точности на Photoshop. Некоторые вещи пропущены, есть НОВЫЕ, и некоторые функции работают не так как в PS. Но все будет хорошо
Нам понадобятся палитра слоев (справа) и палитра анимации. Если у вас нет какой-либо, выберите Window > ... и нажмите ту, что пропущена. Так же как и в Photoshop!



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

8. Показываем только слой для первого кадра.
Следующим шагом мы будем добавлять кадры в нашу палитру анимаций. Заметьте, что первый кадр уже есть там. Нам нужно сделать так, чтобы там был кадр, который мы хотим видеть первым, так что вперед, выключите видимость всех слоев, кроме нижнего. Вот. Вот первый кадр.

9. a. Делаем все остальные кадры.
Существует, по крайней мере, два пути сделать это. Если все ваши слои правильно расположены, как я делала выше, каждый слой на один кадр, можно использовать маленький треугольник всплывающего окна на панели анимаций и выбрать Make Frames from Layers (Сделать кадры из слоев).



Сделано! Направляйтесь к шагу 12.
Если у вас есть элементы на разных слоях, вам, возможно, захочется использовать метод «идти напролом». Я выполняю его в пунктах 9-11.
9. b. Создаем второй кадр.
Теперь нажмите на иконку New Frame внизу палитры анимаций (красная стрелка на картинке). Это приведет к созданию нового кадра.



10. Показываем слой для второго кадра.
Придайте кадру тот вид, который нужен, включив видимость следующего слоя. Для моего пример это слой, который я назвала tongue1.



11. Делам остальные кадры.
Теперь работаем в следующем ритме – новый кадр…показать слой…новый кадр…показать слой…до тех пор, пока все слой не станут видимыми и каждый окажется на своем кадре в палитре анимаций.



Примечание: делаем размер файла меньше.
Заметьте, что в панели анимаций ниже, кадр 1 и 11 одинаковы. Было бы ничего страшного, если бы я хотела проиграть их единожды, но если это прокручивается по кругу, то глупо иметь их в таком варианте…и это делает файл излишне большим. Каждый кадр добавляет веса файлу!
Лучше оставить только первый кадр, сделав паузу на нем немного дольше. Я установлю это за один миг.

12. Время установить время!
• Если ваша анимация будет повторяющейся, нажмите падающую стрелку, где написано Once и смените на Forever.
Также можно установить определенное количество прокруток, нажав кнопку Other.
• Если вы хотите проигрывать фильм медленно или делать паузу на определенном кадре, вы можете установить время для каждого кадра в отдельности через выпадающее окно. По умолчанию это время 0 секунд.
Теперь опробуйте и настройте как необходимо. Вы будете делать все изменения на панели анимаций, но видеть результат в окне изображения.



13. Пробуем и настраиваем
Нажмите кнопку Play. Это треугольник, указывающий вправо. После нажатия смотрите на окно изображения и может быть даже закройте палитру анимаций, если она вас отвлекает.
Эта картинка создана с настройками в палитре анимаций как на изображении ниже.
(Помните тот посторонний кадр 11, который я сделала и решила, что он не нужен? Нажмите его и перетащите на иконку корзины внизу палитры анимаций.)



14. Меняем размер изображения.
Размер изображения меняется в Edit > Image Size, если только вы не сделали нужный размер уже в Photoshop. Если вы изменяете размер в ImageReady, сделайте это до того, как вы сохраните файл.

15. Оптимизация анимации.
В окне изображения у вас есть 4 ярлыка, это очень похоже на диалоговое окно Save for Web в Photoshop. Выберите Optimized, чтобы посмотреть, как будет выглядеть оптимизированное изображение.
Расширьте немного окно, и вы сможете нажать на выпадающее окно, чтобы увидеть размер файла при данных установках.



16. Изменение установок оптимизации.
Если вам нужны другие установки оптимизации, их можно изменить в палитре оптимизации. (Window > Optimize если вы не видите ее)



17. Сохраняем анимацию.
На мой взгляд, здесь не так хорошо как в File > Save for Web, потому что нет всех окон с панелями управления размером и оптимизацией. Но, по крайней мере, сохранение анимации это очень короткий процесс.
File > Save Optimized as... и назовите свой файл!

18. Проверяем анимацию!
Можно сделать предварительный просмотр в ImageReady, как вы делали недавно, но также можно посмотреть файл в вашем браузере. В Internet Explorer выберите File > Open ... смените тип файла на All files, и найдите свой фильм. Нажмите открыть и вы увидите свою анимацию!



Надеюсь, вам понравился урок!