Синемаграфия живые картинки: 【Живые фото или синемаграфия (40 примеров). 】 * Технологии для людей

Синемаграфия: 5 лайфхаков по созданию «живых» фотографий | Статьи | Фото, видео, оптика

Источник: favim.ru

Живые картины из «Гарри Поттера», естественно, не воплотимы в реальности, но человечество успело придумать кое-что очень похожее. Синемаграфия — гибрид фото и видео, «движущаяся», или «живая», фотография. Она обрела особую популярность в социальных сетях, с помощью этой техники делают всё — от мемных гифок до настоящих произведений цифрового искусства. Сегодня мы поделимся лайфхаками, которые уберегут вас от многих ошибок и помогут создавать прекрасные синемаграммы даже новичкам.

Используйте штатив

Конечно, многим более продвинутым синемаграфистам этот совет может показаться очевидным, но вот новичков он убережет от уймы лишней работы. Если вы попытаетесь редактировать материал, снятый без штатива, то сразу поймете о чем речь. Поэтому делать «живые» фотографии намного эффективнее с ним.

Штатив — лучший друг не только пейзажиста, но и синемаграфиста! Иллюстрация: @photojojo / giphy. com

При этом сам штатив крайне желательно не двигать даже на миллиметр! Всё очень просто: делаете фото и сразу после этого снимаете видео, не перемещая штатив. Если вдруг во время съемки изменился свет (а такое происходит, когда вы работаете на открытом воздухе) — снова делаете фото и сразу снимаете видео с той же самой точки. Поверьте, легче все переснять, чем потом разбираться с освещением.

У вас должен быть план

Это полезный совет и в самом общем смысле, но, прежде всего, он касается движущихся элементов. «Живые» фотографии получаются особенно интересными, если в кадре перемещается не один объект. Поэтому не зацикливайтесь только на каком-то конкретном элементе, включайте в вашу синемаграфию сразу несколько!

Сочетание движения на фоне и в фокусе всегда выглядит выигрышно. Иллюстрация: @very-well / reddit.com

Однако скоординировать сразу несколько движущихся элементов будет проще, если вы это продумаете заранее. Сделать всё на лету, скорее всего, не получится, пока вы не наберете достаточно опыта. Поэтому еще до того, как вы прибыли на место съемки, подумайте, какие элементы должны двигаться в кадре. Что-то на заднем плане вроде машин? Или, может, на вашей «живой» фотографии будет сразу несколько людей? А может, на бэкграунде должен быть таймлапс? Подумайте заранее и грамотно установите штатив! Ну и конечно, если вы собираетесь снимать в локации, где еще не были, лучше посетить ее заранее, чтобы учесть все детали.

Пробуйте доступные приложения и инструменты

Конечно, есть классическое сочетание: выбор элементов изображения в Adobe Photoshop с дальнейшим экспортом (в виде файла с расширением png) в Premiere Pro или After Effects от той же Adobe. 

Для владельцев устройств, работающих на macOS, есть специальное приложение для создания «живых» фото: Cinemagraph Pro от Flixel. Существует и версия для iOS. Для устройств на Android можно воспользоваться приложением Cinemagraph от Crazy labs.

Эффект движения воды — очень популярный прием в «живых» фотографиях. Иллюстрация: @orbojunglist / reddit. com

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

В процессе редактирования сохраняйте слои

Когда вы работаете в Photoshop, выделяя и редактируя нужные элементы, постоянно копируйте слои — это никогда не бывает лишним (если, конечно, ваш компьютер не задымится, хотя тогда вы сможете заснять прикольную синемаграмму). Так вы всегда будете отслеживать, как продвигался процесс, и защищаться от случайных ошибок в процессе редактирования.

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

Для такой работы видео снимать не нужно, зато над слоями придется попотеть. Иллюстрация: @alcrego / giphy.com

Начните с общей цветокоррекции / настройки освещения, и затем, по мере редактирования деталей, сохраняйте копии всех слоев. А вот дополнительные эффекты и всевозможные «глитчи» можно оставить на самый конец.

Делайте переходы максимально гладкими

Вам нужно, чтобы первый и последний кадр вашей синемаграммы совпадали или были максимально схожи. Также все резкие движения и переходы лучше не оставлять на начало или конец секвенции. Это очень важно для создания гармоничной «живой» фотографии, особенно для Instagram или TikTok, в которых видеоконтент зацикливается автоматически.

