Урок "Анимация на Adobe PhotoShop. Создание GIF-изображений"

Тема Анимация на Adobe PhotoShop. Создание GIF-изображений.

Цель занятия:

·        показать применение полученных практических навыков на практике.

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

Задачи:

• обучающие – повторить, закрепить и углубить знания студентов (работа с панелью Animation редактора Adobe PhotoShop.)
• развивающие – сформировать навыки по практическому решению поставленных задач;
• воспитывающие – развитие внимательности, практичности.

Тип занятия: комбинированное

Программное обеспечение: программа для обработки растровых изображений Adobe PhotoShop.

Формы организации работы на занятие: работа в микро-группах.

Учащиеся должны знать основные понятия:

• графический редактор;
• инструменты редактора;
• размер изображения;
• форматы файлов изображений;
• слой;
• режим быстрой/обычной маски;
• перемещение слоя;
• увеличение/уменьшение изображения.
• настройку кадров панели редактора Adobe PhotoShop.

Учащиеся должны уметь:

• открыть необходимые файлы;
• выделить фрагмент изображения различными способами;
• создать новый слой на фоновом изображении;
• отредактировать слои на фоне;
• сохранить полученное изображение в различных форматах.
• пользоваться опциями панели  Animation

Литература.

1.     Скот Келби. Adobe Photoshop CS5. Справочник по цифровой фотографии. Вильямс, 2011 г.- 432 с.

2.     Т. И. Немцова, Ю. В. Назарова. Компьютерная графика и Web-дизайн. Практикум по информатике . Профессиональное образование. Форум, Инфра-М, 2010 г.- 288с.

3.     Юрий Гурский, Ирина Гурская Photoshop CS2. Трюки и эффекты. Питер, 2006 г.- 528 с.

Методы и приёмы: пояснительно-иллюстративная, практическая

Оборудование и наглядные пособия: файлы-заготовки изображений, проектор с выводом на экран файла примера готового изображения.

План занятия

№	Этап	Мин.
1	Организационный момент	3
2	Сообщение темы и цели занятия.	2
3	Актулизация опорных знаний и навыков.	10
4	Мотивация учебной деятельности.	2
5.	Изучение нового материала	13
6.	Практическая работа “Создание GIF-анимации”	40
7.	Подведение итогов занятия	10

Содержание занятия

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

2.     Сообщение темы и цели занятия.

Сегодня на занятии  мы научимся создавать анимированные изображения (GIF-изображения),а для это повторим знания полученные на предыдущих занятиях.

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

Пройдем небольшой тест.

Задание 1. Расставить в правильном порядке расширения в соответствии с форматом
1.       *.psd 2.       *.jpg 3.       *.gif	a.      формат для хранения фотографий b.     формат редактора, в котором сохраняются все составные части изображения c.      формат для хранения изображений с прозрачным фоном
Ответ: 1 - ___; 2 - ___;3 - ___;
Задание 2. Определите название инструмента по его изображению
___________________ ___________________ ___________________ ___________________ ___________________
Задание 3.Определите набор каких инструментов не предназначен для выделения
1.     2.     3.     4.     5.
Ответ:
Задание 4. Как создать новый слой
1.     Слой > Новый > Слой (Layer > New > Layer) 2.     Ctrl + Shift + N 3.     Нажать на значок 4.     Файл > Новый > Слой (Layer > New > Layer)
Ответ:
Задание 5 Вставьте пропущенные слова.
(……..) – исходное изображение. Этот слой всегда самый дальний, он не может быть перемещен, не может иметь прозрачных участков. (…….) – добавляемое изображение на фон. Можно. Для этого существует Инструмент (,,,,,,,,,) в списке слоев делает слой видимым. Оставив его только у того слоя, которым мы занимаемся в данный момент и, выделив сам слой, мы можем редактировать именно его. Инструмент (………) запрещает редактирование слоя

4.  Мотивация учебной деятельности.

Для пользователей Интернета уже давно стали привычными появляющиеся почти на каждой Web-странице «живые» мультипликационные картинки. Можно сказать что они стали стандартом для рекламных заставок, баннеров, поздравительных открыток.. Это и понятно: анимация привлекает внимание гораздо сильнее, чем статические картинки, и, кроме того, на не­большой площади можно поместить значительно больше информации за счет чередую­щихся кадров.

5.     Изучение нового материала

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

В прошлом, в традиционной анимации кадры рисовались «вручную». В последние годы анимационные технологии переведены на компьютерную основу. И хотя концепции разработки анимации остались прежними, используемые методы значительно отличаются. Ключевым моментом, определяющим качество любой анимации и фильма вообще, является количество кадров, использованных для их создания. Чем больше кадров содержит анимация, тем более сглаженным бывает движение в процессе проигрывания. Если кад­ров недостаточно, движение будет неравномерным.

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

В настоящее время существует несколько технологий создания анимации для WWW: анимационный (animated) GIF, Flash, Java и JavaScript. Из этих технологий анимацион­ный GIF является, пожалуй, самым простым в создании, и практически любой современ­ный браузер может его показать.

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

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

 Анимационные GIF-файлы мо­гут быть легко подготовлены в программе Adobe PhotoShop.

Увидеть анимацию такого типа можно, например, на сайте по адресу http://acidic-gif.narod.ru/ и на многих других сайтах, адреса которых вы можете узнать, задав поиск фразы «GIF-анимация» на любом из поисковиков в Интернете (Яндекс, Google и т.п.).

6.     Практическая работа “Создание GIF-анимации”

Шаг 1. Создайте новый документ размером 250 х 250 пикселей и установите разрешение (resolution) до 70 пикселей. Цвет фона для баннера будет такой # f2f2f2.

Шаг 2. Поместите логотип в верхней центральной части баннера

Шаг 3. Напишите слоган под логотипом.

Шаг 4. Нарисуйте прямоугольник  и установите цвет # b90909.

Откройте диалоговое окно Стили слоя (layer styles)и настройте  Тень (Drop shadow). Уменьшите расстояние (distance ) иразмер  (size ) на 2px.

Теперь добавьте Наложение градиента (Gradient Overlay) и установите режим смешивания на Умножение  (Multiply) с непрозрачностью 28%.

Добавьте обводку и уменьшите её  размер до 1 пикс. Установите цвет # a31b1b.

Шаг 5. Добавим список предложений. У нас это будет Компьютерное отделение , Строительное отделение, Экономическое отделение, отделение Правоведенья, отделение социальной работы как показано на рисунке.

Растрируйте текстовые слои и создайте Обтравочную маску (Сreate a clipping mask).

Шаг 6. Теперь поместите привлекательную картинку. В нашем случае мы использовали эмблему техникума, но вы можете использовать все, что подходит вам.

 

Шаг 7. Добавим ещё нужный текст ниже картинки, которую мы вставили в шаге 6.

Шаг 8. Создайте овальную фигуру  и установите цвет # fdfcfc.

Откройте диалоговое окно Стили слоя (layer styles) и настройте  Тень (Drop shadow). Уменьшите расстояние (distance ) иразмер  (size ) на 1px.

Включите и проверьте Внутреннее свечение (Inner glow) и оставьте в настройках  все как есть.

Добавьте Наложение градиента (Gradient Overlay) с Непрозрачностью (Opacity)  6%

Шаг 9. Теперь, когда мы закончили создание всех наших слоёв, мы готовы приступить к работе по анимации. Во-первых, откройте панель анимации  Окно – Анимация (Window> Animation). Я буду использовать панель анимации по Временной шкале (Timeline Animation), а не в Покадровой анимации (frame animation).

Примечание: Эта функция доступна только в Photoshop Extended.

Теперь устанавливаем все слои видимыми, но уменьшаем их непрозрачность до 0%. Фон не трогаем.

Шаг 10. Смотрите изображения ниже для инструкций о том, как вставлять ключевые кадры и где увеличивать непрозрачность. Для каждого созданного нами элемента  отдельный скриншот с инструкцией.

Прим. переводчика: ключевые кадры можно будет перемещать  мышкой. Так же можно выделить несколько ключевых кадров для перемещения.

(нажмите на изображение, чтобы увеличить)

(нажмите на изображение, чтобы увеличить)

(нажмите на изображение, чтобы увеличить)

(нажмите на изображение, чтобы увеличить)

(нажмите на изображение, чтобы увеличить)

(нажмите на изображение, чтобы увеличить)

(нажмите на изображение, чтобы увеличить)

Шаг 11. Ваша Временная шкала (Timeline Animation),  должна выглядеть примерно так, как ниже.

 
(нажмите на изображение, чтобы увеличить)

Шаг 12. Ну вот, мы и завершили нашу анимацию. Нажмите кнопку Пуск (Play), чтобы увидеть результат. Вы можете всё подстроить в случае необходимости. Чтобы сохранить ваш баннер, перейдите в меню Файл - Сохранить для веб и устройств(File - Save for Web & Devices). Установите настройки как  на скриншоте ниже и нажмите кнопку Сохранить.

7.Подведение итогов занятия.

Проверка самостоятельной работы студентов, анализ работ.  Выставление оценок.

Домашнее задание.

Использование промежуточных кадров при создании анимации.

 Литература

http://photoshop.demiart.ru