Средства поддержки анимации 2D и 3D

ImageReady CS

       Программа ImageReady CS входит в состав популярного  пакета Photoshop CS от компании Adobe и предназначена  для разработки различных Web-элементов, в том числе анимированных gif’ов, что с учетом полной совместимости  с Photoshop делает ее прекрасным инструментом для web-дизайна, рассчитанных на профессионалов. Photoshop и ImageReady работают в тесном взаимодействии и прекрасно дополняют друг друга, а редактируемый файл можно без  проблем перемещать между программами  во время редактирования с автоматическим его сохранением. Возможен экспорт  созданных анимированных gif-файлов в формат Macromedia Flash (SWF).

       Анимированные gif’ы могут создаваться как на основе многослойных файлов Adobe Photoshop и Adobe Illustrator, так и из отдельных  изображений, сохраненных в различных  графических форматах. При создании анимации на основе серии изображений  для монтажа кадров не обязательно  нужно загружать каждое изображение  отдельно — можно воспользоваться  возможностью импорта из папки, в  которой предварительно были сохранены  отдельные кадры будущей анимации. Возможно автоматическое формирование необходимого количества промежуточных  кадров, значительно ускоряющее получение  плавных анимаций, так как отпадает надобность вручную создавать каждый кадр. В окне программы можно сразу  же просмотреть результат и при  необходимости внести требуемые  изменения.

рис. 1

       ImageReady имеет большую галерею фильтров, аналогичных многим известным  фильтрам Photoshop. Поэтому для добавления  к кадру того или иного эффекта  не всегда надо переключаться  в Photoshop — многие действия доступны  и из среды ImageReady.

       Для перехода из Photoshop в ImageReady и обратно  нажмите левой кнопкой мыши на последней строчке вертикальной панели инструментов – Edit to Image Ready (Открыть в Image Ready), либо просто одновременной удерживайте комбинацию клавиш Shift+Ctrl+M:

рис. 2

       Панель  Animation можно вызвать командой Window > Animation (Окно > Анимация).

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

       Для подготовки анимации в программе ImageReady необходимо создать множество кадров изображения с помощью палитры Animation (Анимация), показанной на рис. 3. Затем можно редактировать отдельные слои каждого кадра с помощью палитры Layers (Слои) рис. 4, причем у каждого кадра будет собственная уникальная совокупность установок на палитре Layers. И наконец, надо сохранить последовательность кадров в виде одного GIF-файла — теперь анимация готова для просмотра в интерактивном режиме.

   рис. 3

    рис. 4

Эффекты слоя

       Программа ImageReady предлагает тот же набор эффектов слоя, что и Photoshop. Но программа Photoshop регулирует свойства слоя с помощью диалогового окна Layer Style (Стиль слоя), a ImageReady - с помощью контекстной палитры опций слоя.

       Эффекты в программе ImageReady обладают теми же характеристиками, что и в Photoshop: их названия отображаются под именем слоя, к которому они применены; эффекты  перемещаются вместе со слоем; на элементах  палитры есть обращенные вправо стрелочки, с помощью которых можно открыть  или закрыть список эффектов. У  каждого эффекта есть свой собственный  значок, позволяющий отобразить или  скрыть данный эффект.

Создание  анимационного эффекта  для какого-либо изображения.

1. Откройте или создайте изображение, содержащее фоновый слой и прозрачный слой с рисунком какого-либо предмета.
2. Откройте палитру Animation (Анимация).
3. Выберите слой на палитре Layers (Слои).
4. С помощью инструмента Move (Перемещение) перетащите элемент изображения к краю основного окна.
5. В нижней части палитры Animation щелкните по кнопке Duplicate current frame (Дублировать текущий кадр). Скопированный кадр будет выделен.
6. Слой, выбранный на шаге 3, должен оставаться выделенным.
7. С помощью инструмента Move (клавиша V) перетащите элемент слоя на другую сторону основного окна. Оставьте этот слой выделенным!
8. На палитре Animation щелкните по кнопке Tween (Промежуточные кадры) для построения промежуточных кадров между уже выбранными.
9. В диалоговом окне Tween (Промежуточные кадры) поставьте переключатель Layers (Слои) в одно из следующих положений:

