Разделы: Информатика

Цель урока: Создание анимированного изображения на тему: «Море»

Задачи урока:

Образовательная – создать анимированное изображение с помощью графического редактора Paint и Power Point на тему: «Море»
Воспитательная- содействовать в ходе урока формированию внимательности, самостоятельности.
Развивающая - развитие творческого мышления учащихся.

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

Структура урока.

Организационный этап. (2 мин.)
Вводно-мотивационный этап. (10 мин.)
Операционно-сордержательный этап. (20 мин.)
Рефлексивно – оценочный этап. (5 мин).
Домашнее задание (3 мин.)

Оборудование: доска, мел, ПК, программное обеспечение, дидактические материалы.

Ход урока.

1. Организационный этап.

Здравствуйте ребята, садитесь. Сегодня на уроке мы будем учиться создавать анимированное изображение. Что это значит?

Чтоб анимацию создать включи воображение
Рисунок нужно рисовать тебе без промедления!
Укажешь траекторию, рисунок оживёт,
В огромный мир фантазии тебя он позовет!!

Сегодня мы с вами погрузимся в волшебный подводный мир.

Нарисуем море, в этом знаем толк,
В море будет плавать чудный осьминог.
Красотой своею привлекает он,
Рыбки проплывая, делают поклон!

2. Вводно-мотивационный этап (актуализация опорных знаний).

На прошлом уроке мы с вами изучали тему: «Кодирование информации» и проводили практическую работу по данной теме. Ответьте на вопросы: Как можно закодировать и декодировать информацию? Что такое кодирование? Что такое декодирование? При помощи, каких программ, приложений мы кодировали и декодировали информацию?

Чтобы вспомнить данную тему выполните практическое задание на компьютере. Декодируйте тему нашего урока.

Мир чисел и цифр – он очень велик,
Их тайну постигнуть – ты смог ученик!
Ведь каждая цифра здесь букву хранит,

Его декодируй и прочитай вмиг!

Декодирование информации производится в программе Блокнот. Буква декодируется при нажатии числового кода одновременно с клавишей Alt.

В задании закодирован следующий текст:

СЕГОДНЯ НА УРОКЕ ИНФОРМАТИКИ МЫ БУДЕМ СОЗДАВАТЬ АНИМАЦИЮ В ГРАФИЧЕСКОМ РЕДАКТОРЕ PAINT. ЖЕЛАЮ ВСЕМ ПЛОДОТВОРНОЙ РАБОТЫ И ХОРОШЕГО НАСТРОЕНИЯ!

0209 0197 0195 0206 0196 0205 0223
0205 0192
0211 0208 0206 0202 0197
0200 0205 0212 0206 0208 0204 0192 0210 0200 0202 0200
0204 0219
0193 0211 0196 0197 0204
0209 0206 0199 0196 0192 0194 0192 0210 0220
0192 0205 0200 0204 0192 0214 0200 0222
0195 0208 0192 0212 0200 0215 0197 0209 0202 0206 0204
0208 0197 0196 0192 0202 0210 0206 0208 0197
080 065 073 078 084
0198 0197 0203 0192 0222
0194 0209 0197 0204
0207 0203 0206 0196 0206 0210 0194 0206 0208 0205 0206 0201
0208 0192 0193 0206 0210 0219
0213 0206 0208 0206 0216 0197 0195 0206
0205 0192 0209 0210 0208 0206 0197 0205 0200 0223 033

3. Операционно-сордержательный этап. (20 мин.)

Создание анимированного изображения.

План работы. Сейчас мы с вами отправляемся в подводное путешествие, будем создавать анимацию «Море».

4. Создание анимации «Море»

1. Открыть графический редактор Paint (Пуск – Программы – Стандартные – Paint)

2. В строке меню выбрать Рисунок – Атрибуты. Установить параметры: высота 24 см, ширина 32 см.

3. На панели инструментов выбираем заливку, и, заливаем документ синим цветом.

4. С помощью фигуры эллипс на панели инструментов рисуем морские камушки (произвольный размер и количество). Используя заливку, раскрашиваем камушки разными цветами.

5. С помощью инструмента Кривая рисуем водоросли.

