Эта статья открывает цикл материалов в рамках специального проекта портала Мир 3D "Спецэффекты: докомпьютерная эпоха".
Каждую пятницу
выходит новая статья, которая рассказывает о развитии одного отдельно взятого приема в области эффектов: от идеи до воплощения в культовых фильмах. Известные режиссеры и неизвестные создатели киноэффектов, самые интересные и невероятные факты в истории кинематографа. Так постепенно раскрываются секреты создания магии кино.
Спецэффекты в кино существовали почти с самого первого дня кинематографа. Еще в 1895 году режиссер Альфред Кларк (Alfred Clark ), снимая сцену казни Марии Стюарт, попросил своих актеров замереть после того, как палач поднимет топор, потом он остановил камеру, заменил актрису куклой, и продолжил съемку. Зрители увидели сцену, в которой живая актриса входит на эшафот, палач поднимает топор, опускает его, и голова падает с эшафота, и все это - без монтажных склеек. Естественно, зрители получили незабываемые впечатления.
Годом позже французский киномаг Жорж Мельес (Georges M éli ès ) совершенно случайно открыл эту же технологию. Однажды во время уличной съемки у него заело камеру. Пока он ее чинил, автобус уехал, а пешеходы ушли. Когда режиссер посмотрел результат, он увидел, что автобус просто исчез, а пешеходы-женщины превратились в мужчин. Это подтолкнуло Мельеса к дальнейшему исследованию в области спецэффектов в кино. Еще в начале 20-го века он умудрился соединить анимацию, matte painting, живых актеров и миниатюры в фильме «Путешествие на Луну». Мельес также изобрел множественную экспозицию, ускоренную съемку и постепенную смену одного кадра на другой. Все эти приемы благополучно используются и сегодня.
Но Мельес был не один. Альберт Смит (Albert Smith ) и Джеймс Стюарт Блактон (J . Stuart Blackton ) изобрели технологию покадровой анимации. В их фильме «Цирк Шалтая-болтая» (1898) благодаря покадровой анимации «оживали» куклы. В 1907 году Блактон выпустил «Отель с призраками» - очень успешный фильм, снятый с применением этой технологии. Независимо от них этот прием открыли и другие кинематографисты в разных странах.
Принцип покадровой анимации прост: создается кукла-персонаж, руки-ноги и голову которой можно закрепить в любом положении, и потом она фотографируется – не снимается на кинопленку, а именно фотографируется – один кадр за раз. Но сама двигаться кукла не может, поэтому аниматор последовательно придает ей разные позы, для каждого кадра постепенно смещая ее положение так, чтобы при нормальном просмотре со скоростью 24 кадра в секунду зрителю казалось, что он видит движение, снятое кинокамерой. Это очень сложный, длительный процесс, который не терпит ошибок – аниматор должен четко представлять себе, куда что двигается, и где заканчивается движение каждой части куклы (например, развевающийся на ветру шарф или волосы). Этот же принцип используется при съемке пластилиновых мультиков. Снять подобный мультик может любой, у кого есть цифровая фотокамера и достаточно терпения.
Но вернемся к кино. Самым известным режиссером покадровой анимации стал Уиллис О`Брайен (Willis H. O"Brien), человек, подаривший кинематографу «Кинг-Конга». Еще в 1917 году он снял свой первый фильм «Динозавр и пропавшее звено», тема показалась ему интересной, и в 1925 году он экранизировал «Затерянный мир» Артура Конан Дойля. Впервые для этого фильма был изобретен стальной «скелет» динозавра, состоящий из «суставов», способных гнуться, как настоящие. Для этого фильма было создано пятьдесят кукол, «одетых» в латекс и шерсть. «Затерянный мир» стал хитом кинопроката – зрителей поразила реалистичность съемки.
Кадр из фильма "Кинг-конг" (1933 г.)
Следующим большим хитом О`Брайена стал «Кинг-Конг». Уиллис сделал каркас для Конга, а Марсель Делгадо (Marcel Delgado), его ассистент, создал внешний вид знаменитой обезьяны – из резины, пенопласта и шкуры. Кстати, когда Питер Джексон (Peter Jackson ) делал римейк, он очень хотел добиться портретного сходства своего Конга с о`брайеновским, но почему-то не смог. Почти год длилась анимация Конга и других живых существ острова, часть из которых перекочевала в этот фильм из предыдущей ленты О`Брайена. Уиллис подолгу сидел в зоопарке, изучая повадки горилл, чтобы придать своему “подопечному” реалистичность движения. «Кинг-Конг», выпущенный в 1933 году, стал кассовым хитом, собрав $90 тысяч в первый уикенд – это был абсолютный рекорд в то время. Шедевр О`Брайена вдохновил множество юных аниматоров, одним из которых был тринадцатилетний Рей Харрихаузен (Ray Harryhausen ). В кино на «Конга» он попал совершенно случайно: его тетка была знакома с людьми из шоу-бизнеса, и взяла племянника с собой, когда у нее оказалось лишнее приглашение. Этот поход в кино определил всю дальнейшую судьбу Рея.
Комбинированные съемки: актриса Фей Рей и миниатюрная модель Конга
Кадр из фильма "Кинг Конг" (1933 г.)
Мальчик сразу понял, что Конг – не человек в костюме, и ему очень хотелось разобраться, как они это сделали. Юный аниматор тоже начал делать динозавров и снимать их у себя в гараже. Его всячески поддерживали родители – отец Рея работал механиком и помогал ему создавать скелеты из арматуры. И тут судьба вмешалась в его жизнь еще раз. Рей заметил, что его одноклассница читает книгу про Кинг-Конга, которая оказалась сценарием к фильму. Поговорив с ней, он выяснил, что она – племянница О`Брайена. Так Харрихаузен попал в гости к своему кумиру, который поддержал юное дарование – сразу после школы Рей получил работу в шоу-бизнесе. В 22 года он уже был оператором, режиссером и продюсером анимированного кино.
Рей Харрихаузен и модель Джо Янга.
В 1946 году Уиллис О’Брайен позвонил ему и предложил вместе поработать над новым фильмом о необычной горилле. Рей был счастлив работать вместе со своим гуру. Их совместная работа - “Могучий Джо Янг” - вышел в том же году. Это был очередной хит кассовых сборов, который принес О’Брайену специальный «Оскар» - первый в истории кино «Оскар» за спецэффекты. И хотя все лавры достались старшему гуру, на самом деле большую часть работы сделал его молодой подопечный.
Бой со скелетами в фильме "Ясон и аргонавты"
В 1963 году Харрихаузен снял фильм “Ясон и аргонавты”, для которого он создал самую сложную сцену в кинематографе того времени: семь гремящих костями скелетов вступают в бой с аргонавтами. Во время репетиций скелетов заменяли каскадеры, чтобы актеры точно знали, как им следует действовать. Все движения артисты заучивали на память, как танцоры заучивают танцевальные движения, и во время съемок просто исполняли свои боевые па. Потом Рей заменил пустоту своими скелетами. В среднем аниматор создавал всего 13 кадров за рабочий день, а вся трехминутная сцена заняла у него четыре с половиной месяца работы. В фильме также появлялись гарпии, многоголовый дракон и ожившая статуя Талоса, также анимированные с помощью этой технологии.
Рей Харрихаузен за работой
Любимым персонажем Харрихаузена стала Медуза Горгона, созданная им для его последнего фильма - “Битва титанов” (1982). Во время съемок ему пришлось анимировать и запоминать движения более двухсот “суставов” ее тела и волос.
В 1992 году Рей получил специальный «Оскар» за вклад в развитие кинематографа. На вопрос, почему он больше не снимает, Харрихаузен отвечает, что с возрастом у него пропало нужное терпение, и медленность процесса стала раздражать. Также, как когда-то его вдохновила работа О`Брайена, творчество самого Харрихаузена, в свою очередь, вдохновило таких режиссеров, как Стивен Спилберг (Steven Spielberg ), Тим Бертон (Tim Burton ) и Питер Джексон (Peter Jackson ).
Команда аниматоров "Лукасфильм" и их модели. Фил Типпетт - крайний справа
Технологию покадровой анимации использовали в создании шагающих танков Империи в фильме «Империя наносит ответный удар». Руководил процессом еще один известный аниматор – Фил Типпетт (Phil Tippett ). Вообще, Типпетт очень много сделал для классических «Звездных войн»: одна из первых его работ в трилогии - голографические шахматы, в которые играют на борту «Тысячелетнего сокола». Он также отвечал за анимацию ранкора и гонки на спидерах в «Возвращении джедая», но об этом позже. Прежде, чем приступить к анимации шагающих танков, команда Типпетта подробно изучала движения слона, на тело бедняги даже нанесли мелом разметку, напоминающую скелет, его движения сняли на видео, а потом использовали движение меловой разметки для анимации моделей. Кроме того, аниматорам пришлось создать много рисованных черновых мультиков – превизуализаций, чтобы четко понимать, как эти макеты должны двигаться. Вообще, эффекты зачастую отрисовываются заранее очень подробно, чтобы и режиссер, и группа аниматоров четко знали, как будет построен кадр, кто куда в нем будет двигаться, и как будет двигаться камера. Ведь в конечном итоге обе части кадра, и та, что снимается «в живую» с актерами, и та, что создается несколько недель спустя в павильонах киностудии, должны будут создавать единое изображение на экране. Поэтому, движение камеры в обоих случаях должно повторяться абсолютно идентично. В случае с шагающими танками движения камеры записывались в компьютер (систему контроля движения (motion control ) изобрели еще во время съемок «Новой надежды»), и потом при необходимости аниматоры могли сделать несколько дублей одной и той же сцены – камера «запоминала» свое местоположение сама.
Аниматор за работой
«Павильон был завален пищевой содой и мелкими стеклянными шариками, - рассказывает Фил о съемочном процессе. - Поэтому, если ты забылся и поставил куда-то локоть, ты мог нарушить единство площадки. Не говоря уже о том, что если кому-то приспичит чихнуть, он может сдуть весь «снег»... Мы сделали маленькие дверцы в «полу» студии, за которыми прятались во время съемки кадров. Это был длительный кропотливый процесс - открыть дверцу, пошевелить модель, закрыть дверцу, щелк, открыть дверцу... и так в течение нескольких недель». Иногда на одну секунду фильма уходил целый час. А если аниматор ошибался в движениях модели, то все приходилось начинать сначала.
«Когда я работаю, - рассказывает Фил, - никто не должен ходить, говорить, отвлекать меня в студии. Я очень концентрируюсь, потому что нельзя забыть ни одного движения, ни одного “сустава”, надо точно помнить направление движения, держать в голове всю сцену, весь путь модели. Иногда 150 кадров, которые пробегут на экране за 6-7 секунд, отнимают до 12 часов работы».
Фил Типпетт анимирует ранкора
Фил Типпетт известен тем, что модифицировал покадровую анимацию, добавив ей движение. Из обычной покадровой анимации он сделал динамическую покадровую анимацию (из stop -motion animation сделал go -motion animation ). Вроде бы все очень просто. Если вы посмотрите на быстро бегущую собаку внимательно, то поймете, что вы не видите ее лап – они двигаются слишком быстро и как бы размываются, вы не видите четких контуров лап в каждый момент времени. И если вы сфотографируете ее, то на фотографии вы тоже получите размытое пятно вместо лап. Но при применении покадровой анимации каждый кадр снимается в статике, поэтому контур анимируемого объекта всегда выглядит очень четко. Это и придает ему такой немного нереальный, мульпликационный вид, что можно четко увидеть на примере последнего фильма Харрихаузена «Битва Титанов» – крылья пегаса в полете очерчены всегда очень четко, чего быть не должно.
Модель ранкора готова к работе. Обратите внимание на конструкцию, управляющую движением куклы (снизу)
Типпетт понял, что инопланетный зверь тун-тун, который везет персонажей в фильме «Империя наносит ответный удар», выглядит недостаточно реалистично – ему не хватает движения. Поэтому скелет куклы модифицировали, вставив мотор, который двигал ее всякий раз, когда аниматор производил съемку. Таким образом, ноги существа стали размытыми, четкий контур потерялся, а зритель получил полную иллюзию быстрого движения. Точно также анимировали ранкора в «Возвращении джедая».
С тех пор технология динамической покадровой анимации применяется очень широко. Например, в вездесущей сегодня 3D анимации. Сам Типпетт участвовал в создании динозавров в фильме Стивена Спилберга «Юрский парк». Его умение раскладывать движение на прерывистые части, и запоминать, что куда двигается в каждом кадре, очень пригодилось. Фил двигал модели, а компьютер записывал все движения. Потом вся последовательность накладывалась на трехмерные цифровые модели. Студия Типпетта и сегодня занимается созданием и анимацией различных фантастических персонажей, только уже на компьютерах. Мы могли видеть работу Фила в фильмах «Робот-полицейский», «Звездная пехота» и «Спайдервик: Хроники», а сейчас он работает над второй частью «Сумерек».
Фил Типпетт на съемочной площадке фильма "Спайдервик: Хроники"
Процесс создания анимации шаг за шагом - вот что мы хотели рассмотреть в этой статье. Уже готовые вы можете посмотреть на сайте студии. А здесь поговорим о процессе. Прочитав этот текст, Вы сможете понять, как обычно проходит работа в этой области, кто участвует в процессе (кратко рассказывается о работе копирайтеров, сценариста, художников, аниматоров, дикторов, звукорежиссера), и получить первоначальное представление с чего можно начать процесс обучения анимации.
Работу лучше разделить на несколько основных этапов и двигаться шаг за шагом, нужна ясность в процессе работы создания анимации.
СОЗДАНИЕ МУЛЬТФИЛЬМА
СтатьяКак создать мультфильм
Часто спрашивают, как создаются мультфильмы? В этой статье мы попробуем кратко но наглядно рассказать, как выглядит этот процесс. Многое зависит от того, зачем Вам нужен мультфильм.
Если Вы хотите заказать анимационный ролик для своей компании, то, конечно, нужно обращаться к профессионалам. Если мультик в подарок своим знакомым или родственникам, тут можно делать что-то попроще, но лучше тоже делать все как надо. Это дело небыстрое и требующее профессионализма всех участников процесса.
Если Вы хотите сами научиться делать мультики или как-то связать свою работу с мультфильмами, то этот текст поможет понять, как примерно все это делается и кто в этом процессе участвует.
Этапы создания
Работу лучше разделить на несколько основных этапов. Удобнее разделить работу на части и последовательно продвигаться шаг за шагом, особенно, если вы делаете мультфильм не в свое удовольствие, а для кого-то и нужна ясность в процессе работы создания анимации.
1. Написание сценария мультфильма
На этом этапе копирайтером разрабатывается общая концепция, идея мультфильма. Часто люди уже имеют какое-то представление, что им хочется видеть в мультфильме. Иногда даже бывает, что сценарий уже полностью разработан.
Если этого нет, то составляется бриф (что-то вроде опросника), в котором перечислены основные вопросы, на которые предлагается ответить. Обычно, это вопросы о целях, которые преследуется, о целевой группе, на которую ориентируются в создании мультфильма, о продолжительности мультфильма, предпочтениях в стилистике, озвучке и т.п.
После заполнения такого брифа ситуация сильно проясняется и можно переходить к созданию сценария мультфильма. Имея заполненный бриф сценарист предлагает, обычно, несколько разных идей сценария на выбор. Выбранный вариант дорабатывается в полноценный сценарий.
После утверждения сценария можно начинать разработку персонажей.
2. Разработка персонажей
К разработке персонажей, обычно, приступают, когда уже известны основные задачи мультфильма, целевая группа и предпочтения по стилистике. По сценарию художник иллюстратор или, так называемый, концепт артист разрабатывает образ каждого из героев мультфильма. Иногда отдельным этапом еще до прорисовки персонажей разрабатывается описание характера каждого из персонажей - такой портрет каждого из героев в текстовой форме. Делается это для того, чтобы художник при разработке визуального образа уже четко представлял себе характер персонажа.
Сначала, как правило, художник делает какие-то черновые скетчи, простые зарисовки карандашом или на планшете. На этом этапе не важен ни цвет, ни четкость прорисовки. Главное сначала найти подходящий образ. Создается 1-3 разных вариантов образа персонажа. Если ничего не понравилось, то можно сделать дополнительные варианты.
После утверждения наброска следующим этапом идет уже его чистовая доработка и окончательная прорисовка в цвете и векторе (в случае если это флеш мультфильм).
Так происходит с каждым из персонажей. Когда все персонажи разработаны и утверждены, можно смело приступать к раскадровке.
3. Раскадровка
Нужно заметить, что раскадровка, вообще, является необязательным этапом. Раскадровка помогает понять еще до начала создания анимации, как примерно будет выглядеть мультфильм. Поэтому если есть какие-то особенные пожелания или опасения на этот счет, то раскадровка для мультфильма может быть полезна.
Суть раскадровки проста - это отрисовка основных сцен мультфильма в статике. Из раскадровки можно понять как будут выглядеть сцены в мультфильме, их последовательность, продолжительность (если раскадровка с таймкодом), расположение основных предметов на фоне и, также, расположение персонажей относительно фона.
пример раскадровки для мультфильма
Раскадровка может быть черно-белой в виде скетча карандашом, может быть и цветной в растре или в векторе. Детализация и прорисовка тоже может быть разной - всё зависит от сложности мультфильма и задач.
Обычно, раскадровки достаточно для понимания, как будет все выглядеть в мультфильме. После того, как раскадровка готова, чаще всего, можно приступать к созданию анимации. Но в некоторых случаях (когда нужна 100% уверенность, что все будет в мультфильме именно так, как хотелось бы) требуется еще один промежуточный этап - аниматик.
4. Аниматик
Аниматик - это анимированная раскадровка. Это уже не статичные картинки, но еще и не мультфильм - нечто среднее между ними. Аниматик, обычно, создается четко по раскадровке и по времени мультфильма (если мультфильм на 30 секунд, то и аниматик делается ровно на 30 секунд, чтобы можно было понять продолжительность каждой сцены, прежде, чем ее сменит следующая).
Пример создания аниматика
Наиболее важные моменты могут быть уже анимированы в аниматике (полностью или условно). Что-то может быть схематически показано стрелками, вставлены какие-то дополнительные поясняющие кадры, что-то подписано текстом и т.д. Аниматик не обязан быть чистовым. Его функция - сделать более понятным материал из раскадровки.
5. Создание мультфильма
Аниматик готов и утвержден. Теперь можно заниматься созданием мультика. Все необходимое для этого у аниматора уже есть. Параллельно с анимацией художник-фоновщик может заниматься фонами. Также, для полноценного мультфильма, обычно, требуется озвучивание анимации.
Озвучивание может быть разного уровня сложности и состоять из следующих составляющих: дикторская начитка или работа актеров, озвучивание событий в мультфильме, наложение музыки, написание стихов, песни, оригинальной музыки, сведение всего материала.
Но вернемся к анимации. У каждого аниматора есть своя схема работы, которая ему нравится больше, и к которой он привык. Чаще всего, сначала по аниматику аниматор делает отрисовку основных локаций персонажей. После этого уже идет анимирование промежуточных кадров между этими локациями и все остальное.
Основные принципы мультипликации
В классической анимации (мультипликации) мультфильм создается из последовательности статичных картинок (кадров). Частота кадров может быть разная (чаще всего, это от 12 до 30 кадров в секунду). То есть за секунду просматривается 12-30 кадров, каждый из которых немного отличается от предыдущего. За счет этого создается видимость движения.
Чем больше кадров в секунду, тем более плавное движение, чем меньше, тем более прерывистое. Для флеш мультфильмов в интернете, чаще всего, используется 12-18 кадров в секунду - это связано с тем, что делать 24-30 кадров в секунду в 2 раза дольше, чем 12-15. Для ТВ стандарт Pal 24-25 кадров для NTSC 30 кадров в секунду. Но, конечно, лучше и для интернета делать те же 24-25 кадров в секунду - такая анимация выглядит более плавно и красиво.
Нужно сказать, что мультфильмы для интернета - это, обычно, флеш мультфильмы. Эта программа анимации ориентирована именно на интернет и имеет ряд особенностей, которые позволяют упростить работу над мультфильмом и уменьшить размер конечного файла.
Размер файла мультфильма был очень важен несколько лет назад, когда все сидели еще на модемах и о повсеместном использовании онлайн видео не могло быть и речи - слишком медленно все грузилось. Тогда формат swf был незаменим для мультфильма. Однако сейчас ситуация сильно изменилась - интернет стал быстрым и недорогим, и мультфильмы, чаще, уже переводят в видео формат.
На видео анимация в программе Флеш
Что касается оптимизации труда аниматора, флеш предлагает, тоже, интересные решения. Классическая покадровая анимация очень трудоемка и для интернета это совершенно нерентабельно, как правило. На флеше можно делать анимацию как покадрово, так и перекладкой (с помощью motion tweening), также, в последних версиях программы добавлена возможность создания анимации по скелету, ну и, само собой, использование символов (анимационные куски могут быть зациклены и использованы по многу раз где нужно). Все это существенно помогает сократить время и сделать анимацию быстрее. Безусловно, анимация по скелету, перекладкой или покадрово будет в каждом из этих случаев выглядеть по-разному. Разумнее всего сочетать эти возможности, добиваясь оптимального результата.
Постпродакшн, компоузинг для мультфильмов
Постпродакшн и компоузинг для мультфильмов - это работа, которая может проводиться уже после того, как мультфильм готов. Это является необязательным этапом (флеш мультфильмы, обычно, делаются без него). Однако, этот этап нельзя недооценивать, если речь идет об использовании красивых растровых картинок в мультфильме, интересных красочных эффектов, создании мультфильма для ТВ. Анимация может быть в смешанной технике. К примеру, может быть видео людей снятое с хромакеем (на зеленом фоне, который в последствии удаляется при компоузинге). Скажем, какие-то люди танцуют на этом видео. Можно сделать анимированные фоны и поместить туда этих танцующих людей, то есть они будут танцевать уже в такой мультяшной стране. Или, наоборот, фотографии или видео могут быть использованы как фон, а сверху могут быть наложены анимированные персонажи.
Можно, например, снять на видео какой-то ресторан, а потом сделать анимированного повара, который ходит по ресторану и рассказывает, как всё в нем устроено. С помощью компоузинга можно достичь красивого органичного совмещения анимации с фонами, сделать цветокоррекцию и т.п. Все это позволяет сделать мультфильм максимально привлекательным и законченным.
Нужно сказать, что мультфильмы для интернета - это, обычно, флеш мультфильмы. Эта программа анимации ориентирована именно на интернет и имеет ряд особенностей, которые позволяют упростить работу над мультфильмом и уменьшить размер конечного файла
Программы для анимации
Существует множество программ для работы с анимацией. Есть разные техники и анимации и разные варианты программ позволяющие создавать мультфильмы в тех или иных техниках.
Самые популярные из них: Adobe Flash, Toonz, Toon Boom Studio, Adobe After Effects, Anime Studio. Есть и многие другие, но ограничимся в этой статье этими.
Flash стал лидером в создании анимации для интернета за счет своих гибких возможностей. Toon Boom Studio можно назвать аналогом, имеющим свои особенности, конечно, и без таких возможностей программирования, как у флеша.
Toonz больше подходит для покадровой анимации. After Effects - очень мощная программа для создания эффектов, теледизайна, компоузинга, также, в ней можно делать анимацию с растровой перекладкой. Anime Studio интересна своей простотой, возможностью анимации по скелету и качественным рендером растра.
В общем, все зависит от задач и предпочтений. Есть еще программы для 3d анимации, пластилиновой анимации и т.п. Но это уже отдельный разговор.
Посмотрите мультфильмы нашей студии здесь:
Это самый полный обзор всех аспектов понятия Анимация с лучшими примерами по мнению редакции.
Инвестируй 15 минут времени в новые знания вдохновляясь трендами индустрии.
«Лики войны»: Джайна . Смесь CG ART , 3D и спецэффектов позволяют создавать сравнительно бюджетные мини-истории для роликов Blizzard . CGI + 3D анимация. Социальное вирусное видео, которое вы могли пропустить. Written, Directed & Produced by Lubomir ArsovЕще больше примеров современной анимации ждёт вас ниже…
Виды анимации
С момента появлениея простейшей анимации было придумано широкое разнообразие видов и стилей. Рассмотрим 5 основных видов :
- Традиционная анимация;
- 2D векторная анимация;
- 3D компьютерная анимация;
- Моушн графика;
- Кукольная анимация;
Традиционная анимация (2D, Cel, Hand Drawn)
Традиционная анимация , иногда называемая анимацией cel, является одной из старых форм анимации. В ней:
- аниматор рисует каждый кадр для создания последовательности движений;
- последовательные рисунки, быстро экспонированные один за другим, создают иллюзию движения.
Самый простой пример такой анимации - старые мультфильмы Диснея.
Мультфильм «Маугли»
Как создается традиционная анимация?
- аниматор готовит рабочее поле: прозрачный лист бумаги закрепляет на специального подсвечиваемого экрана;
- на лист бумаги цветным карандашом наносится рисунок;
- рисунок должен быть грубым и приблизительным. Таким он делается, чтобы увидеть, сколько кадров нужно создать для идеального движения персонажа;
- как только очистка и промежуточные чертежи будут завершены, производство переходит к съемке каждого отдельного кадра.
Современные аниматоры могут отказаться от рисования персонажей и кадров от руки. Вместо этого они используют компьютеры, планшеты специальные ручки.
Примеры современной традиционной анимации
Eluvium. Автор Стас Сантимов Are You Lost In The World Like Me? Автор Стив КатсС чего начать?
Стартовать в профессии можно с изучения базовых
Преимуществом уроков является последовательное изучение процесса создания анимации по принципу - «от простого к сложному».
Также, для совершения первых шагов создания анимации необходимо освоить такие базовые программы как:
Photoshop часто упускается из виду при рассмотрении программного обеспечения для анимации, а его возможности отлично адаптированы для покадрового рисования в любом стиле. Функциональность временной шкалы Photoshop позволяет анимировать, рисуя кадр за кадром, используя лук-скиннинг.
- Средний заработок аниматора на Западе равен $4250/мес;
- В наших краях - сильно по-разному (в студии, на фрилансе, на удалёнке — от $400 до $3500 в мес).
2D векторная анимация
Bojack Horseman (сериал на Netflix)2D-анимация - это термин, используемый при обращении к традиционной рисованной анимации. Он также может относиться к компьютерным векторным анимациям, использующими методы традиционной.
Принцип 2D-анимации
Для создания векторных анимаций используются те же самые методы, что и для традиционной.
Такая гибкость позволяет даже новичку создать свой первый сносный ролик.
Как научиться?
В то время как традиционная анимация требует, чтобы вы были хорошим художником, компьютерная - не совсем. 3D-анимация больше похожа конструктор, а не на рисование.
Технологии 3D-анимации имеют много общего со стоп моушн, поскольку соответствуют кадровому подходу. Но, в 3D реализация задач более управляема, поскольку находится в цифровом поле.
3D модель
Вместо рисования персонажа или создания его из глины в 3D-анимации объект создается в цифровой форме. Позже снабжаются «скелетом», который позволяет перемещать модели.
Анимация создается построением моделей на определенных ключевых кадрах, а после компьютер вычисляет и выполняет интерполяцию между этими кадрами для создания движения.
Ниже смотрите наглядный пример процесса создания 3D модели в программе Blender .
Примеры современной 3D анимации
Автор — ManvsMachineNike Air Max
Автор — PlatigeImageWonder Woman — Prologue | Making of
Профессия 3D-аниматора: с чего начать
Профессия высококонкурентная, поскольку эта анимация в основном для коммерческих целей.
Где можно работать моушн дизайнеру:
- В студиях
- На фрилансе
- Продавать шаблоны
- Создавать продукты обучения
Средняя зарплата моушн дизайнера на Западе достигает $5000/мес, у нас заработная плата специалиста стартует от $700/мес.
Stop motion (Кукольная анимация)
Стоп моушн - это остановка объекта после отснятого кадра и последовательное его перемещение для съемки нового фото и нового движения. При воспроизведении сделанных фото одно за другим, создаётся иллюзия движения. Так получается стоп моушн.
Этот приём похож на традиционную анимацию, но вместо рисунков аниматор использует реальные материалы.
Процесс работы над сериалом Robot СhickenЭволюция Stop MotionМне нравятся все формы анимации, но есть что-то уникальное и особенное в стоп моушн: оно более реальное. Но я думаю, что это тоже своего рода одинокая и темная вещь.
Тим Бертон
Анимация Stop-Motion использует объекты, сфотографированные в последовательности для создания иллюзии движения.
Пример Stop Motion анимации
Процесс создания анимации в формате стоп моушн длительный, поскольку каждый объект нужно осторожно перемещать миллиметр за миллиметром. Каждый отснятый кадр, просто обязан создать плавную последовательность движений объекта.
Примеры современной кукольной анимации
Еще пример из Robot Chicken Автор — Bruna BerfordПрофессия кукольного аниматора: с чего начать, сколько зарабатывает
Начинать движение в глубины профессии стоп-моушн дизайнера необходимо с освоения Dragonframe и iStopMotion
Профессия стоп-моушн дизайнера на рынке труда понемногу ожила. Стоп моушн сегодня - это недорогой метод, в котором легко показать хороший художественный вкус, и навыки терпения. Поэтому и дизайнеры зарабатывают неплохо:
- средний заработок на Западе — $3864/мес;
- у нас — от $1000/мес.
Типы анимации
Рассмотрим, какие существуют типы анимации.
Гиф анимация
GIF (с расширением файла, .gif) - это формат файла изображения, который анимируется путем объединения нескольких других изображений или кадров в один.
Пример GIF. (сконвертирован в mp4 для меньшего размера)
В отличие от формата JPEG (.jpg), GIF обычно используют алгоритм сжатия, называемый кодировкой LZW, который не ухудшает качество изображения и позволяет легко хранить файл в байтах.
Более подробно о том, что такое GIF можно прочитать на Википедии.
Примеры GIF-анимации
Примеры на любой вкус находятся на портале giphy.com
Как сделать GIF самостоятельно?
- Ранее мы уже писали о самом быстром .
- А вот еще один полезный урок по созданию гифок в Adobe After Effects .
Cinemagraphy
Так же ознакомитесь с мнением может ли Анимэ стать мейнстримом (на анг языке).
Примеры японской анимации
Prison School Anime Flavors of YouthКак создается анимэ?
Процесс создания аниме состоит из нескольких этапов:
- поиск идеи анимации и персонажа;
- придумывание концепта (продумываются персонажи, основная сюжетная линия, делаются какие-то первые наброски);
- написание подробного сценария;
- рисование персонажей и фонов;
- примерная раскадровка;
- зарисовки или скетчи приводятся в цифровой вид.
12 принципов создания анимации
1. Сжатие и разжатие
Согласно этому принципу объекты анимации можно сжать или растянуть для передачи скорости, импульса, веса и массы объекта.
Такой прием можно использовать для обозначения прыгучести или твердости объекта (например, для того, чтобы показать какой мяч в анимированном ролике наполнен водой, а какой просто является мячом для боулинга). Также художники с помощью этого принципа передают мимику и эмоции персонажа.
Важно : размер объекта не должен меняться в зависимости от того, сплющенный он или растянутый.
Первый принцип анимации2. Подготовка к действию
Заключается в том, чтобы подготовить зрителя к какому-либо действию персонажа анимации.
Например, такой прием используется чтобы показать, что персонаж готовится подпрыгнуть. В этом случае подготовка будет заключаться в том, что персонаж присядет, собирается с силами и начнет выпрямляться, пока не окажется в воздухе, что и будет прыжком.
Важно: без подготовки к любому действию все последующие шаги персонажа будут выглядеть нереалистично и неправдоподобно. Художник не может пропустить этот момент, поскольку зритель просто не поймет, что хочет сделать персонаж в следующие секунды, и смотреть такой ролик будет просто неинтересно.
Подготовка к действию - это обязательный прием для удержания внимания.
Второй принцип анимации3. Инсценировка
Цель этого принципа состоит в том, чтобы как можно более точно раскрыть творческий замысел автора.
В любой анимации важно направить взгляд зрителя на какой-то момент или важный нюанс, движение персонажа или происходящее событие. Инсценировка как-бы привлекает внимание к самому важному.
Отметим, что в этом принципе необходимо чередовать крупные планы с дальним фоном. Крупным планом обычно показана мимика персонажа, а на заднем фоне происходят динамичные или статичные события мультимедийного ролика.
Важно: в каждой сценке и ролике в целом действие должно быть максимально понятным, и находиться в фокусе. Иначе зритель просто не уловит суть задумки автора.
Третий принцип анимации4. Спонтанное действие и От позы к позе
Принцип спонтанного действия состоит в том, что поочередно создается несколько рисунков без конкретного плана действий и финала.
Принцип от позы к позе состоит в том, что художник рисует каждую финальную точку движения и лишь после этого рисует промежуточные позы и движения.
Важно : принцип от позы к позе экономит силы и время художника, ведь, используя его, он точно знает, что будет происходить на экране, и чем все закончится. В спонтанном действии такого бонуса нет - если художник нарисовал что-то некорректно, ему придется все перерисовывать.
Спонтанным действием хорошо отображать огонь, капли, облака, дым и пыль , а еще оно отлично передает эстетику и непредсказуемость природных явлений.
Четвертый принцип анимации5. Инерция и нахлест
Применяется этот принцип для того, чтобы после остановки персонажа части его одежды, волосы, руки или даже ноги продолжали двигаться по инерции. Так остановка кажется более естественной и не вызывает у зрителя придирок к в противоестественности картинки.
Инерция и нахлест делают движения, тело и персонаж анимации более живыми.
В эту группу также входит такой принцип как оттяжка. Благодаря оттяжке при повороте головы персонажа его волосы или же щеки (как у бульдога) будут медленно и пружинисто двигаться за ней.
Пятый принцип анимации6. Замедление движения в начале и конце
Принцип состоит в том, что все движения выполняются медленно в начале, затем они ускоряются и в конце, действия снова замедляются. Это делается для того, чтобы максимально увеличить естественность ролика и приблизить нарисованный персонаж к реальному.
С одинаковой скоростью двигаются только роботы, поэтому художник старается нарисовать все движения своих персонажей в разных амплитудах и на разных скоростях.
Важно: замедление используется не во всех случаях. Например, для того, чтобы показать движение пули замедление не нужно, а вот для движения пистолета во время выстрела - да.
Шестой принцип анимации7. Дуги
Без учета движения персонажа по дуге возникают очевидные ошибки и они становятся слишком механическими.
Абсолютно все движения персонажей выполняются по принципу дуги, и не потому что они все должны быть плавными, а потому что дуга может обрисовать гораздо большую траекторию и наделить персонажа возможностью двигаться максимально естественно.
Седьмой принцип анимации8. Выразительные штрихи
Этот принцип часто путают с нахлестом, но это неправильно. Выразительные штрихи - это особенности движений персонажа, которые придают ему колорита.
Выразительные штрихи наделяют движения персонажа характером момента и настроением. Если персонаж злой, то при стуке в дверь вторая рука у него будет сжата в кулак. Может этот штрих не так и бросается в глаза, но он как нельзя лучше передает настоящие, реальные эмоции человека.
Художник, который придает значение таким мелким деталям, наделяет анимацию жизнью.
Восьмой принцип анимации9. Частота кадров
От того, сколько кадров художник нарисовал между основными действиями зависит и общий характер анимации.
Меняя частоту кадров, аниматор может рассказать целых 10 историй. Если между основными кадрами поз много и они расположены близко друг к другу, то движения будут осуществляться очень медленно, а если кадров мало и они расположены на большом расстоянии друг от друга - движения будут очень быстрыми.
Стандартная частота кадров для кино равна 24 . Анимация также рисуется в один, два или три кадра.
Важно: чем чаще будут меняться кадры, там в более тщательной прорисовке они будут нуждаться.
Девятый принцип анимации10. Гиперболизация
Принцип состоит в том, что почти каждое выражение лица, мимику и эмоцию необходимо сделать уникальной.
С помощью этого принципа грустную эмоцию можно сделать еще более грустной, а веселую - еще более веселой. Гиперболизация базируется не на искажении эмоций и мимики, а на придании еще большей убедительности в движениях и выражениях лица.
Принцип гиперболизации уместен всегда, поскольку он делает каждый ролик более интересным, насыщенным и завершенным.
Оптимальную степень гиперболизации определить сложно. Поэтому сперва необходимо гиперболизировать задумку по максимуму, а затем адаптировать под ролик.
Десятый принцип анимации11. Прорисовка
Рисовать по этому принципу нужно так, чтобы подать рисунок в рамках трехмерного пространства. Передавая массу, объем и равновесие персонажа.
Если нарисовать фигуру со всех сторон, то процесс анимации будет значительно упрощен.
Важно: во время того, как вы делаете наброски персонажа, лучше всего использовать стандартные геометрические фигуры, такие как сферы кубы и цилиндры, а не квадраты и прямоугольники. И еще, внимательно следить за тем, чтобы нарисованный персонаж не получился плоским.
Одиннадцатый принцип анимации12. Харизматичность
Принцип состоит в том, что нарисованный герой обязательно должен быть интересным и необычным, что значит - вызывать эмоции у зрителя, цеплять и иметь изюминку.
Красота персонажа - это не обязательно харизматичность. Эта черта может выражаться в любой детали, быть заключенной в одном персонаже или же во всех героя ролика.
Важно: добиться харизматичности персонажа можно, разнообразив форму объекта, пропорции, а также, подчеркнув характерную деталь. Она обязательно должна быть необычной и выбиваться из общей картины характера персонажа.
Двенадцатый принцип анимацииТенденции (тренды) в анимации
Сегодня анимация перевоплощается в самые разнообразные и захватывающие способы рассказа истории и идею. Благодаря появлению новых достижений в технике и телекомуникационных технологиях, регулярно возникают новые тренды в анимации.
- Смотрите .
Вот самые популярные из них:
3D в стиле ретро и винтаж
Cтиль 3D-анимации, который снова становится популярным - это ретрофутуризм. Это позволяет использовать фантастическую эстетику, о которой люди в конце 70-х и начале 80-х думали, что будущее может выглядеть именно так.
Техника: использование пышных световых эффектов и пиксельных цифровых элементов служит для создания местности и персонажей, в ретро мире.
Высококонтрасная Cel Animation
Это тенденция анимации, которая уже несколько лет находится на подъеме и используется некоторыми из ведущих компаний в мире, включая Nike, Nickelodeon, Disney, Cartoon Network и даже для игр Winter X.
Яркие контрастные цвета в сочетании с угловым дизайном используются, чтобы придать анимации упрощенный, почти cel-стиль.
Результат - забавная последовательность от которой трудно отвести взгляд.
Некоторые из лучших примеров взяты из Golden Wolf, компании по производству анимации, базирующейся в Лондоне.
Микс 2D и 3D
Тенденция, начавшаяся в последние годы и продолжающая нарастать, создает анимации, которые выглядят как сочетание 2D и 3D.
Вам не нужно далеко ходить, чтобы найти учебное пособие, в котором показано, как в итоге получить плоский 2D-взгляд, используя cel shader для рендеринга 3D.
Предоставляя 3D-объектам 2D-взгляд, аниматоры могут создавать выразительные, иллюстративные элементы, которые сразу привлекают внимание зрителя, обеспечивая четкую и красочную информацию.
Сверхсюрреализм
Если есть одна отличная анимационная тенденция, которая полностью использует силу изображений CGI, это стиль сюрреализм.
Эффект гипер-сюрреалистической анимации основан на объединении фотореалистичных элементов с фантастическими изображениями для создания сказочных миров и действий.
Есть такой пример анимации, как «The Dreamer» от Roof Studio для Honda, который привлекает зрителей к причудливому путешествию, поскольку реалистичное транспортное средство движется по диким местам.
Динамическая анимация функций в приложениях
Вместо использования статических изображений или всего текста многие приложения в 2018 году используют функциональную анимацию, которая держит внимание пользователя с ярким, интересным пользовательским интерфейсом.
Это включает в себя использование анимации для улучшения элементов навигации, подтверждения ввода пользователя, увеличения и уменьшения содержимого и т.д.
Возрождение 2D-анимации в маркетинге
В индустрии развлечений, таких как кино и видеоигры, 2D-анимация почти исчезла, когда появился 3D. С тех пор компании чувствовали, что нет лучшего способа увлечь аудиторию, игроков и потенциальных клиентов, чем с помощью 3D-анимации, даже если для этого требуется больше времени и усилий.
Adobe After Effects - программное обеспечение компании Adobe Systems для редактирования видео и динамических изображений, разработки композиций, анимации и создания разнообразных эффектов.
Важное примечание. Если вам нужно быстро создать простейшую Анимацию из нескольких кадров в Фотошопе, перейдите на урок - .
Я довольно-таки давно интересуюсь покадровой анимацией, хотя и изучила мало материалов. Все книги, которые я начинала читать, довольно длинные, трудные и «сухие».
Поэтому после того, как я стала чуть-чуть понимать технологию создания анимаций, я начала искать способы их воплощения в жизнь при помощи Фотошопа.
Многие советовали мне переходить на другие программы (например, TVP Animation Pro ), но я, не желая подстраиваться под новые интерфейсы других программ, решила делать всё в Фотошопе.
А этот урок я написала специально для тех, кто не понимал технологию создания покадровых анимаций конкретно в Фотошопе. Кто не хотел чуть-чуть покопаться и понять, что к чему.
Я затрону две темы: короткие анимации и длинные. Не стоит пролистывать неинтересный вам тип анимаций: там может быть информация, которая вам пригодится для анимаций нужного вам типа.
Короткие анимации – это анимированные аватарки, смайлики и т.д.
Длинные анимации – это мультфильмы, видео и т.п.
Сначала я расскажу теорию, а затем мы создадим анимацию на практике.
Важное дополнение
Многие спрашивают: «Почему моя анимация такая дёрганная, мой персонаж/объект быстро/медленно двигается?»
Отвечаю: ваш персонаж/объект двигается быстро
, потому что вы нарисовали мало
кадров.
Ваш персонаж/объект двигается медленно , потому что вы нарисовали много кадров.
Ваш персонаж/объект дёргается, потому что вы не проследили за предыдущим движением и нарисовали следующее, которое не согласованно с предыдущим.
Запомните: в одной секунде 24 кадра!
Поэтому, когда вы соберётесь создавать свою анимацию, помните: 24 кадра = 1 секунда, 24 кадра = 1 секунда. Никогда не забывайте об этой очень важной детали.
Короткие анимации
Я думаю, вы часто сталкивались с анимациями на аватарках, с анимированными смайликами.
Некоторые смайлики сделаны во Flash’e
, но свои я рисую в Фотошопе. Не стоит думать, что такие короткие анимации делать легко. С одной стороны – да, они небольшие по размеру, но с другой – пока отрисуешь эти 15
-30
кадров, замаешься (а представьте, если вы хотите создать трёхминутный клип, то вам придётся делать 4320
кадров!).
Что вы должны помнить и знать?
Допустим, вы захотели нарисовать себе на аватарку девушку с развевающимися от ветра волосами. Значит:
Во-первых, волосы это вам не картон – под воздействием ветра средней силы они будут являться поперечными волнами.
Примерно так это показано на схеме:
Под воздействием сильного ветра волосы будут почти прямыми, но вашему персонажу придётся сильно зажмуриться и схватиться за что-нибудь, чтобы его не сдуло, так как в реальности такой ветер мало кто способен вынести. хотя такой тип анимации можно использовать, когда ваш персонаж едет на велосипеде, например.
И, наконец, слабый ветерок аккуратно приподнимает и опускает волосы.
Слабый ветер:
Средний ветер:
Сильный ветер:
Всё то же самое относится к ткани и одежде - они будут вести себя примерно так же, как и волосы.
А теперь, например, вы захотели нарисовать анимацию с движением своего персонажаобъекта. значит:
Во-вторых, любое действие с чего-то начинается. Вы никогда не замечали, что, например, чтобы встать со стула, вы его сначала чуть-чуть отодвигаете, и немного наклоняетесь вперёд, а только потом уже встаёте? или, что захотев сделать удар ракеткой вы сначала её отводите и поворачиваетесь корпусом вместе с ней, а только потом делаете удар?
Таких примеров можно привести огромнейшую кучу, но лучше посмотреть:
Чтобы не попасть впросак с этими движениями перед действиями (ДПД), чаще анализируйте и наблюдайте за движениями людей или животных.
Небольшое дополнение
В общем, никогда не забывайте о физике. Вес объектов, материалы, из которых они сделаны (упругость, мягкость, жёсткость и т.п.), всё это нужно.
Поймите, что без этого ваша анимация будет мёртвой, ужасной и некрасивой!
Лучше поработайте над ней и никогда не спешите.
Длинные анимации
Ооо, вот тут-то и начинается всё самое интересное!
Частенько ли вы, смотря мультики или аниме, восхищались анимацией и завидовали тем, кто умеет их делать? Все эти прекрасные сцены, пластика движений и мн. др.? Я честно признаюсь - да. Каждый раз, когда я что-то смотрю, я пытаюсь понять, как же аниматоры с этим работали? Как они всё это создавали?
Но, в силу того, что я не знаю, в каких они работают программах, я пытаюсь понять весь процесс, используя механизмы Photoshop-a.
И знаете, я ведь нахожу ответы на все свои вопросы!
Но давайте будем разбирать всё по порядку.
Процесс создания длинной анимации
1. Изначально нам нужна ИДЕЯ
Например, вы решили сделать небольшой клип, в котором будут танцевать несколько девушек.
Если вы матёрый художник-аниматор, вы можете в своём клипе «заставить танцевать» от 3 и более девушек.
Но в начале своего пути аниматора лучше ограничиться одной-двумя.
2. Теперь вам необходимо составить раскадровку по сценам (РПС)
Что это такое, и с чем её едят?
Представьте себе фильм. Теперь представьте кол-во различных видов из разных камер. Крупный план, пейзаж, камера, следующая за персонажем...
Ладно, когда их не так много. Но когда мы делаем целый клип их может быть больше 30
штук!
Поэтому умные дяденьки и тётеньки аниматоры пользуются такой прекрасной штукой, похожей на расчерченную книжечку.
В ней они изображают сцены.
Только одни рисуют в каждом отсеке таблицы одну сцену, потом другую, третью и т.д., а другие рисуют в каждом отсеке таблицы изображения через несколько секунд (извиняюсь, если непонятно объяснила).
Очень удобно и то, что можно делать сбоку описания, а то, бывает, нарисуешь, потом через некоторое время посмотришь, и не поймёшь - что это я тут изобразила?
Так что берём себе на заметку такую раскадровку по сценам и пользуемся такими книжечками.
Можно даже не делать книжку, а просто создать большой файл в Фотошопе и там все сцены отрисовывать.
3. Теперь вам нужно придумать фон, концепт персонажей и движения
Движения рисуем в книжечке РПС.
Если у вас не одна сцена в клипе, то придётся рисовать несколько разных фонов. Рисуйте их в отдельных файлах.
И запомните одну вещь - фон не появляется из ничего. Так что если вы хотите, чтобы камера как бы отъезжала вбок, то фон там тоже должен быть. т.е. придётся рисовать фон по длине (или по ширине, а может и по тому, и по другому) больше.
Затем вы продумываете внешний вид вашего персонажа и начинаете создавать анимацию.
От теории переходим к практике
Давайте вот с этого момента вы немного подумаете над ИДЕЕЙ и, вообще, над пунктом «Процесс создания анимации». К чему это я? К тому, что сейчас вам будет нужен подопытный кролик, которого вы будете заставлять двигаться. Мы не будем делать клип, в котором 4320 кадров. Лучше всего и легче всего будет понять, как создать покадровую анимацию по 24 -72 -кадровой анимации.
Что ж, начнём!
1. Создаём новый документ. Для своей анимации я взяла небольшой размер – 400 x 500 px.
2. Теперь, если у вас нет внизу слева окна «Анимация », смотрим наверх, открываем вкладку «Окно » - «Анимация ».*
* - В примерах используется русифицированная версия Photoshop CS2 .
На скриншоте выше мы видим окно анимации в котором есть первый кадр, ниже него небольшая панель, на которой расположены кнопки:
Всегда/однажды - выбрав «Всегда» вы зациклите анимацию. Если вы выберете «Однажды», анимация будет проигрываться только один раз. (Оба варианта анимаций в моём уроке есть: зацикленная - где показан принцип ДПД, воспроизводимая один раз - где показана смена сцен).
Выберите первый кадр - возвращает нас к самому началу.
Выбирает предыдущий кадр - не будем звать Кэпа. (=
Играет анимацию/Останавливает анимацию - Play/Stop.
Выбирает следующие кадры - следующий кадр. Ваш Кэп!
Tweens кадры анимации - с помощью этой кнопки мы можем добавить плавные переходы между двумя кадрами посредством добавления новых.
Дублирует выбранные кадры - не совсем верное название... Лучше бы было «Добавление нового кадра».
Удаляет выбранные кадры - корзина.
3. Теперь мы можем начинать рисовать. для этого созданный ранее вами фон поставьте на Background (Задний план / Фон).
4. Затем создайте новый слой (Ctrl+Shift+Alt+N) и нарисуйте на нём своего персонажа.
4. Теперь начинается самое трудное: нам нужно нарисовать мно-о-ого раз подряд одного и того же персонажа в разных позах.
Создаём новый кадр, и... Тут есть два варианта:
А) Либо вы начинаете каждый раз рисовать своего персонажа заново, либо..
Б) Копируете предыдущий слой и изменяете его (дорисовываете-стираете, а не пользуетесь трансформацией! Такой инструмент вам будет нужен редко, потом напишу, когда).
Поднатаскавшись в анимации вы сможете безболезненно пользоваться обоими вариантами. (Можете попробовать каждый из них в отдельном документе).
Вариант А:
1. Мы нарисовали наш первый кадр.
2. Чтобы видеть, как изменять следующий, мы уменьшаем прозрачность слоя примерно до 30% и создаём новый слой, на котором уже рисуем кролика для второго кадра.
3. Дорисовываем второй кадр и отключаем видимость у предыдущего, первого слоя.
Вариант Б:
1. Создаем кадр с персонажем и делаем этот слой невидимым.
2. Затем дублируем его (Ctrl+J), перетащив слой на кнопочку «Создать новый слой» левее корзины.
3. Теперь делаем второй слой видимым и начинаем его изменять.
Таким образом, дублируя предыдущие слой, вы создаёте новые кадры и изменяете именно их, а не один и тот же.
5. Сидим, рисуем кадров 10 -15 ...
6. И смотрим, что получилось.
Получился бегущий кролик.
Причём ни одна его часть не скопирована: каждый кадр нарисован заново.
Смотрите сами:
В процессе создания анимации следует помнить, что довольно-таки трудно переключаться между сотней слоёв, и поэтому не стоит откладывать покраску или изменение чего-либо на потом. Делайте сразу.
Почти конец
Выше я оговорилась об инструменте ().
Пользоваться им стоит тогда, когда вы например, хотите отдалить камеру, приблизить её, повернуть и т.д. (Если вам нужно только переместить фон, воспользуйтесь видео-редакторами, вам же будет легче). Не стоит пользоваться искажением, наклоном и другими инструментами трансформации без надобности.
И, после того, как мы сохранили нашу gif
-анимацию как видео файл формата .avi
, например, можно смело идти в Киностудию Windows Live
.
Там уже делайте с вашим клипом всё, что душе угодно.
А затем вы можете загрузить свой клип на youtube.com и наслаждаться проделанной работой.
Всем БОЛЬШОЕ СПАСИБО за внимание, с вами была Lero-art. Извините меня за косноязычие, странность изложений и другие огрехи в уроке, если таковые есть. Все они от того, что мысли путаются, а слова не складываются в предложения...
Но, надеюсь, вы почерпнули для себя что-то новое и интересное!
Анимация в интернете давно перестала быть простым украшением страницы и превратилась в полезный инструмент для улучшения юзабилити. Она помогает пользователю взаимодействовать с интерфейсом, привлекает внимание к важным моментам.
Анимация - это последовательное отображение похожих кадров друг за другом. Каждый кадр немного изменяется, поэтому кажется, что картинка движется.
Для анимирования интерфейса, создания интерактивных прототипов или рекламных роликов используют специальные программы, например, Adobe Animate или After Effects.
Чтобы создать простой веб-баннер или презентацию, не обязательно разбираться со специальными программами. Для этого подойдут и встроенные средства Photoshop.
C чего начать
Первым делом нужно определиться с тем, что мы будем анимировать и какого результата планируем достичь.
Для создания анимации я взял один из ярких проектов с Behance и перерисовал его в Photoshop. Выровнял по контент-сетке, подобрал размеры и поместил каждый элемент в отдельный слой. В результате у меня появился отрисованный в PSD-формате первый экран сайта, который затем я анимировал.
Шкала времени
Перед созданием анимации необходимо подготовить нужные инструменты - включить отображение «Шкалы времени», которая помогает управлять кадрами в анимации.
Для этого я открываю вкладку «Окно» и ставлю галочку напротив строки «Шкала времени».
Внизу окна в Photoshop должна появиться широкая строка, с помощью которой можно управлять кадрами в анимации.
Чтобы создать первый кадр, нажимаю иконку «Создать анимацию кадра» на «Шкале времени».
После того, как первый кадр появился, можно приступить к созданию движения.
Промежуточные кадры
В Photoshop элемент можно анимировать несколькими способами:
- Нарисовать несколько кадров, вручную изменяя положение и свойства элементов. Если анимация достаточно длинная, то прорисовка каждого кадра занимает много времени.
- Вставить промежуточные кадры. Необходимо вручную задать лишь состояния макета: в начале и в конце анимации. Необходимые кадры между этими состояниями добавит сам Photoshop. Этот способ подойдет, чтобы сделать постепенное появление и исчезновение объекта или показать его перемещение.
Сначала я анимирую изображение балалайки. Для плавного появления изображения использую инструмент «Вставка промежуточных кадров». Чтобы Photoshop самостоятельно анимировал элемент, необходимо задать два состояния для элемента - начальное в первом кадре и конечное в следующем.
Поэтому я добавлю еще один кадр в «Шкалу времени» с помощью кнопки «Создать копию кадров».
После добавления нового кадра переключаюсь на первый и убираю видимость слоя с балалайкой. Также можно задать непрозрачность слоя 0%.
На следующем кадре проверяю, виден ли слой с балалайкой.
После работы с изображением балалайки настраиваю появление текстовой строки. В первом кадре я выделяю текст «Soul sings» и сдвигаю его вправо за пределы макета. С текстом «3 strings» поступаю так же - сдвигаю влево, пока он не исчезнет.
Во втором кадре возвращаю текст назад.
Отлично. Теперь вставим промежуточные кадры между ключевыми.
Для этого нажимаю кнопку «Создание промежуточных кадров» на «Шкале времени».
В появившемся диалоговом окне указываю, сколько кадров необходимо добавить.
Чем больше кадров, тем дольше анимация и плавнее двигается элемент. Если кадров слишком мало - элементы будут двигаться рывками.
Первая часть анимации готова. Теперь ее можно воспроизвести и посмотреть, что получилось.
Нажимаю на кнопку воспроизведения на «Шкале времени».
Вставка промежуточных кадров помогла быстро создать анимацию с плавным появлением и движением элементов.
Появление, исчезновение и движение можно комбинировать друг с другом, чтобы добиться еще более интересных эффектов.
Покадровая анимация вручную
Кроме линейной анимации, иногда нужно создать хаотичное движение или показать сложное взаимодействие элементов. Обычно для этого создают несколько копий первого кадра, а потом немного изменяют каждую копию - рисуют анимацию покадрово.
Я несколько раз скопирую последний кадр, чтобы создать движение стрелки и текста «go to shopping».
В следующем кадре выделяю нужный слой с текстом и стрелкой, сдвигаю его немного вверх, а в последнем кадре - вниз.
Теперь можно запустить анимацию и посмотреть результат.
Так как кадры сменяются быстро, то глаза не успевают сфокусироваться на последнем кадре и зафиксировать конечное положение предметов на экране.
Поэтому я увеличил длительность последнего кадра: нужно нажать на стрелку около надписи «0 сек.» и выбрать другое время из списка.
Для последнего кадра я задал длительность в две секунды. Теперь воспроизведение замедляется в конце. Поэтому за движением элементов комфортно наблюдать.
Сохранение и экспорт
В окне предпросмотра можно еще раз просмотреть анимацию и изменить настройки сохранения.
По умолчанию после воспроизведения анимация останавливается. Поэтому меняю режим воспроизведения на «Повторение» и сохраняю.
Вот какая анимация получилась в результате:
Заключение
В Photoshop просто создавать короткие интерактивные баннеры и презентации, анимировать отдельные элементы. Удобно экспериментировать с результатом.