• All Layers (Все слои), чтобы скопировать точки со всех слоев в новые кадры.

• Selected Layer (Выделенный слой), чтобы скопировать точки только выделенного слоя в новые кадры. Все другие слои будут спрятаны.

       Затем установите в группе Parameters (Параметры) флажки тех параметров, которые будут изменяться в промежуточных кадрах: Position (Расположение), Opacity (Непрозрачность) и/или Effects (Эффекты).

       Из  всплывающего меню Tween with (Диапазон промежуточных кадров) выберите режим Previous Frame (Добавление промежуточных кадров между выделенным кадром и предыдущим).

Выбор параметров воспроизведения  анимации

       Из  всплывающего меню, расположенного в  нижнем левом углу палитры Animation (Анимация), выберите режим воспроизведения, указывающий, как будет воспроизводиться цнимация: Once (Однократно) или Forever (Непрерывно в цикле). Либо включите опцию Other (Иначе), чтобы указать определенное количество воспроизведений анимации, а затем щелкните по кнопке ОК.

Предварительный просмотр анимации

1. В основном окне выберите вкладку Original (Исходное изображение) или Optimized (Оптимизированное изображение).
2. Если первый кадр не выделен, то в нижней части палитры Animation (Анимация) щелкните по кнопке Select first frame (Выделить первый кадр).

        рис. 5. Дублирование кадра анимации

3. Щелкните по кнопке Play (Проиграть) - см. рис 5. Анимация будет воспроизводиться чуть медленнее, чем должна. (Предварительный просмотр в программе ImageReady происходит медленнее, чем в браузере.)
4. Щелкните по кнопке Stop (Остановить), которая имеет вид квадрата, чтобы приостановить воспроизведение.
5. Сохраните файл, затем щелкните по кнопке Default Browser (Предварительный просмотр в браузере по умолчанию), расположенной на панели инструментов. Щелкните по кнопке Back (Назад), чтобы вернуться в программу ImageReady, когда просмотр будет закончен.

Анимация  покачивания предметов 

       Далее рассмотрено, как сделать так, чтобы  элемент слоя покачивался из стороны  в сторону. Этот тип анимации затрагивает  точки слоя и копируется во все  существующие кадры. Необходимо создавать  дубликат слоя для каждого этапа  движения.

       Создадим  анимацию, в которой объект будет  перемещаться в определенном направлении  и обратно.

1. Откройте изображение и палитру Animation (Анимация).
2. В нижней части палитры Animation щелкните по кнопке Duplicate current frame (Дублировать текущий кадр). Теперь будет выделен дубликат кадра.
3. На палитре Animation щелкните по кнопке Tween (Промежуточные кадры), а затем поставьте переключатель Layers (Слои) в положение All Layers (Все слой), введите число кадров в поле Frames to Add (Добавить кадры), чтобы создать анимацию, и щелкните по кнопке ОК.
4. Щелкните по кадру, в котором должно начаться покачивание.
5. На палитре Layers (Слои) создайте дубликат того слоя, изображение которого будет двигаться.
6. Отредактируйте дубликат слоя (например, подкорректируйте цвет). Спрячьте исходный слой, чтобы увидеть внесенные изменения. Изменения отразятся в выделенном кадре на палитре Animation.
7. Выберите следующий кадр. Сделайте исходный слой receiver видимым и спрячьте его отредактированный дубликат.
8. Щелкните по следующему кадру. Теперь покажите отредактированный дубликат слоя и спрячьте исходный слой.

    Так попеременно показывайте/прячьте  слои для оставшихся кадров анимации.

Открытие  анимации в формате GIF

       Единственное  видимое преимущество использования  формата GIF - это возможность применения или редактирования настроек оптимизации  файла.

