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

Приемы создания анимации в 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 с.: илл.

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

Читать еще:

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

Тренинг для учителей "Люби себя" :: Личностный алгоритм продуктивного педагогического труда :: Система уроков по теме: "Лексика в 5-х классах спортивной направленности" :: Методика проведения методического семинара для учителей школы "Технология модульного обучения" :: Опыт использования проектной технологии на уроках иностранного языка :: Роден ( Rodin ), 2017 :: Дом и дача/Мебель/Шкафы, комоды, полки/Комоды/Комоды и тумбы / Ангстрем / Тумба Матисс 327.01 Ангстрем ::

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

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

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

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

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

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

Почему газовая плита - это вредно

Кухня с газовой горелкой обычно является главным источником загрязнения воздуха, причем, не только на кухне, но и во всей квартире.

Букеты на 1 сентября из чая, кофе и конфет!

На 1 сентября все дети идут в школу с цветами. И на общем фоне будет выгодно выделяться школьник с оригинальным подарком - букетом, составленным из чая, кофе и конфет!

Итоговый тест по курсу 10-го класса

Данные тесты составлены для итоговой проверки знаний учащихся 10-х классов, обучающихся по учебнику "Алгебра и начала анализа - 10" авторов С.М.Никольского, М.К.Потапова и др. с целью приобщения их к единому государственному экзамену. В работу включены 26 заданий для каждого варианта. Всего 4 варианта. Все задания распределены по трем уровням сложности А, В и С подобно заданиям ЕГЭ. Учтены все темы, изучающиеся в данном курсе алгебры и начал анализа, а также задания по алгебре 7–9 кл. и геометрии. В работе приведены ответы к заданиям.

Познавательно-исследовательский, творческий проект с детьми второй младшей группы «Первоцветы – дар крымского леса»

Дети не имеют знаний о бережном отношении к природе родного края и навыков правильного поведения в природе, еще не сформировано экологическое сознание, а основы его закладываются в дошкольном возрасте. Цель проекта: формирование представлений о первых цветущих растениях крымского леса – первоцветах, опыт экологически грамотного поведения детей в природе.

Путешествие по координатной плоскости

По курсу математики автора Л.Петерсон в 4-м классе изучается тема «Координатная плоскость». Тема оказалась настолько интересной, что дети сами придумывали и составляли различные фигуры на координатной плоскости. Так возникла идея проведения урока закрепления по данной теме в игровой форме, который построен как путешествие по литературному произведению Стивенсона «Остров сокровищ» с применением различных форм организации учебной деятельности учащихся. Чередование различных видов деятельности способствует поддержанию работоспособности учащихся, поэтому урок насыщен многообразием заданий.


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

Опыт работы по организации и проведению педагогического совета, рассматривающего работу педагогов с детьми, требующими особого внимани
контакты
 
Рейтинг@Mail.ru
ADD