Анимация для Интернет

Теплопрофи.



Глава 3. Adobe ImageReady


    Глава 3. Adobe ImageReady
    Глава 3. Adobe ImageReady Adobe ImageReady Интерфейс Adobe ImageReady 3.0. Палитра Анимация Просмотр и сохранение анимации Создание интерактивных компонентов Web-страниц Создание графических карт...
    Adobe ImageReady
    Adobe ImageReady От разработки инструментов создания анимации не осталась в стороне и фирма Adobe, включившая в Photoshop 6 программу ImageReady. С помощью этой программы проще всего реализуется а...
    Интерфейс Adobe ImageReady 3.0
    Интерфейс Adobe ImageReady 3.0 Хотя программа ImageReady может быть открыта независимо от Photoshop, ее окно включает стандартный набор элементов, присущий этому растровому редактору....
    Рис. 3.1. Окно программы Adobe ImageReady 3.0
    Рис. 3.1. Окно программы Adobe ImageReady 3.0 Это не только строки заголовка и меню, а также целый комплект инструментов и палитр для создания и редактирования различных объектов, в том числе слое...
    Рис. 3.2. Окно задания параметров нового документа
    Рис. 3.2. Окно задания параметров нового документа Находящиеся на экране палитры позволяют управлять изображением и изменять его. Они могут быть отображены или скрыты во время работы, но по умолча...
    Рис. 3.3. Окно документа с раскрытым меню
    Рис. 3.3. Окно документа с раскрытым меню Можно держать на экране одновременно открытыми несколько окон документов, в том числе, чтобы видеть несколько версий одного файла. Раскрывающееся меню окн...
    Рис. 3.4. Окно File to Place для выбора файла изображения
    Рис. 3.4. Окно File to Place для выбора файла изображения В первом диалоговом окне File to Place (Размещаемый файл) выбирают файл с изображением, а после щелчка на кнопке Open (Открыть) открываетс...
    Рис. 3.5. Окно Place для указания положения размещаемого изображения
    Рис. 3.5. Окно Place для указания положения размещаемого изображения...
    Рис. 3.6. Окно задания параметров растрирования
    Рис. 3.6. Окно задания параметров растрирования Команда этого подменю Folder as Frames (Папки как кадры) позволяет импортировать все файлы изображений, хранящиеся в выбранной папке как последовате...
    Рис. 3.7. Палитра Layers
    Рис. 3.7. Палитра Layers На рис. 3.7 цифрами обозначены следующие элементы управления палитры Layers (Слои): 1. Выделенный слой, доступный для редактирования (Selected layer). 2. Указатель связанн...
    Палитра Анимация
    Палитра Анимация Adobe ImageReady — это мощный и удобный инструмент для создания GIF-анимации. Каждая анимация представляется рядом кадров, для управления которыми предназначены как палитра Animat...
    Рис. 3.8. Палитра Animation
    Рис. 3.8. Палитра Animation На рис. 3.8 цифрами обозначены следующие элементы управления палитры Animation (Анимация): 1. Раскрывающееся меню задержки со значениями (Delay menu). 2. Раскрывающийся...
    Рис. 3.9. Выбор способа вставки скопированных кадров
    Рис. 3.9. Выбор способа вставки скопированных кадров В ImageReady каждый слой рассматривается как отдельный элемент анимации. Используя команды и параметры палитры Layers (Слои), можно задавать ну...
    Рис. 3.10. Выбор параметров при расчете кадров
    Рис. 3.10. Выбор параметров при расчете кадров Перед расчетом промежуточных кадров следует выделить один или несколько последовательных кадров. Если выделен один кадр, то рассчитанные кадры вставл...
    Рис. 3.11. Различия методов смены кадров
    Рис. 3.11. Различия методов смены кадров На рис. 3.11 представлены результаты воспроизведения анимации с прозрачным фоном для параметров смены кадра Restore to Background (первый ряд) и Do Not Dis...
    Просмотр и сохранение анимации
    Просмотр и сохранение анимации Чтобы выполнить предварительный просмотр анимации в окне документа ImageReady, достаточно щелкнуть на кнопке Play (Воспроизвести) палитры Animation (Анимация)....
    Рис. 3.12. Просмотр анимации в обозревателе
    Рис. 3.12. Просмотр анимации в обозревателе Независимо от заданного числа повторов анимации она в этом случае воспроизводится в бесконечном цикле. Чтобы завершить просмотр анимации, следует щелкну...
    Рис. 3.13. Установки параметров оптимизации анимации
    Рис. 3.13. Установки параметров оптимизации анимации Оптимизация необходима для уменьшения размера файла формата GIF, который является единственным форматом в ImageReady, позволяющим демонстрирова...
    Рис. 3.14. Окно команды Optimize Animation
    Рис. 3.14. Окно команды Optimize Animation Созданную анимацию можно сохранить в формате GIF либо как фильм QuickTime. Другие форматы файлов, такие как JPEG или PNG, сохранят только первый кадр изо...
    Создание интерактивных компонентов Web-страниц
    Создание интерактивных компонентов Web-страниц При создании Web-страниц с помощью программ Adobe Photoshop или Adobe ImageReady следует принимать во внимание конкретные возможности каждого из этих...
    Рис. 3.15. Палитра Rollover с разными состояниями объекта
    Рис. 3.15. Палитра Rollover с разными состояниями объекта Так как палитры Animation и Rollover совмещены в одном окне, то легко можно создать анимацию, связанную с определенным состоянием. Предвар...
    Рис. 3.16. Меню палитры Rollover
    Рис. 3.16. Меню палитры Rollover Чтобы скопировать состояние интерактивного объекта (rollover), следует выделить требуемое состояние и выполнить команду Copy Rollover State (Копировать состояние)...
    Создание графических карт для Web-страниц
    Создание графических карт для Web-страниц Графическая карта (image map) позволяет связать отдельные области изображения гиперссылками, содержащими адреса URL, с другими Web-страницами, с аудиофайл...
    Рис. 3.17. Выделение области Image Map
    Рис. 3.17. Выделение области Image Map Чтобы указать новую область с помощью инструмента Image map tool (Графическая карта), выбирают нужную форму инструмента (rectangle, circle, polygon). Затем в...
    Рис. 3.18. Создание области Image Map на основе слоя
    Рис. 3.18. Создание области Image Map на основе слоя Чтобы создать область изображения на основе существующего слоя, его нужно выделить на палитре Layers (Слои). Если слоев несколько, то их предва...
    Рис. 3.19. Задание параметров в окне Output Settings
    Рис. 3.19. Задание параметров в окне Output Settings...
    Практикум
    Практикум В упражнениях рассмотрено создание анимации из набора готовых изображений, многослойного файла Photoshop, расчет промежуточных кадров для заданных ключевых изображений, а также создание...
    Рис. 3.20. Набор фреймов в окне Adobe ImageReady
    Рис. 3.20. Набор фреймов в окне Adobe ImageReady Упражнение 3.1. Создание покадровой анимации из группы файлов 1. Запускаем ImageReady. По команде File Import Folder as Frames (Файл Импорт Папки к...
    Рис. 3.21. Слои, преобразованные в кадры в ImageReady
    Рис. 3.21. Слои, преобразованные в кадры в ImageReady Упражнение 3.4. Создание анимированной Web-страницы 1. Запускаем ImageReady. По команде File New (Файл Новый) создаем изображение размером 640...
    Рис. 3.22. Анимированная страница в окне ImageReady
    Рис. 3.22. Анимированная страница в окне ImageReady...








Начало