Главная / Информатика / Конспект урока по информатике на тему "Создание GIF-анимации средствами графических редакторов"

Конспект урока по информатике на тему "Создание GIF-анимации средствами графических редакторов"

Название документа Создание GIF-анимации средствами графических редакторов.docx

Муниципальное автономное образовательное учреждение для детей

г. Владимира

«Городской межшкольный учебный комбинат № 2»











Методическая разработка урока

по теме «Создание GIF – анимации средствами графических редакторов»









Разработал

учитель трудового обучения

БИЧУРЕНКО Павел Андреевич











г. Владимир 2014 г.

ПОЯСНИТЕЛЬНАЯ ЗАПИСКА



Данная методическая разработка рассчитана на 2 урока. В ходе занятий осуществляется проверка знаний по теме «растровые и векторные изображения», полученных учащимися на предыдущих уроках. Один урок отводится на выполнение практического задания. Формой проведения данного занятия является урок-практикум.

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



УРОК НА ТЕМУ: СОЗДАНИЕ GIF – АНИМАЦИИ СРЕДСТВАМИ ГРАФИЧЕСКИХ РЕДАКТОРОВ

Цель: Сформировать у учащихся умение создавать GIF-анимацию.

Задачи:

Образовательные: Сформировать знания о способах создания анимации и видах анимации. Дать понятие анимации.

Воспитательная: Воспитание информационной культуры учащихся, внимательности, дисциплинированности, усидчивости.

Развивающая: Развитие познавательных интересов, творческих способностей, самостоятельной работы, умения конспектировать.

Личностные:

- Проявление познавательного интереса к процессу обучения;

- Проявление эмоционально-ценностного отношения к изучаемой теме.

Метапредметные:

Познавательные:

- Научится применять полученные знания на практике;

- Научиться обобщать полученную информацию;

- Давать оценку своим действиям, оценивать результат;

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

Регулятивные:

- Работать по предложенному учителем плану, при выполнении практических заданий;

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

Коммуникативные:

- Научится высказывать свою точку зрения, формулировать высказывание;

- Учиться представлять другим ход работы и ее результат, выслушивать мнение других;

- Адекватно использовать речевые средства для дискуссии и аргументации своей позиции.

Предметные:

- Усвоить технологию создания GIF-анимации;

- Получить умение создавать анимацию;

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

По форме организации: Урок-практикум.

Оснащение: персональные компьютеры, проектор, экран, конспект урока, технологические карты, журнал, программное обеспечение (Inkscape, Paint.NET, UnFREEz).

План урока:

  1. Организационный момент;

  2. Актуализация знаний;

  3. Постановка целей урока;

  4. Работа по теме урока;

  5. Практическая работа «Создание анимации»;

  6. Фронтальный опрос;

  7. Подведение итогов урока. Рефлексия.



Ход урока:

  1. Организационный момент.

- Приветствие учащихся.

- Краткий рассказ о том, что будет изучено на уроке.

2. Актуализация знаний.

- Какие типы графики существуют? (растровая, векторная, фрактальная, анимация, 3D).

- На чем базируется построение растровых и векторных графических изображений? (на пикселях – строках и столбцах; на графических примитивах).

3. Постановка целей урока.

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

- В каких программах она создается?

Сегодня на уроке мы рассмотрим создание анимации с помощью графических редакторов.

4. Работа по теме урока.

С помощью демонстрации «Анимация» показать различные примеры анимации и их создание.

Анимация – это создание иллюзии движения объектов на экране монитора. Компьютерная анимация использует быструю смену кадров на экране монитора. Чем больше кадров меняется за одну секунду, тем более плавно движется объект.

- В каких компьютерных программах вы сталкивались с анимационными эффектами? (в компьютерных презентациях).

- Какие типы анимации вы использовали? (смену слайдов, размещение объектов на слайдах, анимационные эффекты при появлении текста).

Запишем в тетради определение GIF-анимации.

GIF-анимация – это последовательность растровых графических изображений, хранящихся в одном файле в формате .gif. При создании GIF-анимации можно задать величину задержки каждого кадра; чем она меньше, тем лучше качество анимации. Можно установить количество повторов последовательности кадров. Большое количество кадров ведет к улучшению качества анимации, но при этом увеличивается размер GIF-файла.

Еще один тип анимации – flash-анимация.

Flash-анимация – это последовательность векторных рисунков. Ее огромный плюс в том, что не нужно прорисовывать каждый кадр. Достаточно нарисовать ключевые кадры и задать тип перехода между ними и редактор автоматически построит промежуточные кадры. Если кадров много, то анимация получается плавной, если мало, то быстрой. Поэтому можно задать количество кадров, появляющихся в секунду. Чем их больше, тем качество анимации лучше. Еще один положительный момент в том, что файлы с Flash-анимацией занимают немного места, поэтому широко используются на Web-сайтах в Интернете.

5. Практическая работа «Создание GIF-анимации средствами графических редакторов» (Технологическая карта).

Сначала демонстрирую процесс создания анимации на экране, затем учащиеся садятся за персональные компьютеры, и выполняют задание. Если возникают проблемные моменты, решаем их в индивидуальном порядке.

6. Фронтальный опрос.

  1. Что такое пиксель? Пиксель – минимальный участок изображения, для которого независимым образом задается цвет.

  1. Что такое разрешающая способность растрового изображения? Разрешающая способность растрового изображения определяется количеством точек по горизонтали и вертикали на единицу длины изображения.

  1. Что такое глубина цвета? Количество информации, которое используется для кодирования изображения, называется глубиной цвета.

  2. Назовите 3 палитры цветов в системах цветопередачи? (RGB, CMYK, HSB). Какая цветопередача применяется чаще и где? (RGB – для отображения на мониторе)

  3. Что такое растровое изображение? Растровые изображения формируются из точек различного цвета, которые образуют строки и столбцы.

  4. Что такое векторная графика? Векторные рисунки формируются из базовых графических объектов, для каждого из которых задаются координаты опорных точек, формулы рисования объекта, а также цвет, толщина и стиль линии его контура.

  5. Назовите форматы векторных и растровых изображений. (jpeg, gif, png, svg, wmf и т.д.)

  6. Приведите примеры растровых и векторных графических редакторов (Paint.NET, GIMP, Photoshop, Inkscape, Corel Draw и др.).

  7. Назовите три базовых цвета, с помощью которых формируется изображение? (красный, зеленый, синий)

  1. Подведение итогов урока. Рефлексия.

Выставление оценок.

Вопросы рефлексии:

- Какие достоинства и недостатки GIF-анимации вы узнали на уроке?

- Какие трудности возникли при конвертации векторного изображения в растровое?

- Знаете ли вы более простой способ создания анимации? Какой?

Название документа Технологическая карта.docx

hello_html_m737305a4.gifhello_html_76d65fbd.gifhello_html_665e480c.gifhello_html_b68607a.gifТЕХНОЛОГИЧЕСКАЯ КАРТА ПРАКТИЧЕСКОГО ЗАДАНИЯ

Создание GIF-анимации средствами графических редакторов


  1. Рисуем изображение:

Запускаем векторный редактор Inkscape: Пуск -> все программы->Inkscape.

Создадим векторный смайлик! Сначала поменяем размеры изображения. Для этого откроем меню «Файл» и выберем пункт «Свойства документа» и зададим размеры изображения 600х600 пикселей.

hello_html_m3828aef0.png

Увеличим масштаб изображения и нарисуем круг произвольного размера. Для этого выберем инструмент «Рисовать круги, эллипсы и дуги».

hello_html_m364c3b0e.png

Щелкнув правой кнопкой мыши по кругу, выберем пункт контекстного меню «Заливка и обводка». Выбираем вкладку «Заливка» -> пункт «Радиальный градиент».

hello_html_2a3d811c.pngЩелкаем кнопку «Изменить…», тем самым выбираем цвета градиента. Цвета можно выбрать любые по вкусу.

hello_html_6a89b59f.png

И обязательно ставим параметр непрозрачность на максимум.

hello_html_m77e72df7.png

Теперь круг стал объемным. Нарисуем для смайлика глаза с помощью инструмента «Рисовать круги, эллипсы и дуги». Нарисовав круг, можно видоизменить его форму с помощью инструмента «Редактировать рычаги контура или рычаги узлов» выбрав пункт «Преобразовать выбранный объект в контур».

hello_html_587c681.png

Потянув за контуры можно поменять форму круга.

hello_html_24f9b52d.png

Щелкнув правой кнопкой мыши по кругу, выберем пункт контекстного меню «Заливка и обводка». Выбираем вкладку «Заливка» -> пункт «радиальный градиент».

hello_html_626b96f.png

Правим градиент с помощью инструмента «Создавать и править градиенты». После этого выбираем вкладку «Обводка» -> пункт «Линейный градиент».

hello_html_1a5fc1b0.png

Увеличим ширину обводки, для этого кликнем вкладку «Стиль обводки» и поменяем значение толщины обводки по своему усмотрению.

hello_html_m38a56eaa.png

Для большего объема можно выделить объект и вызвать вкладку «Фильтры» -> выбрать пункт «Выпуклости» -> «Выпуклости HSL».

hello_html_33b62e39.png


Нарисуем зрачок с помощью инструмента «Рисовать круги, эллипсы и дуги», выбрав черный цвет.

hello_html_6e30601b.pnghello_html_m1127f09e.jpg

Поверх черного круга нарисуем эллипс белого цвета. Щелкнув правой кнопкой мыши по эллипсу, выберем пункт контекстного меню «Заливка и обводка». Выбираем вкладку «Заливка» -> пункт «Линейный градиент» и меняем его направление.


hello_html_m1f86a5cf.pnghello_html_5215c884.jpg

Таким же образом рисуем второй глаз, можно другой формы и размера. При желании объекты можно перемещать. Точно также можно нарисовать рот смайлика.

hello_html_m2976a8e9.pnghello_html_m7e19a91a.png

Ну, вот практически и готов смайлик. Осталось нарисовать тень под ним. Для этого выберем инструмент «Рисовать круги, эллипсы и дуги», и нарисуем эллипс под смайликом, выбрав черный цвет.

hello_html_73dd41c3.png

Чтобы эллипс не перекрывал смайлик, опустим его на слой ниже, выбрав его и нажав клавишу «PgDn» или выбрав вкладку «Объект» -> «Опустить». Аналогично объект можно поднять на слой выше, выбрав его и нажав клавишу «PgUp» или выбрав вкладку «Объект» -> «Поднять».

Чтобы тень не была такой резкой, нужно выбрать для нее «Радиальный градиент» и изменить параметр «Размывание» в контекстном меню «Заливка и обводка».

hello_html_m5a9df66a.png

Теперь с помощью инструмента «Выделять и трансформировать объекты» заключим все объекты кроме тени.

hello_html_6a36efd0.png

Теперь нужно сгруппировать выбранные объекты в один. Для этого щелкаем вкладку «Объект» -> пункт «Сгруппировать» или комбинация клавиш Ctrl+G.

hello_html_6e838ddd.png

Получится один единый объект.

hello_html_7ac05064.png

Ну, вот и все, готово! Подошло время для создания анимации.


  1. Создание анимации:

Создадим папку в удобном для вас месте для помещения в нее будущих кадров анимации и назовем ее «Смайлик».

Первый кадр почти готов, осталось его перевести в растровый формат GIF. Но вот проблема, векторный редактор Inkscape не поддерживает сохранение файла в данном расширении. Можно сохранить в любом другом растровом формате, например в PNG. Для этого откроем меню «Файл» и выберем пункт «Экспортировать в растр…». Выбираем путь сохранения и имя файла, например кадр1.png. После этого нажимаем кнопку «Экспорт», тем самым сохраняем изображение в папке «Смайлик».

hello_html_c2f5fde.png

Теперь полученное изображение нужно конвертировать из формата PNG в GIF. Это можно сделать с помощью любого растрового редактора, например Paint.NET. Открываем изображение в редакторе с помощью команды «Файл» -> «Открыть». В появившемся окне выбираем файл «кадр1».

hello_html_m39c0315e.png

Теперь сохраним это изображение в формате GIF с помощью команды «Файл» -> «Сохранить как…». В появившемся окне задаем имя файла – кадр1 и тип файла – GIF и щелкаем кнопку «Сохранить».

hello_html_51a12db5.png

Первый кадр готов! Возвращаемся в редактор Inkscape, поднимаем смайлик над тенью, сжимаем его с боков и уменьшаем тень. Теперь сохраним данное изображение как кадр2.png и аналогично конвертируем его в формат GIF. Точно также можно создать еще несколько кадров.

C:\Users\1\Desktop\Смайлик\кадр1.gifC:\Users\1\Desktop\Смайлик\кадр2.gifC:\Users\1\Desktop\Смайлик\кадр3.gif

C:\Users\1\Desktop\Смайлик\кадр4.gifC:\Users\1\Desktop\Смайлик\кадр5.gifC:\Users\1\Desktop\Смайлик\кадр6.gif

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

hello_html_m74053757.png

Просто перетащите файлы с раширением GIF в окно программы и щелкните по клавише «Make Animated GIF».

hello_html_m390914fd.png

Откроется окно, где нужно указать путь для сохранения файла и имя файла.

hello_html_777b2115.png

Щелкаем по кнопке сохранить и анимация готова! Получился напуганный прыгающий смайлик! Надеюсь, вам понравился этот урок, и ваш смайлик будет веселым!

Вы можете создать собственную анимацию из любых изображений или фотографий.

10


Конспект урока по информатике на тему "Создание GIF-анимации средствами графических редакторов"
  • Информатика
Описание:

Данная методическая разработка рассчитана на 2 урока. В ходе занятий осуществляется проверка знаний по теме «растровые и векторные изображения», полученных учащимися на предыдущих уроках. Один урок отводится на выполнение практического задания. 

 

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

Автор Бичуренко Павел Андреевич
Дата добавления 10.01.2015
Раздел Информатика
Подраздел
Просмотров 1121
Номер материала 51661
Скачать свидетельство о публикации

Оставьте свой комментарий:

Введите символы, которые изображены на картинке:

Получить новый код
* Обязательные для заполнения.


Комментарии:

↓ Показать еще коментарии ↓