Размещено на http: //www. allbest. ru/

Создание анимированных изображений для Web

1. Создание анимаций в Image Ready

Анимация создаётся из единичного изображения с помощью анимированных GIF-файлов. Анимированный GIF - это последовательность изображений, или кадров (фреймов). Каждый последующий фрейм слегка отличается от предыдущего, создавая при быстром просмотрое иллюзию движения. Анимацию можно создать несколькими путями: используя кнопку дублирования текущего кадра (duplicate current frame) в палитре Animation, а затем - палитру слоёв, чтобы назначить состояние изображения, связанное с каждым фреймом; используя функцию Tween для быстрого создания новых фреймов с целью искривления текста, изменения прозрачности слоя, расположения объектов, появления, исчезновения или движения элементов изображения; посредством открытия многослойного файла Photoshop для анимации. когда каждый слой становится фреймом. Создавая анимационную последовательность, рекомендуется находиться в режиме просмотра Original, чтобы ImageReady не пыталась реоптимизировать картинку во время редактирования содержимого фреймов. Файлы анимации имеют выходной формат GIF или QuickTime. Анимацию в формате JPEG или PNG создать нельзя.

2. Работа со слоями в анимациях для WEB

Работа со слоями - необходимая часть создания анимаций в ImageReady. Помещая каждый элемент анимации на собственный слой позволяет менять его положение и внешний вид в последовательности фреймов. Эти изменения могут быть специфическими для конкретных фреймов (Frame-specific changes) или глобальными (Global changes). Первые воздействуют только на активный фрейм. По умолчанию изменения, произведенные в слоях с помощью палитры Layers - включая прозрачность слоя, характер смешения, видимость, расположение, стиль, являются специфическими для активного фрейма. Хотя можно назначить изменения слоя для всех фреймов анимации с помощью кнопок unity в палитре слоёв.

Глобальные изменения воздействуют на каждый фрейм. Изменения пикселей слоя с помощью инструментов рисования и редактирования, команды настройки тона и цвета, фильтры, текст и др. команды являются глобальными. Каждый новый фрейм начинается с копирования предыдущего фрейма - вы редактируете его путем настройки слоёв. Вы можете применить изменения слоя к одному фрейму, группе фреймов или ко всей анимации.

В этом уроке мы создадим анимацию для фирмы, выпускающей соки. Откроем web-браузер и выполним команду File>Open>Jus.html. Просмотрим готовый файл и закроем браузер. Затем откроем ImageReady. Создадим рабочее пространство специально для решения наших задач. Для этого закроем группу палитр Color и Rollovers. Изменим размер палитры Layers так, чтобы она позволяла показать по крайней мере пять слоёв и разместим ее ниже палитры Optimize, оставив между двумя палитрами пустое пространство около 1 см для последующего растягивания палитры Optimize. Сохраним рабочее пространство: Window > Workspace > Save Workspace> Animation_16. Теперь его можно вызвать в любое время.

3. Анимация методом скрытия и показа слоёв

Возможно, простейший способ двухшаговой анимации - переключение видимости двух слоёв. Так можно создать анимированную букву или заставить объект перемещаться туда-сюда. Чтобы создать анимацию, используем палитру слоёв в совокупности с палитрой Animation. В палитре Animation добавляются новые фреймы, обновляются существующие, изменяется порядок следования фреймов и осуществляется предварительный просмотр анимации.

4. Создание простой анимации

Оживим рисованный миксер. Его изображение размещено на нескольких слоях. Создадим анимированные фреймы, появляющиеся и исчезающие во время проигрывания анимации, создавая эффект подвижности кувшина миксера.

Откроем файл: File > Open>Blender.psd. В палитре анимации появляется единственный фрейм, показывающий текущее состояние изображения.

Он активен (окружен каёмкой, показывающей, что можно редактировать содержимое фрейма). В палитре слоёв левее миниатюры слоя Layer 1 видна иконка глаза, свидетельствующая, что это единственный видимый слой изображения. Щелкнем в палитре анимации кнопку Duplicate current frame (дублировать текущий фрейм) , чтобы создать фрейм 2. Затем в палитре слоёв щелкнем по окошку видимости слоя 2, чтобы появилась миниатюра глаза и слой стал видимым. Этот слой находится выше слоя 1, делая его невидимым. В палитре анимации убедитесь, что в раскрывающемся меню циклов в нижнем левом углу палитры выбрано «Forever».

5. Работа с фреймами анимации и ее предварительный просмотр

Для просмотра анимации можно использовать несколько методов. В палитре анимации щелкнем первую миниатюру, чтобы выбрать этот фрейм. В окне изображения и на палитре слоёв виден только слой Layer 1. Щелкнем вторую миниатюру. Теперь виден и второй слой Layer 2. В палитре намации кликнем кнопку Backward (назад), чтобы перейти к другому фрейму. Выполняя быстрые повторные щелчки, вы осуществляете вручную предварительный просмотр анимации в окне изображения. В нижнем левом углу палитры слоев кликните кнопки Backward или Forward, чтобы увидеть абсолютно такие же результаты, что и в предыдущем шаге. Теперь щелкнем кнопку Play в палитре анимации, чтобы выполнить предварительный просмотр. Кнопка Play превращается в кнопку Stop , которую можно нажать для остановки просмотра. Теперь для просмотра в браузере выполним команду File>Preview in и выберем нужный браузер - например Microsoft Internet Explorer. То же самое можно сделать, нажав клавиши Ctrl+Alt+P или щелкнув по кнопке браузера в панели инструментов. После просмотра в браузере закройте его и вернитесь в ImageReady. Сохраните оптимизированный файл: File > Save Optimized As> Blender.gif, щелкнув кнопку Save.

6. Создание копий слоёв для анимации

Сейчас приступим к анимации другого элемента в изображении миксера. В целом используем ту же технику показа и скрытия слоёв, но теперь будем добавлять новые слои копируя и трансформируя один слой. Перед добавлением слоёв к изображению, уже содержащему анимацию, создадим новый фрейм. Это помогает предохранить существующие фреймы от нежелательных изменений. В палитре анимации выберем Frame 2 и щелкнем кнопку Duplicate Current Frame , чтобы создать новый фрейм - Frame 3.

Оставим Frame 3 активным. В палитре слоёв сделаем видимым слой Drop. В окне изображения и на миниатюре Frame 3 обратите внимание на капли сока, появившиеся слева сверху на миксере. В меню палитры анимации выполним команду New Layers Visible in All States/Frames Command (новые слои видны во всех состояниях), чтобы сделать его неактивным, если это нужно. В палитре слоёв выберем слой Drop и перетащим его на кнопку New Layer (новый слой), чтобы создать копию. Повторим этот шаг, чтобы создать три копии слоя - Drop, Drop copy и Drop copy 2. Их порядок в палитре не имеет значения. Копии слоёв будут видны во всех трёх фреймах палитры анимации, если опция New Layers Visible in All States/Frames выбрана в меню палитры анимации.

7. Перемещение и трансформация слоёв для анимации

Теперь трансформируем две копии слоёв в файле Blender.psd, чтобы капля падала с миксера вниз. В палитре слоёв выберем слой Drop и выберем инструмент перемещения в панели инструментов. Переместите слой налево вниз, будто капля падает по плавной траектории. Выберем Edit>Free transform. В окне изображения вокруг слоя появляется рамка трансформации. Поместим пойнтер за ее пределами, а когда он примет вид изогнутой стрелки , повернем слой примерно на 30 против часовой стрелки. Нажмем клавишу Enter, чтобы применить изменения. Затем в палитре слоёв выберем слой Drop copy 2 и проделаем те же преобразования, поворачивая каплю немного сильнее и сдвигая её дальше вниз влево, как показано на иллюстрации вверху. Сохраним файл с выполненными преобразованиями - File>Save.

8. Создание самопроизвольных анимаций

Создадим анимацию падающих капель, скрывая и показывая слои. Также создадим эффект вибрации миксера во время падения капель. Всё это выполняется настройками установок палитр слоёв и анимации. Сначала в палитре анимации выберем Frame 3. В палитре слоёв выберем Layer 1 и манипулируя миниатюрой глаза , сделаем видимыми только слои Layer 1 и Drop, а остальные три слоя спрячем.

Помните, что скрывая или показывая слой одного фрейма, мы применяем эти изменения только к данному фрейму. Снова щелкнем кнопку Duplicate current frame в палитре анимации, чтобы создать frame 4.При активном фрейме 4 в палитре анимации, щелкнем по миниатюрам глаза в палитре слоёв так, чтобы Drop copy, Layer 2 и Layer 1 были видны. Спрячем Drop layer и Drop copy 2 layer.

Щелкнем ещё дважды кнопку Duplicate current frame в палитре анимации, а затем используем миниатюру глаза в палитре слоёв, чтобы достичь следующего результата: для фрейма 5 оставим видимыми только слои Drop copy и Layer 1. Для фрейма 6 оставим видимыми только слои Layer 2 и Layer 1. Теперь воспользуйтесь одним из описанных выше методов для предварительного просмотра анимации.

9. Установка и предварительный просмотр временной последовательности

Сейчас мы установим задержку для проигрывания каждого фрейма анимации, а затем проиграем ее. В меню палитры анимации выберите Select all frames (выбрать все фреймы).

Кликните время (0 секунд по умолчанию) под одним из фреймов, чтобы открыть всплывающее меню Frame Delay (задержка фрейма) и установите время 0,1 сек. Новое значение появляется под миниатюрой каждого фрейма, показывая, что изменение применено ко всем фреймам в палитре. Естественно, можно менять это время для каждого фрейма в отдельности. Кликнем кнопку Play в палитре анимации, чтобы просмотреть анимацию, потом кликните кнопку Stop. Теперь выберем File>Preview in и выберем браузер в открывшемся подменю для аккуратного просмотра анимации с учетом установок времени. Выполнив просмотр, вернитесь в ImageReady. Теперь выберем File > Save Optimized As>Blender.gif. Затем кликнем Save и кликнем Replace, чтобы заменить существующий файл. Команда Save Optimized As (Сохранить оптимизированным как…) сохраняет файл в форматах GIF, JPEG, PNG для web-страниц. Однако, только GIF поддерживает анимации. Выберем File > Close, чтобы закрыть первоначальное изображение, не применяя к нему изменений. Работа над этой анимацией завершена.

10. Анимация с применением прозрачности и позиционирования слоя

Теперь воспользуемся несколько иным методом анимации. Создадим летающий логотип на основе многослойного изображения Photoshop. Используем настройки расположения и прозрачности слоёв для создания начального и конечного фреймов в анимационной последовательности. Откроем новый файл: File > Open > Logo1.psd. Этот файл состоит из четырех различных компонентов, размещенных на различных слоях. Создадим анимированные фреймы, на которых буквы логотипа появляются и перемещаются в своё конечное положение из различных областей. Текущее состояние картинки показывает, как мы хотим, чтобы логотип выглядел в конце анимации. Теперь убедимся, что палитры анимации и слоёв видимы, или выберем Window >Workspace > Animation_16, чтобы показать их (можно просто выполнить команду Window > Layers and Window >Animation). В палитре анимации кликнем кнопку Duplicate current frame, чтобы создать новый фрейм. Теперь, когда имеется два фрейма, наша задача - создать у них различия между состояниями слоёв. Выделим Frame 2 в палитре анимации.

Затем в палитре слоев выделим слой J. Выбрав инструмент перемещения , нажмем шифт для ограничения направлений перемещения и перетащим «J» в левую часть окна изображения так,

чтобы от буквы «J» была видна только часть. В палитре слоёв выберем слой «S», удерживая Shift, переместим букву S подобным образом вправо. Используя эту технику, передвинем слой “Bar” к верхнему краю изображения и слой “U” - к нижнему краю. Теперь в палитре слоёв выберем слой J и установим непрозрачность Opacity 20%. Повторим этот шаг для каждого из трех слоёв. Видим, что в палитре анимации фрейм 2 обновился и отображает текущее состояние изображения. Чтобы сделать фрейм 2 стартовым в анимации, изменим порядок фреймов. В палитре анимации перетащим фрейм 2 налево, отпустив кнопку мыши, когда черный прямоугольник появится левее фрейма 1.

