Покажите выполненную Вами работу преподавателю. Тема занятия: «Создание анимационных графических изображений в среде ImageReady для Web-страниц».

Тема занятия: «Создание анимационных графических изображений в среде ImageReady для Web-страниц».

Цель занятия:

Обучающая – овладение приемами работы по созданию анимированных gif-изображений в Adobe Image Ready;

Краткие теоретические сведения

Gif-анимация в Adobe Image Ready, Adobe Photoshop

Анимация изображения

В предыдущих версиях графического редактора Adobe Photoshop существовала возможность редактирования исключительно растрового изображения. В графическом редакторе Adobe Photoshop CS 2 впервые реализована возможность создания анимационных файлов, которая может особенно пригодиться при создании анимированной web-графики.

Для вызова анимационного редактора необходимо выполнить команду меню Window – Animation (Окно – Анимация). В этом случае в нижней части рабочей области редактора откроется палитра анимационного редактора.

Эта палитра отличается от всех остальных. Она горизонтальная. В центральной ее части отображаются все созданные кадры анимационного файла. Первоначально такой кадр один, он повторяет текущий слой открытого документа. Но кадров может быть сколько угодно.

В нижней строке палитры анимационного редактора расположено семь управляющих пиктограмм. Первые четыре из них предназначены для управления последовательным просмотром созданных кадров. Раскрывающийся список Forever (Период) позволяет задать продолжительность проигрывания ролика. По умолчанию выбран вариант Forever (Циклично), предполагающий постоянное цикличное последовательное воспроизведение всех кадров документа. Вариант Once (Единожды) воспроизводит последовательность кадров только один раз и останавливается на последнем.

При выборе варианта Other (Иначе) в маленьком диалоговом окне Set Loop Count (Задание количества показов) в поле ввода Play times (Проиграть раз) задается количество раз, которое будет демонстрироваться созданный ролик.

В анимационном редакторе можно покадрово создавать ролик вручную, но для создания несложных роликов подойдет вариант автоматической анимации. Для этого следует создать только первый и последний кадры. Затем щелкнуть на пиктограмме Tweens animations frames (Промежуточные кадры анимации). В диалоговом окне Tween (Промежуток) задается количество необходимых промежуточных кадров (Frames to Add), а также типовые свойства создаваемых промежуточных кадров.

Однако, при создании каждого кадра «вручную» вам придется манипулировать не только элементами изображения, но и отображением кадров. Для этого щелкайте на пиктограмме Duplicates selected frames (Дублировать выделенные кадры) , а затем изменяйте их содержимое в зависимости от необходимости. Для удаления кадров используется пиктограмма Delete selected frames (Удалить выделенные кадры) .

После того, как все кадры нашего клипа созданы, можно просмотреть весь мультфильм. Для этого щелкните на пиктограмме Plays Animation (Проигрывание анимации). По заданным параметрам весь мультфильм будет проигран.

Если результат вас удовлетворяет, остановите проигрывание щелчком на пиктограмме Stops Animation (Остановить проигрывание). Для сохранения полученных результатов выполняем команду меню File – Save for Web (Файл – Сохранить для Веб). У нас имеется готовый анимационный Gif-файл. Остается вставить его на web-страницу.

ЗАДАНИЕ 1. Создание анимации с расчетом промежуточных кадров

1.Запустите Image Ready. По команде File–New (Файл–Новый) создайте новое изображение размером 300 х 300 пикселов.

2.С помощью инструмента Rectangle (Прямоугольник) нарисуйте в верхнем левом углу квадрат и заполните его цветом. При этом автоматически будет создан второй слой.

3.Щелкните на кнопке Duplicates Current Frame (Создать дубликат текущего кадра), создав второй кадр с тем же изображением.

4.С помощью инструмента Move (Перемещение) передвиньте квадрат в правый нижний угол, что будет отображено на выделенном втором кадре палитры Animation (Анимация).

5.Откройте меню этой палитры и выберите команду Tween (Создать промежуточные кадры). В одноименном окне в поле Frames To Add (Добавить кадров) укажите количество промежуточных кадров – 5, снимите флажок параметра Opacity (Непрозрачность) и щелкните на кнопке ОК.