Какие безграничные красоты,
Какой великолепный, чудный вид,
Но здесь ведь не хватает нам чего-то,
Спокойствие и тишина царит.
Здесь камушки красивые, подводные,
Здесь водоросли длинные, зелёные,
Но не хватает рыбки золотой,
Чтоб с чувством насладиться красотой!
Давайте с вами рыбку нарисуем,
Для этого немножко поколдуем!

6. Сохраняем полученный рисунок. (Файл – Сохранить как – название рисунка Море).

7. Открыть графический редактор Paint (Пуск – Программы – Стандартные – Paint)

8. В строке меню выбрать Рисунок – Атрибуты. Установить параметры: высота 3 см, ширина 5 см.

9. На панели инструментов выбираем заливку, и, заливаем документ, синим цветом.

10. Рисуем рыбку.

11. Сохраняем полученный рисунок. (Файл – Сохранить как – название рисунка Рыбка).

Вот она красавица, рыбка золотая,
Будет быстро плавать, море созерцая!
Но чтобы рыбки не скучать,
Нам нужно друга ей создать!

12. Открыть графический редактор Paint (Пуск – Программы – Стандартные – Paint)

13. В строке меню выбрать Рисунок – Атрибуты. Установить параметры: высота 5 см, ширина 3 см.

14. На панели инструментов выбираем заливку, и, заливаем документ синим цветом.

15. Рисуем осьминога.

16. Сохраняем полученный рисунок. (Файл – Сохранить как – название рисунка Осьминог).

У него есть много ног,
Кто же это? Осьминог!
С рыбкой вместе поплывёт,
И нас в море увлечет.

17. Открываем презентацию Power Point (Пуск – Программы – Power Point).

18. В строке меню выбрать Вставка – Рисунок – Из файла – Море

19. В строке меню выбрать Вставка – Рисунок – Из файла – Рыбка

20. В строке меню выбрать Вставка – Рисунок – Из файла – Осьминог

21. Выделяем объект, рыбка, щёлкаем правой кнопкой мыши и в появившемся меню выбираем настройка анимации.

22. Выбираем: Добавить эффект – Пути перемещения – Нарисовать пользовательский курс-Кривая. Рисуем произвольную кривую.

23. Выделяем объект, осьминог, щёлкаем правой кнопкой мыши и в появившемся меню выбираем настройка анимации.

24. Выбираем: Добавить эффект – Пути перемещения – Нарисовать пользовательский курс-Кривая. Рисуем произвольную кривую.

25. Выбираем в строке меню Показ слайдов – Начать показ.

Красота у моря безгранична,
Изменчива у моря красота,
В движенье жизнь, и это нам привычно
Давайте будем двигаться всегда.
Берег моря, рыбы, океаны,
Всех красот никак не передать,
Чтобы приоткрыть завесу тайны,
Нужно анимацию создать.

4. Рефлексивно – оценочный этап (5 мин).

Выставляются оценки за урок

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

Создание свободного анимированного изображения.

Этот урок подготовлен по многочисленным вопросам наших посетителей. На самом деле, в создании анимированных рисунков нет ничего сложного. Движущиеся картинки поддерживает, например, наиболее известный формат графических файлов GIF. Обратите внимание, что сделать анимированный файл JPG или BMP вряд ли получится, так как эти форматы не поддерживают чередование кадров.

Как создать кадры движущегося ролика в Paint.NET

Итак, для создания анимированного ролика нам потребуется сделать серию кадров. Благодаря тому, что обеспечивает работу со слоями, сделать кадры совсем не сложно. Для примера воспользуемся изображением смайлика, сделанного на уроке Paint.NET "Как нарисовать трехмерный смайл" , опубликованном на нашем сайте.

Для создания нескольких кадров возьмем изображение трехмерного смайла из этого урока и создадим копию слоя с изображением смайлика в том количестве, сколько кадров ролика нам нужно. Для этого можно воспользоваться, например, меню "Слой" - "Сделать копию слоя" или скопировать слой непосредственно в окне "Слои" Paint.NET .

Копировать слои можно не сразу, а например для того что бы сделать второй кадр, скопировать первый слой, после чего на скопированном слое изменить рисунок в соответствии с задумкой ролика. Мы, например, сжимали смайлик и перемещали его вверх и вниз чуть-чуть кадр за кадром. Пример окна "Слои" Paint.NET вы можете увидеть на рисунке слева, естественно на нем не поместились все кадры, но общая идею увидеть можно.

Как сохранить кадры движущегося ролика в отдельные файлы

Для соединения отдельных кадров в нужном порядке в анимированный ролик при помощи программы UnFREEz, сначала надо сохранить кадры как отдельные файлы. В этом тоже нет ничего сложного. Можно, например, скопировать всё содержимое нужного слоя, создать новое изображение, и вставить в него, скопированное со слоя изображение. После чего сохранить как отдельный файл GIF. Выделить все изображение на слое можно, например, нажатием комбинации клавиш Ctrl+A. Описание остальных горячих клавиш Paint.NET есть в разделе инструкции на этом сайте.

Другим способом можно, например, просто отключать видимость не нужных на текущем кадре слоев, после чего сохранять видимые слои как отдельный рисунок GIF. Сделать это можно в меню Paint.NET "Файл" - "Сохранить как". При сохранении в формате GIF Paint.NET предложит объединить все слои изображения, т.е. получится, что временно отключенные слои пропадут. Но после сохранения файла с кадром можно нажать кнопку "Отменить" в горизонтальной панели Paint.NET и последнее действие по объединению слоев будет отменено, и все слои вернутся обратно.

Еще раз обратите внимание, что для объединения потом кадров программой UnFREEz в один анимированный GIF файл, необходимо, что бы все кадры имели одинаковый размер изображения. Т.е., например, если размер рисунка одного кадра 20 на 30 точек, то и остальные кадры должны иметь тот же размер. Описанный выше способ создания кадров в Paint.NET обеспечивает выполнение этого условия, так как все кадры делаются из одной основной картинки.

Инструкция

Для создания анимации вы можете использовать собственные рисунки или готовые изображения. В обоих случаях вам нужно будет создать ряд картинок, в которых постепенно изменяется положение в пространстве исходного объекта. Чем больше картинок вы создадите, тем более плавной будет анимация. В качестве примера можно рассмотреть полет воздушного шарика.

Откройте в Paint.net фоновое изображение командой «Открыть» из меню «Файл». С помощью этой же команды откройте фотографию шарика. Активируйте на панели инструментов «Волшебную палочку» и щелкните по фону вокруг шарика, затем нажмите Delete. Нажмите Ctrl+A, чтобы выделить изображение, затем Ctrl+C, чтобы занести его в буфер обмена.

В правой части панели инструментов щелкните иконку фонового слоя, чтобы развернуть изображение. На панели слоев кликните пиктограмму «Добавить новый слой» и нажмите Ctrl+C, чтобы вставить рисунок воздушного шара. Зажмите его мышкой и переместите к нижнему краю фоновой картинки.

При зажатой клавише Shift подцепите мышкой один из угловых маркеров выделения вокруг шарика и протяните к центру, чтобы уменьшить . Нажмите Enter. Дважды щелкните по иконке слоя с шариком и уменьшите его непрозрачность приблизительно до 190. Получившееся изображение сохраните под именем 1.gif, чтобы удобнее было ориентироваться в кадрах. При сохранении программа предложить слить все слои - подтвердите это действие. После сохранения изображения нажмите Ctrl+Z, чтобы снова разъединить слои.

На панели слоев опять щелкните «Добавить новый слой» и клавишами Ctrl+V вставьте изображение шарика самым верхним слоем. Уменьшите его размер, понизьте прозрачность и поместите выше предыдущего изображения. Учитывайте законы перспективы - чем выше поднимается шарик, тем меньше он кажется наблюдателю. К тому же, с учетом ветра, шарик не может подниматься вертикально вверх, а будет одновременно смещаться по оси Х. Уберите видимость предыдущего слоя, сняв галочку у правого края. Видимыми должны быть только фон и новый слой с шариком. Сохраните это изображение под именем 2.gif.

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

Светлана Шляхтина

Любая web-страница немыслима без web-анимации, в том числе и без анимационных gif"ов. Довольно долго для их создания web-дизайнеры вынуждены были использовать целый набор специализированных программ от разных разработчиков. Однако с появлением соответствующих возможностей в популярных 2D-графических пакетах, ориентированных в первую очередь для работы с двумерной растровой графикой и при этом позволяющих создавать файлы в формате Animation GIF за счет дополняющих их соответствующих утилит, все стало намного проще. К таким пакетам относится и Jasc Paint Shop Pro, в поставку которого входит программа Animation Shop, предназначенная для создания gif-анимаций: анимированных кнопок, баннеров и прочих анимированных элементов.

Paint Shop Pro и Animation Shop работают в тесном взаимодействии, полностью совместимы и прекрасно дополняют друг друга, что дает возможность на стадии создания анимации многократно переключаться с одной программы на другую и редактировать кадры-изображения в Paint Shop Pro, что обеспечивает изменение соответствующих кадров в Animation Shop. Кроме того, можно экспортировать слои в кадры и наоборот, а также анимацию в многослойное изображение. В то же время у каждой из этих программ остается своя специализация в плане web-графики: как правило, подготовку и редактирование кадров лучше проводить в Paint Shop Pro, а наложение динамических эффектов, оптимизацию и, конечно же, саму анимацию - в Animation Shop.

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

Теоретические аспекты создания анимационных gif"ов

Как известно, анимация является последовательностью кадров, исходный графический материал для которых может быть предварительно подготовлен как в Animation Shop, так и в Paint Shop Pro, а выбор приложения определяется особенностями конкретной анимации.

Gif-анимация в Animation Shop может быть создана тремя способами. Первый и самый удобный из них заключается в предварительной подготовке в Paint Shop Pro многослойного изображения, сохраненного в форматах PspImage или PSD и открытого в Animation Shop, - в этом случае для каждого отдельного слоя изображения создается свой кадр. Слои обеспечивают удобный способ композиционного построения анимационного изображения из различных графических и текстовых элементов и позволяют применять к различным элементам изображения всевозможные фильтры, менять степень прозрачности и режим смешивания слоя, корректировать яркость и применять иные преобразования, доступные в Paint Shop Pro, тем самым обеспечивая получение разнообразных эффектов.

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

Существует и принципиально другая возможность создания кадров - автоматическое формирование промежуточных кадров, существенно ускоряющее получение плавных анимаций, поскольку отпадает необходимость вручную создавать каждый кадр. Для этого определяются ключевые кадры, а затем компьютер автоматически формирует все, что должно быть в промежутках между ними, в соответствии с определенным в программе эффектом (поворотом, перемещением, изменением цветовых характеристик и пр.). Однако данная возможность ограничена числом доступных в Animation Shop эффектов (стоит признать, что в целом эффектов достаточно много, но не на все случаи жизни), и если задуманный принцип смены кадров в число имеющихся эффектов не входит, то все промежуточные кадры придется создавать вручную в Paint Shop Pro.

Экспорт и обновление анимации

Как уже было отмечено, на стадии создания анимации можно переключаться между программами Paint Shop Pro и Animation Shop, правда только при включенном флажке Export frames to Paint Shop Pro as layered images (Экспортировать кадры в Paint Shop Pro как слои изображения) в программе Animation Shop. Для этого нужно воспользоваться командой File=>Preferences=>General Program Preferences=>Layered Files (Файл=>Настройка=>Основные настройки программы=>Многослойные файлы) и включить указанный флажок (рис. 1). В этом случае при необходимости редактирования одного или всех кадров анимации достаточно будет экспортировать выделенные кадры из Animation Shop в Paint Shop Pro одним из следующих способов:
выбрать в меню команду File=>Export Frames=>To Paint Shop Pro (Файл=>Экспорт кадров=>В Paint Shop Pro);
щелкнуть на кнопке Export Frames to Paint Shop Pro (Экспорт кадров в Paint Shop Pro) в панели инструментов;
щелкнуть на выделенных кадрах правой кнопкой и выбрать из всплывающего меню команду Export Frames to Paint Shop Pro (Экспорт кадров в Paint Shop Pro).

Рис. 1. Включение возможности экспорта кадров в Paint Shop Pro

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

Предусмотрен и другой вариант обновления анимации из Paint Shop Pro: не закрывая файла Paint Shop Pro, воспользоваться командой Edit=>Update Back to Animation Shop (Редактирование=>Обновить изменения в Animation Shop). Затем переключиться в Animation Shop и разорвать связь между анимацией и временно созданным многослойным изображением при помощи команды File=>Export Frames=>Break Link With Exported Frames (Файл=>Экспорт кадров=>Разорвать связь с экспортируемыми кадрами). Последнее действие необходимо, поскольку без разрыва связи дальнейшие действия в Animation Shop будут невозможны.