Грамотное зацикливание отличает хорошую «живую» фотографию от очередной «гифки». Источник: giphy.com

Этот совет касается и звука, если вдруг вы решили пойти еще дальше и добавить его в свою работу. Когда плавный визуал сопровождается резким обрывом звука и его началом на «склейке», магия несколько теряется. Если вы не умеете обрабатывать звук, добавьте плавное затухание и / или паузу в аудиодорожку с помощью простых онлайн-аудиоредакторов. Тоже самое можно сделать и в большинстве программ для монтирования видео.

* При подготовке статьи использовалось интервью Jennifer O’Brien для bhphotovideo. com

Синемаграфия. Как создать живое фото в Adobe Photoshop

Обновлено: 14.04.2023

В настоящее время популярным направлением в дизайне стала синемаграфия, сочетающая в себе фото и видео (живая фотография).  Ими можно разнообразить контент в социальных сетях и презентациях. Представить товар в интернет-магазине и тем самым сделать его более заметным. Называются такие фотографии — синемаграфия. В статье подробно разберем, что такое синемаграфия  и как можно создать такой эффект с помощью программы Adobe Photoshop.

Содержание

Что такое синемаграфия

Синемаграфия — это новая концепция фотографии, которая объединяет в себе видео и фото, что следует из самого названия. Впервые, как упоминалось ранее, синемаграфия появилась в 2011 году. Она была придумана американскими фотографами Джейми Бек и Кевином Баргом, которые использовали эту технику, чтобы оживить свои фотографии моды и новостей. Синемаграфия стала новой эрой в развитии фотографии.

Пример синемаграфии

Пример синемаграфии

Пример синемаграфия.

Пример синемаграфии

Живое фото с горящими свечами


Синемаграфичный эффект получается из видео, в котором определенные части кадра оставляют статичными, а у других сохраняют движение.


Естественно, что такие работы могут быть востребованы только в интернет изданиях и самой благодарной нишей их использования конечно же является реклама. Что лучше может привлечь внимание потенциального покупателя чем завораживающее живое фото. Исходным форматом такого живого фото является «старый», «добрый» GIF, не требующий дополнительных плагинов и ресурсов.

Пример синемаграфии

Эффект синемаграфии может быть создан в таких программах как:

  • Adobe Photoshop
  • After Effects
  • Cinemagr.am для  iPhone
  • Fotodanz для Android
  • Онлайн редактор Canva и другие

Принцип их работы один и тот же — из выбранного небольшого кусочка видео с желательно зацикленным движением какого-либо объекта вычленяется та часть, которая будет двигаться, а остальные остаются неизменными как в первом кадре.

синемаграфия с мужчиной у реки

Синемаграфия — это искусство и достаточно сложное искусство.

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

Как правило, если посмотреть на работы с эффектом синемаграфии, авторы сохраняют такое движение как: покачивание на ветру, развивающиеся волосы, льющаяся вода, движение тени при неподвтжности самого объекта и многое другое.

А могут быть и такие забавные примеры.

Пример синемаграфии с напитком

Пример синемаграфии

ЧИТАЙТЕ ТАКЖЕ
Основы анимационного дизайна. Узнайте новые возможности анимационного motion дизайна, интересные эффекты и примеры

Как создать синемаграфию в Adobe Photoshop

Поиск и подготовка видео для синемаграфии

Примеры анимации синемаграфии можно увидеть выше. В данной статье мы разберем, как создать такое живое фото в Photoshop.

1 шаг.

Для начала нужно подобрать видео, из которого мы будем выбирать основу. Вы можете воспользоваться  ресурсами бесплатных стоковых видео. Я, например, использовала вот это видео. Или можно воспользоваться личными архивами, если они у вас есть. Обратите внимание, чтобы камера в видео «не гуляла». Идеально, когда видео снималось с использованием штатива. Иначе не получится выбрать одинаковые фрагменты, так как объекты будут без статики.

2 шаг.

Из видео нужно выбрать кусок, на основе которого мы будем делать синемаграфию. Лучше выбирать фрагмент, на котором движение объекта плавное.

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

3 шаг.

Выбранный фрагмент нужно вырезать в любом из доступных вам видео редакторе. У меня есть простейший видео-редактор VirtualDub.

Он не требует установки и прост в эксплуатации. Вы всегда можете найти эту программу с помощью поисковика.

