Как сделать синемаграфию в фотошопе: Как сделать синемаграф для новичков в Photoshop

Как сделать синемаграф для новичков в Photoshop

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

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

Художник-график Кевин Бург и фотограф Джейми Бек ввели термин, синемаграф , когда сотрудничали на Недели моды в Нью-Йорке. С тех пор этот формат стал довольно популярным. Есть даже ряд приложений и программного обеспечения, которые позволят мгновенно создавать самостоятельно синемаграф без каких-либо навыков Photoshop. Тем не менее, если вы хотите ни от кого не зависеть и делать то, что хотите, учитесь вместе с нами.

Прежде чем мы начнем, вы должны занать, что существует бесчисленное множество способов, чтобы сделать cinemagraphs, но этот урок предназначен для тех, кто использует Photoshop с базовыми навыками.
Для начала, вам нужно:

• Штатив
• Видеокамера
• Photoshop (CS5 Extended используется для этого урока)
• Quicktime Player

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

1. Создание вашего видео

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

А. Выбрать тему:
Ваша цель — сохранить большую часть неподвижной картинки, в то время как один или несколько предметов будет двигаться. Чтобы сделать это, выбирать предметы, чьи движения не пересекаются с другими движущимися объектами. Простые примеры — это часто покачивающиеся ветви деревьев, меняющийся выражение на лице, развевающиеся волосы, платье вздымающиеся, отражение в воде или мерцание свечей.
Для этого примера, я собираюсь выделить чашку кофе по дороге.

Б. Изолировать тему:
Проверьте свой клип и убедитесь, что ваш объект не перекрываются ни с чем на вашем снимке. В нашем примере, вы заметите, чашка находится близко к спортивному автомобилю, но все же есть достаточно места для манипуляций.

С. снимать:
Используйте штатив, чтобы держать камеру неподвижно, и снимите несколько секунд видеоматериала. Каждая секунда видео имеет по крайней мере 24 кадра, поэтому, если ваш клип слишком длинный, размер файла будет огромным.

2. Обрезать

Если вы используете большой клип, используйте программу для обрезки кадров, прежде чем открыть его в Photoshop, к примеру, Quicktime Player 10.3   для обрезки, выбрав Редактировать> Обрезать.  Затем экспортируем кадры в 1080p разрешение, выбрав File> Export> 1080p.

3. Откройте видео в Photoshop

А. Прежде чем импортировать ваш клип в Photoshop, убедитесь, что вы используете Motion Workspace , выбрав  Window> Workspace> Motion.

B. Тогда,  открывая  свой клип с File> Open , он будет автоматически открыт в анимации  временной шкалы.

С. В правом верхнем углу анимации временной шкалы , откройте выпадающее меню и выберите Настройки документа.  Затем уменьшите частоту кадров до между  10 до 15 кадров в секунду . Выбираем для нашего урока 12 кадров в секунду. Это поможет сохранить размер файла.

4.Выберите раздел Animated

А. В Animation шкале , использeqnt два синих скрубберf, чтобы выбрать кадры, которые вы будете использовать для анимации. Попробуйте закончить анимацию, когда ваш объект останавливается или перемещается в кадре. В нашем случае выбираем кадры, когда чашка замедлила движение и начинает катиться в другом направлении.

Б. Откройте  меню Animation Timeline, а затем выберите Trim Document Duration to Work Area . Это позволит избавиться от дополнительного метража, таким образом вы сможете сосредоточиться на разделе, который вы хотите оживить.

5. Выберите неподвижный момент в видео

А. В Animation шкале , используйте скруббер, чтобы выбрать кадр, который вы хотите заморозить. Это будет «маска» для анимации.

B. Как только вы выбрали раму, оставьте скруббер там, а затем создайте новый слой, выбрав:

• Select > All
• Edit > Copy
• Layer> New> Layer
• Edit> Paste.

С. Назовите этот слой » Still Moment  «или как вам удобно. Затем вы заметите этот слой в слое Widow.

6.Создайте маску

А. Изменените непрозрачность  слоя  Still Moment  на 50%.

Б. Использование скруббера и Eraser Tool на слое Still Moment. Сотрите все вокруг вашей темы. Вы, по сути, создаете отверстие в маске, так что вы можете досмотреть анимацию.
На нашем видео стираем область, где есть чашка, также стираются лица некоторых людей в отдалении и верхушки деревьев.

7.Смотрите Ваш синемаграф

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

8.Сделайте слои из кадров

Вы должны изменить кадры видео в слои. Затем, вы будете дублировать слои и переворачивать их, так создается бесшовные петли.

А. В меню Анимация Timeline , выберите Flatten Frames Into Layers . Затем проверьте  окно Layer , и вы увидите новый слой для каждого кадра в анимации (и здесь вы увидите, почему это важно, чтобы ваши анимации были короткими).