К сожалению, стоит признать, что оба варианта не слишком удобны, так как невозможно создать эффектную анимацию, единожды прибегнув к процедуре редактирования кадров в Paint Shop Pro. Чаще всего редактировать кадры, обновлять анимацию, просматривать результат и вновь редактировать приходится многократно. И каждый раз для этого необходимо экспортировать кадры в Paint Shop Pro. Очевидно, что второй вариант как раз рассчитан на возможность многократного редактирования многослойного изображения с регулярным обновлением анимации, однако реализован он не до конца и потому практически ничего не дает, позволяя обновлять анимацию и запрещая какие-либо действия в Animation Shop, а самое главное - просмотр анимации. Хочется верить, что в следующих версиях Paint Shop Pro и Animation Shop данный неприятный нюанс будет устранен.
Работа с кадрами

Основным при разработке анимации является окно Frames, в котором и находятся сами кадры (рис. 2). Для работы с конкретным кадром достаточно выбрать его в данном окне и подвергнуть нужным преобразованиям - отредактировать, наложить эффект, изменить свойства и пр. Выделение нескольких кадров осуществляется обычным образом при нажатых клавишах Ctrl или Shift, а сразу все кадры можно выделить по команде Edit=>Select All (Редактирование=>Выделить все).

Рис. 2. Окно Frames: с аббревиатурой F указан номер кадра, а с аббревиатурой D - его длительность в сотых долях секунды

В отношении кадров можно выполнить простейшие трансформации: повороты и зеркальные отражения (меню Animation - Анимация), а также осуществить реверсию, поменяв направление следования кадров на противоположное при помощи команды Animation=>Reverse Frames (Анимация=>Реверсия кадров).

Самое интересное при работе с кадрами - это наложение на них эффектов, которые позволяют связать кадры между собой при помощи самых разнообразных преобразований (рис. 3). Все эффекты находятся в меню Effects (Эффекты) и подразделяются на три группы: эффекты перемещения изображения (команда Insert Image Transition), эффекты изображения (команды Insert Image Effect и Apply Image Effect) и текстовые эффекты (команды Insert Text Effect и Apply Text Effect). Стоит обратить внимание, что применение части указанных команд (они начинаются со слова Insert…) автоматически приводит к генерации целой серии промежуточных кадров, обеспечивающих плавный переход между созданными вручную исходными кадрами. В свою очередь, команды Apply Image Effect и Apply Text Effect налагают эффект на выделенные кадры без формирования промежуточных кадров.

Рис. 3. Наложение эффекта Dissolve (Растворение)

Просмотр и изменение свойств анимации

В окне Animation Shop можно тут же просмотреть результат, щелкнув на кнопке View Animation, а при необходимости и внести требуемые изменения, например скорректировать длительность задержки одного или нескольких кадров и пр. По умолчанию задержка отображения у всех кадров равна одной сотой доле секунды, и в этом случае кадры сменяют друг друга практически мгновенно. Однако время проигрывания для каждого кадра можно легко изменить при помощи команды Animation=>Frame Properties=>Display Time (Анимация=>Свойства кадра=>Время показа).

Кроме того, не сложно настроить цвет фона анимации, воспользовавшись командой Animation=>Animation Properties=>Canvas Color (Анимация=>Свойства анимации=>Цвет холста), а также изменить размер кадров при помощи команды Animation=>Resize Animation (Анимация=>Изменить размер анимации) (рис. 4).

Рис. 4. Изменение размера кадров анимации

Сохранение и оптимизация анимации

По окончании работы программа позволяет сохранить файл анимации с оптимизацией, то есть с сокращением объема, уменьшив количество цветов, исключив из него информацию о статичных областях изображения и пр. (рис. 5) с помощью команды File=>Save (Файл=>Сохранить) (только при первом сохранении) или путем вызова мастера оптимизации командой File=>Optimization Wizard (Файл=>Мастер оптимизации). Стоит отметить, что, во-первых, программа показывает результат оптимизации еще на стадии оптимизации в окне предварительного просмотра, а во-вторых - на финише сообщает размер сжатого файла в сравнении с оригиналом и время его загрузки при различных вариантах подключения (рис. 6). Все это в комплексе помогает выбрать окончательный вариант оптимизированного файла, найдя разумный компромисс между качеством изображения и его размером.

Рис. 5. Определение параметров оптимизации

Рис. 6. Результат сжатия анимационного файла при оптимизации

В итоге будет создан сжатый файл в формате Animation GIF, который при необходимости доработки может быть в любой момент загружен командой File=>Open (Файл=>Открыть) и нужным образом преобразован.

Gif-анимация на практике

Различных вариантов анимаций, традиционно используемых в web-дизайне и ставших уже классическими, невероятно много. Это самые разные варианты перемещения как текста в целом или его отдельных символов, так и прочих объектов; всевозможные варианты трансформации объектов и различные повороты. Кроме того, объекты могут мигать и переливаться буквально на все лады, менять свой цвет, растворяться, стираться и медленно проявляться, уменьшаться и увеличиваться и т.д. В силу необъятности темы мы не ставим своей задачей охватить всё и вся и остановимся лишь на нескольких примерах, которые могут продемонстрировать возможности эффективного сочетания функциональности пакета Paint Shop Pro с утилитой Animation Shop.
Анимация масштабирования

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

Для получения анимации масштабирования следует открыть Paint Shop Pro и создать новый рисунок (рис. 7 и 8) - в данном случае это некоторое векторное изображение на белом фоне. Преобразуйте векторный слой в растровый, щелкнув на нем правой кнопкой и выбрав команду Convert To Raster Layer (Конвертировать в растровый слой). Затем объедините оба слоя, щелкнув на одном из них правой кнопкой и выбрав команду Merge=>Merge All (Объединить=>Объединить все).

Рис. 7. Исходное изображение

Рис. 8. Палитра Layer

Сохраните созданное однослойное изображение в собственном формате Paint Shop Pro и откройте его в Animation Shop, что приведет к формированию одного-единственного кадра (рис. 9). Наложите эффект Zoom (Масштабирование) при помощи команды Effects=>Insert Image Transition (Эффекты=>Вставка эффекта смены изображения) при параметрах, указанных на рис. 10. В итоге будет сформирована целая серия кадров - примерно так, как на рис. 11. Просмотрите созданную анимацию, щелкнув на кнопке View Animation, и сохраните ее с помощью команды File=>Save (Файл=>Сохранить) в формате Animation GIF с нужными параметрами оптимизации. В итоге будет получена примерно такая же анимация, как представлена на рис. 12.

Рис. 9. Начальное состояние окна Frames

Рис. 10. Выбор и настройка эффекта Zoom

Рис. 11. Окно Frames после наложения эффекта Zoom

Рис. 12. Готовая анимация

Анимация с эффектом мигания

Попробуем создать традиционно используемый в web-дизайне мигающий текст. Откройте Paint Shop Pro, создайте новый рисунок и напечатайте на белом фоне произвольный текст, например как на рис. 13. Одновременно с этим откройте вспомогательный файл, с помощью которого вы собираетесь осуществить эффект мигания (рис. 14).

Рис. 13. Исходный текст

Рис. 14. Вспомогательное изображение

Инструментом Selection выделите произвольную прямоугольную область на вспомогательном изображении, скопируйте ее в буфер обмена и вставьте как новый слой на исходный текст при помощи команды Edit=>Paste=>Paste As New Layer (Редактирование=>Вставить=>Вставить как новый слой) поверх векторного слоя с текстом. Затем временно сделайте новый растровый слой невидимым, перейдите на слой с текстом, выделите инструментом Magic Wand область вне текста. Вернитесь на растровый слой с внедренным изображением и нажмите клавишу Del для очистки выделенной области вне букв. В результате текст примет примерно такой вид, как на рис. 15, а окно слоев будет выглядеть в соответствии с рис. 16.

Рис. 15. Текст после удаления ненужных фрагментов изображения

Рис. 16. Состояние палитры Layer в результате корректировки растрового слоя

Удалите ненужные для будущей анимации фоновый слой Background и векторный слой с текстом. Продублируйте оставшийся растровый слой и на полученной его копии уменьшите непрозрачность слоя подходящим образом, например до 80% (рис. 17 и 18).

Рис. 17. Окончательный вид текста

Рис. 18. Окончательный вид палитры Layer

Сохраните созданное двухслойное изображение в собственном формате Paint Shop Pro - PspImage или в формате PSD (в обоих случаях слои будут сохранены) и откройте его в Animation Shop. При открытии многослойного изображения слои будут автоматически преобразованы в кадры (рис. 19). Просмотрите созданную анимацию, щелкнув на кнопке View Animation, - результат окажется не очень хорошим: буквы не слишком эффектно смотрятся на установленном по умолчанию черном фоне и мигание происходит чересчур быстро. Для изменения фона анимации воспользуйтесь командой Animation=>Animation Properties=>Canvas Color (Анимация=>Свойства анимации=>Цвет холста) и установите белый цвет (рис. 20 и 21). Чтобы замедлить скорость смены кадров, выделите оба кадра в окне Frames, откройте команду Frame Properties=>Display Time (Свойства кадра=>Время показа) из меню Animation (Анимация) и измените длительность задержки кадров, например как на рис. 22. Еще раз просмотрите анимацию, и если полученный результат вас удовлетворит, то сохраните ее с помощью команды File=>Save (Файл=>Сохранить) в формате Animation GIF с нужными параметрами оптимизации. В итоге будет получена примерно такая же анимация, что представлена на рис. 23.

Рис. 19. Начальное состояние окна Frames

Рис. 20. Изменение цвета фона в окне Animation Properties

Рис. 21. Кадры после изменения цвета холста

Рис. 22. Изменение скорости прокручивания кадров в окне Frame Properties

Рис. 23. Готовая анимация

Изменение цвета в анимации

Цвет в анимации можно изменить различными способами, в крайнем случае простым созданием кадров, в которых объекты будут перекрашены вручную. Но есть и более удобный способ: с помощью корректировки параметров Hue (Оттенок) и Saturation (Насыщенность) - его и рассмотрим.

Откройте в Paint Shop Pro исходное изображение, для которого необходимо внедрить анимационное изменение цвета (рис. 24). Инструментом Magic Wand выделите фон, затем сделайте инверсию (рис. 25), скопируйте выделенную область в буфер обмена и вставьте ее на новое изображение командой Edit=>Paste=>Paste As New Image (Редактирование=>Вставить=>Вставить как новое изображение) (рис. 26).

Рис. 24. Исходное изображение

Рис. 25. Выделение фрагмента изображения

Рис. 26. Результат вставки выделенного фрагмента в новое изображение

Многократно продублируйте исходный слой Raster 1, щелкая на кнопке Duplicate Layer (Дублирование слоя) палитры Layer. Для последовательной смены оттенков цвета таких слоев потребуется создать достаточно много; для удобства переименуйте их таким образом, как показано на рис. 27. После этого временно сделайте все слои, за исключением слоев Raster 1 и Raster 2, невидимыми, активизируйте слой Raster 2 и с помощью команды Adjust=>Hue and Saturation=>Hue/Saturation/Lightness (Регулировка=>Оттенок и насыщенность=> Оттенок/Насыщенность/Яркость) измените цвет, например как на рис. 28. Сделайте видимым слой Raster 3 и измените на нем цвет изображения аналогичным образом. Точно такие же операции проделайте и для всех оставшихся слоев.

Рис. 27. Состояние палитры Layer после дублирования слоев

Рис. 28. Корректировка цвета изображения

Сохраните созданное многослойное изображение в собственном формате Paint Shop Pro - PspImage - или в формате PSD и откройте его в Animation Shop - в этом случае слои будут автоматически преобразованы в кадры (рис. 29). Просмотрите созданную анимацию, щелкнув на кнопке View Animation, и сохраните ее с помощью команды File=>Save (Файл=>Сохранить) в формате Animation GIF с нужными параметрами оптимизации. В итоге будет получена примерно такая же анимация, как представлена на рис. 30.

Рис. 29. Начальное состояние окна Frames

Рис. 30. Готовая анимация

Попробуем немного подредактировать созданную анимацию - чтобы цвета плавно сменяли друг друга не только в одном направлении, но и в противоположном. Для этого сделайте по одной копии каждого кадра, кроме первого, последовательно щелкая на каждом кадре правой кнопкой мыши и выбирая команду Duplicate Selected (Дублирование выделенного кадра). Затем перетащите мышью копии кадров так, чтобы оттенки плавно сменяли друг друга сначала в одном, а потом в другом направлении, в итоге окно Frames примет вид примерно как на рис. 31. Диссонанс будет вызывать теперь только первый, самый яркий кадр, который можно переместить в середину анимации - там его оттенок окажется ближе к оттенкам рядом находящихся кадров. Для этого выделите десятый кадр, щелкните на нем правой кнопкой мыши, выберите команду Insert Frames=>Empty (Вставить кадры=>Пустые) и нажмите кнопку Ok - в центре появится пустой кадр. Затем перетащите на него самый яркий первый кадр. Просмотрите получившуюся анимацию. Видно, что оттенок только что перемещенного кадра все же довольно сильно отличается от всех остальных задействованных оттенков - при просмотре анимации на данном кадре изображение сильно меняет цвет, поэтому лучше данный кадр вовсе удалить, выделив его и нажав клавишу Del.

Рис. 31. Окно Frames после дублирования и перемещения кадров

Просмотрите созданную анимацию и сохраните ее в формате Animation GIF с нужными параметрами оптимизации. Полученная в результате анимация показана на рис. 32.

Рис. 32. Готовая анимация

Теоретически анимацию со сменой цвета можно создать и непосредственно в Animation Shop - это окажется намного быстрее благодаря наличию соответствующего эффекта Rotate Colors (Цвета по кругу). Однако применение данного эффекта ограничено автоматическим выбором цветов и оттенков, которые поменять при настройке эффекта невозможно. Попробуем наложить эффект Rotate Colors на однослойное изображение (рис. 33). Откройте изображение в Animation Shop - сначала в окне Frames появится только один кадр, поскольку изображение имело лишь один слой. Наложите эффект смены цветов командой Effects=>Insert Image Effect (Эффекты=>Вставка эффекта изображения) при параметрах, указанных на рис. 34. Результатом станет автоматическая генерация 21-го кадра в палитре Frames (рис. 35), сохранив которые в формате Animation GIF, вы получите анимацию, представленную на рис. 36.

КАК СДЕЛАТЬ АНИМИРОВАННЫЙ РИСУНОК В PAINT.NET

Пример анимированного движущегося изображения в формате GIF можно увидеть на рисунке слева. Стандартные типы файлов в Paint.NET, хотя и включают в себя формат GIF, но пока не поддерживают возможность сохранения анимированных GIF файлов. Поэтому непосредственно для создания из серии кадров одного анимированного файла GIF мы используем в этом уроке дополнительную специальную программу утилиту UnFREEz. Эта программа, так же является абсолютно бесплатной, простой в использовании и не требует установки. С помощью этой программы можно соединить серию последовательных кадров в один движущийся ролик. на русском языке можно найти на нашем сайте, там же можно узнать, .

Как создать кадры движущегося ролика в Paint.NET

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

Для создания нескольких кадров возьмем изображение трехмерного смайла из этого урока и создадим копию слоя с изображением смайлика в том количестве, сколько кадров ролика нам нужно. Для этого можно воспользоваться, например, - "Сделать копию слоя" или скопировать слой непосредственно в .

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

Как сохранить кадры движущегося ролика в отдельные файлы

Для соединения отдельных кадров в нужном порядке в анимированный ролик при помощи программы UnFREEz, сначала надо сохранить кадры как отдельные файлы. В этом тоже нет ничего сложного. Можно, например, скопировать всё содержимое нужного слоя, создать новое изображение, и вставить в него, скопированное со слоя изображение. После чего сохранить как отдельный файл GIF. Выделить все изображение на слое можно, например, нажатием комбинации клавиш Ctrl+A. есть в разделе инструкции на этом сайте.

Другим способом можно, например, просто отключать видимость не нужных на текущем кадре слоев, после чего сохранять видимые слои как отдельный рисунок GIF. Сделать это можно в - "Сохранить как". При сохранении в формате GIF Paint.NET предложит объединить все слои изображения, т.е. получится, что временно отключенные слои пропадут. Но после сохранения файла с кадром можно нажать кнопку "Отменить" и последнее действие по объединению слоев будет отменено, и все слои вернутся обратно.

Еще раз обратите внимание, что для объединения потом кадров в один анимированный GIF файл, необходимо, что бы все кадры имели одинаковый размер изображения. Т.е., например, если размер рисунка одного кадра 20 на 30 точек, то и остальные кадры должны иметь тот же размер. Описанный выше способ создания кадров в Paint.NET обеспечивает выполнение этого условия, так как все кадры делаются из одной основной картинки.

Windows 8