Обработка видео в Photoshop

4 шаг.

Импортируйте видео в Photoshop (новый пустой документ создавать не надо).

Файл – Импортировать – Кадры видео в слои.

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

5 шаг.

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

Объедините все слои в группу, кроме первого кадра (самого нижнего). Для этого выделите необходимые слои и  нажмите Ctrl+G.

Не снимая выделение с группы, примените команду Слои – Слой-маска – Скрыть все.

6 шаг.

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

Затем залейте выделение белым цветом на слое маске.

7 шаг.

Откройте окно анимации (Окно – Шкала времени).

Посмотрите вашу последовательность кадров. Почти все из них с прозрачным фоном.

Чтобы избавиться от него выделите первый слой на панели со слоями и щелкните на пиктограмму «Унифицировать видимость слоя».

В появившемся диалоговом окне, выберите «Синхронизировать».

Теперь можете проиграть получившуюся у вас анимацию, нажав на кнопку «Play» в окне «Шкала времени».

Получилось следующее:

Пример синемаграфии

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

8 шаг.

Для этого выделите кадры в шкале времени и в меню выберите пункт «Скопировать кадры».

Далее в том же  меню выберите пункт «Вставить кадры».

В появившемся диалоговом окне выберите «Вклеить после выделенной области».

Не снимая выделение кадров, выберите в меню пункт  «Обратный порядок кадров».

Проиграйте анимацию.

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

9 шаг.

Теперь вы можете отрегулировать длительность каждого кадра, для этого выделите его или группу кадров и выберите время в выпадающем меню.

Вы можете задать свое значение, нажав на «Другое» в меню кадра.

10 шаг.

Так же вы можете дальше работать с синемаграфией, как с обычным изображением, например, изменять ее размеры, например, выберите «Изображение – размер изображения«, зададим ширину 600 пикселей. Высота пропорциональна ширине.

Таким образом, изменятся все кадры.

Выше всех слоев можно создавать корректирующие слои и изменять их настройки. Например, я применила корректирующие слови «Кривые» и «Градиент».

Получилось следующее.

Проследите, чтобы все кадры в окне анимации были выделены.

В панели «Слои» создайте новый корректирующий слой «Карта Градиента» и задайте вот такие настройки:

11 шаг.

Сохраним получившуюся синемаграфию. Файл – Сохранить для Web и устройств.

Настройки по умолчанию.

Получится следующее.

P.S. Самым сложным этапом при создании синемаграфии для данного урока был выбор видео. Очень сложно подобрать из уже отснятого материала именно тот кусок, который бы соответствовал всем требованиям. Идеальный вариант, когда видео создается сразу под синемаграфию.

Подписывайтесь на обновления блога «Дизайн в жизни»

по e-mail или социальных сетях  

и мы обязательно опубликуем для вас еще больше полезных уроков!

Cinemagraph и Live Photos: что есть что? | Владимир Багрий

Чтение: 10 мин.

·

1 августа 2019 г.

Могли ли вы представить, что однажды картинки оживут, как в фильмах о Гарри Поттере? Погружение людей в поток воды, далекий горизонт, шелест листьев и многое другое.

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

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

Live Photos против Cinemagraph.

Поиск различий между двумя, казалось бы, одинаковыми продуктами давно стал проблемой для человечества. Sprite и 7UP, Mirinda и Fanta или знаменитые Coca-Cola и Pepsi. У них похожий вкус, но опытный потребитель без труда отличит одно от другого.

Live Photos и Cinemagraph постигнет та же участь.

Термин «Синемаграф» принадлежит Джейми Беку и его коллеге Кевину Бергу. Два американских фотографа придумали его в 2011 году, чтобы оживить свои новостные и модные фотографии.

Еще в 2016 году профессиональный фотограф Трой Плота и разработчик Саша Шайдер основали первую онлайн-платформу для живых фотографий под названием Plotagraph Pro. Позже в 2017 году Apple выпустила iOS 11 с функцией Live Photos. Однако у этих функций нет ничего общего, кроме названия, и сравнивать их нет смысла.

Функция «Живые фото» на iPhone записывает 1,5-секундное видео до и после захвата изображения. Однако это не видеофайл, а комбинация изображений .jpg и файла .mov, который состоит из 45 кадров и длится 3 секунды.

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

