Приемы создания анимации в Image Ready

В первый момент главное окно Image Ready, можно легко перепутать с Photoshop, настолько похожи они внешне: та же панель инструментов, знакомые палитры. Как мы уже отмечали, такое сходство не случайно. Более внимательный взгляд отметит и множество особенностей. Во-первых, это несколько особых инструментов на палитре инструментов (рис. 10.3).

§ Инструмент Rounded Rectangle Marquee. Он предназначен для создания выделенных областей в форме прямоугольника со скругленными углами. Палитра свойств Options для этого инструмента содержит поле Radius, в котором задается радиус округления в пикселах.

§ Инструменты Rectangle, Rounded Rectangle и Ellipse сразу рисуют прямоугольник, прямоугольник со скругленными углами и эллипс, соответственно. Выделенная область при этом не создается, а фигура сразу оказывается залита текущим основным цветом.

§ Инструмент Slice предназначен для разрезания изображений на прямоугольные фрагменты, a Select Slice - для выделения таких фрагментов.

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

Рис. 10.3. Палитра инструментов ImageReady. Обозначены только инструменты, отсутствующие в Photoshop

Рис. 10.4. Режимы отображения фрагментов Hide Slices (a), Show Slices (б)

Примечание

Если выбрать инструмент Slice или Select Slice режим показа фрагментов включается автоматически.

Редактор ImageReady имеет и несколько особых палитр:

§ Optimize. Палитра содержит параметры оптимизации изображений для экспорта в выбранный формат. Если вы внимательно прочитали предыдущую главу, то сразу заметите ее сходство с панелью Settings модуля Save For Web в Photoshop Она содержит все те же самые настройки (рис.10.5).

Рис. 10.5. Палитра Optimize

Вид оптимизированного изображения отображается прямо в окне каждого документа Image Ready и обязательно имеет четыре вкладки, аналогичных вкладкам модуля Save For Web (рис. 10.6). В строке состояния окна документа указываются текущие параметры оптимизации или иная информация, которая выбирается в списке, открывающемся щелчком на треугольной стрелке. В этом же списке задается предполагаемая скорость модема, использующаяся для оценки времени загрузки изображения в браузере пользователя.

Рис. 10.6. Показ оптимизированного изображения в окне документа Image Ready

§ Color Table. Эта палитра Image Ready показывает текущую палитру изображения, если задан режим оптимизации в индексированный формат (GIF или PNG-8). Она также имеет свой аналог в модуле Save For Web Photoshop и работа с ней тоже аналогична.

§ Layers. Image Ready поддерживает точечные и текстовые слои, а также эффекты для слоев. Управление слоями так же, как и в Photoshop. осуществляется с помощью специальной палитры. Единственное ее отличие от палитры Layers в Photoshop заключается в том, что в ней отображаются и все эффекты, примененные к слою (рис 10.7). Кроме того, и нижнем ряду кнопок добавились стрелки перехода между слоями и добавления эффектов. Поскольку при создании анимации ее фазы размешаются на отдельных слоях, кнопки перехода к предыдущему или следующему слою используются для перемотки кадров. Кнопка добавления эффектов открывает список всех доступных эффектов для слоев Выбор любого из них создает на текущем слое этот эффект. Настройка его параметров осуществляется с помощью особой палитры Layer Options/Effects.

§ Layer Options/Effects. Эта палитра используется совместно с палитрой Layers и позволяет задавать параметры слоя и ассоциированных с ним эффектов. Если в палитре Layers выделена строка эффекта, то в палитре Layer Options/Effects оказываются настройки этого эффекта. Если же выделен слой, то в этой палитре вы найдете параметры слоя (рис. 10 8).

Они используются для создания карт ссылок.

Рис. 10.7. Отображение эффектов в палитре Layers программы Image Ready

Рис. 10.8. Палитра Layer Options/Effects в режимах LayerOptions (а) и Effects (б)

§ Styles. Набор эффектов, ассоциированный с текущим слоем, можно сохранить в специальной палитре Styles. Чтобы воспроизвести сохраненный набор эффектов еще раз или применить его к другому слою, достаточно просто сделать двойной щелчок мышью на его пиктограмме в палитре. Сразу после установки программы в палитре находятся два десятка готовых стилей, созданных разработчиками (рис. 10.9).

Рис. 10.9. Палитра Styles с предопределенными стилями

§ Type. В Photoshop параметры текста, да и сам тест, вводятся в специальном диалоговом окне Type Tool. В Image Ready ввод и редактирование текста реализованы гораздо удобнее. Текст вводится прямо в окне документа, а для настройки его параметров используется палитра Type. Эта палитра очень знакома пользователям Adobe Illustrator (рис. 10.10). В ней вы найдете список шрифтов, их начертаний и кегля, управление выключкой абзацев, интерлиньяжем, кернингом, шириной символов, положением базовой линии. Особо отметим возможность выбора из четырех степеней сглаживания (anti-aliasing).

Рис. 10.10. Палитра Type в ImageReady

§ Animation. Палитра содержит перечень всех кадров анимации и управляет их очередностью и просмотром.

