Как сделать эффект движения на рисунке
Обновлено: 06.07.2024
В отличие от кинематографа, фотография пребывает в вечном конфликте с движением, поскольку на снимке запечатлевается лишь единый момент времени, лишь одна фаза. Тем не менее передать движение в изображении можно как чисто фотографическими приемами, так и с помощью обработки в графическом редакторе.
Надо полагать, что фотографические способы передачи движения на снимке появились случайно. Например, вследствие установки длительной выдержки у кого-то получился смазанный объект на четком фоне. Другой мог увлечься съемкой, поворачиваясь вместе с камерой за движущейся машиной, и получил резкий объект на размытом фоне. Эти приемы соответственно называют смазкой и проводкой.
Этот урок требует определенных навыков работы с масками и выделениями (и потому предпочтительнее использовать версию Photoshop CS4, в которой есть отдельная панель для работы с выделенными областями). Ну и поскольку создаваемые контуры могут иметь сложную форму, их построение желательно выполнять с помощью графического планшета.
Советы
В принципе, нам не обязательно полностью закрывать изображение мотоцикла на размываемом слое – достаточно наложить фон лишь по контуру движущегося объекта. Ширина этой обрисовки должна соответствовать дистанции размытия фильтра Motion Blur.
Более тонким приемом является имитация проводки зумированием. Для этого нужно подобрать фотографию, на которой объект движется в направлении камеры. Нужный эффект достигается применением фильтра Radial Blur с методом размытия Zoom. Четкие области также восстанавливаются посредством создания маски прозрачности. При этом необходимо помнить, что при реальной съемке черные участки практически не оставляют следов, тогда как светлые дают наиболее четко выраженный смаз.
Выделяем мотоцикл
Любым удобным способом выделяем движущийся объект. В данном случае мы обвели мотоцикл инструментом Pen, а потом преобразовали полученный контур в выделенную область, слегка растушевали ее края и копировали в новый слой.
Клонирование фона
Теперь нам нужно отключить видимость верхнего слоя, выделить нижний и заклонировать в нем мотоцикл элементами окружающего фона. При этом можно особо не усердствовать, поскольку данное изображение будет интенсивно размываться, так что на нем не останутся следы швов.
Размываем фон
Выбираем фильтр Filter→Blur→Motion Blur и задаем в нем нужное значение степени размытия, которое зависит от характера изображения и от пиксельных размеров снимка. Угол размытия должен соответствовать направлению движения объекта.
Размываем объект
Теперь создадим еще одну копию слоя с мотоциклом и тоже обработаем ее фильтром Motion Blur. Для более мягкого эффекта можно повторно применить тот же фильтр. Таким образом, у нас имеются два слоя с мотоциклистом: четкий и размытый.
Накладываем маску
На размытое изображение мотоцикла накладываем маску слоя и прорисовываем ее так, чтобы сквозь прозрачные участки проступил нижележащий слой. Наша цель – маскировать все, кроме узкой полосы размытия за спиной мотоциклиста и задним колесом. Таким образом, мы усиливаем имитацию съемки с проводкой выборочной смазкой движущегося объекта.
Размытие колес
Теперь для большего правдоподобия нужно поработать над вращением колес, предварительно выделив их инструментом Elliptical Marquee. Для этого мы выберем фильтр Filter→Blur→Radial Blur с методом размытия Spin. Для восстановления попавших в выделение невращающихся частей можно воспользоваться инструментом History Brush.
Анимация ходьбы сложна не только тем, что задействованы практически все конечности персонажа, но и тем, что необходимо передать еще и походку, а походка у разных персонажей может быть абсолютно разной. При анимации должны учитываться все характеристики персонажа, которые напрямую влияют на походку - это пол, возраст, вес, особенности телосложения, характер, рост и другие. Так же нужно учитывать темп походки, в зависимости от ситуации - торопится ли персонаж куда-то, прогуливается не спеша или плетётся еле-еле.
В данном уроке мы разберём типовую походку, которую можно применить к большинству персонажей среднего телосложения, среднего возраста, среднего роста, короче говоря, будем делать анимацию стандартной походки человека в обычном среднем темпе.
1. Что нужно знать об анимации походки
Чтобы сделать качественную анимацию, не важно какую, будь то походка, падение предмета, движение автомобиля, нужно чётко представлять сам процесс движения, который вы хотите изобразить. Анимация - это движение, а любое движение подвержено законам физики.
Для работы я буду использовать вот такую вот зарисовку-шпаргалку Диснеевского аниматора, на которой изображена стандартная походка человека, она разбита на пять фаз. Все фазы представляют из себя основные действия из которых и формируется походка.
Посмотрите внимательнее данную зарисовку. Ходьба человека представляет собой повторяющиеся движения, например, вы отталкиваетесь левой ногой, наступаете на правую, перемещаете на неё центр тяжести тела и отталкиваетесь этой же правой ногой ногой, наступая уже на левую. При ходьбе ваше тело и руки выступают в качестве балансира, шагая правой ногой вы перемещаете противоположную - левую руку вперёд, а правую назад и наоборот. При этом, тело в движении наклоняется немного вперёд и чем быстрее шаг, тем больше угол наклона тела, для удержания равновесия.
Сам процесс ходьбы можно отнести к падению, вы отталкиваетесь одной ногой и под силой тяжести падаете на вторую, удерживая равновесие всего тела при помощи рук и туловища. При каждом шаге (падении) вы немного приседаете и в данной точке на долю секунды останавливаетесь, при отталкивании наоборот привстаёте и снова приостанавливаетесь на долю секунды.
На шпаргалке видно, что первая фаза идентична последней - пятой, в ней меняются только руки и ноги на противоположные. Во второй фазе человек наступает и перемещает центр тяжести на правую ногу, в третьей фазе он полностью переместил центр тяжести на правую ногу и готовится к толчку и в четвёртой фазе он отталкивается правой ногой.
2. Подготовка персонажа к анимации
При подготовке персонажа нужно учесть несколько основных моментов:
1) Персонажа нужно рисовать в фотошопе именно векторными инструментами, такими как "Перо" и "фигуры". В процессе анимации мы будем постоянно изменять положение конечностей персонажа, чтобы задать ему определённую позу, делать мы это будем с помощью "Свободной трансформации". При трансформировании векторные слои не искажаются. Если сделать персонаж растровыми слоями или смарт-объектами, то при создании анимации, трансформируя слои мы будем наблюдать их размытие. Кроме того, готовую анимацию вы сможете увеличивать и уменьшать до нужных размеров не теряя в качестве, векторный формат позволяет это делать без проблем.
2) Сам персонаж должен быть разделён на слои, т.е. каждая часть его тела и каждый элемент одежды рисуются на отдельном слое, после чего эти слои группируются по частям тела. Если посмотреть подготовленный мной персонаж, то можно увидеть, что я определил такие группы как рука1 - это правая рука, рука2 - соответственно - левая, Нога1 - правая нога, нога2 - левая, туловище и голова. В свою очередь, каждая группа состоит из соответствующих слоёв, например туловище из элементов одежды, тазовой области и галстука, рука1 из плеча, предплечья и кисти и т.д.. Группы слоёв располагаем соответственно в нужном порядке, например у меня группа слоёв с левой рукой
расположена под группой слоёв с элементами туловища, потому что данная рука должна быть за туловищем.
Такое группирование слоев будет удобно при анимации, потому что мы сможем манипулировать каждой частью тела, как в группе, так и по отдельности, когда мы приступим к анимации вы поймёте о чем речь, если на данный момент еще не поняли.
3) Все конечности персонажа должны иметь закругления в местах состыковки. Это нужно для того, чтобы при изменении положения части тела не было видно краёв состыковок. Допустим, при сгибании ноги в колене, если формы у состыковки конечностей будут закруглённые, то будет всё в норме.
Если не сделать закругления на конечностях, то будет постоянно возникать проблема с углами. Можно для примера состыковать два прямоугольника, допустим, один будет бедром, второй голенью. Выглядеть это будет примерно так.
3. Анимация ходьбы персонажа
Теперь, когда у нас есть подготовленный персонаж и шпаргалка - приступаем к анимации. Думаю, вы уже поняли, что мы будем делать покадровую анимацию, где каждая фаза из шпаргалки у нас будет отдельным кадром. Нам нужно для каждой фазы создать кадр с соответствующей позой персонажа.
1) Делаем первый кадр. Переименовываем группу слоёв с персонажем, назовём её "один" - это у нас будет первый кадр. Соответственно, мы будем настраивать позу персонажа аналогично фазе №1 на шпаргалке.
Выделяем группу слоёв с ногой, кликнув по ней левой кнопкой мыши, переходим в верхнем меню "Редактирование" - "Свободное трансформирование" и настраиваем положение ноги, аналогично её положения в первой фазе. Устанавливаем нужный градус и настраиваем положение стрелочками на клавиатуре положение, так будет точнее и удобнее, чем мышкой.
Теперь настраиваем по отдельности положение голени и ступни, после чего проделываем тоже самое со второй ногой.
Далее настроим положение туловища персонажа, оно должно быть немного наклонено вперёд. Выделяем группу "Туловище", вместе с группами обеих рук, удерживая "Ctrl" и кликая по каждой группе левой кнопкой мыши. Берём свободное трансформирование и настраиваем наклон туловища.
Поправим голову, чтобы она была в нужном месте на теле. Ну и переходим на руки, настраиваем все их части согласно шпаргалке: плечо, предплечье и кисть.
После того, как мы настроили первый кадр нужно обозначить верхнюю и нижнюю точки персонажа, как на шпаргалке, чтобы можно было настраивать высоту подъёма и опускания тела во время движения. Сделаем мы это с помощью направляющих. Если они у вас, отключены перейдите в верхнем меню "Просмотр" - "Показать" - "Направляющие", там должна стоять галочка. Так же нужно включить линейки, для этого переходим в "Просмотр - "Линейки".
Теперь наводим курсор на верхнюю линейку и удерживая левую кнопку мыши тащим направляющую к верхней точки головы персонажа и таким же образом создаём вторую направляющую, которую устанавливаем в нижней точке - это будет условный пол. Ступни персонажа в первом кадре должны стоять на нём, если у вас какая-то выше или ниже нужно настроить точно по направляющей.
2) Делаем все остальные кадры. Теперь у нас есть первый кадр и из данного кадра мы будем делать второй, а точнее из копии данного кадра. Копируем группу слоёв первого кадра, удерживая клавишу "Alt" и левую кнопку мыши тащим группу слоёв в верх или в низ. Переименовываем её в номер "два" - это будет второй кадр.
Отключаем видимость первого кадра, кликнув по иконке глаза и точно так же как мы выставляли конечности персонажа в первом кадре делаем это со вторым.
Выставляем положение всех конечностей согласно шпаргалке и не забываем учесть, что в данном кадре персонаж немного приседает, для регулировки вертикального положения тела персонажа мы и выставляли направляющие, по которым будем ориентироваться.
Ну и делаем таким же образом все остальные кадры. Первый и пятый кадры, как мы видим на шпаргалке, почти одинаковые, только положение рук и ног наоборот, поэтому для пятого кадра можно использовать копию первого, просто поменять руки и ноги местами.
На шпаргалке изображён цикл шага одной ногой, т.е. человек шагает правой ногой и на последнем пятом кадре цикл заканчивается на подготовке к шагу левой ногой. Чтобы сделать анимацию зацикленной, нам нужно продолжить цикл, чтобы персонаж сделал полный шаг и левой ногой. Для этого нам необходимо добавить еще три кадра, которые будут идентичны второму, третьему и четвёртому кадрам, только смениться положение рук и ног на противоположные. А именно, шестой кадр будет как второй, седьмой, как третий и восьмой, как четвёртый. Таким образом, у нас получится полный цикл шага - сначала персонаж будет шагать правой ногой, потом левой.
Мы сделали все восемь кадров, теперь можно сделать из них анимацию. Меняем рабочую среду на "Движение"
и создаём "Анимацию кадра".
Теперь создаём в шкале времени восемь кадров, кликая по соответствующей кнопке и включаем видимость наших слоёв на соответствующих кадрах.
На первом кадре оставляем видимым только группу с первым кадром, на втором - второй и так далее.
Теперь выделяем все кадры в шкале времени, удерживая "Shift" и кликая по каждому из них левой кнопкой мыши и на любом из кадров кликаем по времени и включаем задержку на 0,1 секунду.
Получилась походка персонажа, он идёт на месте. Если вам не нравится, как получился какой-либо из кадров, то можете его подкорректировать, чтобы анимация была более привлекательной. Тут стоит обращать внимание на все мелочи и не нужно экономить время на этом этапе.
3) Теперь зададим персонажу движение, чтобы он не шагал на месте, а именно перемещался. Поочерёдно в шкале времени включаем кадр за кадром и на каждом кадре перемещаем персонажа с помощью инструмента перемещение. При этом смотрим как это выглядит в движении, где-то можно переместить персонажа побольше, где-то поменьше, а именно в момент наступания на первом и шестом кадрах можно перемещение сделать минимальным, потому что персонаж при данном действии практически не перемещается.
Если вы сомневаетесь, что движение персонажа получается верным, то можете поэксперементировать на себе, просто встаньте и сделайте несколько шагов, чтобы понять в какой момент ваше тело перемещается больше, в какой меньше, а в какой и вовсе не перемещается.
Для того, чтобы персонаж выглядел более живым и подвижным можно анимировать галстук, который при ходьбе будет покачиваться из стороны в сторону. Для этого мы включаем кадры по очереди и в каждом из них меняем положение галстука.
При отталкивании галстук будет немного наклоняться в левую сторону, при наступании наоборот. Просто смотрите на положение тела персонажа и подбирайте положение галстука для его каждого движения.
Вот таким образом можно анимировать ходьбу персонажа в фотошопе. Если понимать все основные принципы и иметь под рукой шпаргалку, то данная задача вообще не сложная.Подобные шпаргалки, с различными походками персонажей, можно найти в свободном доступе.
На сегодняшний день я использовал много разных фильтров размытия, но я не помню чтобы когда-либо использовал в своих работах фильтр Spin Blur (Размытие вращения) в Adobe Photoshop. Это специальное размытие предназначено для добавления движения какому-нибудь вращающемуся объекту. Этим объектом может быть что угодно, например, шкив двигателя, страницы книги, по которым дует проходящий ветер, или лопасти огромной ветряной турбины. Добавление движения к объекту привносит ему жизнь. Данный фильтр оживляет неподвижные изображения. Именно поэтому мне хотелось бы сегодня воспользоваться им, возможно, и вы посмотрите на него с другой стороны.
В качестве примера я буду использовать изображение с ветряной турбиной, лопасти которой неподвижны. Для начала я применю к изображению фильтр Spin Blur (Размытие вращения), а затем сделаю ещё один шаг и добавлю несколько дополнительных эффектов движения к лопастям. И в заключении я отредактирую маску фильтра, чтобы улучшить внешний вид всего изображения. Все эти действия мы будем делать в Photoshop.
Выбор изображения
Я уже открыл изображение в Photoshop. Для начала сделайте клик правой кнопкой мыши по фоновому слою и выберите команду Convert to Smart Object (Преобразовать в смарт-объект). Это сделает изображение неразрушающим, а также появится маска, которая нам понадобится позже.
Перейдите в меню Filter > Blur Gallery > Spin Blur (Фильтр – Галерея размытия – Размытие вращения).
Поскольку площадь фильтра меньше, чем диаметр лопастей, кликните по внешнему краю окружности и переместите её наружу. Тем самым мы расширим область размытия.
После этого перейдите на правую панель, где расположена настройка Blur Angle (Угол размытия). Регулируя ползунок этой настройки, мы можем ускорить или замедлить эффект вращения. Я установил значение 15 градусов, на мой взгляд этого достаточно.
Добавление эффекта движения
На данном этапе мы сымитировали вращение лопастей. Мне хотелось бы добавить ещё несколько эффектов движения к вращающимся лопастям. Для этого перейдите на соседнюю вкладку Motion Effects (Эффекты движения) на правой панели.
Здесь я внёс следующие изменения: Strobe Strength (Интенсивность импульсной вспышки) 10%, Strobe Flashes (Импульсные вспышки) 4 и Strobe Flash Duration (Длительность импульсной вспышки) 2 градуса. Для чего же предназначены эти параметры?
- Strobe Strength (Интенсивность импульсной вспышки) – значение, определяющее степень размытия между действиями виртуальной вспышки.
- Strobe Flashes (Импульсные вспышки) – значение, которое определяет количество виртуальных вспышек.
- Strobe Flash Duration (Длительность импульсной вспышки) – значение, контролирующее длину виртуальной вспышки.
Вот, какой результат получился у меня. Если сравнить данный скриншот с приведённым выше, то можно увидеть эффект вращения лопастей, что создаёт впечатление восприятия скорости.
Доработка изображения
Теперь, когда у нас есть размытие, мне бы хотелось немного доработать изображение. Обратите внимание на снимок выше, вы увидите, что размытие применилось так же и к области, где находится турбина. Я не хочу, чтобы эта область была размыта, поэтому мне придётся её замаскировать. Для начала посмотрите на панель слоёв.
Ниже приведён результат:
Вот конечное изображение:
Мне понравилась работа. Я думаю, вы согласитесь, что теперь лопасти ветряной турбины крутятся.
Надеюсь, я ясно объяснил, как использовать фильтр Spin Blur (Размытие вращения) в Adobe Photoshop, который позволяет сделать объект движущимся или вращающимся. Спасибо за прочтение!
Сложность: (3 из 5).
Что такое иллюзия? С латинского переводится как обман, заблуждение. Приготовьте своему малышу сюрприз. Иллюзию! Он будет в восторге от того, как оживают рисунки на бумаге!
Вам понадобятся
- Распечатки вложенных файлов
- Макетный нож или канцелярский нож
- Парочку прозрачных файлов
- Линейку для удобства в вырезании
Содержание материалов для урока (миниатюры изображений из PDF файла представлены ниже, а для печати скачайте PDF по ссылке выше)
Результат иллюзии
Внимание! Анимация представлена в виде GIF картинок. Они могут долго грузиться из-за большого размера, дождитесь полной загрузки страницы =)
Ход работы
Берем и вырезаем. Все предельно просто. Но какой эффект?! Вам надо попробовать. Если вы можете ребенку доверить ножи для вырезания, то он сам прекрасно справится. Лет с 10, дети уверенно держат в руке такие инструменты. Но они должны быть предельно внимательны и аккуратны!
Другие интересные поделки для детей вы найдете в главном разделе по этой ссылке
Читайте также: