Содержание
Введение. 2
1. Особенности создания анимированных изображений впрограмме Adobe ImageReady 4
1.1Интерфейс Adobe ImageReady. 4
1.2Палитра Анимация. 9
1.3Просмотр и сохранение анимации. 17
2. Разработка анимированного изображения в программе AdobeImageReady 21
2.1Создание интерактивных компонентов Web – страниц. 21
2.2Создание анимированного баннера для Интернет – портала. 21
Заключение. 30
Список использованной литературы… 31
/>/>/>/>/>/>/>/>/>/>/>/>/>/>/>/>/>/>/>Введение
В своейработе я хочу рассмотреть создание анимированных изображений в программе Adobe ImageReady. На сегодняшний деньбольшое количество фирм выставляют на продажу разработанные ими программы,стараясь составить конкуренцию лидерам продаж.
От разработкиинструментов создания анимации не осталась в стороне и фирма Adobe, включившаяв Photoshop программу ImageReady.
Актуальностьвыбранной темы: с помощью этой программы проще всего реализуется анимация иззаранее подготовленных файлов рисунков, содержащих фазы движения, однако в нейпредусмотрена и возможность автоматического расчета промежуточных кадров.
Предварительносозданный в Adobe Photoshop файл рисунка, содержащий в изображении несколькослоев, позволяет быстро получить анимацию, использующую эти слои. Для этого вPhotoshop предназначена специальная кнопка (Перейти) палитры инструментов,которая запускает приложение ImageReady и загружает в него файл, открытый вданный момент в растровом редакторе Photoshop.
АнимацииImageReady сохраняются в формате GIF и могут воспроизводиться заданное числораз, а также повторяться в цикле. Однако они не допускают присоединенияаудиофайлов для звукового сопровождения.
Слоиобеспечивают также удобный способ композиционного построения изображения изразличных графических и текстовых элементов, позволяя выполнять изменениякаждого из них без воздействия на остальные элементы. Разделение элементовизображения по слоям также дает возможность применять к ним различные фильтры,получая самые разнообразные эффекты. Концепция слоев важна не только длясоздания изображений в Photoshop — с появлением каскадных таблиц стилей,Web-дизайнеры могут разрабатывать современные Web-страницы, аналогичным образомрасполагая по слоям входящие в них текст и графику.
Предметомисследования является программа Adobe ImageReady.
Объектисследования – разработка и создание анимированного изображения при помощиданного программного продукта.
Цельданной работы – рассмотреть основные возможности создания анимированныхизображений при помощи программы Adobe ImageReady.
Длядостижения поставленной цели придется решить ряд задач, такие как:
· Изучиткраткие сведения о программе;
· Рассмотретьвозможности программы;
· Проанализироватьинтерфейс программы;
· Рассмотретьпалитру Анимация;
· Рассмотретьработу по созданию графических приложений для Web;
· Напрактическом примере сделать информационный баннер для Интернет – портала ит.д.
Работасостоит из введения, двух глав (теоретической и практической), заключения исписка использованной литературы.
/>1. Особенности созданияанимированных изображений в программе Adobe ImageReady1.1 ИнтерфейсAdobe ImageReady
Хотяпрограмма ImageReady может быть открыта независимо от Photoshop, ее окновключает стандартный набор элементов, присущий этому растровому редактору.
Это не толькостроки заголовка и меню, а также целый комплект инструментов и палитр длясоздания и редактирования различных объектов, в том числе слоев и масок. Ккомандам меню могут быть добавлены новые команды и фильтры, разработанныетретьими фирмами и представленные в виде дополнительных модулей. Палитраинструментов позволяет создавать, редактировать и просматривать изображение, атакже выделять его области. Некоторые инструменты рисования имеютассоциированные палитры, например такие, как (Кисти) и (Параметры), позволяющиевыбирать для них различные значения управляющих параметров.
Рассмотримрисунок 1, находящиеся на экране палитры позволяют управлять изображением иизменять его. Они могут быть отображены или скрыты во время работы, но поумолчанию располагаются группой в правой части окна приложения. Чтобы вывестина экран отсутствующую палитру, следует выполнить соответствующую ей командуменю (Окно>Показать). Она открывает окно одной из групп палитр, отображая напервом плане вкладку с выбранной палитрой. При желании можно объединитьнесколько палитр в одну, перетащив соответствующую вкладку в окно другойпалитры. Если палитра имеет ассоциированное меню команд, то для его открытияслужит специальная круглая кнопка со стрелкой внутри. Скрыть группу палитрможно щелчком на кнопке закрытия в правом верхнем углу ее строки заголовка. Этастрока используется также для перемещения палитры по экрану.
По команде(Файл>Новый) открывается окно (Новый документ) для выбора параметровсоздаваемой в ImageReady анимации.
В этом окнезадают размер кадра будущей анимации в пикселях, ее название, а также выбираюттип первого слоя, служащего фоном: (белый), (цветной фон), (прозрачный). Щелчокна кнопке ОК открывает окно документа с заданными свойствами.
Окнодокумента ImageReady позволяет не только редактировать изображение текущегокадра анимации, но и выполнять ее просмотр. Благодаря наличию четырех вкладоконо позволяет легко переключаться между оригинальным изображением и его оптимизированнойверсией. Кроме того, оно имеет представление 2-Up, позволяющее расположить этиверсии рядом, и представление 4-Up, показывающее одновременно три вариантаоптимизации изображения для размещения на Web-странице с заданием для нихиндивидуальных параметров.
Можно держатьна экране одновременно открытыми несколько окон документов, в том числе, чтобывидеть несколько версий одного файла.
Раскрывающеесяменю окна документа содержит команды, информирующие о свойствах оригинального иоптимизированного изображений. Щелчок на стрелке, расположенной в нижней строкеокна, открывает список следующих команд:
Размер файлаоригинала/оптимизированного изображения — первое значение представляет размероригинального файла. Если была выполнена оптимизация, то второе значениеуказывает размер оптимизированного файла и его формат в соответствии спараметрами Optimize palette;
OptimizedInformation (Результаты оптимизации) — показывает формат, размер, количествоцветов и процент имитации оптимизированного изображения;
Размеризображения — показывает размер в пикселях;
Водяной знак— позволяет увидеть цифровую подпись рисунка Digimarc, если она имеется;
Числоотмен/повторов — показывает число возможных отмен (повторений) действий сизображением;
Размероригинала в байтах — показывает размер оригинального изображения в байтах;
Размероптимизированного изображения в байтах — показывает размер оптимизированногоизображения в байтах;
Экономия приоптимизации — показывает, на сколько уменьшается размер оптимизированного изображения;
Размер ивремя загрузки для скоростей 9.6 Kbps / 14.4 Kbps / 28.8 Kbps / 56.6 Kbps / 128Kbps / 256 Kbps — показывает размер оптимизированного файла и предполагаемоевремя загрузки при соответствующей скорости.
Придостаточной ширине окна в его нижней строке становится доступным второеаналогичное раскрывающееся меню, содержащее такой же набор команд и позволяющееотобразить дополнительно одно из перечисленных свойств. Adobe ImageReady можетоткрывать и импортировать файлы следующих форматов: PSD, AI, BMP, EPS,FlashPix, FLIC, FLI, GIF, JPEG, PCX, PDF, Pixar, PNG, MOV, Targa и TIFF. ФайлыAI, PDF и EPS при этом растрируются, то есть векторное описание изображениястановится точечным.
Чтобы открытьфайл, выполняют команду (Файл > Открыть), выбирают папку, в которой оннаходится, выделяют нужный файл и щелкают на кнопке (Открыть). Если файлоткрывался в предыдущем сеансе работы с программой, то его имя можно выбрать изсписка подменю команды (Файл > Недавно открывавшиеся). Каждый выделенный файлоткрывается в отдельном окне документа.
Еслиизображение, хранящееся в файле, нужно поместить в уже открытый документ, товыполняют команду (Файл>Поместить), которая позволяет указать точное месторазмещения изображения в кадре.
В первомдиалоговом окне (Размещаемый файл) выбирают файл с изображением, а после щелчкана кнопке (Открыть) открывается следующее окно Place (Размещение), в котором израскрывающихся списков (По горизонтали) и (По вертикали) выбирают нужныезначения, определяя точку, относительно которой измеряется сдвиг вставляемогоизображения, и в соответствующих полях ввода задают значения этого сдвига впикселях (можно задавать и отрицательные значения). Кнопка (Выбор) позволяетвновь открыть окно выбора файла для его замены. Щелчок на кнопке ОК окна(Размещение) вставляет изображение в указанную позицию. При размещениивекторного изображения, созданного в Adobe Illustrator, открывается также окно(Параметры растрирования), в котором определяются следующие параметры: размерыизображения (Ширина) и (Высота) в пикселях, а также устанавливаются флажки(Сохранить пропорции) для предотвращения искажения изображения примасштабировании и (Сглаживание) для получения гладких контуров. Щелчок накнопке ОК вставляет изображение в окно документа на новый слой.
При импортеили сканировании изображения оно помещается на первый слой документа. Импортфайла выполняется по команде (Файл>Импорт) с выбором соответствующей командыподменю.
Команда этогоподменю (Папки как кадры) позволяет импортировать все файлы изображений,хранящиеся в выбранной папке как последовательность кадров анимации. В этомслучае все файлы должны иметь названия, позволяющие их расположить в нужномпорядке. После импорта файлов из папки они не только создают последовательностькадров анимации, но и представлены отдельными слоями на палитре (Слои).
Созданиедополнительных слоев позволяет организовать объекты по уровням. На каждом слоеможно помещать или рисовать новые объекты, редактировать или изменятьрасположение существующих объектов, не затрагивая при этом остальные слои.
Слоиобеспечивают удобный способ композиционного построения изображения из различныхграфических и текстовых элементов, позволяя выполнять в них изменения безвоздействия на остальные элементы. Разделение элементов изображения по слоямтакже дает возможность применять к ним фильтры, обеспечивая различное ихвзаимодействие. Специальные свойства, такие как слои-маски, назначаемые дляотдельных слоев, позволяют экспериментировать с изображением и добиватьсяразнообразных эффектов.
Многослойноеизображение, созданное в Photoshop и открытое в ImageReady, сохраняет весьнабор слоев, в том числе корректирующие слои, а также эффекты, ранеепримененные к слоям. В ImageReady можно редактировать все слои, кромекорректирующих. Однако ImageReady не поддерживает слой холста Photoshop. Этотслой преобразуется в обычный слой, после того как файл, созданный в Photoshop,открывается в ImageReady.
Со слоямиможно работать как на вкладке оригинального вида окна документа, так и навкладке оптимизированного вида. Однако в оригинальном представлении результатбудет получен быстрее. Кроме того, в оптимизированном виде может применятьсялишь ограниченный набор инструментов редактирования. При сохраненииоптимизированного изображения все слои объединяются в единый слой изображениялибо при создании анимированного GIF-файла объединяются в единый слой каждогоотдельного кадра.
Палитра(Слои) отображает все слои изображения по порядку, начиная с самого верхнего.Вместе с именем слоя на ней представлена миниатюра, которая показываетсодержимое слоя и изменяется в процессе его редактирования. Палитра слоевпозволяет создавать новые слои, скрывать или отображать существующие,копировать, удалять или объединять слои.
Выделенныйслой является активным, и к нему можно применять редактирование. Выделить можнотолько один из слоев. При работе со слоем можно изменять его цвет и тон,прозрачность и позицию, применять к слою графические эффекты, например тень илисияние, и т.п.1.2 ПалитраАнимация
AdobeImageReady — это мощный и удобный инструмент для создания GIF-анимации. Каждаяанимация представляется рядом кадров, для управления которыми предназначены какпалитра (Анимация), так и палитра (Слои). Если палитра слоев известна из растровогоредактора Photoshop, то палитра анимации появляется только в программеImageReady.
Палитра(Анимация) — это окно, в котором отображается последовательность кадров свозможностью их копирования, перемещения, удаления и организации в любомпорядке. Чтобы отобразить ее в окне ImageReady, выполняют команду(Окно>Показать анимацию). Для сокращения места, занимаемого палитрой наэкране, можно уменьшить размер изображения отдельного кадра на ней, чтопозволяет видеть одновременно большее число последовательных кадров при еефиксированной ширине (см. рисунок 2).
Палитра(Анимация) имеет собственное меню команд, вызываемое щелчком на кнопке сострелкой, расположенной в ее правом верхнем углу. В меню представлены следующиекоманды:
Новый кадр —создает дубликат выделенного кадра (быстрее можно выполнить это действие, еслищелкнуть на кнопке Duplicates Current Frame, расположенной в нижней части окнапалитры);
Удалить кадр— удаляет выделенный кадр (это действие также быстрее выполняется с помощьющелчка на кнопке с рисунком корзины в нижней части окна палитры);
Удалитьанимацию — удаляет все кадры анимации;
Копироватькадр — копирует выделенный кадр;
Вставить кадр— вставляет в заданную позицию последний скопированный кадр;
Выбрать всекадры — выделяет все кадры анимации;
Промежуточный— вызывает диалоговое окно создания заданного количества промежуточных кадровмежду двумя соседними кадрами;
Обратитькадры — меняет порядок двух или нескольких выделенных кадров в анимации;
Оптимизироватьанимацию — уменьшает размер файла анимации с помощью средств Bounding Box иRedundant Pixel elimination;
Подогнатьслой под кадры — позволяет при редактировании слоя с помощью палитры (Слои)вставить изменения во все кадры анимации;
Сделать кадрыиз слоев — создает кадры из слоев рисунка Photoshop;
Свести кадрыв слои — объединяет слои в кадрах анимации в один слой;
Добавлятьслой для нового кадра — позволяет при создании нового кадра создавать такженовый слой, видимый только в этом кадре, для вновь появляющегося элементаизображения;
Новые слоиотображаются во всех кадрах — разрешает отобразить вновь созданный слой во всехкадрах анимации;
Параметрыпалитры — задает один из трех размеров изображения кадров на палитре.
Послеоткрытия файла изображения он представлен на палитре Animation (Анимация) какпервый кадр последовательности. Новый кадр последовательности создается каккопия предыдущего, после чего в него можно вносить изменения, используя палитру(Слои) и инструменты ImageReady.
Для измененияодного из кадров последовательности его следует выделить. Содержимоевыделенного кадра отображается в окне документа. Можно одновременно выделитьнесколько кадров, расположенных как последовательно друг за другом, так и впроизвольном порядке, редактируя их или применяя к ним команды как к группе. Вокне документа при этом отображается только текущий кадр, который был выделенпервым. На палитре (Анимация) текущий кадр выделяется узкой рамкой, в то времякак все выделенные кадры отмечены серым фоном вокруг их изображений.
Чтобы сделатькадр текущим, можно выполнить одно из следующих действий:
· щелкнутьна изображении нужного кадра на палитре (Анимация);
· напалитрах (Анимация) или (Слои) щелкнуть на кнопке (Вперед), чтобы сделатьтекущим следующий по порядку кадр;
· на палитрах(Анимация) или (Слои) щелкнуть на кнопке (Назад), чтобы сделать текущимпредыдущий кадр;
· напалитре (Анимация) щелкнуть на кнопке (Перемотка), чтобы сделать текущим первыйкадр анимации.
Чтобывыделить несколько кадров как группу, можно выполнить одно из следующихдействий:
· выделитьпервый кадр непрерывной группы и при нажатой клавише Shift щелкнуть позаключительному кадру выделяемой группы;
· щелкатьпо кадрам, расположенным в произвольной последовательности, при нажатой клавишеCtrl;
· выделитьвсе кадры анимации можно командой (Выбрать все кадры) из раскрывающегося менюпалитры (Анимация).
Убрать кадриз выделенной группы можно, повторно щелкнув по нему при нажатой клавише Ctrl.
Выделеннуюгруппу кадров можно переместить, изменив ее место в последовательности, либо,если это непрерывная группа кадров, заменить их порядок обратным. Приперемещении произвольно выделенных кадров в новой позиции они расположатсяпоследовательно друг за другом.
Чтобы удалитьвыделенные кадры, можно выполнить одно из следующих действий:
· воспользоватьсякомандой (Удалить кадры) из меню палитры (Анимация);
· щелкнутьна кнопке (Корзина) и подтвердить удаление щелчком на кнопке (Да) диалоговогоокна;
· перетащитьмышью выделенные кадры на значок корзины палитры Animation (Анимация).
Командыкопирования и вставки кадров меню палитры (Анимация) позволяют получить копиюкадра, которая может быть вставлена в любое место последовательности. При этомкопируется не само изображение, а та конфигурация слоев и их атрибутов, котораяприсуща данному кадру. При вставке в кадры места назначения текущей анимацииили другой анимации следует указать метод, который будет использован привставке:
(Заменитькадры) — позволяет заменить выделенные кадры скопированными. При вставке кадровв то же самое изображение к нему не добавляются новые слои, а заменяются толькоих атрибуты теми, что были в скопированных кадрах. При вставке кадров в новоеизображение к нему добавляются новые слои, и им присваивается свойство(видимый), старым же слоям присваивается свойство (скрытый).
Вставить ввыделенные — добавляет содержимое вставляемых кадров в качестве новых слоевизображения. При вставке кадров в то же самое изображение число слоев в немудваивается, причем вставленные слои в кадрах назначения будут видимыми, асуществовавшие ранее — скрыты. В остальных кадрах анимации вставленные слоибудут скрыты.
Вставитьперед выделением или Вставить после выделения — добавляет скопированное числокадров перед или после выделения, причем новые слои добавляются к изображению ибудут видимы только во вновь добавленных кадрах, в которых существовавшие довставки слои изображения будут скрыты.
Флажок(Связать добавляемые слои) позволяет связать вставляемые слои и затемодновременно изменять их позицию. По щелчку на кнопке ОК выполняется выбранныйспособ вставки.
В ImageReadyкаждый слой рассматривается как отдельный элемент анимации. Используя команды ипараметры палитры (Слои), можно задавать нужные изменения, добиваясь созданияанимационных эффектов в изображении, так как изменения будут влиять только навыделенные кадры. Можно менять положение объекта, его прозрачность, а такжерассчитывать промежуточные кадры, используя команду (Промежуточный). Изменения,выполненные на палитре (Слои), можно применить ко всем кадрам, если выполнитькоманду (Подогнать слой под кадры).
Однакоизменения объекта, влияющие на параметры пикселов (такие, как раскраска,изменение тона или цвета, трансформации), оказывают влияние на все кадрыанимации, в которых представлен данный объект. Для анимации подобных свойствследует создавать отдельные слои с разными параметрами для каждого изменяемогокадра, задавая соответствующий режим видимости.
Применениеэффекта к слою-маске воздействует на все кадры, в которых представлен этотслой, однако при этом маска может дополнительно изменять свое положение.
Созданиеанимации изменением параметров слоев выполняется достаточно просто ипредоставляет, если сохранить ее в формате документа Photoshop, дальнейшуювозможность ее редактирования. При создании анимации в ImageReady анимируемыеобъекты следует размещать на разных слоях, связывая эти слои в группы.
Возможностьавтоматического создания промежуточных кадров анимации является очень полезнойи может быть применена как к графическим, так и к текстовым изображениям. Этафункция позволяет рассчитывать кадры, в которых объект может перемещаться,появляться или исчезать, а также к нему может быть применен постепенноусиливающийся эффект.
Передрасчетом промежуточных кадров следует выделить один или несколькопоследовательных кадров. Если выделен один кадр, то рассчитанные кадрывставляются между ним и предыдущим или же последующим кадрами. Если выделеныдва последовательных кадра, то новые кадры вставляются между ними. Длявыделенной непрерывной группы кадров все промежуточные кадры (то есть все,кроме первого и последнего) заменяются кадрами, рассчитанными по команде(Промежуточный). Выделение первого и последнего кадров анимации такжерассматривается как последовательное и позволяет добавить рассчитанные кадры вконец анимации, обеспечивая непрерывность при ее циклическом повторении.
Затем враскрывающемся меню выбирается команда (Промежуточный) либо выполняется щелчокпо одноименной кнопке палитры (Анимация). В открывшемся окне (Расчетпромежуточных кадров) задаются следующие параметры:
Времядемонстрации каждого кадра в секундах указано под изображением кадра. Чтобы егоизменить, следует выделить один или несколько кадров и щелкнуть на величиневремени задержки, что вызовет меню с набором постоянных значений. Выборзначения (Другое) открывает диалоговое окно (Время кадра), в котором можнозадать произвольное число секунд. После щелчка на кнопке ОК это время будетприсвоено всем выделенным кадрам анимации. Следует отметить, что при просмотреанимации в ImageReady время демонстрации кадров может отличаться отустановленного. Поэтому просмотр следует выполнять в браузере, где это времяточно выдерживается.
Создаваемаяанимация при воспроизведении может быть повторена заданное число раз. Для этогощелчком на раскрывающемся списке (Выбор параметров повторения), расположенном влевом нижнем углу палитры (Анимация), выбирается одно из значений списка:(Однократно), (Бесконечно) или (Другое). В последнем случае в диалоговом окне(Число повторов) вводится нужное числовое значение.
Методудаления кадра определяет, сохранится ли изображение предыдущего кадра придемонстрации последующего. При использовании кадров с прозрачным фоном в этомслучае будут видны изображения предыдущих кадров.
Выбор методаосуществляется для одного или нескольких выделенных кадров с помощьюконтекстного меню, вызываемого щелчком правой кнопки мыши на рисунке кадра вокне (Анимация):
Автоматически— устанавливается по умолчанию, автоматически стирая изображение текущегокадра, если следующий содержит прозрачный слой;
He удалять —сохраняет изображение предыдущего кадра, добавляя к нему изображениеследующего, причем предварительный просмотр такой анимации следует выполнять вбраузере;
Восстановитьфон — позволяет демонстрировать в каждый момент времени только один кадр.
Для методов(He удалять) и (Восстановить фон) у рисунков кадров появляется специальнаяотметка Disposal Method icon, указывающая на тип метода.
Присохранении анимации в формате GIF первоначальные слои изображений теряются, таккак в каждом кадре все слои сводятся к единому слою. Поэтому если требуетсядальнейшее редактирование анимации, то ее целесообразно сохранить в форматеPhotoshop, содержащем все исходные слои изображений. При необходимости можнополучить сведение слоев в кадрах этого файла, выполнив команду (Свести кадры вслои). Эта команда позволяет создать отдельный сведенный слой для каждого изкадров и предохранить исходные слои, сделав их скрытыми, для последующегосоздания новых кадров.
Открывая вImageReady файл Photoshop, содержащий несколько слоев, каждый слой можносделать отдельным кадром анимации. Для этого в меню команд палитры (Анимация)предусмотрена команда (Создать кадры из слоев), разбирающая слои по кадрам,после чего файл можно сохранять как анимированный GIF с выбранными параметрамиоптимизации.1.3 Просмотри сохранение анимации
Чтобывыполнить предварительный просмотр анимации в окне документа ImageReady,достаточно щелкнуть на кнопке (Воспроизвести) палитры (Анимация).
Независимо отзаданного числа повторов анимации она в этом случае воспроизводится вбесконечном цикле. Чтобы завершить просмотр анимации, следует щелкнуть накнопке (Стоп). Вернуться к начальному кадру можно, щелкнув на кнопке(Перемотка).
Для просмотраанимации в окне обозревателя выполняют команду (Файл>Просмотр) с выборомназвания обозревателя в открывшемся подменю либо щелкают на кнопке (Просмотр вобозревателе по умолчанию) стандартной панели. Для остановки анимациииспользуют кнопку панели инструментов обозревателя (Стоп), а для повторногопросмотра — кнопку (Обновить).
Управлениепараметрами оптимизации для различных представлений окна документа 2-Up и 4-Upвыполняется с помощью установок окна, вызываемого по команде(Правка>Установки>Оптимизация). В окне (Установки) в области (Оптимизацияпо умолчанию) можно выбрать одно из значений:
(Предыдущие)— автоматически применяются параметры последней оптимизации;
(Автовыбор) —автоматически выбирается оптимизация как GIF или JPEG по результатам анализа изображения;
(Поименованные)— с выбором поименованного набора установок из раскрывающегося списка.
В областях2-Up Settings или 4-Up Settings определяются параметры для четырех панелей (3-яи 4-я панели доступны только в виде 4-Up):
(Оригинал) —отображает на панели исходное изображение (значение доступно только для первойпанели);
(Текущие) —отображает на выбранной панели изображение с текущими значениями параметровOptimize palette (значение доступно для всех панелей);
(Автоматически)— отображает наименьшую по размеру версию, сгенерированную автоматическиImageReady на основе текущих параметров Optimize palette (значение доступно длявторой, третьей и четвертой панелей).
Такжевозможен выбор одного из двенадцати поименованных наборов установок, обеспечивающихдемонстрацию на данной панели изображения, соответствующего этим установкам(значение доступно для второй, третьей и четвертой панелей).
Оптимизациянеобходима для уменьшения размера файла формата GIF, который являетсяединственным форматом в ImageReady, позволяющим демонстрировать анимацию наWeb-странице. Кроме задания стандартных параметров оптимизации следует приредактировании кадров анимации оставлять в них только изменяющиеся области напрозрачном фоне, что позволяет значительно сократить размер получаемого файла.Сокращение количества цветов в палитре также уменьшает размер файла, однако,чтобы предотвратить мерцание изображения при воспроизведении и сохранитьвозможность отображения цветовых оттенков, отсутствующих в палитре,используется специальная техника имитации. В этом случае потребуется большевремени на создание результирующего GIF-файла.
Выбор команды(Оптимизировать анимацию) из меню команд палитры (Анимация) открываетодноименное окно, в котором по умолчанию установлены флажки:
Граничнаярамка — обрезает каждый кадр по размеру изменяемой области (файл с такимикадрами можно редактировать только в программах, поддерживающих этот режим);
Удалениеизбыточных пикселов — делает прозрачными все не изменившиеся пикселы в кадре(чтобы этот параметр работал, необходимо установить параметр (Прозрачность) впалитре и выбрать метод смены кадров Automatic).
Щелчок накнопке ОК запускает оптимизацию.
Созданнуюанимацию можно сохранить в формате GIF либо как фильм QuickTime. Другие форматыфайлов, такие как JPEG или PNG, сохранят только первый кадр изображения, непозволяя воспроизвести всю анимацию. Существует несколько способов сохранитьоптимизированную анимацию для использования на Web-странице. В ImageReadyдостаточно выбрать команду (Файл>Сохранить оптимизированный), чтобысохранить анимацию с установками, выбранными при предыдущем ее сохранении. Еслиэто не первое сохранение, то диалоговое окно (Сохранить) не появляется иназвание файла и его параметры остаются теми же, что были присвоены ранее.
Выбор команды(Файл>Сохранить как оптимизированный) позволяет изменить имя файла и выбратьдругое место его хранения. Кроме того, возможен выбор измененного параметра(Тип файла) из набора доступных значений:
(HTML ирисунки) — генерирует HTML-файл и сохраняет каждый изображение в видеотдельного файла;
(Толькорисунки) — сохраняет только изображение в отдельном файле;
(Только HTML)— сохраняет только HTML-файл без файлов изображений.
Кроме того,ImageReady позволяет создать HTML-файл по команде (Копировать HTML), котораякопирует код HTML в буфер обмена, а затем он может быть вставлен наWeb-страницу в любом HTML-редакторе. В случае изменений исходного изображениядля обновления HTML-файла выполняют команду (Обновить HTML) с указанием имениобновляемого файла.
Чтобысохранить анимацию в формате QuickTime, следует выбрать команду(Файл>Экспорт начального) и из раскрывающегося списка выбрать значениеQuickTime Movie (оно будет доступно, если на компьютере установлена программаQuickTime). Указав имя файла и его место расположения, щелчком на кнопке(Сохранить) создаем файл выбранного типа.
2. Разработка анимированного изображенияв программе Adobe ImageReady2.1 Созданиеинтерактивных компонентов Web – страниц
При созданииWeb-страниц с помощью программ Adobe Photoshop или Adobe ImageReady следуетпринимать во внимание конкретные возможности каждого из этих приложений:
Photoshopобеспечивает подготовку статических изображений для Web с возможностью ихделения на отдельные области, связанные гиперссылками с целевыми объектами;
ImageReadyкроме всех возможностей, предоставляемых Photoshop, включает также инструментыдля создания динамических элементов, таких как анимации и интерактивные кнопки.
С помощьюImageReady можно создать целую анимированную Web-страницу, использующуюкомбинацию текстов, рисунков и графических объектов. При этом предварительноследует продумать очередность их появления и перемещения в пределах страницы,которая должна иметь стандартный размер, чтобы полностью отображаться в окнеобозревателя. Однако чаще всего ImageReady используют для создания такихинтерактивных компонентов Web-страницы, как графические карты либоанимированные кнопки.2.2Создание анимированного баннера для Интернет – портала
Созданиебаннера — в нашем случае формата 468 пикселей на 60 — начинается в Photoshop.На рисунке 3 показано диалоговое окно создания нового файла.
Всоответствии со старыми традициями ставится рамка в один пиксель, как видно нарисунке 4 она находится в отдельном слое, хотя это не необходимо. Принятосчитать, и мне кажется не без оснований, что рамка в баннере придает емунекоторую аккуратность.
Начинаемрисовать элементы нашего баннера. В данном случае я собираюсь нарисоватьнескольких абстрактных человечков, один из которых будет резко отличаться поцвету от остальных, также я планирую создать надпись «design different» —подражание слогану компании Apple Macintosh «Think different». Я хочу, чтобы инадпись и оранжевый человечек мигали. Человечков рисую в данном случаепопиксельно (то есть увеличиваю изображение до 1600% и заливаю краской каждыйпиксель вручную). Это даёт колоссальную экономию в размере файла. Если нарисунке 5 голова человечка имеет по краям области светло-серого — это хорошовидно при сильном увелечении, то в последствие я переведу вручную всесветло-серые пиксели в один цвет и сделаю голову более примитивной, на качествепрорисовки это не отразится, зато даст экономию в размере файла.
Обратитевнимание, на рисунке 6 есть выделенная пунктиром область. Она будет залитабелым в отдельном слое 2, он «выше» текста и за счет включения/выключения этогослоя получиться мигание слова «different». Аналогичная ситуация с мигающимчеловечком, оранжевый находиться в слое yell.
Как видитебаннер готов. Он еще не мигает и никак не оптимизирован. Сохраняем в егоформате psd и нажимаем на значок ImageReady, значок подсвечен на рисунке 7.После чего Photoshop автоматически запустит ImageReady, причем наш psd файл ужебудет открыт в ImageReady.
На рисунке 8мы видим небольшую область окна ImageReady. Попробую пояснить. ВнешнеImageReady на 80% похож на Photoshop. Но его основная область работы — веб,поэтому у него свои выкладки. Например, в случае с баннером нам понадобятся двевыкладки — Анимация и Оптимизация. И та и другая хорошо видны на рисунках 9 и 10.Про оптимизацию позже, а сейчас несколько слов об анимации. Выкладка анимациипозволяет создать кадр (рисунок 7, левее корзинки; в ImageReady — Дублирование исходногокадра), назначить время его проигрывания (всплывающее меню на рисунке 8),проиграть. Техническое отступление. Помимо Анимации есть еще две выкладки: Частьи Прокрутка. Первая позволяет «резать» наш рисунок и оптимизировать отдельныеего фрагменты с различными установками. Например, есть большой рисунок, в однойего части есть пустая область, в другой кусок фотографии. Сохраняя каждуюобласть рисунка отдельно мы получим очень большую экономию общего размера.Кроме того, когда грузится не один большой рисунок, а много маленьких,создается впечатление, что страница грузится быстрее. Выкладка Прокруткапозволяет работать с картинками, html и JavaScript, с тем, что принято называтьроловерами — графическими событиями, происходящими при прохождении курсорамышки по области рисунка. Например, мы хотим нарисовать меню, при наведениимышки на которую пункты меню будут менять свой вид (технически это просто сменакартинок). С помощью выкладки Прокрутка этот процесс будет сведен к минимуму:нарисовать рисунок, его вариант реакции на курсор мышки (например, слои),задать условия Прокрутки и сохранить Сохранить оптимизацию как… кликнув галочкуUpdate HTML.
На рисунке 9в нашей анимации существует всего два кадра (в терминах ImageReady — кадр).Первый кадр длится 1 секунду, второй — 3. Отличия кадров я не показываю, но,как я уже упоминал, я включаю\выключаю слои, за счет чего в конечном файлеформата gif мы получим мигание. Напомню: мы все еще работаем с файлом psd. Инам еще доступны слои. Когда мы сохраним анимированный gif и попробуем открытьего в том же ImageReady, то мы получим анимированный gif, причем не будетникаких слоёв — только кадры. Если открыть этот gif в Photoshop'е, то мы увидимлишь первый кадр анимации.
На рисунке 10у нас уже 7 кадров. Обратите внимание, все кадры имеют разное время показа.Собственно баннер готов. Нажав кнопку Воспроизвести анимацию мы увидим, какбудет выглядеть наш анимированный gif файл. Осталось оптимизировать исохранить.
На рисунке 9— оптимизация. Я выбираю 16 цветов, хотя в данном случае можно выбрать трицвета, так как в баннере использованы темно-серый, белый и оранжевый. Вообщевопрос оптимизации gif прежде всего сводится к сокращению количестваиспользуемых цветов. В некоторых случаях приходится задействовать другие пунктывыкладки Оптимизация. Но четких советов тут дать нельзя — экспериментируйте.Кстати, на рисунке 8 видно, что окно нашего баннера имеет несколько закладок: Оригинальная— для psd, Оптимизированная — баннер выглядит в соответствии с нашимиустановками меню Оптимизация, 2-Up — 2 рисунка для сравнения настроек, 4-Up — 4рисунка для сравнения. Все эти закладки созданы, чтобы помочь максимально точноустановить оптимизационные настройки. Рекомендую после установкиоптимизационных настроек проиграть наш файл в закладках 2-Up и 4-Up. Так можнобудет увидеть в сравнении результат работы.
Длясохранения нашего баннера в формат gif открываем меню Файл и выбираем пункт Сохранитьоптимизацию как… Даём файлу имя, нажимаем Ok, баннер готов.
Вотрезультат: примитивный анимированный баннер, цель выполнена. «Вес» файла 2,53Кб. Для анимированного баннера такого формата (468 на 60 пикселей) стандартныйразмер около 12-16 Кб. Причина такого малого «веса» моего баннера — применениевсего трех цветов, попиксельная прорисовка и минимум элементов.
/>/>/>/>/>/>/>Заключение
/>
В заключениихотелось бы отметить, что, сохраняя изображение для использования в качествеэлемента Web-страницы, можно одновременно сгенерировать HTML-файл, которыйбудет содержать информацию для обозревателя о том, как воспроизводить элементыстраницы при загрузке. Этот файл включает ссылки на изображения (в формате GIF,PNG или JPEG), HTML-текст, гиперссылки и код JavaScript для созданияинтерактивных эффектов (rollover effects). Хотя для большинства эффектов можновыполнить предварительный просмотр непосредственно в программах Photoshop илиImageReady, но зависимость демонстрируемых Web-страниц от операционной системы,типа обозревателя и системы отображения цвета требует выполнения просмотра вкаждом конкретном обозревателе.
ImageReadyподдерживает создание интерактивных объектов, добавляя код JavaScript врезультирующий HTML-файл, обеспечивающий смену состояния объекта при наведениина него указателя мыши. Для создания интерактивных объектов служит палитраRollover, совмещенная с палитрой (Анимация). На ней отображаются возможныесостояния объекта, каждому из которых может соответствовать свое изображениеили даже целая анимация. При сохранении такого объекта, как элементаWeb-страницы каждое состояние сохраняется в отдельном файле.
В настоящеевремя у Adobe ImageReady появляется большое количество конкурентов в областианимирования изображений, но благодаря тому что программа успешно обновляется,можно сказать, что программа Adobe ImageReady является удобным программным комплексомпо созданию и внедрению анимированных изображений в сеть Интернет.
/>/>/>/>/>/>Списокиспользованной литературы
1. Аксенов П.П. Самоучительработы на Adobe ImageReady CS2. – М., 2006
2. Дж. Эрсон. Созданиеинтерактивных компонентов Web-страниц. – Спб., 2004
3. Мануйлов В.Г.Мультимедийные компоненты, Информатика и образование №12 – 2004, №1, №2, №5 –2005
4. Фигурнов В.Э. IBM PC дляпользователя Краткий курс М.: Инфра-М, 2000.- 480 с.; 2001.- 480 с. 1997
5. Лавров С.М. Adobe ImageReady: сб. примеров и задачиМ.: Финансы и статистика, 2003
6. Макарева Н.В. и др.Информатика: учебник- 3-е изд М.: Финансы и статистика, 2003
7. Информатика Базовый курсУчебное пособие для студентов вузов СПб.: Питер, 2003
8. Хэлворсон М., Янг МЭффективная работа с Adobe ImageReady.- СПб.: Питер, 2000