11. Создание промежуточных фреймов

Для завершения анимационной последовательности добавим фреймы, представляющие переходные состояния изображения между двумя существующими фреймами. Это нужно для создания иллюзии движения. Когда вы меняете положение, прозрачность или эффекты любого слоя между двумя фреймами анимации, вы можете «приказать» ImageReady создать автоматически промежуточные фреймы. Для этого в палитре анимации выберите фрейм 1 и выполните команду Tween в меню палитры. В диалоговом окне Tween установим следующие опции. В раскрывающемся меню Tween With (между какими фреймами вставить), выберем Next Frame (следующий фрейм). Для Frames to add (количество добавляемых фреймов) выберем 4. В пункте Layers выберем All layers (все слои). В разделе Parameters поставим галочки в окошках Position (положение) и Opacity (непрозрачность). Вообще-то можно также выбрать и Effects для изменения установок эффектов слоев между начальным и конечным фреймом. Но сейчас это не нужно, так как мы не применяли к слоям никаких эффектов. Наконец, закроем диалоговое окно, кликнув OK. Видим, что ImageReady создала четыре новых промежуточных фрейма, основанных на установках прозрачности и расположения первого и последнего фрейма. В раскрывающемся меню Looping (зацикливание)в нижнем левом углу палитры анимации выберем Once (один раз). В палитре анимации нажмите кнопку Play для предварительного просмотра анимации.

12. Тонкости создания промежуточных фреймов

Если вы хотите, чтобы слой «растворился», установите opacity (непрозрачность) первого фрейма - 100%, а последнего - 0%. При выполнении команды Tween между первым и последним фреймом создается последовательность фреймов с постепенно увеличивающейся прозрачностью слоя. Вставленные промежуточные фреймы можно редактировать по отдельности. Если вы выбрали одиночный фрейм, вы можете вставить промежуточные фреймы между выбранным и предыдущим фреймом, или между выбранным и последующим. Если выбраны два смежных фрейма, промежуточные фреймы добавляются между ними. Если выбрано более двух фреймов, существующие фреймы между первым и последним выбранным фреймом заменяются после выполнения команды Tween. Если выбрать первый и последний фрейм анимации, они обрабатываются как смежные, а промежуточные фреймы добавляются после последнего фрейма. Последний метод полезен, когда анимацию предполагается зациклить (проигрывать несколько раз). Помните, что к несмежным фреймам команда Tween неприменима.

13. Предохранение прозрачности и подготовка к оптимизации

Теперь оптимизируем изображение в GIF-формате с прозрачной основой и просмотрим готовую анимацию в web-браузере. Напоминаем, что анимации поддерживаются только форматом GIF. Щелкнем кнопку с двойной стрелкой в палитре оптимизации, чтобы развернуть палитру или выберите Show Options в меню палитры оптимизации. Установите следующие опции. File format - GIF. Color reduction algorithm - Perceptual. Colors number - 256. Поставьте галочку в окошке Transparency, чтобы сохранить прозрачность. Для опции Matte (подложка) в раскрывающемся меню выберите белый цвет (white). В меню палитры анимации выберите Select all frames (выбрать все фреймы). Кликните правой кнопкой мыши по одному из фреймов в палитре анимации, чтобы открыть контекстное меню Disposal method (метод исчезновения) и выберите Restore to background (восстановить до основы). В меню палитры анимации выберите Optimize animation (оптимизировать анимацию). В открывшемся диалоговом окне поставьте галочки в окошках Bounding Box (ограничивающая рамка) и Redundant Pixel Removal (удаление лишних пикселей) и кликните ОК. В окне изображения кликните закладку Optimized.

ImageReady оптимизирует изображение согласно выбранным установкам. В окне изображения кликните закладку 2-Up и сравните информацию для первоначальной и оптимизированной версий анимированного изображения. Выберитe File > Save Optimized As, название файла Logo1.gif и кликните Save. Чтобы просмотреть анимацию в браузере, кликните кнопку Preview In Default Browser в панели инструментов. Затем закройте браузер. Наконец, в ImageReady выберите File > Close, чтобы закрыть первоначальный файл, не сохраняя изменений. Работа над летающими буквами логотипа завершена.

