детские
Дима Шпилер - детский психолог, тренер. Официальный сайт.
Дима Шпилер - детский психолог, тренер. Официальный сайт.
Поддержите сайт - подпишитесь на канал в Яндекс.Дзене!

Приемы создания анимации в Image Ready : Информатика

Фирма Adobe включила в Photoshop с версии 5.5 программу ImageReady, которая позволяет создавать анимационные изображения с помощью этого графического пакета. Данный урок рассчитан на тех, кто имеет практические навыки работы со слоями и инструментами выделения в программе PhotoShop.

Цели урока

  • Обучающая: в рамках данного урока учащемуся необходимо освоить приемы создания анимации из заранее подготовленных файлов с фазами движения, создание промежуточных кадров анимации, сохранение GIF-файла для Web-страницы.
  • Развивающая: умение оперировать новой терминологией, умение сравнивать и обобщать.
  • Воспитательная: воспитание информационной культуры, положительное отношение к знаниям.

Тип урока: урок изучения нового материала.

Вид урока: практическая работа.

Методы: объяснительно-иллюстративный, репродуктивный.

Используемые материалы:

  • класс, оборудованный ПК;
  • PhotoShop не ниже версии 5.5;
  • проектор;
  • файлы изображений.

Ход урока

Проще всего в программе ImageReady, реализуется анимация из заранее подготовленных файлов с фазами движения.

Упражнение 1. Полет бабочки

Запустите Photoshop и создайте новый файл размером 100 x 100 пикселей. Залейте фон зеленым цветом. Вставьте в этот файл, на отдельный слой изображение бабочки (рис.1).

Рис.1

Рис. 1

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

Рис. 2

Рис. 2

Рис. 3

Рис. 3

Продублируйте слой 1 (рис.4).

Рис. 4

Рис. 4

Сожмем изображение бабочки по горизонтали. Edit (Редактирование) > Free Transform (Произвольная трансформация). Изменим размер изображения по ширине, заменив величину W=100% на 80% (рис.5)

Рис. 5

Рис. 5

Отключить (рис.6) Рис. 6 (показывает видимость слоя) в слое 1, для того чтобы увидеть, что получилось в слое 2 (рис.7).

Рис. 7

Рис. 7

Повторите шаги для 3-х предыдущих действий, выполнив произвольную трансформацию по ширине на 60%, 40% и 20% используя направляющую, как ось симметрии. Получим 6 слоев (рис.8).

Рис. 8

Рис. 8

Кликните на кнопке Jump to ImageReady (перейти в ImageReady) (рис.9).

Рис. 9

Рис. 9

Откроется приложение ImageReady и файл загрузится автоматически.

Теперь откройте или найдите на экране панель анимации. Если она не видна изначально, её можно открыть с помощью меню Window (Окно) > Show Animation (Показать панель анимации) (рис.10).

Рис. 10

Рис. 10

На панели анимации есть треугольная кнопка справа вверху. В меню команд палитры Animation выбираем команду Make Frames From Layers, что позволяет из каждого отдельного слоя изображения создать свой кадр (рис.11).

Рис. 11

Рис. 11

Теперь у нас есть шесть кадров (рис.12).

Рис. 12

Рис. 12

Теперь можно нажать кнопку play (рис.13) Рис. 13 и проиграть анимацию (рис.14) Рис. 14.

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

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

Упражнение 2. Разлетающийся текст

Запустите Photoshop и создайте новый файл размером 300 X 150 пикселей. Залейте фон черным цветом. В нижней части панели слоев кликните на иконке New Layer (Новый слой) (рис.15).

Рис. 15

Рис. 15

Выберите цвет для текста и возьмите инструмент Type Tool (Набор текста) (рис.16).

Рис. 16

Рис. 16

Наберите первую букву. Теперь повторите этот шаг так, чтобы каждая буква слова оказалась на отдельном слое (рис.17).

Рис. 17

Рис. 17

Кликните на кнопке Jump to ImageReady (перейти в ImageReady) (рис.18).

Рис. 18

Рис. 18

Откроется приложение ImageReady и файл загрузится автоматически. Теперь откройте или найдите на экране панель анимации. Если она не видна изначально, её можно открыть с помощью меню Window (Окно) > Show Animation (Показать Animation).

В нижней части этой панели, кликните на кнопке New Frame (Новый кадр), чтобы сделать копию текущего кадра (рис.19).

Рис. 19

Рис. 19

Получим два одинаковых кадра на панели анимации (рис.20).

Рис. 20

Рис. 20

На панели слоев кликните на слое, с буквой Ш (рис.21).

Рис. 21

Рис. 21

Выберите инструмент Перемещения и используя стрелки на клавиатуре переместите букву так, чтобы она была левее (или правее, выше, ниже) видимого изображения (рис.22) iРис. 22, (рис.23).

Рис. 23

Рис. 23

Повторите шаги для остальных букв. В палитре анимации, (первый кадр должен быть просто черным) поменяйте кадры местами, для этого надо перенести первый кадр на второй кадр. 2-й кадр теперь черный (рис.24).

Рис. 24

Рис. 24

Кликните на кнопке Tween (рис.25) Рис. 25 (генерация промежуточных кадров), которая расположена в нижней части панели анимации. Откроется окно параметров. Введите следующие значения:

Tween With: Proveons Frame

Frames to: 5

Layers: All Layers

Parametrs: все галочки

Панель анимации теперь должна содержать 7 кадров (6 с текстом +1 черный) (рис.26).

Рис. 26

Рис. 26

Установите небольшую паузу (2 секунды) для первого кадра, чтобы текст можно было прочитать (рис.27).

Рис. 27

Рис. 27

Теперь можно нажать кнопку play и проиграть анимацию (рис.28).

Рис. 28

Рис. 28

Упражнение 3. Морфинг

Морфинг - это процесс, при котором один объект плавно меняется (претекает) в другой.

Загрузите ImageReady. С помощью меню File (файл) > New (новый) создайте новый файл с нужными размерами и вставьте в этот файл, на отдельный слой изображение лягушки (рис.29).

Рис. 29

Рис. 29

На другой слой вставьте изображение замка, которое будет постепенно появляться (рис.30).

Рис. 30

Рис. 30

Сейчас панель слоев выглядит так (рис.31).

Рис. 31

Рис. 31

Удалите первый слой в корзину, панель слоев выглядит так (рис.32).

Рис. 32

Рис. 32

Теперь откройте или найдите на экране панель анимации. Если она не видна изначально, её можно открыть с помощью меню Window (окно) > Show Animation (показать панель анимации) (рис.33).

Рис. 33

Рис. 33

На панели анимации есть треугольная кнопка справа вверху. В меню команд палитры Animation выбираем команду Make Frames From Layers, что позволяет из каждого отдельного слоя изображения создать свой кадр (рис.34).

Рис. 34

Рис. 34

Теперь у нас есть два кадра (рис.35).

Рис. 35

Рис. 35

На панели анимации есть треугольная кнопка справа вверху. Кликните на этой кнопке и выберите в меню пункт Tween... или кликните на кнопке (генерация промежуточных кадров). Откроется окно параметров (рис.36).

Рис. 36

Рис. 36

Нажмите OK, и программа сама добавит новые кадры (рис.37).

Рис. 37

Рис. 37

Теперь можно нажать кнопку play и проиграть анимацию (рис.38).

Рис. 38

Рис. 38

 Литература

  1. Панкратова Т. Photoshop 6. Учебный курс — СПб.: Издательство "Питер", 2001.
  2. Эффективная работа с Photoshop 5.5 — СПб.: Издательство "Питер", 2000.
  3. Бурлаков М. Photoshop 6, ImageReady 3. Справочник. — СПб. Издательство "Питер", 2001.
  4. Стразницкас М. Photoshop 5.5 для подготовки Web-графики. Учебный курс — СПб.: Издательство "Питер", 2000. — 480 с.: илл.

© Блог Димы Шпилера / Школа и школьники

Читать еще:

Новые материалы:

Гиннес-шоу "Самые, самые…" :: Открытый урок литературного чтения "Жанр-сказка" Х.К. Андерсена "Дикие лебеди" :: Возможности использования технологии проблемного обучения через учебную деятельность по системе Л.В. Занкова на тему: "Наречие. Образование и правописание наречий". 4-й класс :: Урок геометрии во 2-м классе на тему: "Путешествие по стране Геометрия" :: Модуль по теме "Участие кожи в терморегуляции. Закаливание" :: Натуральные упыри ( Eat Locals ), 2016 ::

Оставить комментарий (facebook):
Комментировать через ВКонтакте:

Оставить отзыв с помощью аккаунта Google+:

Самое популярное:
Карта загрязнения воздуха онлайн, обновляется в режиме реального времени

Экологическая карта состояния воздуха, которым мы дышим. В режиме реального времени.

Звуко-буквенный разбор слов

Научить детей реально оперировать звуками, т.е. развивать фонетический слух.

Российские студенты продолжают сходить с ума. Теперь и в Орле!

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

Масленица - 2018

Бакшевская Масленица (Маслострой) - самая массовая самодеятельная масленица современной России - ждет новых участников!


Школьные занятия:
RSS (видео) // RSS (статьи)
Педагогические материалы:

контакты
 
Рейтинг@Mail.ru