Сегодня вдруг совершенно случайно обнаружила, что в фотошопе отсутствует кнопочка для перегона многослойного изображения в Image Ready для дальнейшего создания анимационной картинки. Нет кнопочки и все.... Я опечалилась... Денис полез в интернет изучать проблему и искать пути решения. Через некоторое время он меня осчастливил заявлением, что Image Ready канул в небытие, и что пользователям Photoshop CS3 предлагается использовать другой адобовский продукт, позволяющий создавать анимационные гифки - Adobe Fireworks CS3. Нашли, установили, стали разбираться. В принципе, ничего особо сложного, все можно освоить интуитивно. Тем не менее, для нуждающихся, но ленящихся, пишу основные шаги по созданию анимационной картинки в этих редакторах.

Однако, начну я с самого начала. А в начале было слово... И слово это было RAW-файл, а точнее ажно 13 штук. Из них-то я и вознамерилась сделать динамичную картинку. Если будете делать из JPG, смело переходите к шагу второму.

Шаг первый

Я открыла все 13 файлов RAW-конвертером. Вот они, родимые, все слева в столбик.

1. Выделяем все файлы
2. Синхронизируем их, чтобы все настройки, примененные к первому файлу, автоматически передались остальным
3. Не мудрствуя лукаво в диалоговом окне жмем "Ок"
4. Настраиваем изображение, добиваясь желаемого эффекта. Я добавила контраста и насыщенности фотографиям.
5. Жмем "Open Images"

Шаг второй

Открывается фотошоп, загружаются мои 13 фотографий. После того, как все они прогрузятся, начинаем последовательно перетаскивать изображение со 2ой, 3ей и далее по списку фотографий в самый первый файл.

Теперь неплохо бы их выровнять относительно друг друга...

Сделать это можно двумя способами, все зависит от желаемого эффекта.

Вариант первый: фон остается на месте, объект (я) движется по картинке справа налево.

Делаем все слои, кроме первого и второго, невидимыми и ко второму слою (Layer1) применяем свойство Difference. Двигая этот слой, нужно добиться того, чтобы фон стал полностью черным - это значит, что картинка полностью совмещена. После того, как результат достигнут, изменяем свойства слоя на Normal. Делаем видимым следующий слой и повторяем описанные действия. В итоге у меня получаем 13 слоев, выровненных по линии леса.

Вариант первый: фон двигается, объект (я) скачет на одном месте.

Создаем над всеми слоями новый прозрачный слой. Делаем все слои, кроме первого и нового прозрачного, невидимыми. Теперь следует решить, какие точки на картинке у нас будут "якорями" - картинка не должна "дрожать". Второй момент - объект должен двигаться, но при этом оставаться на месте. Таким образом, нам нужно нарисовать 2 прямые линии: линию горизонта (у меня это граница цветов и леса) и вертикальную линию, вдоль которой будет перемещаться выбранная на объекте "якорная" точка (я решила, что буду выравнивать изображение по груди - контрастная и четкая форма упрощает задачу).

В прозрачном слое с помощью пера (Pen Tool)  я нарисовала, не особо стараясь, две прямые линии, и сделала обводку (Stroke Path), а потом удалила прямые (Delete Path). Теперь, начиная снизу списка, делаем по одному видимыми слои, и выравниваем их по линиям. После этого отключаем видимость или вообще удаляем слой с нарисованными линиями - он больше не нужен. Я просто отключила видимость - а вдруг пригодится?

При просмотре получившихся слоев я заметила, что небо практически на всех снимках отличается по яркости друг от друга. Это будет очень заметно на анимированной картинке. Чтобы избежать такого казуса, я решила нарисовать свое собственное небо.

1. В каждом слое с помощью "Волшебной палочки" (Magic Wand Tool) выделяем небо и удаляем (жмем на клавиатуре Delete) эту часть картинки.
2. С нижним слоем (Background) поступаем следующим образом: дважды кликаем по замочку, тем самым разблокируя слой. Небо из него пока не удаляем (нам нужны цвета).
3. Создаем новый прозрачный слой и перетаскиваем его в самый низ, чтобы он стал ниже бэкграунда, превратившегося в Layer0.
4. С помощью пипетки (Eyedropper Tool) берем цвет из самой верхней точки неба, затем меняем верхний цвет на панели и берем цвет из самой нижней (светлой) точки неба.
5. 
   
6. Заливаем прозрачный слой по градиенту (Gradient Tool) таким образом, чтобы переход цвета соответствовал натуральном небу.
7. Удаляем небо из слоя Layer0.

Теперь у нас во всех слоях будет одно и то же небо. Обрезаем изображение как задумывалось (Crop Tool) и уменьшаем до удобоваримого размера (Image Size). Сохраняем файл с расширением .psd, чтобы сохранить все слои.

Шаг третий

Запускаем Adobe Fireworks CS3, открываем сохраненный файл со слоями, видим вот такую картину...

В закладке "Фреймы" (Frames) пока только один кадр - исходный, но это ненадолго... Идем в закладку со слоями (Layers)

Вот они, все слои, которые мы насобирали, в папочку сложены. Ставим "глаз" - видимость на нужные слои - слой с небом и первый слой с движением (остальные невидимы). Идем снова в закладку с фреймами. Зажав первый фрейм левой кнопкой мыши, тащим его на иконку нового слоя, тем самым дублируя его.

Теперь у нас 2 одинаковых фрейма. Выделяем второй фрейм и идем в "Слои". Там делаем видимым следующий слой движения, а предыдущий - невидимым. Можно, конечно, сразу наклонировать фреймов, а потом в каждом разбираться, какой следующий слой должен быть видимым, но есть риск запутаться. А если делать последовательно, всегда видно, какой слой был открыт в предыдущем фрейме. После того, как будет открыт последний двигающийся слой, можно считать наше анимированное изображение состоявшимся.

Вот так выглядит окно программы, когда файл готов - справа 14 фреймов, а цифрами отмечены наиболее использовавшиеся мной инструменты

1. В закладке File открываем Image Preview (об этом ниже чуть подробнее)
2. Crop - можно сделать окончательную обрезку файла
3. Текст - поставить, например, копирайт. Только не забудьте его скопипастить во все фреймы, иначе ваш копирайт подмигнет вам лишь единожды
4. Просмотр (предварительный, сырой) получившейся динамики

Как и обещала, чуть подробнее о Image Preview

1. Из выпадающего списка выбираем Animated GIF
2. В закладке Animation выделяем все фреймы и в окошечке выставляем скорость смены кадров (в том случае, если все кадры должны меняться с одинаковой скоростью). Если скорость нужна разная - выставляем ее к каждому фрейму отдельно. Скорость измеряется **/100 секунды. Соответственно, если нужна смена фреймов со скоростью 0,5 секунды, нужно выставить число 50 (получится 50/100 сек.)
3. Выбираем повторяемость действий - постоянная смена кадров или какое-то количество раз.
4. Смотрим, что получилось. Если все устраивает - жмем "Ок"

Шаг четвертый

Сохраняем получившееся изображение как Animated GIF.

У меня получилась смешная анимационная фотография и аватарка:) На первой картинке я небо не трогала, поэтому оно живет немного отдельной жизнью:)

P.S. Описывать все действия было значительно дольше, чем выполнять описываемое:) Так что дерзайте!