Живые фотографии требуют больших усилий и внимания к деталям. Хитрость заключается в наложении. Это заставляет объекты двигаться неестественно (добавляя щепотку магии). Чтобы понять, как работают Cinemagraph и Live Photos, давайте воспользуемся Photoshop и проанализируем методы по отдельности.

Синемаграф: основные принципы и реализация

Шаг 1

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

Видеопроект в Photoshop

Шаг 2

Найдем фрагмент видео, который мы хотим зациклить. Используйте ползунок, чтобы найти идеальный момент и обрезать его, переместив начало и конец видео на линию ползунка.

Обрезка видео

Шаг 3

Скопируйте видео с помощью ⌘ / Ctrl + J или щелкните правой кнопкой мыши слой видео и выберите «Дублировать группу».

Затем растрируем новый слой видео с помощью ⌘/Ctrl+G+E или верхней панели управления: Слой — Растрировать — Видео.

Копирование и растрирование слоя видео.

Шаг 4

С помощью значка «Масштаб» или ⌘ / Ctrl + горячая клавиша, увеличим масштаб области, которую мы хотим отредактировать.

Нажмите «Добавить маску слоя» на панели слоев. Затем выберите черный цвет кисти для работы с только что созданной маской.

Создание маски

Шаг 5

Залейте кистью объект, который должен двигаться. Измените цвет кисти на белый, чтобы отредактировать области, которые не должны быть анимированы.

Затем нажмите пробел или кнопку «Воспроизвести» на вкладке «Шкала времени», чтобы просмотреть окончательный результат.

Выделение объекта анимации

Шаг 6

После того, как результат вас удовлетворит, сохраните Синемаграф как .gif с помощью Layer — Export — Save for Web или горячей клавиши ⌥ ⇧ ⌘ / Alt Shift Ctrl + S.

Экспорт в .gif

Результат.

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

Cinemargaph

Живые фотографии: основные принципы и реализация

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

Шаг 1

В отличие от Cinemagraph, где жизненно важно видео (в большинстве случаев), Live Photos использует только изображения. Итак, обо всем по порядку, нам нужно растрировать видео в изображение с помощью горячей клавиши ⌘ / Ctrl + G + E или вкладки в верхней части программы: Слой — Растрировать — Видео.

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

Растеризация видео и подготовка изображения.

Шаг 2

Перенесем выделенную область в новый слой, используя горячую клавишу ⌘ / Ctrl + J или щелкнув правой кнопкой мыши по полю и выбрав «Слой через копирование». Затем выключите нижний слой и с помощью «Ластика» сотрите дефекты верхнего слоя.

Коррекция слоя

Шаг 3

Преобразуем верхний слой в смарт-объект. Для этого нам нужно щелкнуть правой кнопкой мыши по слою и нажать «Преобразовать в смарт-объект».

Включите параметр «Преобразование» на вкладке «Временная шкала». Затем поставьте контрольную метку в начале изображения, переместите ползунок в конец изображения и поставьте там вторую контрольную метку. Удерживайте горячие клавиши ⌘ / Ctrl + T или щелкните правой кнопкой мыши и выберите «Преобразовать выделение». Затем переместите верхний слой в нужном направлении нашей будущей анимации и нажмите Enter/Return.

Установка направления слоя анимации.

Шаг 4

На вкладке «Временная шкала» нажмите на нижний слой, скопируйте его с помощью ⌘ / Ctrl + J и сразу переместите поверх всех остальных слоев.

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

Копирование и расширение слоев.

Шаг 5

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

Контур статической области

Шаг 6

Превратите статическую область в маску слоя с помощью кнопки «Добавить маску слоя» на вкладке «Слои».

Чтобы циклы анимации переходили плавно, выберите функцию «Затухание» на вкладке «Переходы». Давайте добавим два эффекта «Fade», один в начале и в конце видео. Это обеспечит плавное затухание при переходе между циклами.

Подготовка слоя анимации

Шаг 7

Используйте функцию «Кисть», чтобы скорректировать границы верхнего слоя белым цветом.

Настройка верхнего слоя маски

Шаг 8

Давайте сгруппируем слой анимации с помощью ⌘ / Ctrl + G. Кроме того, вы можете выбрать слои, щелкнуть по ним правой кнопкой мыши и выбрать «Группировать из слоев».

