Краткие теоретические и учебно-методические материалы по теме практической работы

Практическое занятие 15

«Создание GIF-анимации»

Цель работы: научиться создавать различные анимационные эффекты и GIF-баннеры.

Образовательные результаты, заявленные во ФГОС третьего поколения:

Студент должен

уметь:

- создавать элементы графического изображения;

- редактировать готовые изображения;

- применять технологии продвижения web-услуг.

знать:

- основные виды компьютерной графики;

- методы создания и обработки двухмерных и трехмерных изображений;

- приемы подготовки графики для web-приложений;

- технологии продвижения web-услуг.

GIF-анимация - последовательное отображение с заданной частотой растровых изображений, хранящихся в одном GIF-файле.

Создание нового изображения. Откройте программу Adobe ImageReady. Создайте новый файл: File (Файл) → New (Новый). Задайте следующие параметры изображения:

· Name (Имя) = banner-1;

· Width (Ширина) = 468 пикселей;

· Height (Высота) = 60 пикселей;

· Contents of First Layer (Содержимое первого слоя) – White (Белый).

2. Увеличение размера окна изображения. Для того, чтобы было удобнее работать, немного увеличьте размер окна изображения, для этого потяните нижний правый угол окна немного вправо и вниз.

3. Создание нового слоя. В правом нижнем углу окна программы в палитре Layers (Слои) щелкните по кнопке Create New Layer (Создать новый слой). Переименуйте новый слой Layer 1 в Green. для этого дважды щелкните по названию слоя, напишите новое название, нажмите клавишу Enter.

4. Создание зеленого прямоугольника. На панели инструментов (слева) щелкните по инструменту прямоугольное выделение Marquee (Выделение). Нарисуйте прямоугольник на рисунке. Выберите инструмент заливки Paint Bucket (Сплошная заливка). Теперь справа на палитре цветов Swatches (Плашки – ямочки для краски на палитре художника) выберите зеленый цвет и щелкните инструментом заливки (ведром) в выделенном прямоугольнике. Снимите пунктирное выделение, нажав клавиши Ctrl + D. Пока вы не снимите выделение, многие команды будут недоступны.

5. Создание красного прямоугольника. Создайте слой Red и нарисуйте красный прямоугольник.

6. Создание надписи FREE. Создайте новый слой, на палитре инструментов (слева) выберите инструмент Type (Печать текста). В палитре Swatches выберите белый цвет. На панели свойств инструмента Type (Печатать текст) (см. вверху) выберите шрифт Comic Sans MS, размер шрифта 36 px. Щелкните над зеленым прямоугольником и напечатайте заглавными буквами FREE. На палитре инструментов слева выберите инструмент Move (Движение) передвиньте текст так, чтобы он располагался как на образце.

7. Создание падающей тени у надписи. Примените к этому тексту эффект Drop Shadow (Падающая тень). Справа внизу на палитре Layers (Слои) щелкните по кнопке Add a layer style (Добавить стиль для слоя).

Откроется список стилей, выберите Drop Shadow (Падающая тень).

8. Создание остальных надписей. Напечатайте текст site (белого цвета) и примените к нему стиль Drop Shadow (Падающая тень). Напечатайте текст COOL (синего цвета) и примените к нему стиль Drop Shadow (Падающая тень). Напечатайте текст click here (синего цвета) и примените к нему стиль Drop Shadow (Падающая тень).

11. Создание прямоугольника с размытыми краями. Выделите слой с надписью click here, для этого один раз щелкните по иконке слоя. Создайте новый слой, назовите его Black. Обратите внимание, новый слой всегда создается выше выделенного. На слое Black нужно нарисовать полупрозрачный черный прямоугольник, который будет маркировать надпись click here.

Выберите инструмент Rectangle Marquee (Прямоугольное выделение). На панели свойств этого инструмента в поле Feather (Перо) задайте 5 пикселей, этим вы установите степень размытия краев прямоугольника. Нарисуйте прямоугольник. Залейте его черным цветом. На палитре Layers (Слои) в поле Opacity (Непрозрачность) установите степень непрозрачности 60%.

Так как в начале анимации содержимое слоев Black и click here не видно, отключите видимость этих слоев, для этого щелкните по кнопке с открытым глазом напротив названия каждого слоя на палитре Layers (Слои).

12. Сохраните рисунок в формате PSD (см. меню File → Save).

1. Создание кадров анимации. Текущее состояние рисунка отображается в первом кадре анимации. Создайте еще один кадр, для этого щелкните на кнопке Duplicates current frame (Продублировать текущий кадр). Справа от первого кадра появится второй кадр, пока оба кадра идентичны.

2. Создание начального и конечного кадра для анимации движения. Щелкните мышью на миниатюре первого кадра. В панели инструментов выберите инструмент Move (Перемещение). В палитре Layers (Слои) активизируйте слой с надписью COOL. Переместите надпись вниз так, чтобы текст оказался за границей рисунка. Это начало движения слова. Во втором кадре переместите надпись COOL максимально вверх - окончание движения надписи.

3. Автоматическая анимация промежуточных кадров. Выделите первый и второй кадр, для этого щелкните по каждому кадру при нажатой клавише Ctrl. Выберите команду Tweens animation frames (Промежуточные кадры анимации). Откроется диалоговое окно Tween (Промежуточные кадры). В группе Layers (Слои) установите переключатель All layers (Слои), в группе Parameters (Параметры) – оставьте только флажок Position (Позиция), а в поле Frames to Add (Добавить кадры) оставьте число 5. Щелкните по кнопке ОК. Программа автоматически вставит промежуточные кадры между двумя выделенными кадрами.

4. Установка обратного хода анимации. Выделите последний кадр анимации. Щелкните по кнопке Tweens animation frames (Промежуточные кадры анимации). В диалоговом окне Tween (Промежуточные кадры) установите те же параметры, что и в предыдущем пункте, только в списке Tween With (Промежуточные между) выберите вариант First Frame (Первый кадр). Щелкните по кнопке ОК.

5. Создание эффекта мигания. Создайте новый кадр. Включите видимость слоя click here, для этого щелкните на палитре Layers (Слои) по пустому окошку напротив названия, там где должен появится открытый глаз. Также включите видимость слоя Black. Проделайте следующую процедуру:

1) создайте новый кадр, отключите видимость слоя Black;

2) создайте новый кадр, отключите видимость слоя click here.

Действуя таким образом, вы получите эффект мигания.

6. Просмотр анимации в окне ImageReady. Щелкните на кнопке Plays/stops animation (Проигрывать/остановить анимацию) кнопка в виде стрелки вправо. Посмотрите на результат в окне рисунка. Чтобы остановить показ анимации, щелкните по этой же кнопке Plays/stops animation (Проигрывать/остановить анимацию), теперь она выглядит как квадратик. Правее кнопки проигрывания анимации находится кнопка Selects next frame (Выбрать следующий кадр). Левее кнопки проигрывания находятся кнопки Selects previous frame (Выбрать предыдущий кадр) и Selects first frame (Выбрать первый кадр).

7. Просмотр анимации в браузере Internet Explorer. Нажмите на панели инструментов кнопку Preview in Default Browser (Просмотр в браузере) .

8. Задание времени задержки кадра (тайминг). Для каждого кадра анимации можно задать произвольное время задержки. На палитре Animation (Анимация) выделите кадр. Щелкните мышью на маленькой треугольной стрелке, расположенной ниже миниатюры кадра, рядом с ней выводится текущее время показа кадра – 0sec (0 секунд).

В открывшемся списке выберите нужный вариант.

Если нужно ввести время, которого нет в списке, например, 0.3sec, нажмите команду Other (Другие) и в поле Set Delay (Выбрать задержку) напечатайте время задержки, нажмите кнопку ОК.

9. Оптимизация анимации. Для GIF-анимации исключительно важна оптимизация, поскольку это фактически несколько изображений в одном файле. Для всех кадров анимации используются одинаковые параметры оптимизации. Параметры оптимизации устанавливаются в палитре Optimize (Оптимизация), см. верхний левый угол окна программы.

Щелкните на вкладке Optimized (Оптимизированное) в окне документа, чтобы следить за результатом оптимизации. В списке Color reduction algorithm (Алгоритм сокращения цветов) палитры Optimize (Оптимизация) выберите вариант Selective (Селективная), а в списке Dithering algorithm (Алгоритм сглаживания) – Diffusion (Диффузия) с силой около 80 %. Для данного изображения достаточно оставить 16 цветов. Выберите это значение в списке Colors (Цвета). Параметр качества Lossy (Качество) установите в районе 15. Размер файла после оптимизации вы сможете увидеть в строке состояния окна документа.

Для GIF-анимации существуют также особые алгоритмы оптимизации. Откройте меню палитры Animation (Анимация). – в правом верхнем углу палитры. Выберите команду Optimize Animation (Оптимизировать анимацию) в меню палитры Animation (Анимация). Она открывает одноименное диалоговое окно, предлагающее два направления оптимизации. Первое состоит в автоматической обрезке каждого кадра изображения, чтобы в нем оставались только изменившиеся области. Второй путь состоит в удалении всех пикселей, которые не изменяются от кадра к кадру. Оба способа оптимизации приносят очень существенный выигрыш для большинства анимированных изображений. Поставьте оба флажка и щелкните на кнопке ОК.

10. Удаление лишних кадров. Крайним способом уменьшения размера изображения можно считать удаление отдельных кадров. Критически взгляните на получившуюся анимацию и подумайте, можно ли сократить ее на кадр-другой. Выделите лишние кадры анимации в палитре Animation (Анимация). Щелкните на кнопке с изображением мусорного ведра в нижней части палитры. Выделенные кадры будут удалены.

Сохраните готовое изображение в формате PSD для редактирования: File (Файл) – Save (Сохранить).

11. Сохранение анимации для использования на Web-странице. Проверьте, чтобы на палитре Options (Опции) был выбран формат GIF. В меню File выберите команду Save Optimized As. Поверьте, чтобы в поле Тип файла стояло Image Only (*.gif) (Только изображение формата GIF), задайте имя файла (например, banner -1) и нажмите кнопку Сохранить.

12. Вставка баннера на web-страницу. Готовый баннер можно вставить на Web-страницу с помощью следующего тега изображения:

<IMG src=”banner-1.gif” width=”468” height=”60” border=”0”alt=”Free cool site”>

Но так как баннер - это всегда ссылка на рекламируемый сайт (например, www.freecoolsite.com), следует встроить тег изображения в тег ссылки:

<A href=”http://www.freecoolsite.com/”>

<IMG src=”banner-1.gif” width=”468” height=”60” border=”0”alt=”Free cool site”></a>

Примечание. В имени файла баннера рекомендуется явно указывать его размеры и, возможно. рекламируемый ресурс, например: banner_freecoolsite_468x60.gif.

Задание для практического занятия:

1.Нарисуйте заготовку для баннера «Free cool site»

2. Создайте анимацию для баннера «Free cool site»

3. Сделайте баннер «IP-telephon»

4. Создайте анимацию

Контрольные вопросы

1 Что такое GIF-анимация?

2 С помощью палитры создается анимация?

3 Какие опции анимации вы изучили?

Дата добавления: 2014-12-24