Б. Удалите нижний слой с именем Layer 1, который является слоем с импортированного видео.

С. Выделите все слои (кроме первой и последней, так как анимация цикличной, вам не нужно дублировать те слои), затем выберите  Layer> Duplicate Layers.

Д. Переместите все выделенные дублированные слои почти до вершины в окне Layer , пока убедитесь, что   слой Still Moment находится выше всех.

Е. При выделении всех дублированные слоев в обратном порядке, выберите Layer > Arrange > Reverse.

9.Сделайте кадры из слоев

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

А. Откройте меню Animation Timeline  и выберите Convert to Frame Animation.

Б. Вновь открыть меню Animation Timeline и выберите Make Frames From Layers . Это сделает кадр из каждого слоя.

C. В нижнем левом углу  Animation Timeline  , откройте выпадающее меню, которое читает Once ,  и выберите, чтобы проигрывать анимацию  Forever.

Д. Затем выделите все кадры в  Animation Timeline  и откройте выпадающее меню ниже каждого кадра, выберите 0,1 секунды.

Совет: Для плавного действия, настройте скорость анимации, замедляя начало, середину и конец на 0,2 секунды.

10.Сохранить для Web и наслаждаться

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

• Выберите File > Save for the Web & Devices
• Выберите GIF в правом верхнем меню
• Обязательно установите  цвета> 256
• Выберите ширину на максимум  600px
• В правом нижнем углу, убедитесь, что  Forever  по-прежнему выбран
• Затем нажмите Save  и наслаждайтесь вашей новой синемаграфией

Создаем синемаграф с идущими часами в Фотошоп / Creativo.one

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

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

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

В этом уроке вы узнаете, как создать, отредактировать и сохранить ваш первый синемаграф с идущими часами, используя панель Timeline (Шкала времени) в Adobe Photoshop.

Шаг 1

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

Чем меньше движения в кадре, тем лучше: движущиеся от ветра объекты, парящие облака, стекающая вода или солнечные блики. Я решила использовать видео с идущими часами.

Шаг 2

Закончив с выбором подходящего видео, открываем Photoshop и переходим File – Open (Файл – Открыть). В открывшемся окне находим ролик и жмем ОК, чтобы импортировать его в Photoshop. В результате внизу экрана должна открыться шкала времени.

Если она не появилась, то открываем ее через меню Window – Timeline (Окно – Шкала времени).

Шаг 3

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

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

Совет: мы будем сохранять синемаграф в формате GIF, а Photoshop поддерживает максимум 500 кадров (около 20 секунд). Так как я сняла полный оборот секундной стрелки, видео получилось слишком длинным, поэтому я ускорила его на 400%.

Шаг 4

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

При этом край ролика автоматически «прилипнет» к положению ползунка.

Шаг 5

Далее ползунком отмечаем конец видео. В этот раз тянем правый край ролика влево до положения ползунка и жмем Delete, чтобы отрезать лишнее.

Шаг 6

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

Нажимаем сочетание клавиш Ctrl+Shift+Alt+E, чтобы вынести этот кадр на отдельный слой.

Шаг 7

На панели слоев находим новый слой из предыдущего шага с выбранным кадром и называем его «Основной кадр» (Main Frame). Выделяем этот слой левой кнопкой мышки и добавляем его в группу «Видео» (Ctrl+G). Сразу после этого на шкале времени должен автоматически появиться дополнительный канал с основным кадром.

Шаг 8

Возвращаемся на шкалу времени и перетаскиваем первый слой анимации в начало шкалы. Затем хватаем правый край этого канала мышкой и растягиваем его по ширине нижнего канала.

Шаг 9

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

Чтобы добавить маску, в нижней части панели слоев нажимаем на кнопку Add layer mask (Добавить слой-маску).

Шаг 10

Мягкой черной кистью (В) проводим по маске слоя «Основной кадр» в том месте, где должно быть движение – в данном случае это часы.

На втором скриншоте показано, как выглядит моя слой-маска.

Шаг 11

Далее мы выполняем цветокоррекцию всего синемаграфа с помощью обычных корректирующих слоев.

Для корректирующих слоев на шкале времени создаются отдельные каналы, которые влияют на все содержимое ниже, включая основной кадр и видео. Я добавила корректирующий слой Exposure (Экспозиция) и Color Lookup (Поиск цвета).

Шаг 12

Закончив с созданием анимации, давайте сохраним ее. Для этого переходим File – Save for Web (Файл – Сохранить для веб).

Шаг 13

Для анимации мы выбираем формат GIF. В открывшемся окне вводим настройки, как показано ниже.

Шаг 14

Также вы можете установить режим повтора. Для этого устанавливаем параметр на Forever (Всегда), чтобы анимация проигрывалась непрерывно.

Автор: Tigz Rice

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

В настоящее время популярным направлением в дизайне стала синемаграфия, сочетающая в себе фото и видео. Давайте попробуем сами создать такой эффект с помощью программы Adobe Photoshop.

1 шаг.

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

2 шаг.

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

3 шаг.

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

4 шаг.

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

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

5 шаг.

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

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

6 шаг.

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

7 шаг.

Откройте окно анимации (Окно – Шкала времени). Посмотрите вашу последовательность кадров. Почти все из них с прозрачным фоном. Чтобы избавиться от него выделите первый слой на панели со слоями и щелкните на пиктограмму «Унифицировать видимость слоя». В появившемся диалоговом окне, выберите «Синхронизировать».

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

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

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

8 шаг.

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

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

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

9 шаг.

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

10 шаг.

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

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

Проследите, чтобы все кадры в окне анимации были выделены. В панели «Слои» создайте новый корректирующий слой «Карта Градиента» и задайте вот такие настройки:

11 шаг.

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

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

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

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

(Visited 24 058 times, 6 visits today)

Cинемаграфия — живые фотографии | Дизайн в жизни

Не так давно я узнала о таком новом веянии в индустрии фотографии, как синемаграфия. Хотя новым его достаточно сложно назвать, ведь впервые такой эффект появился в 2011 году. Так что же такое синемаграфия?

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

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

Эффект синемаграфии может быть создан как в Adobe Photoshop и After Effects так и в других специально созданных под данные нужды программах. Сейчас разработано достаточно много приложений под iPhone и Android, позволяющих делать из видео фото с синемаграфией. Например, Cinemagr.am для  iPhone и Fotodanz для Android. Принцип их работы один и тот же — из выбранного небольшого кусочка видео с желательно зацикленным движением какого-либо объекта вычленяется та часть, которая будет двигаться, а остальные остаются неизменными как в первом кадре.

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

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

Хотите научиться делать так же? Синемаграфию может создать каждый, и как это сделать, я расскажу в своей статье «Синемаграфия. Как создать живое фото«.

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

(Visited 16 816 times, 1 visits today)

Мультяшный эффект по фото в Photoshop + бесплатный исходник

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

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

1 шаг.

Откройте фото и преобразуйте его в смарт объект (нажмите правой клавишей по названию слоя и выберите преобразовать в смарт-объект). Слой назовите Фото. Теперь мы будем работать только с ним. Данный слой в последствии можно будет редактировать, вставляя любое другое фото и добиваясь похожего результата. Все будет зависеть от детализации изображения. Любой эффект и фильтр можно будет отредактировать в любое время. В этом и есть преимущество смарт-объектов.

2 шаг.

Для того, чтобы осветлить самые темные области и сделать объект более контрастным по сравнению с фоном, выберите Изображение – Коррекция – Тени/Света. Установите значение Эффект в 35%

3 шаг.

Чтобы сгладить детали примените Фильтр – Стилизация – Масляная краска со следующими параметрами: Стилизация – 2, Чистота – 10, Масштаб и Сведения о щетине – 0,1.

Галочка на Освещение выключена.

 4 шаг.

Добавим прорисованные края. Фильтр – Галерея фильтров – Имитация – Очерченные края. Установите значения:

• Толщина краев – 0
• Интенсивность – 1
• Постеризация – 6

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

5 шаг.

Фильтр – Шум – Уменьшить шум. Выставите значения:

• Интенсивность – 10
• Сохранить детали – 0
• Уменьшить шумы цветов – 0
• Детали резкости – 0

6 шаг.

Чтобы избавиться от появившейся лишней размытости, воспользуйтесь Фильтр – Усиление резкости – Умная резкость. Выставите параметры:

• Эффект – 74%
• Радиус – 5
• Уменьшить шум – 96%

7 шаг.

Добавим немного гладкости кожи применив настройку Фильтр – Размытие – Умное размытие.

• Радиус- 5
• Порог – 25
• Качество – низкое

8 шаг.

Добавим более выраженные блики на фото. Выберите Фильтр – Имитация – Аппликация.

Количество уровней подберите такое, чтобы вас устроила картинка.

• Простота краев – 4
• Четкость краев – 2

Щелкните по значку параметров смешивания фильтров 2 раза и выставите значение прозрачность в 40-50%, режим смешивания в мягкий свет.

Получится вот такой мультяшный эффект по фото в Photoshop.

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

Если хотите получить исходник с редактируемыми слоями к данному уроку, оставляйте комментарии к статье с пометкой «cartoon-effect» и я вышлю вам его на почту!

(Visited 336 times, 8 visits today)

Создаем синемаграф при помощи Photoshop

Мы не будем пугать вас тем, что GIF-файлы исчезнут в ближайшем будущем. Но тем не менее, в последнее время все популярнее становятся так называемые синемаграфы. Синемаграфы —  это просто красивое имя для анимированного GIF-файла, который был специально разработан с  художественной целью. Цель состоит в том, чтобы обратить внимание на некоторые аспекты образа через локализованные анимации — например, ветер дует через волосы субъекта, а другие части анимации остаются статичными. Это отнюдь не новое явление, но техника немного сложнее, чем создание среднестатистического GIF-файла, а результаты ее использования выглядят действительно достойно.Для создания анимации мы будем использовать Photoshop  потому, что это этот мощный графический редактор  позволяет работать не только с изображениями, но и редактировать видео.Vimeo является лучшим местом для хранения высококачественного видео.  В этом примере мы использовали короткие видео с людьми на эскалаторе

Область для создания анимации находится в Window> Workspace>Motion.  Используя синие направляющие слева и справа от временной шкалы, выберите значения 1-2 секунды. Вы всегда сможете вернуться и обрезать некоторые из этих дополнительных кадров в следующем шаге.

Перейдите в File> Export> Render Video, и выберите параметры установленные по умолчанию. Теперь, закройте документ и выберите команду File >Import > Video Frames to Layers и выберите видео файл, который вы только что экспортировали. Теперь каждый кадр открывается как новый слой.

Теперь нужно выбрать подходящую для анимации область. Сам эскалатор пустой, и, таким образом, идеально подходит для анимации, а людей мы заставим стоять на одном месте. Первый слой будет служить якорем для наших кадров анимации. Включите видимость выравнивания слоев для первого слоя (Unify Layer Visibility). Благодаря этому слой будет использоваться как статический кадр и будет повторяться в каждом последующем кадре.

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

Когда все будет сделано, выберите File > Save for Web & Devices. Убедитесь, что выбран формат GIF. Вы даже можете просмотреть финальное изображение, если хотите. Фернандо J Baez рекомендует использовать кросс-процессинг или дуо-тон фильтр, который ограничивает количество цветов в изображении, чтобы восполнить недостатки в формате GIF.

Вот такой результат у нас получился:

Автор: tested

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

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

Как сделать синемаграф в Photoshop

Подпишитесь ниже, чтобы сразу загрузить статью

Вы также можете выбрать свои интересы для бесплатного доступа к нашему премиальному обучению:

п {
нижнее поле: 0;
}
.send-as-pdf-btn {
маржа слева: 0;
}
.send-as-pdf-btn em {
фон: белый;
цвет: # 0071bc;
радиус границы: 3 пикселя;
отступ: 0 5 пикселей;
маржа: 0 3px;
}
.send-as-pdf .privacy-note {
ширина: 100%;
дисплей: блок;
выравнивание текста: центр;
font-weight: 700;
непрозрачность: 0.8;
padding-top: 12 пикселей;
}
.send-as-pdf .privacy-note i {
отступ справа: 4 пикселя;
}
.send-as-pdf {
верхнее поле: 32 пикселя;
дисплей: нет;
нижнее поле: -16 пикселей;
граница-верх: сплошной 1px # c4c4c4;
padding-top: 16 пикселей;
}

.send-as-pdf h5 {
размер шрифта: 22 пикселя;
font-weight: 600;
}

.send-as-pdf input [type = checkbox] {
-webkit-appearance: checkbox! important;
}

.send-as-pdf form {
дисплей: гибкий;
flex-wrap: обертка;
количество столбцов: 3;
поле справа: 0;
ширина: 100%;
маржа сверху: 12 пикселей;
}

.send-as-pdf.form-inline label {
дисплей: встроенный блок;
}

.send-as-pdf form .infusion-field {
ширина: 33,3%;
размер шрифта: 17 пикселей;
}

.send-as-pdf form .infusion-email label {
дисплей: нет;
}

.send-as-pdf .infusion-mail-block {
дисплей: гибкий;
маржа: 16 пикселей авто 0;
}

.send-as-pdf .infusion-mail-block .infusion-field {
ширина: авто;
}
.send-as-pdf .form-inline .infusion-submit button {
ширина: 250 пикселей;
}
@media screen и (max-width: 768 пикселей) {
.send-as-pdf {
размер шрифта: 16 пикселей;
}
.send-as-pdf h5 {
размер шрифта: 18 пикселей;
}
.send-as-pdf> p {
размер шрифта: 16 пикселей;
}
.send-as-pdf form {
flex-direction: столбец;
ширина: 100%;
}
.send-as-pdf form .infusion-field {
ширина: 100%;
}
.send-as-pdf .infusion-mail-block {
flex-direction: столбец;
выравнивание текста: центр;
}
.send-as-pdf #inf_field_Email {
нижнее поле: 8 пикселей;
}
.send-as-pdf .infusion-option {
дисплей: блок;
ширина: 100%;
дисплей: гибкий;
}
.send-as-pdf input [type = checkbox] {
ширина: авто;
маржа сверху: 6 пикселей;
поле справа: 12 пикселей;
}
}]]>

Как создать собственный кинограф в Photoshop CS5

Синемаграфы — это небольшие анимированные файлы GIF, созданные из фильма, которые захватывают крошечный движущийся фрагмент этого фильма в бесконечной зацикленной последовательности.Посмотрите образец справа, если вы не понимаете, о чем я говорю, или ознакомьтесь с предстоящей статьей Тима о 5 лучших блогах, чтобы найти синемаграфы. Сегодня я собираюсь показать вам, как создать свой собственный файл из файла фильма с помощью Photoshop CS5 Extended, и вы можете увидеть мой окончательный продукт справа!

Примечание. Для этого вам понадобится Расширенная версия Photoshop, так как она включает компоненты анимации.Вам также понадобятся очень базовые рабочие знания Photoshop, поскольку я не собираюсь объяснять ключевые концепции, такие как слои, или как их удалить или сделать невидимыми. Пользователи Windows, замените CMD на CTRL и OPTION на клавиши ALT в этом руководстве.

Фильмы, хронология и быстрые маски

Идите вперед и откройте видеофайл, как любой другой файл.Если окно анимации не загружается автоматически, включите его в меню Windows. Здесь я выбрал небольшое видео, которое я снял на свой iPhone, с изображением белки в Сент-Джеймс-парке в Лондоне.

Найдите небольшой значок выпадающего меню анимации в правом верхнем углу шкалы времени, так как мы собираемся его часто использовать.Щелкните его и найдите Document Settings . Измените частоту кадров примерно на 15, если она выше. Как правило, видео начинается со скоростью около 30 кадров в секунду, что слишком много для простой анимации.

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

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

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

Затем вам нужно найти свой главный кадр — это единственный кадр видео, который будет фоном — фрагмент вашей анимации, который не движется.Прокрутите маркер, пока не увидите нужный кадр, затем нажмите CMD-A , чтобы выделить все, и CMD-C для копирования, затем CMD-V для вставки. Это должно создать новый слой с выбранным ключевым кадром.

Затем нажмите клавишу Q , чтобы открыть режим QuickMask .Выберите кисть , инструмент и кисть подходящего размера, и начните закрашивать области вашего фильма, которые вы хотите сохранить статичными. В режиме QuickMask вы должны видеть, что они подсвечиваются красным, когда вы рисуете (в противном случае вы не находитесь в режиме быстрой маски, поэтому отмените действие и попробуйте снова). Оставьте области, в которых есть движущийся элемент фильма, который вы хотите сохранить.

Выделив все части сцены, которые вы хотите оставаться неподвижными, снова нажмите Q , чтобы выйти из режима быстрой маски, затем удерживайте ALT и нажмите кнопку Добавить маску слоя на палитре слоев.Это кнопка внизу в виде прямоугольника с кружком внутри.

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

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

Экспорт анимации

Снова щелкните меню анимации и выберите Flatten Frames Into Layers .Это создаст группу слоев, каждый по одному кадру в фильме. Удалите исходное изображение ключевого кадра и слой фильма, оставив только только что созданные слои кадров анимации.

Затем превратите фильм в Frame Animation , щелкнув эту кнопку в правом нижнем углу окна временной шкалы анимации.Когда вы это сделаете, будет создан только один кадр, но не беспокойтесь.

Затем вернитесь в меню анимации и выберите Make Frames From Layers .Это преобразует все ваши слои анимации в кадры.

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

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

Теперь вы готовы экономить.В меню «Файл» выберите Сохранить для Интернета и устройств . Выберите тип файла GIF и при необходимости уменьшите физический размер. Помните, что в левом нижнем углу есть указание окончательного размера файла, поэтому поэкспериментируйте с настройками, чтобы получить как можно меньший размер. Я предлагаю использовать шаблонное дизеринг и уменьшить количество цветов примерно до 32 или 64 с помощью выборочного выбора цвета.

Заключение

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

10 основных мобильных приложений для цифровых кочевников

Об авторе

Джеймс Брюс
(Опубликовано 679 статей)

Джеймс имеет степень бакалавра в области искусственного интеллекта и имеет сертификаты CompTIA A + и Network +.Когда он не работает редактором обзоров оборудования, он любит LEGO, VR и настольные игры.

Ещё от James Bruce

Подпишитесь на нашу рассылку новостей

Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!

Еще один шаг…!

Пожалуйста, подтвердите свой адрес электронной почты в письме, которое мы вам только что отправили.

Как сделать крутое синемаграфическое изображение в Photoshop

Без сомнения, вы слышали о термине Cinemagraph с тех пор, как он стал популярным в Интернете. Первоначально созданный фотографами Кевином Бургом и Джейми Беком, синемаграф является умным возрождением классического анимированного GIF. Он сочетает в себе функции видео и фотографии, чтобы создать иллюзию неподвижного изображения, но с крутыми эффектами движения. Давайте посмотрим, как создать свой собственный анимированный синемаграф в формате GIF, поэкспериментировав с инструментами анимации Photoshop.

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

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

Для синемаграфов

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

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

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

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

Откройте Photoshop и выберите «Файл»> «Импорт»> «Видеокадры в слои». Оставьте установленные по умолчанию параметры «От начала до конца» и «Сделать анимацию кадра» отмеченными. Эта ссылка может оказаться полезной для пользователей Mac, получающих какую-либо ошибку 32- или 64-разрядной версии.

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

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

Откройте окно «Анимация», чтобы просмотреть кадры последовательно.В настоящее время вы увидите, что 99% кадров имеют прозрачный фон благодаря маске слоя, чтобы зафиксировать этот щелчок на первом (нижнем) слое и проверить значок Unify Layer Visibility.

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

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

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

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

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

Добавление эффектов коррекции цвета в стиле ретро не только делает изображение модным, но и помогает ограничить цвета, чтобы конечный файл GIF выглядел лучше с его ограниченной 256 палитрой. Добавьте корректирующий слой Color Balance в верхнюю часть стопки слоев и установите ползунок на 100% Blue в тенях.Убедитесь, что параметр «Сохранить яркость» выключен.

Выберите параметр «Средние тона» и настройте цвета на голубой и пурпурный.

Измените выбор на «Основные моменты» и переместите ползунки в сторону красного, зеленого и синего.

Добавьте корректирующий слой Gradient Map и настройте градиент от очень темно-синего (# 020413), средне-синего (# 2b4a61), зеленого (# a8c6a0) до бледно-желтого (# feffe6). Измените режим наложения этого слоя на «Светлее».

Добавьте корректирующий слой «Кривые» и настройте тени и светлые участки, чтобы увеличить контраст изображения.

Анимированное изображение GIF с таким большим количеством деталей в каждом кадре скоро достигнет колоссального размера файла. Лучший способ уменьшить размер файла — физически уменьшить размер изображения.

Выберите «Файл»> «Сохранить для Интернета» и измените тип файла на GIF. Измените параметры дизеринга для достижения наилучшего качества воспроизведения. Дальнейшее уменьшение цветовой палитры с помощью двухцветных или черно-белых эффектов также может помочь улучшить качество изображения.

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

Получить доступ к этой загрузке

Сделайте синемаграф из видео в Photoshop и учебник в виде анимированного gif

Синемаграфы, также называемые «живыми фотографиями», в последнее время стали возвращаться (извините, они не новы).На самом деле я написал учебник о том, как это сделать, еще в 2005 году в моей книге «Как сделать Wow для Интернета» от Peachpit press, я тогда на самом деле назвал его «Оживление картинки». Пришло время сделать их в Adobe Photoshop с помощью видео. Это действительно полезно для заголовка веб-сайта, рекламы, публикации в Facebook или киоска, потому что вы можете создать гифку и установить ее на бесконечный цикл и получить видео с бесконечным циклом при довольно небольшом размере файла.

Синемаграф — это когда у вас есть фотография, но некоторые ее части движутся.Это делается путем маскировки фотографии с зацикленным видео под ней. Мы сделаем это из видео, этот урок работает только в Photoshop CS6 (расширенный) и Photoshop CC. Посмотрите мое видео, в котором шаг за шагом показано, как это сделать. У меня есть несколько дополнительных советов, в том числе:

• Как использовать направляющие для лучшего соответствия петле
• Как легко увидеть, что вы маскируете из видео
• Как экспортировать как анимированный gif
• Как чтобы поместить гифку в facebook

Как создать синемаграф с помощью Photoshop CS6 и CC

Модель здесь была Tiffany, и я снял это (Canon 5D MkIII) на Eaves Ranch, Санта-Фе, Нью-Мексико

Примечание. Если у вас нет Photoshop CS6 Extended (для поддержки видео) или Photoshop CC, этот учебник не будет работать для вас, извините, но функции видео до этого были другими, но вы могли бы адаптироваться учебник для работы в более ранних версиях, но я не могу предложить поддержку по этому поводу.

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

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

Вот пошаговые инструкции для тех, кто предпочитает читать.

Создайте КИНОГРАФ в учебнике Photoshop и сделайте GIF

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

Этот урок будет работать в Photoshop CS 6 или CC. Более ранние версии имеют другие движки анимации. Теперь, чтобы поместить сюда видео, вы просто выбираете «Файл», «Открыть», а затем вы просто выбираете видео, и оно откроется на временной шкале.Откройте видео в Photoshop и убедитесь, что шкала времени видна. Окно> Временная шкала (работает только в Photoshop CS6 Extended или CC) Итак, как видите, у нас здесь 16 секунд; это слишком долго.

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

Обрезаем видео, нажимая и перетаскивая конец и начало. У нас есть пара секунд, и это все, что нам нужно.

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

Теперь, если вы хотите узнать больше о видео, у меня есть два реальных полных учебных пособия по работе с видео в Photoshop. У меня тут бесплатный, есть еще парочка углубленных курсов.

Создание фильмов в Photoshop

Видео в Photoshop

Щелкните меню справа от шкалы времени и выберите «Циклическое воспроизведение».Теперь, сделав это, мы сможем взглянуть на наш цикл. Поэтому, когда он дойдет до конца, он снова вернется, поэтому убедитесь, что он включен. А затем, когда мы нажимаем Play, замечаем, что он идет до конца, а затем играем снова. Так что давайте просто посмотрим, и мы ищем только внезапных скачков.

Это хорошее базовое видео для использования. Следующее, что нам нужно сделать, это зафиксировать это в фотографии, и это очень просто. Дублируйте слой видео.Таким образом, вы можете нажать Ctrl J или Command J на ​​Mac для прыжка или просто перетащить значок нового слоя, и это будет дублировать это видео.

Теперь мы не хотим, чтобы это было видео. Мы хотим, чтобы верхний слой был изображением, поэтому просто щелкаем правой кнопкой мыши и выбираем «Растрировать слой».

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

Обязательно перетащите изображение влево, чтобы оно выровнялось в начале.

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

Скрыть верхний слой

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

Примените маску слоя к верхнему слою (слою изображения).

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

Выберите черный для цвета переднего плана, возьмите кисть, непрозрачность установлена ​​на 100, и я на самом деле просто отключу давление пера. Я хочу просто иметь твердую непрозрачность.

Закрасьте область вокруг волос. Перо определенно будет немного двигаться, и ее волосы здесь определенно будут развеваться, так что давайте просто дадим ему немного места, чтобы оно могло двигаться.

При предварительном просмотре видео скройте корректирующий слой оттенка и насыщенности.

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

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

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

Экспорт как анимированный gif

Теперь я покажу вам, как экспортировать это как анимированный gif. Выберите «Экспорт», и мы перейдем в «Сохранить для Интернета».

Измените размер на 650 по ширине, потому что, возможно, я хочу разместить это в блоге WordPress.

Убедитесь, что вы выбрали gif, а не jpg.

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

Задайте для тона 256 цветов, это максимум. Мы очень хотим это сделать и какие бы настройки у вас ни были.

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

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

Итак, вы можете видеть здесь, вот как это будет выглядеть. Будет неплохо смотреться. Будет хорошо играть.

Мы просто нажмем «Сохранить» и назовем это cinemagraph.gif. Хорошо, и это наша последняя гифка.

Размещение анимированного gif на Facebook

Вы не можете загрузить анимированный gif прямо на Facebook.Если вы хотите поделиться им на Facebook, вам нужно будет загрузить его на свой веб-сайт и вставить URL-адрес изображения (ссылка на него с вашего веб-сайта). Если у вас нет веб-сайта или вы не хотите его размещать, есть другие решения. Самым популярным является бесплатный веб-сайт под названием giphy

. Надеюсь, вы нашли это руководство полезным. Добавьте комментарий и дайте мне знать, что вы хотели бы узнать. Каждую неделю я создаю новый учебник здесь, в PhotoshopCAFE. Вы можете увидеть все бесплатные уроки по фотошопу здесь

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

До встречи в КАФЕ!

Colin

У меня есть больше руководств по анимации в Photoshop здесь

P.S У меня есть несколько премиальных курсов, которые научат вас видео в Photoshop. Это

Видео в Photoshop (руководство для дизайнеров и фотографов) и

Создание фильмов в Photoshop (видео с электронной книгой)

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

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

Шаг 1. Фильм и импорт

Делайте снимки с помощью камеры (или телефона) на штативе. Это важно, так как вы должны быть уверены, что в получившемся ролике нет дрожания. Затем в Photoshop выберите «Файл»> «Импорт»> «Видеокадры в слои». Вы увидите подобное диалоговое окно. Убедитесь, что установлен флажок «Сделать анимацию кадра».

Шаг 2. Выберите рамки

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

Шаг 3. Преобразование Photoshop

При импорте фильма в Photoshop таким образом создается покадровая анимация, для каждого кадра которой установлено значение 0.03 секунды (так что 30 кадров составляют примерно одну секунду). Здесь я импортировал 16 кадров, которые вместе длятся чуть более полсекунды.

Больше после прыжка! Продолжайте читать ниже ↓
Члены бесплатного и премиум-класса видят меньше рекламы! Зарегистрируйтесь и войдите в систему сегодня.

Шаг 4. Экспорт GIF

Выберите «Файл»> «Экспорт»> «Сохранить для Интернета (устаревшая версия)» и установите тип файла GIF. Чтобы добиться более плавного результата, установите для параметра «Дизеринг» максимальное значение 100% и установите для GIF бесконечный цикл.Вероятно, вы также захотите уменьшить размеры — я установил 600 пикселей для управляемого файла. Вот результат.

Шаг 5. Отредактируйте кадры

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

Шаг 6: Зациклить кадры

Чтобы избежать скачка в месте повторения пленки, вам нужно зацикливать ее назад и вперед.Чтобы сделать это с пятью кадрами, выберите кадр 4 и, удерживая клавишу Option / Alt, перетащите его до конца (справа от кадра 5), чтобы сделать копию этого кадра. Сделайте то же самое с кадрами 3 и 2, и в итоге вы получите восемь кадров.

Шаг 7. Новый GIF

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

Шаг 8: Дублирование и маска

Дублируйте нижний слой и перетащите его в верхнюю часть стопки слоев (хотя на самом деле вы можете продублировать любой из слоев).Используйте Layer> Layer Mask> Reveal All, чтобы создать пустую маску, затем закрасьте льющуюся воду и нижний стакан черным на этой маске, чтобы скрыть слой. Теперь, когда вы проиграете анимацию, вы увидите, что верхний стакан остается неподвижным, когда вода льется в нижний.

Шаг 9. Прочие вопросы

Это Photoshop, что означает, что вы можете добавить к изображению все, что захотите. Я добавил девушку, пристально смотрящую на воду. Обратите внимание, что если вы хотите переместить дополнительные элементы, сначала выберите все кадры на временной шкале, иначе этот слой переместится только на текущий.

Шаг 10: экспорт окончательного GIF

Глядя на тестовые гифки, которые я экспортировал ранее, казалось, что вода льется слишком быстро — это выглядело безумно. Чтобы замедлить его, выберите все кадры и измените время с 0,03 секунды на более низкую скорость — я использовал 0,1 секунды, что дает гораздо более приятный результат.

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

Описание учебника

Семья Phlearn, вас ждет настоящее удовольствие! В сегодняшнем выпуске мы покажем вам, как создать синемаграф в Photoshop.Мы не останавливаемся на достигнутом, мы также даем вам несколько советов по созданию синемаграфов в камере. Устройтесь поудобнее, возьмите попкорна и наслаждайтесь поездкой!

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

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

Захват кадра для синемаграфа

Сначала мы планировали просто научить вас создавать синемаграф в формате Photoshop GIF. Затем мы поняли, что так же важно знать, как снимать синемаграф на камеру, прежде чем использовать его в Photoshop.

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

• Камера, которая может записывать видео (все, от зеркальной камеры до iPhone)
• Прочный штатив (Вам нужно, чтобы ваша сцена была относительно неподвижной, чтобы действительно добиться этого эффекта.Прочный штатив — один из лучших способов обеспечить постоянство кадрирования.)
• Субъект (что-то или кто-то, что делает что-то непрерывным движением. В нашем случае мы использовали проигрыватель грампластинок. Пока существует четкая начальная и конечная точки.

Чтобы найти идеальный объект, потребуется немного практики, но выбирайтесь и получайте удовольствие, пытаясь создать свой собственный синемаграф!

Использование Photoshop для редактирования синемаграфа

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

Мы начинаем с импорта отснятого материала в Photoshop так же, как и с любым другим неподвижным изображением. После того, как вы загрузили отснятый материал в Photoshop, он должен появиться вместе с временной шкалой видео. Если вы не видите свою шкалу времени, просто перейдите к окну и вниз к шкале времени. Монтаж вашего отснятого материала для синемаграфа вращается вокруг одной концепции. Ваш конечный кадр должен быть таким же, как и ваш начальный кадр. Таким образом, он создаст непрерывный цикл, который будет выглядеть полностью бесшовным.

После того, как наши клипы настроены так, как мы хотим, нам нужно использовать ключевые кадры, чтобы настроить видимость слоев или непрозрачность. Мы устанавливаем наш верхний клип с непрозрачностью на% 100 и постепенно уменьшаем его до% 0. Это заставит ваш верхний и нижний зажимы идеально сочетаться друг с другом.

Затем мы используем слой Stamp Visible Layer и закрашиваем черным участки, которые мы хотим видеть. В данном случае с кадрами, которые мы используем, мы закрасили черным только те места, где есть волны. Это то, что действительно помогает продать эффект.Иногда все в вашей сцене не работает для непрерывного движения, поэтому создание слоя Stamp Visible Layer — отличный способ контролировать, откуда исходит движение.

Сохранение и экспорт

Теперь, когда вы закончили редактировать синемаграф в фотошопе, пришло время для экспорта. Вы хотите убедиться, что вы зашли в свое меню и нажали «Сохранить для Интернета». После этого убедитесь, что тип файла — GIF. Файлы PNG и Jpeg теперь поддерживают движение, поэтому оно не будет работать, если вы не экспортируете файл в формате GIF.Одна из замечательных функций — вы можете просто щелкнуть и перетащить свой экспортный файл Cinemagraph в Google и посмотреть, как он будет выглядеть в Интернете.

.