Далее с помощью Cmd/Ctrl+J скопируйте группу пять раз. Разместим начало каждого из четыре копии в середине предыдущей , перед переходом FadeIn.

Таким образом, половина четвертой группы окажется за концом видео. Пятую группу разместите ровно наоборот — так, чтобы половина ее осталась перед началом видео. Это заставит видео начинаться с перехода FadeOut.

Обратите внимание, что количество групп зависит от продолжительности вашего проекта.

Группировка и умножение слоев

Результат

Мы получаем .GIF-изображение, которое имеет пять одинаковых слоев с переходами FadeIn и FadeOut, преобразованными из исходного состояния. Эта манипуляция позволила нам создать эффект Live Photo.

Live Photo

Кроссплатформенные программные решения.

Среди десятков фото- и видеоредакторов, которые ежедневно конкурируют друг с другом, трудно найти что-то особенное.

После тщательного изучения рынка давайте рассмотрим некоторые из лучших решений для каждой платформы.

Cinemagraph Solutions

  Windows:  Cliplets  Mac:  Cinemagraph Pro  Android:  StoryZ  iOS:  Cinemagraph Pro 9018 9 

Live Photos Solutions

  Web:  Plotaverse  Windows :  Plotaverse  Linux:  Plotaverse  Mac:  Plotaverse  Android:  StoryZ  iOS:  Viespire 

Магия одной минуты

Основная цель программного обеспечения для мобильных платформ — максимальная простота и эффективность.

В качестве примера возьмем iOS-решения для Cinemagraph и Live photos.

‎Cinemagraph Pro

‎Cinemagraph Pro, самый мощный инструмент для создания визуальных образов, который привлекает внимание — в своем классе…

itunes.apple.com

Шаг 1

Загрузить видео с телефона в приложение. Затем обрежьте его до нужного размера.

Загрузка и обрезка видео

Шаг 2

Используйте функции ластика и восстановления в верхней части экрана, чтобы очертить область анимации.

Контур анимации

Шаг 3

Используйте дополнительные функции для выравнивания горизонта и установки желаемого размера проекта.

Вы также можете использовать цветокоррекцию или выбрать готовые фильтры.

Дополнительные функции

Шаг 4

Экспорт проекта в галерею телефона или в определенные социальные сети. Вы также можете загрузить проект в свой аккаунт в приложении.

Экспорт проекта

Результат

Приложение простое в освоении и имеет простой пользовательский интерфейс. При использовании бесплатной версии продукта ваши экспортированные проекты будут иметь водяной знак.

Результат

‎Viespire — Анимация любого изображения

‎Анимация каждого пикселя Используйте обширный набор инструментов для создания уникальной последовательности анимации из статического изображения.

Используйте…

itunes.apple.com

Шаг 1

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

Выбираем нужное нам фото из студии и нажимаем стрелку Далее (→) в правом нижнем углу. Либо нажмите и удерживайте изображение и перейдите во всплывающее окно.

Импорт фотографий

Шаг 2

Выберите функцию «Анимация» и нажмите кнопку «Анимация». Он позволяет размещать стрелки на изображении, чтобы задать желаемое направление анимации.

Направление анимации

Шаг 3

Выберите функцию «Граница», которая позволяет ограничить область анимации. Используйте круги разных цветов, чтобы отличить одно ограниченное пространство от другого, если вам это нужно. Вы можете перемещать контрольные точки или удалять их с помощью «Ластика».

Границы анимации

Шаг 4

Приложение имеет больше опциональных возможностей.

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

Панель «Наложения»

Шаг 5

Панель «Объект» позволяет выбрать дополнительные объекты для размещения на изображении. Пока вы это делаете, меняйте его размер, местоположение и вращайте объект как хотите.

Дополнительные объекты

Шаг 6

Последним шагом является экспорт анимированного изображения в галерею или социальную сеть по вашему выбору.

При экспорте в социальные сети приложение изменяет размер проекта в соответствии с конкретным сервисом. При этом пользователь может выбрать желаемую зону экспорта.

Экспорт проекта

Результат

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

Не все эффекты в приложении бесплатны, но вы можете попробовать все функции Viespire бесплатно.

Как создавать живые изображения - синемаграфы в Photoshop

