Гиф-анимация для полного чайника

fotovivo — 11.08.2020
Наше совместное с внуком творчество
Смотрите далее: анимация шаг за шагом

Допустим вы впервые развернули фотошоп. Как и в обычной офисной программе в нем присутствует опция: "Файл -> Открыть", традиционно размещаемая в верхнелевом углу окна.
Открылась картинка? - вы на пол-пути к освоению редактора. (Триал-версию можно скачать официально или воспользоваться одной из он-лайновых).
Начнем с простого.
Есть открытка. Сделаем из нее гиф с прыгающим текстом:




Выпилим буковки на отдельный слой: обведем нужный сегмент рамочкой с панели инструментов и - нажмем на клавиатуре Shift + Ctrl + J
Появится новый слой - вы его увидите на панели "Слои" (если эта панель не открыта по умолчанию, раскройте список "Окна" в шапке программы и поставьте галочку)



Щелчок мышкой по картинке, в выпадающем меню кликните на "Свободное трансформирование"



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



А теперь через меню "Окна" вызываем "Шкалу времени".
- Она сама подскажет, что делать дальше: "Создать анимацию кадра"

Кадр появится на шкале:



Теперь присмотритесь - в самом уголке шкалы (под крестиком) есть неприметная стрелочка, открывающая очередное меню (фотошоп - тот еще лабиринт со скрытыми меню, подменю, вызываемыми самыми неожиданными способами - но, зато, в сети есть масса путеводителей - ходите привычными тропами и не запутаетесь)
В этом меню нажмите на "Создать кадры из слоев"  на остальное не обращайте внимания. (Кто-то уже готов прийти в ужас? - Тут как на горной тропе, если вниз не смотреть, то ничего страшного.)



Управляющие кнопки редактора анимации легко опознаваемы - функции у них совершенно такие же, как у обычного видеоплеера - вперед-назад, стоп-пуск.
Чуть позже рассмотрим его подробнее, а пока пусть остается по умолчанию.
Пуск и enjoy!

Мультик работает, но что-то в нем не то?
Да, слои остались прозрачными.  Нужно подложить фон, в каждом кадре - это тонкий момент, следите за руками:



Выделим на шкале все кадры (щелкните по первому, следом, зажав "шифт" щелкните по  последнему - выделится вся последовательность),
теперь идем на панель слоев и открываем фон - кликнув на "глаз" слева от него.

Готово!
Обычным же порядком сохраняем Файл - > Экспорт
Выберете в меню расширений GIF, остальное оставьте по умолчанию.









Разберем на запчасти незамысловатую анимацию:



В гиф склеили четыре фото, даже не слишком беспокоясь о соосности изображений:



Кст, разделить гиф на составляющие можно гораздо более простым инструментом: https://fotovivo.livejournal.com/256546.html



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




Анимированный гиф к теме "Как НАСА насолила астрологам":
Точки пересечения лунной орбиты с плоскостью земной орбиты, "Лунные узлы", они же "раху"-"кету" - весьма важные данные для астрологических расчетов.
 В результате прецессии земная ось смещается. (Земля раскачивается, как запущенная юла). Смещается целиком система Земля+Луна.
И - "раху-кету" теперь указывают совсем в ином направлении, чем три тысячи лет назад, когда вавилонские звездочеты составляли первые руководства по небесной механике магии.

Этот "мульт" склеен из двух картинок.
Уже знакомым способом на новый слой скопирована средняя часть рисунка, а ободок из "неподвижных звезд" оставлен фоном:



С вырезанным слоем поступаем подобно тому, как с буковками в предыдущем примере -
устроим на нашей модели рукотворную прецессию.
И, отработанным движением создадим анимацию из двух кадров -



Рассмотрим некоторые дополнительные возможности на "шкале времени": опция "постоянно" позволяет зациклить анимацию.
Маленькое меню в углу каждого кадра - для выбора времени, сколько он будет отображаться (доли секунды или десятки секунд), можно сделать одинаковым, если выделить все кадры, а потом выставить  время.
Промежуточные кадры - у этой штуки много возможностей - нам есть куда расти )

Гифки с просторов:







Очень простые трансформации на уровне вырезать-отразить-сместить, присмотритесь: у барышень головы качаются в такт  башмачками.


У колобков движения чуть более плавные, это уже требует определенной техничности в обращении с промежуточными кадрами.




но это все еще простое смещение.

А некоторые анимашки рисовали не в фотошопе. В Блендере или 3d-max-е такое отрендерить на раз



А сама анимация "с глубиной" устроена очень просто - всего из двух кадров: кустики на переднем плане слегка смещаются. Поворот фигуры в ФШ можно имитировать небольшим сжатием, но скорей всего использовали программу для 3d графики.

Маленький гиф с незамысловатым, казалось бы, движением содержит сорок слоев:



Потому все так плавно и асинхронно перетекает и струится. 40 - далеко не предел, у фракталов из вчерашнего выпуска бывает по нескольку сот. И весят они, соответственно прилично - альбом ЖЖ не каждый  калейдоскоп прожевывает. Фотошоп не совсем специфичная программа для гиф-анимации, есть куда более мощные. С другой стороны, если нужна совсем простецкая анимашка, подобная кулинарному гифу в примере номер два, ее гораздо проще сделать прямо в фото-просмотрщике FastStone (который еще и отличный каталогизатор-органайзер)


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

Оставить комментарий

Популярные посты:

• Ранее
• Архив