|
далить кадр -- удаляет выделенный кадр (это действие также быстрее выполняется с помощью щелчка на кнопке с рисунком корзины в нижней части окна палитры); Удалить анимацию -- удаляет все кадры анимации; Копировать кадр -- копирует выделенный кадр; Вставить кадр -- вставляет в заданную позицию последний скопированный кадр; Выбрать все кадры -- выделяет все кадры анимации; Промежуточный -- вызывает диалоговое окно создания заданного количества промежуточных кадров между двумя соседними кадрами; Обратить кадры -- меняет порядок двух или нескольких выделенных кадров в анимации; Оптимизировать анимацию -- уменьшает размер файла анимации с помощью средств 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 ImageReady 2.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
Страницы: 1, 2
|
