Логотип Валидатор Валидатор Качество создания сайта

Рисунок с анимацией

Анимация рисунка

Это, пожалуй, самое интересное. Сначала нарисовать что-либо в программе "Фотошоп", а потом добавить рисунку движение, т.е. сделать его анимированным.

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

Пример анимации рисунка перед Вами.

Рисунок с анимацией

* * *

Создание анимированного рисунка

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

К каждому из слоёв применял нужные фильтры: "рассеивание", "шум" и "размытие по Гауссу" с разными значениями.
Кроме них, разумеется, использовал различные инструменты программы: клонирование, трансформацию, размазывание, и так далее.

Для рисования изгибов пламени, применил встроенную в фотошоп программу Liquify, т.е. "пластику".   Очень интересная программа! Отличная! Попробуйте!
Её легко можно вызвать комбинацией клавиш Shift+Ctrl+X.

В ней просто не только различные изгибы делать, но и много чего ещё.  Особенно часто её применяют для создания всевозможных шаржей. Весёленьких таких!

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

Впрочем, я немного отвлёкся.

Всего готовых слоёв получилось 9. Кроме того, в программе ImageReady к каждому из них добавил ещё по 1-ому переходному слою. Можно было бы и больше. Тогда анимация получилось бы более плавной, НО(!) гораздо "тяжелее".
А таким образом, файл с анимированным рисунком содержит 18 кадров и "весит" 64 КБ.

Сохранил сделанное в расширенном варианте, то есть не только GIF-файл изображения с анимацией, но и HTML-страницу, которую ImageReady создаёт автоматически.

Обычно же, как уже писал где-то ранее, сохраняют лишь анимированный GIF-файл.

Однако!

Это позволило не только чуть подробнее сказать о создании анимированных рисунков, но и посмотреть код страницы. Что она там накодировала?...
Уж очень интересно было, а что и как она (IR) там "накодировала"? ... ... Ну, очень интересно!

Ну, а кроме того - показал Вам рисунок с анимацией в полном размере.

* * *

Большое количество других рисунков сможете посмотреть на других веб-страницах раздела "Фотошоп", куда можно попасть прямо по нижней стрелке-навигатору.

Фотошоп

ВВЕРХ

Все права защищены. Copyright © 2009 - Коротеев Владимир.

Яндекс.Метрика