14. Установка метода исчезновения фрейма

анимация слой фрейм изображение

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

Иконка Disposal method имеет два варианта - Do Not Dispose и Restore to Background . Если Disposal method установлен в режиме Automatic, иконка не открывается. Выбирайте опцию Automatic для автоопределения метода исчезновения текущего фрейма, сбрасывая текущий фрейм, если следующий фрейм содержит прозрачность слоя. Для большинства анимаций эта опция приводит к желаемому результату и поэтому принята по умолчанию. Выбирайте ее также когда используете опцию Redundant Pixel Removal, чтобы заставить ImageReady предохранять фреймы, содержащие прозрачность. Выбирайте опцию Do Not Dispose, чтобы не сбрасывать текущий фрейм, когда уже появился следующий фрейм. Текущий фрейм (и предшествующие) может проступать через прозрачные участки следующего фрейма. Для аккуратного просмотра анимации с использованием опции Do Not Dispose просматривайте анимацию в браузере. Используйте опцию Restore to Background для сброса текущего фрейма до появления следующего. Тогда текущий фрейм не будет виден через прозрачные участки следующего фрейма.

При оптимизации анимированного GIF-файла с использованием палитр adaptive, perceptual или selective, ImageReady генерирует палитру, основанную на всех фреймах анимации. Используется специальная техника dithering для согласования всех фреймов и предотвращения мерцания при проигрывании анимации. Кроме того, оптимизации подвергаются только те области фреймов, которые изменяются от фрейма к фрейму. Это значительно уменьшает размеры анимированного GIF-файла. Поэтому ImageRedy дольше оптимизирует анимированный GIF, чем стандартный GIF. Опция Bounding Box заставляет ImageReady обрезать каждый фрейм, предохраняя только область, изменившуюся по сравнению с предыдущим фреймом. Анимации, созданные с применением этой опции, меньше по размеру, но несовместимы с GIF-редакторами, которые эту опцию не поддерживают. Опция оптимизации Redundant Pixel Removal делает прозрачными все пиксели фрейма, которые не изменились по сравнению с предыдущим фреймом. Когда эта опция выбрана, нужно установить для Disposal Method опцию Automatic.

15. Использование продвинутых возможностей слоёв для создания анимаций

Под продвинутыми возможностями понимаются маски слоя, обтравочные контуры и группы вырезания. Сначала создадим обтравочный контур для создания иллюзии медленного наполнения буквы U соком в тексте логотипа. Выберем File > Open > Logo2.psd. В палитре слоёв спрячем слой Photo и оставим видимыми слои Text и Juice. Слой Juice содержит маску слоя, о чем говорит серая иконка справа от миниатюры слоя в палитре. Маска слоя имеет форму буквы U, не давая соку появляться только внутри буквы U. Сейчас сок заполняет до краёв букву U. Переместим слой Juice для создания второго фрейма, показывающего букву U без сока. В палитре анимации кликнем кнопку Duplicate current frame , чтобы создать второй фрейм. В палитре слоёв кликнем иконку связи , чтобы отключить связь между миниатюрами слоя и маски слоя. Теперь можно перемещать слой независимо от его маски. Выберем инструмент Move . В палитре слоёв щелкнем слева миниатюру слоя Juice, чтобы выбрать его.

«Ткните» инструментом Move в оранжевый цвет на картинке и переместите слой ниже закругления буквы U, чтобы спрятать оранжевый цвет. Теперь в палитре анимации поменяем местами фреймы 1 и 2. Поскольку оба фрейма созданы перемещением одного слоя, можно создать промежуточные фреймы автоматически с помощью команды Tween.

Выберем Tween в меню палитры анимации и применим следующие опции. Для Tween with выберем Next frame. Для Frames to add назначим 5. Для Layers выберем All layers. Для Parameters поставим галочку в окошке Position и уберем галочки в двух других окошках (opacity и effects). Кликнем ОК, чтобы закрыть диалоговое окно. В палитре анимации выберем фрейм 1. В палитре слоёв выберем слой Photo и сделаем его видимым. Кликнем кнопку Play , чтобы просмотреть анимацию. Кликнем кнопку Stop , чтобы закончить просмотр. Можно также выбрать File > Peview in, чтобы выбрать браузер и просмотреть анимацию в нём. Также можно щелкнуть кнопку Preview in default browser на панели инструментов. Закончив просмотр, вернитесь в ImageReady. Выберите File > Save optimized as > Logo2.gif и кликните кнопку Save. Работа над анимацией логотипа завершена. Закройте исходный файл, не сохраняя изменений - File > Close.

16. Использование векторных масок для создания анимаций

Создадим эффект встряхивания ягод внутри текста логотипа. Откройте файл File > Open > Logo3.psd. Убедитесь, что в палитре слоёв видны оба слоя Strawberries и Text. Чтобы ягоды появлялись только внутри очертаний текста логотипа, создадим векторную маску. В палитре слоёв выберем слой Strawberries. Удерживая Alt, поместим пойнтер мыши на сплошную линию, разделяющую два слоя в палитре слоёв, пока пойнтер не превратится в две пересекающиеся окружности и щелкнем по разделительной линии между слоями. Это же можно сделать с помощью команды Layer > Group with previous. Обратите внимание, что ягоды теперь маскируются текстом логотипа.

Миниатюра для слоя Strawberries «вдавлена», т.е. смещена и сопровождается стрелкой , указывающей, что слой сгруппирован с расположенным ниже. Теперь в палитре анимации кликнем кнопку Duplicate current frame (создать копию текущего фрейма). Для создания второго фрейма анимации переместим слой Strawberries. В палитре слоёв выберем слой Strawberries. Затем в панели инструментов выберем Move tool . В окне изображения переместим слой Strawberries слегка вправо. Это же можно сделать с помощью стрелок на клавиатуре. Проиграйте анимацию с помощью кнопки Play . Ягоды трясутся из стороны в сторону внутри контура надписи. Кликнем кнопку Stop , чтобы завершить просмотр. Выберем File > Save optimized as > Logo3.gif и щелкнем Save. ImageReady сохраняет анимацию как GIF-файл, используя текущие установки палитры оптимизации. Можете просмотреть анимацию в браузере, (как это сделать, рассказано выше). Затем вернитесь в ImageReady. Закроем исходный файл, не сохраняя изменений: File > Close.

17. На ваше усмотрение: создание оставшихся анимаций

Вы уже знаете всё, что нужно для создания оставшихся анимаций web-страницы JUS. Воспользуйтесь шестислойным файлом Fruit.psd для создания монтажной последовательности, в которой шесть изображений разных фруктов появляются и сменяют друг друга. Проще всего создать фреймы с помощью меню палитры анимации (команда Make frames from layers - создать фреймы из слоёв).Будет создано шесть базовых фреймов с иконками глаза напротив каждого набора слоёв. Можно сгладить переходы между фреймами, изменяя время задержки между фреймами - Frame time delay value - во всплывающем под фреймами меню. Также можно сделать переходы более плавными, вставив копии фреймов между существующими фреймами, уменьшая непрозрачность (opacity) и добавляя tween-фреймы.

Можно создать еще одну разновидность анимации, повторно копируя одно из изображений, а затем применив команду Edit > Transform > Numeric для масштабирования каждого нового изображения - скажем, уменьшая каждое из них на 20% по отношению к предыдущему.

Используйте файл Logo4.для отработки создания переходов между различными состояниями изображения. В этом файле вы заставите раствориться фотографию апельсиновой ветки (слой Photo) в рисунке этой же ветки (слой Illustration). Щелкните соответствующие окошки в палитре слоёв для создания стартового состояния. В котором оба слоя - Photo и Illustration - видимые. Создайте копию фрейма и спрячьте слой Photo, щёлкнув миниатюру глаза в палитре слоёв. Используйте команду Tween в меню палитры анимации, чтобы создать 4-фреймовый переход для всех слоёв (all layers) между выбранным фреймом и предыдущим фреймом (Previous frame). Используйте всплывающее меню Looping в палитре анимации для изменения числа циклов проигрывания с постоянного (Forever) на однократное (Once). Затем сохраните файл в формате GIF командой File > Save optimized as.

Размещено на Allbest.ru