6.На палитре Animation (Анимация) будут представлены все семь кадров. При просмотре анимации убеждаемся, что траекторией перемещения квадрата является прямая линия.

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

8.Создайте дубль этого кадра и переместите выделенный текст в правый верхний угол, а квадрат – в левый верхний угол. Для перемещения последнего придется выделить слой, содержащий этот объект.

9.Снова выполните команду Tween (Создать промежуточные кадры), задав в окне раскрывающегося списка Tween with (Начать с…) значение Previous Frame (Предыдущий кадр), в результате чего получаем 13 кадров анимации.

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

ЗАДАНИЕ 2. Создание анимированной кнопки

Создаем изображение, заполненное любой текстурой или цветом. Текстура, использованная на примере, была создана следующим образом: залив фон желтым цветом, приминили фильтр Add Noise (Filter – Noise – Add Noise) (Фильтр – Шум – Добавить шум). Выделяем окружность. Сохраняем выделение (Выделение – сохранить выделенную область…). Выбираем два цвета: светлый и темный (на примере – оттенки зеленого). С помощью инструмента градиентная заливка – заполняем выделение от светлого к темному под нужным углом.
Теперь на 5 пикселов сжимаем выделение: Select – Modify – Contract – 5 Pixels. Заполним получившееся выделение от темного к светлому.
Добавим текст или картинку на кнопку. В данном примере надпись – Ok
Создаем 3-й слой. Загружаем выделение (CTRL+ALT+4 – Выделение – Загрузить выделенную область…). Обводим кнопку черным кольцом: Edit – Stroke – (1 Pixel, Outside, Black) – Редактирование – Выполнить обводку… (1 пиксель, Позиция – Снаружи, Цвет – Черный) {Полдела сделано. Сохраняем результат работы в формате GIF: File – Export – Gif.}
Далее. Создадим четвертый слой. Поместим его между слоем с текстом и черным кольцом. Загрузим выделение (Ctrl+Alt+4). Заполним его 30% черным. (Edit – Fill – Black – 30%).   Создадим копию слоя с текстом. Для пущей реалистичности сдвинем надпись на кнопке вправо и вниз на 1-2 пиксела. Все. Кнопка (вторая) готова. {Сохраним нажатую кнопку, как и прошлый раз, но под другим именем.}
Примечание: Созданные и сохраненные Вами две кнопки в формате .gif можно использовать при создании html-документа с написанием скрипта JavaSctript (с применением соответствующих событий оnMouseOver и onMouseOut, чтобы при наведении мыши на кнопку она "нажималась"). Действия, описанные в фигурных скобках не выполнять (при желании можно)

ЗАДАНИЕ 3. Создание навигационных карт (карт ссылок) в Adobe ImageReady

Исходное изображение

Инструмент: «Прямоугольная карта ссылок», «Круглая карта ссылок», «Многоугольная карта ссылок»

Инструмент: «Выделение карты ссылок»

Палитра «Карта ссылок»

1 – поле, в котором указывается Имя карты ссылок,для последующей его связи с изображением; 2 – поле, в котором указывается URL загружаемого документа при щелчке мышью по данной областикарты ссылок; 3 – поле, в котором указывается имя фрейма загрузки документа; 4 – поле, в котором прописывается альтернативный текст для браузера

Самостоятельносоздайте три области карт ссылок (смотри исходное изображение); прописать соответствующий текст в соответствующих полях палитры «Карта ссылок» согласно их назначению. Если у Вас не имеется html-документов – можете указать адрес к содержимому папки, диска или др. (на своё усмотрение).

Для сохранения результата Вашей работы в виде html-документа выполните команду Сохранить оптимизированный как… из меню Файл.

ЗАДАНИЕ 4. Создать изображение прыгающего мячика

С помощью приложения Adobe Image Ready создайте изображение прыгающего по земле мячика. В качестве цвета мячика используйте градиент. Учтите, что при приземлении и отталкивании от земли мячик деформируется. Учтите законы физики: в частности земное притяжение. Сохраните файл в формате PSD, а также в GIF.

Покажите выполненную Вами работу преподавателю.