Привет, это видео посвящено созданию синемаграфов в Photoshop. Вы можете видеть, как движется вода, но все остальное неподвижно. Давайте выключим маленькую маску, вы можете видеть, что все изображение зацикливается, но с крутой маленькой маской вы можете заставить это происходить совсем чуть-чуть. А с небольшой зацикленностью слоев он может играть вечно. Мы сделаем пару вариантов, этот тоже, кофейные зерна, просто продолжайте бесконечно. Затем мы рассмотрим возможность экспорта их в формате GIF, чтобы вы могли загружать их на веб-сайты и в социальные сети и получать одно из таких живых изображений из газет о Гарри Поттере. Давайте узнаем, как это сделать сейчас в Photoshop.


Чтобы создать наш Cinemagraph, мы собираемся перейти в «Файл», «Открыть». В вашем файле «13 Video» давайте откроем «Cinemagraph 1». Теперь этот конкретный эффект работает в основном потому, что я нашел видео, в котором что-то движется, вода — хорошее.

Это легко подделать и выдумать. И этот парень не слишком много двигается. Он делает это на протяжении всего курса, но я просто собираюсь использовать небольшой фрагмент в начале, где он не очень много двигается. Если много движения или камера на самом деле панорамирует и движется, это просто не работает. Такой статичный, передний план, фон, и просто что-то внутри него движется. Это может быть водопад, это могут быть выливающиеся вещи, развевающиеся на ветру волосы. Если вы погуглите «лучшие синемаграфические анимации» на YouTube, это даст вам некоторые идеи о том, что вы могли бы сделать.


Теперь я собираюсь пробежаться по тому, что вам нужно сделать шаг за шагом. Единственная причина, по которой я помню, как это делать, заключается в том, что я много раз этому учил. Это действительно трудно вспомнить навскидку, поэтому я сделал в ваших «Классных проектах» этот проект под названием «Кинематограф», и я только что сделал его шаг за шагом. шаг. Даже тогда мои заметки, это все еще довольно сложно, так что много игр, пауз, не волнуйтесь, всем это тяжело.


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


Теперь давайте посмотрим, «пробел», просто чтобы увидеть, как он зацикливается. Я хочу, чтобы вода петляла, но не он, может быть, немного дольше. Проблема в том, что там есть движение, но я рискну. Обрежьте начало, нужно сделать это, обрежьте конец, вам не нужно делать эту часть, но она слишком длинная, я хочу короткую петлю. Выделив слой, давайте продублируем его, скопируем и вставим. Я просто нажимаю «Command C», «Command V» или «Ctrl C», «Ctrl V» на ПК. Итак, теперь есть два слоя. Теперь, чтобы это сработало, оно не может быть в этой маленькой группе, поэтому просто возьмите «Слой 2». И просто перетащите его, просто перетащите куда-нибудь сюда. Теперь они могут работать бок о бок. Левая часть Слоя 2 перетаскивается полностью туда, а правая часть перетаскивается так, чтобы она совпадала со Слоем 1. Этого вы никогда не запомните. Я сделаю это снова после этого немного быстрее. Итак, если вы смотрите это и следите за этим, посмотрите это, тогда мы сделаем это вместе немного быстрее, и вы сможете сделать паузу и сделать свою собственную версию.


Теперь ничего не произойдет. Что нам нужно сделать сейчас, так это затемнить это, чтобы показать изображение внизу. Это создаст петлю. Итак, давайте переместим точку воспроизведения куда-нибудь между этими двумя точками пересечения. Так что я собираюсь начать где-то здесь. Нажмите на этот верхний слой, «Слой 1», поверните его вниз, и я начну с непрозрачности. Включите маленький секундомер, так что вот мой первый ключевой кадр, вы просто оставьте его, затем где-нибудь между здесь и здесь, вам придется настроить это в зависимости от вашей анимации. Итак, в любом месте здесь, пока он все еще перекрывается, поместите его в другой ключевой кадр и уменьшите непрозрачность здесь, на панели слоев. Так что, по сути, он будет играть, а затем становиться все более и более прозрачным. Я выключу это. Так что он будет становиться все более и более прозрачным. И из-за этого трюка, который мы проделали с этим последним уровнем, этот поднимается, в основном начинает играть здесь, с отрезанным кусочком, пока, в конце концов, не доходит до этой конечной части, которая на самом деле является началом здесь.

Что, вероятно, не имеет для вас никакого смысла. Я всегда получаю отсутствующие взгляды в классе.


Итак, теперь, когда они оба включены, надеюсь, теперь у нас есть петля. Происходит какое-то затухание. Я не слишком беспокоюсь об этом, потому что он двигается, потому что я собираюсь замаскировать его, мне просто нужна вода. Так что давайте не будем об этом слишком сильно беспокоиться, мы можем настроить их позже, но давайте сделаем нашу маску. Чтобы создать маску, нам нужно сделать кадр всего этого. Так что поместите ваш playhead там, где вы хотите еще. Так что я собираюсь иметь мой только в начале здесь. Затем, выбрав оба из них, нажмите на эти два. Есть классный маленький ярлык «Command-Option-Shift-E», который есть на Mac. «Ctrl-Alt-Shift-E» на ПК. Дает вам кадр всех этих слоев и создает свой собственный маленький дубликат сверху. Или вы можете свести его, скопировать, затем отменить и вставить обратно. 


Таким образом, у вас есть этот вариант на вершине здесь. Так что это охватывает все. Если я сейчас нажму «Воспроизвести», на самом деле нет, вот моя анимация, вот этот парень. Ему нужно убедиться, что он находится на вершине, выше всего. Я притащу его сюда, чтобы он освещал мое видео. Я собираюсь немного уменьшить масштаб. Так что он покрывает все, мы ничего не видим. Вот и все, мы собираемся проткнуть это отверстие маской, чтобы показать только воду. Итак, с выбранным слоем, давайте перейдем к «Маске слоя», давайте возьмем наш «Инструмент кисти», найдем подходящий размер кисти. Затем нарисуйте здесь отверстие. Это немного сложно сделать, вам придется настроить его. Так что я не хочу слишком много этой бутылки, отменить. Я не хочу слишком много его лица, отменить. Попрактикуйтесь, нажмите «пробел», как видите, на самом деле это довольно хорошо. И вы видите, помните ту нечеткость, которая у нас была? Не беспокойтесь об этом сейчас, потому что вода довольно снисходительна.

 
Его лицо, сколько этого я хочу? Так что, если я немного подрисую его лицо, это вроде как сработает, за исключением того, что его лицо. .. потому что этот парень все время двигается, что его портит, так что я собираюсь закрасить его белым. , поэтому его лицо не двигается. И это наш эффект, друзья. Уменьшить. Это круто, да. Если бы он не двигался через все это, у меня возникло бы искушение сделать то же самое с вещами, стекающими по его лицу, но поскольку он как бы наклоняется вперед во время анимации, мы не можем. Я сохраню это, просто сохраню на рабочий стол. Через секунду мы экспортируем его в формате gif, я просто хочу показать вам, как только вы войдете в ритм или хотя бы отработаете шаги, вместо того, чтобы все объяснять, я просто пройдусь по нему достаточно быстро. Это будет тот, который вы можете пересмотреть. Перейдите к этому фрагменту, где это красиво и быстро, и я не пытаюсь объяснять вещи по ходу дела.


Итак, я собираюсь перейти к «Файл», «Открыть», и мы собираемся сделать это с «13 Video», «Cinemagraph 2». Вот этот, бобы насыпают в миску. Я хочу, чтобы это казалось чем-то вроде того, что оно постоянно заполняется навсегда.

Так какую часть я хочу? Я, наверное, хочу то, что... это немного сложно, когда видишь дно чаши, я тренировался. Легче, когда нет дырки, поэтому я просто хочу кусок, вот такой большой. Так что помните правило, перетащите. Вы должны перетащить эту левую сторону вправо. Сколько? Вам решать. Пока есть немного, а потом сколько петли, да, это достаточно долго. Нажмите «пробел», чтобы просто проверить. Да, это достаточно долго.


Итак, вот где происходит волшебство, с этим выбранным, скопированным, вставленным. Убедитесь, что этот парень не в той же группе. Перетащите этот путь сюда. Вы можете пройти весь путь до самого начала. Мы можем пройти примерно половину пути, пока есть хорошее перекрытие. Затем перетащите сюда правую сторону. Теперь, когда этот слой выбран, нам нужно добавить пару ключевых кадров непрозрачности. Во-первых, вы ничего не делаете, во-вторых, вы уменьшаете непрозрачность до 0. Нажмите «пробел», и теперь это должно зацикливаться навсегда. Это бит. Вы можете видеть, что есть небольшое затухание, но это довольно хорошо, не так ли? Вы можете решить, что вам не.

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