1. Выполните команду File > Open (Файл > Открыть) либо нажмите комбинацию клавиш Ctrl+O.
2. Найдите название файла с расширением .gif и щелкните по нему.
3. Щелкните по кнопке Open (Открыть). Кадры анимационной последовательности при этом будут сохранены. Однако на палитре Layers (Слои) теперь станет отображаться последовательность слоев: по одному слою для каждого кадра. Отдельные элементы слоя теперь нельзя редактировать независимо от других кадров!

Оптимизация анимации

1. В меню палитры Optimize (Оптимизация) воспользуйтесь командой Optimize Animation (Оптимизировать анимацию).
2. В группе параметров Optimize By (Оптимизировать с помощью) установите флажок Bounding Box (Габаритная рамка), чтобы сохранить первоначальный кадр, а также только те области, которые изменяются при переходе от одного кадра к другому. В результате уменьшится размер файла, но в то же время не все программы-редакторы, воспринимающие формат GIF, смогут работать с данным файлом.

       В дополнение к этим действиям или  вместо них установите флажок Redundant Pixel Removal (Удалить лишние точки), чтобы удалить те точки объекта или фона, которые не меняются, то есть повторно выводятся при загрузке каждого нового кадра. Это также поможет уменьшить размер файла.

       Ни  одна из этих опций не изменит фактического вида анимации, все изменения происходят «за сценой».

Сохранение  анимации.

       Созданную анимацию можно сохранить в формате GIF либо как фильм QuickTime. Другие форматы  файлов, такие как JPEG или PNG, сохранят только первый кадр изображения, не позволяя воспроизвести всю анимацию. Существует несколько способов сохранить оптимизированную анимацию для использования на Web-странице. В ImageReady достаточно выбрать команду File > Save Optimized (Файл > Сохранить оптимизированный), чтобы сохранить анимацию с установками, выбранными при предыдущем ее сохранении. Если это не первое сохранение, то диалоговое окно Save (Сохранить) не появляется и название файла и его параметры остаются теми же, что были присвоены ранее.

       Выбор команды File > Save Optimized As (Файл > Сохранить как оптимизированный) позволяет изменить имя файла и выбрать другое место его хранения. Кроме того, возможен выбор измененного параметра Save As Type (Тип файла) из набора доступных значений:

• HTML and Images (HTML и рисунки) — генерирует HTML-файл и сохраняет каждый изображение в виде отдельного файла;
• Images Only (Только рисунки) — сохраняет только изображение в отдельном файле;
• HTML Only (Только HTML) — сохраняет только HTML-файл без файлов изображений.

       Кроме того, ImageReady позволяет создать HTML-файл по команде Copy HTML (Копировать HTML), которая  копирует код HTML в буфер обмена, а  затем он может быть вставлен на Web-страницу в любом HTML-редакторе. В  случае изменений исходного изображения  для обновления HTML-файла выполняют  команду Update HTML (Обновить HTML) с указанием  имени обновляемого файла.

       Чтобы сохранить анимацию в формате QuickTime, следует выбрать команду File > Export Original (Файл > Экспорт начального) и из раскрывающегося списка выбрать значение QuickTime Movie (оно будет доступно, если на компьютере установлена программа QuickTime). Указав имя файла и его место расположения, щелчком на кнопке Save (Сохранить) создаем файл выбранного типа. 
 

Как сделать анимированный  дождь.

    Шаг 1. Открываем изображение.

    Шаг 2. Создаем новый слой и заливаем его серым цветом. И применяем к нему фильтр Filter - Noise - Add noise и выставляем такие настройки.

    Затем применяем фильтр Filter-Blur-Motion Blur.

    Ставим прозрачность слоя 30%

    Шаг 3. Снова создаем новый слой и заливаем его серым цветом и применяем те же фильтры как в шаге номер два.но фильтр Motion Blur уже делаем с другими настройками.

    и ставим прозрачность слоя 30%

    Шаг 4. Опять повторяем все тоже самое что мы проделывали в шаге 2. Фильтр Motion Blur делаем с такми настройками и ставим прозрачность слоя 30%.

    Шаг5. Переходим в Image Reader делается это с помощью сочетания клавиш (Shift+Ctrl+M)