§ Slice- Палитра предназначена для установки параметров отдельных фрагментов, на которые изображение разрезано с помощью инструмента Slice или команды Divide Slice из меню Slices.

§ Rollover. Палитра хранит варианты изображения, демонстрируемого в браузере в зависимости от того, находится ли на нем курсор и нажата ли кнопка мыши.

Палитры Colors, History, Info, Options и Actions почти полностью идентичны одноименным палитрам Photoshop. Правда, палитра History в Image Ready несколько упрощена. В ней отсутствует возможность создания снимков (snapshots) и назначения исходного состояния для кисти HistoryBrush, поскольку Image Ready не имеет такого инструмента.

На этом мы завершим краткое рассмотрение интерфейса Image Ready и его отличий от Photoshop, и перейдем к примерам решения практических задач.

Ты наверняка видел анимационные картинки, например там появлялся и исчезал текст, крутилась башка, бегал мужик, кролик лишался головы и т.д. Все это gif анимация.

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

Ну ближе к делу …

1. Открой Photoshop и создай новый проект, размеры у меня были 600х200 и напиши какой-нибудь текст

2. Это будет конечное (четкое) изображение, а нам нужно сделать промежуточные и начальное.
Сначала нажми на наш текстовый слой правой кнопкой и выбери Rasterize Layer после чего в этом же контекстном меню нажми Duplicate Layer.
Первый слой поставь в invisible, а второй выдели. Жмем Filter-Blur-Motion Blur и ставим значение Angle в ноль, а Distance в 400

Теперь нам нужно создать промежуточные стадии с значением Distance равным: 350, 300, 250, 200, 150, 100, 50, 25. То есть ещё восемь слоев. Так и делаем. Выделяй первый (исходный) слой с текстом и делай восемь копий с одноименными именами:

Выдели первый слой и сделай Motion Blur с значением Distance равным 25, для второго слоя 50, для третьего 100 и т.д. до восьмого со значением 350.

3. В итоге у нас получается 10 слоев. Жми Ctrl+Shift+M, этим самым мы переходим из Photoshop-a в Image Ready с тем проектом над которым работали.

4. Тут собственно и начинается создание анимации.
Выделяем слой final, ставим его в visible, а все остальные в invisible, и жмем кнопку Duplicate current frame на панели Animation, затем ставим слой 8 в visible а все остальные в invisible и жмем туже кнопку. Так проделываем со всеми слоями включая их по очереди и выключая остальные.

Ты можешь уже посмотреть на результат, нажав кнопку Play/Stop animation на панели Animation, но перед завершением нужно добавить пару штрихов, во-первых сделать задержку кадров. Для этого выдели все кадры и внизу одного из них измени значение 0 sec. на 0,05 sec.
И во-вторых подобная картинка не всегда должна повторять анимацию, давай ограничим количество на одном. Измени значение Forever на Once (левый нижний угол)

5. В окне Optimize в settings поставь Gif 128 Dithered (или любой другой Gif … - это влияет на качество) и нажми Ctrl+Shift+Alt+S
Готово.

p.s. анимация конечно не очень, но это самое простое, что я придумал, кроме разве что появление точек и ползающей линии. Вспомни возможности Photoshop-а и включи фантазию!
Можно делать анимацию и на 100 и на 200 … кадров

Фирма Adobe включила в Photoshop с версии 5.5 программу ImageReady, которая позволяет создавать анимационные изображения с помощью этого графического пакета. Данный урок рассчитан на тех, кто имеет практические навыки работы со слоями и инструментами выделения в программе PhotoShop.

Цели урока

• Обучающая: в рамках данного урока учащемуся необходимо освоить приемы создания анимации из заранее подготовленных файлов с фазами движения, создание промежуточных кадров анимации, сохранение GIF-файла для Web-страницы.
• Развивающая: умение оперировать новой терминологией, умение сравнивать и обобщать.
• Воспитательная: воспитание информационной культуры, положительное отношение к знаниям.

Тип урока: урок изучения нового материала.

Вид урока: практическая работа.

Методы: объяснительно-иллюстративный, репродуктивный.

Используемые материалы:

• класс, оборудованный ПК;
• PhotoShop не ниже версии 5.5;
• проектор;
• файлы изображений.

Ход урока

Проще всего в программе ImageReady, реализуется анимация из заранее подготовленных файлов с фазами движения.

Упражнение 1. Полет бабочки

Запустите Photoshop и создайте новый файл размером 100 x 100 пикселей. Залейте фон зеленым цветом. Вставьте в этот файл, на отдельный слой изображение бабочки (рис.1).

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

Продублируйте слой 1 (рис.4).

Сожмем изображение бабочки по горизонтали. Edit (Редактирование) > Free Transform (Произвольная трансформация). Изменим размер изображения по ширине, заменив величину W=100% на 80% (рис.5)

Отключить (рис.6) (показывает видимость слоя) в слое 1, для того чтобы увидеть, что получилось в слое 2 (рис.7).

Повторите шаги для 3-х предыдущих действий, выполнив произвольную трансформацию по ширине на 60%, 40% и 20% используя направляющую, как ось симметрии. Получим 6 слоев (рис.8).

Кликните на кнопке Jump to ImageReady (перейти в ImageReady) (рис.9).

Откроется приложение ImageReady и файл загрузится автоматически.

Теперь откройте или найдите на экране панель анимации. Если она не видна изначально, её можно открыть с помощью меню Window (Окно) > Show Animation (Показать панель анимации) (рис.10).

На панели анимации есть треугольная кнопка справа вверху. В меню команд палитры Animation выбираем команду Make Frames From Layers, что позволяет из каждого отдельного слоя изображения создать свой кадр (рис.11).

Теперь у нас есть шесть кадров (рис.12).

Теперь можно нажать кнопку play (рис.13) и проиграть анимацию (рис.14) .

Выполняя команду File (Файл) – Save (Сохранить), сохраняем файл в формате Photoshop для продолжения работы со слоями изображения. Если работа завершена и не требуется сохранения слоев, то по команде File (Файл) - Save Optimized (Сохранить оптимизированное как…) сохраняем GIF-файл для Web-страницы, при этом используются параметры оптимизации по умолчанию. Оценить результат оптимизации можно с помощью вида 2-Up, который показывает исходное и оптимизированное изображения.

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

Упражнение 2. Разлетающийся текст

Запустите Photoshop и создайте новый файл размером 300 X 150 пикселей. Залейте фон черным цветом. В нижней части панели слоев кликните на иконке New Layer (Новый слой) (рис.15).

Выберите цвет для текста и возьмите инструмент Type Tool (Набор текста) (рис.16).

Наберите первую букву. Теперь повторите этот шаг так, чтобы каждая буква слова оказалась на отдельном слое (рис.17).

Кликните на кнопке Jump to ImageReady (перейти в ImageReady) (рис.18).

Откроется приложение ImageReady и файл загрузится автоматически. Теперь откройте или найдите на экране панель анимации. Если она не видна изначально, её можно открыть с помощью меню Window (Окно) > Show Animation (Показать Animation).

В нижней части этой панели, кликните на кнопке New Frame (Новый кадр), чтобы сделать копию текущего кадра (рис.19).

Получим два одинаковых кадра на панели анимации (рис.20).

На панели слоев кликните на слое, с буквой Ш (рис.21).

Выберите инструмент Перемещения и используя стрелки на клавиатуре переместите букву так, чтобы она была левее (или правее, выше, ниже) видимого изображения (рис.22) , (рис.23).

Повторите шаги для остальных букв. В палитре анимации, (первый кадр должен быть просто черным) поменяйте кадры местами, для этого надо перенести первый кадр на второй кадр. 2-й кадр теперь черный (рис.24).

Кликните на кнопке Tween (рис.25) (генерация промежуточных кадров), которая расположена в нижней части панели анимации. Откроется окно параметров. Введите следующие значения:

Tween With: Proveons Frame

Frames to: 5

Layers: All Layers

Parametrs: все галочки

Панель анимации теперь должна содержать 7 кадров (6 с текстом +1 черный) (рис.26).

Установите небольшую паузу (2 секунды) для первого кадра, чтобы текст можно было прочитать (рис.27).

Теперь можно нажать кнопку play и проиграть анимацию (рис.28).

Упражнение 3. Морфинг

Морфинг - это процесс, при котором один объект плавно меняется (претекает) в другой.

Загрузите ImageReady. С помощью меню File (файл) > New (новый) создайте новый файл с нужными размерами и вставьте в этот файл, на отдельный слой изображение лягушки (рис.29).

На другой слой вставьте изображение замка, которое будет постепенно появляться (рис.30).

Сейчас панель слоев выглядит так (рис.31).

Удалите первый слой в корзину, панель слоев выглядит так (рис.32).

Теперь откройте или найдите на экране панель анимации. Если она не видна изначально, её можно открыть с помощью меню Window (окно) > Show Animation (показать панель анимации) (рис.33).

На панели анимации есть треугольная кнопка справа вверху. В меню команд палитры Animation выбираем команду Make Frames From Layers, что позволяет из каждого отдельного слоя изображения создать свой кадр (рис.34).

Теперь у нас есть два кадра (рис.35).

На панели анимации есть треугольная кнопка справа вверху. Кликните на этой кнопке и выберите в меню пункт Tween... или кликните на кнопке (генерация промежуточных кадров). Откроется окно параметров (рис.36).

Нажмите OK, и программа сама добавит новые кадры (рис.37).

Теперь можно нажать кнопку play и проиграть анимацию (рис.38).

Литература

1. Панкратова Т. Photoshop 6. Учебный курс - СПб.: Издательство "Питер", 2001.
2. Эффективная работа с Photoshop 5.5 - СПб.: Издательство "Питер", 2000.
3. Бурлаков М. Photoshop 6, ImageReady 3. Справочник. - СПб. Издательство "Питер", 2001.
4. Стразницкас М. Photoshop 5.5 для подготовки Web-графики. Учебный курс - СПб.: Издательство "Питер", 2000. - 480 с.: илл.