Итак, скажем, да, я хочу, чтобы они вливались, но не подпрыгивали. Так что помните, выберите оба из них, зажмите все клавиши и E. «Command-Option-Shift-E» или «Ctrl-Alt-Shift-E» на ПК. Перетащите его наверх, вот и все. Убедитесь, что он перекрывается. И добавляем к нему слой-маску. «Слой-маска», немного краски. И я просто хочу, чтобы эти части были такими. Убедитесь, что черный цвет является вашим основным цветом. Я собираюсь нажать «пробел». Это то, что мы пытаемся сделать. Я собираюсь поработать над некоторыми из них, я хочу, чтобы ты был там. Сколько нижней части я хочу? Это своего рода это. И это сделает довольно крутой Синемаграф. Теперь мы превратим его в анимированный gif. Надеюсь, после небольшой практики вы сможете сделать много таких синемаграфов. Протестируйте его на разных вещах, но давайте теперь посмотрим на экспорт в виде gif.


Чтобы экспортировать его, перейдите в «Файл» и перейдите к, вы должны использовать «Экспорт», «Сохранить для Интернета (устаревшие)», вы должны использовать эту старую версию, потому что в ней есть некоторые специальные трюки с GIF. Подождите, пока он загрузится, это будет немного напряжно для вашей машины. Возможно Photoshop не очень любит делать видео и анимацию. Итак, вам нужно выбрать пресет. Не имеет значения, лишь бы это была гифка. Чем выше число, тем больше цветов и тем лучше он будет выглядеть, но размер файла будет больше. Вам не нужно ничего менять, кроме вот здесь, где написано Looping Options. Вы хотите сказать цикл «Навсегда», а не просто играть один раз. Кроме того, это очень большой, например, в формате Full HD, это будет очень большая гифка. Если это выходит через социальные сети, вы, вероятно, хотите, чтобы это было очень мало. Я собираюсь сделать мой как 20% от исходного размера. Это около 300 пикселей в поперечнике, а затем нажмите на эту опцию, которая говорит «Сохранить». Я положу свой на «Рабочий стол», нажмите «Сохранить». Я собираюсь заменить его, потому что я уже практиковался. И затем, надеюсь, на моем рабочем столе есть моя гифка, она меньше половины мегабайта, и это хорошо. И у него есть крутая вещь с петлей. Потрясающе, да?


Делаем второй вариант. Давайте оставим это, оно в полном разрешении, просто чтобы вы могли увидеть разницу. Итак, «Файл», «Экспорт», «Сохранить для Интернета». Он не должен быть слишком большим, как полностью анимированный gif, потому что есть только небольшая часть, которая на самом деле меняет цвета. Так что помните, зацикливайте «Навсегда», убедитесь, что это «gif». Нажмите «Сохранить». Повешу на рабочий стол. Проверь, где ты? На Mac вы можете просто нажать «пробел», и он просто воспроизводится. Вы можете видеть, что все цвета объединены полосами и прочее. Просто потому, что в этом пресете разрешено только 128 цветов. Если вы хотите больше цветов, скажем, вы хотите, чтобы это было максимально фотореалистично, вы можете перейти к «Экспорт», «Экспорт», «Сохранить для Интернета». Извините, это «Файл», «Экспорт», «Сохранить для Интернета». И хотя значения по умолчанию доходят только до 128, вы можете, здесь дойти до 256, вы можете добавить к нему еще несколько цветов. Это будет выглядеть красиво, у него все еще будут полосы, в GIF разрешено только 256 цветов, тогда как на самом деле у нас их миллионы и миллионы. Обычно это RGB или типичный JPG. Бедные старые гифки имеют всего несколько цветов, поэтому, если вы получите полосы, вы мало что можете с этим поделать. Раскрутите его до 256 цветов.


Другая вещь, которую вы могли бы сделать, это сделать эту вещь монохромной. Тогда это выглядело бы красиво, было бы меньше полос и много оттенков серого, 256 оттенков серого. Давайте посмотрим на это, все еще немного полосатости. Выживаемость. Теперь, помните, на моем Mac я могу просто нажать пробел, и он начнет играть. Если вы на нашем ПК, и вы не можете заставить его работать, даже на Mac вы не можете заставить его работать, просто откройте браузер, может быть Chrome, это может быть Safari, Firefox, Microsoft Edge, Microsoft Исследователь.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *