Создание анимации средствами Adobe Photoshop CS3».

Государственное бюджетное профессиональное образовательное учреждение

Технологический колледж полиграфии и дизайна

План

открытого урока

по ОП 07 «Основы компьютерной графики и дизайна»

тема: «Создание анимации средствами Adobe Photoshop CS3».

по профессии: «29.01.24 Оператор электронного набора и верстки»

в группе I

Разработала:

Хачатурянц А.Г. – преподаватель спецдисциплин

мастер производственного обучения

высшей квалификационной категории

Владикавказ 2022

План урока

по ОП 07 «Основы компьютерной графики и дизайна»

Тема урока:

«Создание анимации средствами Adobe Photoshop CS3».

Группа № 1 Дата проведения 21.03.2022

Цель урока:

Образовательная: обучающиеся освоят способ создания анимированных изображений средствами программы Adobe Photoshop CS3;

Воспитательная:обучающиеся узнаюткак использовать возможности программы Adobe Photoshop CS3 при создании анимированных изображений;

Развивающая:развивать интерес к выбранной профессии, навыки

Методы: Проблемное изложение, исследование и практическая отработка)

Тип урока – Комбинированный

Оборудование: ПК, ОС Win7, Adobe Photoshop CS3.

Ход урока.

1. Орг.момент .

2. Активизация опорных знаний.

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

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

- Какие изображения создаются в программе Adobe Photoshop? (растровые);

- перечислить основные группы инструментов программы.

Тест

(проводится электронное тестирование в программе MyTest,

время - 5 мин, программа ограничивает время тестирования и оценивает результат).

1. Программа Photoshop предназначена для:

1. для работы с векторной графикой

2. для работы с растровой графикой

3. для работы с векторной и растровой графикой

1. Для копирования выделенного участка текста необходимо:

1. Выбрать инструмент Перемещение и перенести на другое место

1. В меню Файл нажать на Копировать, затем на Вставить.

2. Выбрать инструмент Перемещение и удерживая ALT, перенести на другое место

1. Для выделения эллиптической области из центра, необходимо:

1. взять инструмент Эллиптическое выделение и удерживая ALT произвести выделение

2. взять инструмент Эллиптическое выделение и удерживая CTRL произвести выделение

3. взять инструмент Эллиптическое выделение и удерживая SHIFT произвести выделение

4. Режим RGB означает

1. зеленый, красный, черный

2. красный, зеленый, синий

3. красный, коричневый, желтый

4. красный, синий, желтый

5. Трансформация выделенного объекта - это

1. копирование какого-то участка

2. немедленное сохранение файла

3. изменение размеров и формы объекта

4. изменение размеров и формы выделения

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

1. прямоугольной области

2. эллиптической области

3. области одного цвета и оттенков

1. Для гибкого изменения масштаба отображения в рабочем окне используется

1. палитра Навигатор

2. палитра Кисть

3. палитра Событий

4. палитра инструментов

1. Для выполнения расширения или сжатия выделенной области необходимо выполнить следующие действия

1. Правка, Трансформировать

2. Выделить, Модифицировать

3. Выделить, Трансформировать

1. Для выбора цвета на изображении используется:

1. инструмент Кисть

2. инструмент Пипетка

3. инструмент Баночка с краской

4. инструмент Штамп

1. Для выделения многоугольников используется инструмент:

1. волшебная палочка

2. прямоугольное выделение

3. лассо

4. эллиптическое выделение

3.Изложение нового материала.

Ключевое слово темы урока скрыто в кроссворде.

1. Инструмент выделения

2. Окно отображающее изображение

3. Инструмент рисования

4. Вариант цветового решения изображения

5. Инструмент для удаления областей

6. Группа фильтров

7. Пункт главного меню, окно, элемент изображения

8. Окно, отображающее действия с изображением.

Загрузим программу Adobe Photoshop. (пригласить выполнить запуск программы обучающегося).

В отличие от предыдущих версий, в CS3 совмещены AdobePhotoshop и ImageReady, что позволяет при создании анимированной картинки не переходить из одной программы в другую и значительно упрощает работу.

Рассмотрим окно анимации:

Посмотрим как создается простейшее анимированное изображение.
Сделаем квадратный баннер, размером 125х125:

Рис.1. Квадратный баннер

И
на черном прямоугольнике я нарисовала логотип, большое, но такое одинокое!

Рис.2. Одинокий логотип

Попробуем его теперь оживить всего лишь легким движением руки с помощью мышки.

1. Щелкаем мышкой на верхней правой стрелочке панели Animation (Анимация) и выбираем New Frame (Новый Кадр). На панели Animation у нас появился новый кадр, точно такой же, как и первый.

2. Переходим на вкладку Layers (Слои), нажимаем на слой, в котором у нас находится сердце, чтоб сделать его текущим.

3. В окошке Opacity (Видимость) уменьшаем эту видимость до 50%.

Рис.3. Уменьшаем видимость до 50%

1. Возвращаемся на панель Animation (Анимация), опять нажимаем на стрелочку в верхнем правом углу панели и выбираем Tween (Движение).

2. В появившемся диалоге Tween ставим значение 10:

8

8

1. И у нас сами собой получились восемь чудесных кадров:

Р
ис.5. Живой логотип

1. И
   если теперь мы нажмем на кнопку воспроизведения, то увидим, как наш

логотип собирается в соты. как живой! Пчелка, пчелка, что случилось?

Осталось сохранить нашу анимацию File | OptimizedAs (Файл | Оптимизировать Как), сохранить его в формате gif, потом открыть его и любоваться на свое творение.

Для закрепления учащимся предлагается проделать данную работу по предложенному алгоритму на своих рабочих местах.

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

Мы продолжим работу с анимациейна других уроках и на производственном обучении.

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