ТЕХНОЛОГИЧЕСКАЯ КАРТА ПРАКТИЧЕСКОГО ЗАДАНИЯ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

г. Владимира

«Городской межшкольный учебный комбинат № 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.                 Что такое пиксель? Пиксель – минимальный участок изображения, для которого независимым образом задается цвет.

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

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

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

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

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

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

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

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

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

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

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

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

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

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