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

НАЧАЛЬНЫЙ УРОВЕНЬ, СРЕДНИЙ УРОВЕНЬ, ВЫСОКИЙ УРОВЕНЬ · 1 MIN

Научитесь «оживлять» фотографии с помощью видео.

Вам потребуется

Скачать материалы

Скачать Photoshop бесплатно

Теперь попробуйте сами

1. Скачайте тренировочные изображения. Откройте файл Video.mp4 в Photoshop и переименуйте слой по умолчанию Layer 1 в Coffee Video.

2. Чтобы удалить слой с видео из группы по умолчанию Video Group 1, перетащите слой Coffee Video над Video Group 1. Когда вы увидите две голубые линии над группой, это будет означать, что вы перетащили слой.

 

Подсказка. При открытии видео в Photoshop создается группа по умолчанию Video Group 1, а внутри нее — слой по умолчанию Layer 1. Также Photoshop автоматически открывает панель Шкала времени под видео.

3. Теперь, когда группа Video Group 1 пуста, удалите ее, перетащив в корзину.

4. Перетащите слой Coffee Video на значок Новый слой в нижней части панели Слои, чтобы создать копию слоя с видео.

5. Перемещайте курсор между видео и панелью Шкала времени, пока он не превратится в двунаправленную стрелку, с помощью которой можно увеличить панель Шкала времени.

6. Используйте ползунок Управление масштабом просмотра шкалы времени, чтобы увеличить размер слоев видео в рабочей области, и перетащите указатель воспроизведения на 2:12.

Создание статичной части синемаграфа

7. Правой кнопкой мыши щелкните слой Coffee Video copy и выберите Растрировать слой во всплывающем меню.

8. В главном меню нажмите Выделение, а затем Выделение и маска.

9. На панели Свойства в выпадающем меню Режим просмотра выберите пункт Наложение.

 

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

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

 

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

11. На панели Свойства нажмите Инверсия в параметрах вывода и установите значение Слой-маска. Затем нажмите кнопку ОК, чтобы выйти из режима Выделение и маска.

Создание движущейся части синемаграфа

12. Установите начальную и конечную точки на шкале времени, чтобы задать область непрерывного воспроизведения для синемаграфа. Установите начальную точку на значении 00:10, а конечную — на значении 02:09.

13. Нажмите кнопку Воспроизведение для предварительного просмотра созданного синемаграфа. Если видео не воспроизводится непрерывно, нажмите значок Настройки и выберите Цикл воспроизведения.

 

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

14. Сохраните синемаграф, нажав Файл > Экспортировать > Сохранить для Web (старая версия). В диалоговом окне Сохранить для Web выберите следующие параметры: GIF, 256 цветов, дизеринг 100%. При необходимости настройте размер изображения и убедитесь, что для опции Параметры повторов установлено значение Постоянно.

Вот и все! Теперь ваша очередь. «Оживите» собственные фотографии в Photoshop с помощью видео. Скачайте наши материалы или используйте собственные. Опубликуйте готовую работу в Facebook, Twitter или Instagram с хештегом #MadewithPhotoshop. Получайте отзывы и общайтесь с другими творческими людьми.

Скачать материалы

ПРИСОЕДИНЯЙТЕСЬ

Facebook: http://facebook.com/adobecreativecloud

Twitter: http://twitter.com/creativecloud

Instagram: http://www.instagram.com/adobecreativecloud

YouTube: https://www.youtube.com/channel/UCL0iAkpqV5YaIVG7xkDtS4Q

Behance: https://www.behance.net/live. Смотрите нас в прямом эфире и вдохновляйтесь — к вашим услугам настоящие профи и наглядные примеры.

Синемаграфия — Как сделать — Azbuka WordPress

2 736

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

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

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

Что такое Cinemagraph (синемаграфия)?

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

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

Они особенно полезны в качестве дополнения к большой статье, эпизоду подкаста или аудио-истории.

Создание cinemagraphs немного отличается от обычных GIF.

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

Для начала вам понадобятся следующие элементы:

• Небольшой видеоклип, который вы хотите преобразовать в cinemagraph
• Adobe Photoshop

Давайте начнем.

Сначала вам нужно подготовить видео.

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

Теперь открывайте Photoshop, импортируйте видео и преобразуйте в слои, нажав на меню «Файл» — «Видео» в меню «Файлы».

Выберите видео и нажмите кнопку OK, чтобы продолжить. Длительность импорта зависит от размера вашего видео. Просто подождите:)

Как только ваше видео будет импортировано, вы увидите видеокадры в виде слоев под панелью слоев.

Теперь вам нужно выбрать все слои, кроме самого первого слоя (Layer 1).

Перейдите в меню Layer — New — Group From Layers или нажмите Command + G (CTRL + G в Windows), чтобы добавить слои в группу.

Затем вам нужно выбрать группу и перейти в Layer — Layer Mask — Reveal All, чтобы добавить маску к группе.

После добавления маски нажмите клавиши Ctrl + I (Ctrl + I в Windows), чтобы инвертировать цвет маски.

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

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

После этого перейдите в Window — Timeline, чтобы открыть все слои в формате анимации.

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

Чтобы изменить это, выберите первый слой (Layer 1) на панели слоев и нажмите значок «Видимость слоя», а затем нажмите кнопку «Match».

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

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

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

И еще раз щелкните значок переключения временной шкалы и выберите опцию «Обратные рамки».

Ваша синемаграфия почти готова!

Чтобы сохранить ее на своем компьютере, откройте «Файл» — «Сохранить для веб-опции». Во всплывающем окне выберите формат GIF и нажмите кнопку «Сохранить».

Все, ваша синемаграфия готова.

Вы можете добавить ее на свой сайт так же, как обычные GIF-файлы в WordPress.

В окне редактора нажмите на кнопку «Добавить медиафайл» и загрузите свою синемаграфию с ПК.

После загрузки нажмите кнопку «Вставить в страницу/запись». Теперь ваша синемаграфия появится в окне редактора, не забудьте сохранить и обновить.

Вот синемаграфия, которую мы с вами создали во время этого урока.

Я надеюсь, эта статья помогла вам научиться создавать и добавлять синемаграфии в WordPress.

Читайте также:

Как добавить запись на сайте WordPress — подробный урок.

Если вы устанавливаете тему впервые, пожалуйста, посмотрите наше видео «Как установить тему WordPress».

Вам может быть интересна статья-руководство «Как выбрать тему WordPress».

А также пошаговая инструкция по созданию сайта на WordPress.

И конечно, все о SEO – как оптимизировать сайт для поисковых систем.

Вы также можете задать вопросы в комментариях.

И подписывайтесь на нас в Facebook, Instagram и Twitter.

Как создать синемаграф за 7 простых шагов

• Блог Hubspot
• HubSpot.com

Загрузка

О нет! Мы не смогли найти ничего подобного.

Попробуйте еще раз поискать, и мы постараемся.

Шелби Кларк

Обновлено: 29 октября 2021 г.

Опубликовано: 07 ноября 2019 г.

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

1. План
2. Запись
3. Импорт и обрезка
4. Создание вашей маски
5. Редактирование вашей маски
6. Реверс (или нет)

Как говорится в старой поговорке, «картинка стоит тысячи слов». Учитывая, что 65% населения являются визуальными учениками, использование изображений как часть вашего маркетинга может стать ключом к тому, чтобы ваше сообщение было доставлено.

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

Синемаграфия может сделать шаг вперед.

Что такое синемаграф, спросите вы? Художники с Cinemagraph.com, где, по сути, родился синемаграф, описывают их как «изображение, которое содержит в себе живой момент, позволяющий бесконечно переживать и сохранять проблеск времени».

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

Окончательный синемаграф

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

Какие инструменты вам нужны?

Во-первых, вам нужно убедиться, что у вас есть все необходимое для создания синемаграфа:

• Способ записи видео (я использовал камеру на своем iPhone 6)
• Штатив или какой-либо другой способ, чтобы ваша камера была устойчивой и полностью неподвижной
• Adobe Photoshop (в настоящее время я использую Adobe Photoshop CC 2014 на своем iMac)

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

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

Шаг 1: Планируйте!

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

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

Сведите движения к минимуму. Синемаграфия — это тонкость; они не бросаются в глаза и не бросаются в глаза.

Шаг 2: Запись

Синемаграф подобен живой фотографии. Вы хотите, чтобы это выглядело профессионально.

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

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

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

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

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

Шаг 3: Импорт и обрезка

После отправки видео себе по электронной почте я импортировал его в Photoshop, выбрав «Файл» > «Импорт» > «Видеокадры в слои» и выбрав файл.

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

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

Убедитесь, что временная шкала видна в вашем окне, выбрав «Окно» > «Временная шкала». Вы должны автоматически увидеть временную шкалу кадров, но имейте в виду, что в Photoshop также есть временная шкала видео, и она работает так же, но выглядит немного иначе, чем то, что вы увидите на моих снимках экрана.

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

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

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

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

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

В итоге я импортировал только около 4 секунд видео, и это составило около 90 кадров. После того, как я удалил все лишние кадры, которые мне больше не нужны, количество целых кадров сократилось до 10, что делает видео очень-очень коротким.

Обрезано (перед редактированием)

Шаг 4: Создание маски

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

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

Выберите первый кадр на временной шкале и на панели «Слои» продублируйте слой, видимый в этом кадре. Перетащите его выше всех остальных слоев и убедитесь, что он виден. Это будет твой 9Маска слоя 0048 . Я переименовал свой слой в «Статическая маска».

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

Шаг 5: Редактирование маски

На панели «Слой» выберите слой-маску и щелкните значок «Добавить маску слоя» в нижней части панели (она выглядит как прямоугольник с отверстием посередине). .

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

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

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

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

Мой слой «Статическая маска» после того, как я снял маску с областей, в которых я хотел, чтобы произошло движение.

Шаг 6: Реверс (или нет)

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

Синемаграфия при переворачивании и повторении

Синемаграфия только при повторении

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

Шаг 7. Экспорт вашего синемаграфа

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

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

Поздравляем с новым синемаграфом!

Вы играли с синемаграфией?

Темы: Визуальный контент

Не забудьте поделиться этим постом!

Связанные статьи

• Как сделать анимированный GIF в Photoshop [Учебник]

  06 апр. 2022 г.

• 50 статистических данных по маркетингу визуального контента, которые вы должны знать в 2022 году

  16 февр. 2021 г.

• Как визуальные эффекты повлияют на маркетинг в 2017 году, согласно новым данным [инфографика]

  29 марта 2017 г.

• Как создать привлекающий внимание плакат для любого мероприятия [инфографика]

  06 января 2017 г.

• Как мозг обрабатывает разные типы контента [инфографика]

  05 декабря 2016 г.

• 5 способов использовать визуальный контент для повышения коэффициента конверсии

  15 ноября 2016 г.

• Бесплатные шаблоны дизайна, необходимые для создания потрясающего визуального маркетингового контента

  08 июня 2016 г.

• Азбука привлекательной визуальной рекламы [инфографика]

  06 мая 2016 г.

• Как создавать контент лучше, чем у ваших конкурентов [инфографика]

  11 марта 2016 г.

• Более 195 идеально оптимизированных шаблонов дизайна для электронной почты, инфографики и многого другого [бесплатные шаблоны]

  02 февраля 2016 г.

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

ПРОДВИНУТЫЕ · 5 МИН

Превратите видео в слегка анимированную фотографию с зацикленным движением с помощью Adobe Premiere Pro.

Что вам понадобится

Получить файлы

Примеры файлов для практики (ZIP, 8,3 МБ)

Этот образец файла является ресурсом Adobe Stock, который вы можете использовать для отработки того, что вы изучаете в этом руководстве. Если вы хотите использовать образец файла помимо этого руководства, вы можете приобрести лицензию на Adobe Stock. Ознакомьтесь с файлом ReadMe в папке, чтобы узнать об условиях, применимых к использованию вами этого примера файла.

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

Начиная с рабочего пространства редактирования, поместите отснятый материал на дорожку V2 на панели «Таймлайн». Просмотрите отснятый материал и найдите кадр, который вы хотели бы использовать в качестве статического фона. Щелкните значок камеры в программном мониторе (Shift+E). В диалоговом окне «Экспорт кадра» выберите формат без потерь, например PNG, укажите, где сохранить экспортированное неподвижное изображение, выберите параметр «Импортировать в проект» и нажмите «ОК».

Выделив видеоклип, откройте панель «Элементы управления эффектами» (Shift+5) и щелкните значок пера в разделе «Непрозрачность», чтобы активировать инструмент «Свободное рисование Безье». Щелкните в программном мониторе, чтобы создать маску, содержащую изолированное действие. Возможно, вам потребуется отрегулировать уровень масштабирования, чтобы завершить траекторию маски за пределами видимой области. Увеличьте Mask Feather, чтобы смягчить края.

Найдите изображение, которое вы экспортировали ранее (и автоматически импортировали в свой проект), и перетащите его на дорожку V1, обрезав его в соответствии с видеоклипом над ним. В программном мониторе замаскированная часть видео должна сливаться со статическим фоновым слоем. Воспроизведите последовательность с включенным Loop Playback, чтобы увидеть, есть ли очевидный скачок в действии в точке повторения. Вы едва ли заметите это — если вообще заметите. (Чтобы добавить эту кнопку на панель, нажмите «+» справа от элементов управления. Перетащите кнопку Loop Playback из диалогового окна «Редактор кнопок» на панель кнопок и нажмите «ОК».)

Если во время воспроизведения видео что-то неожиданно попадает в замаскированную область, обрежьте клип V2 (и сопровождающий статический кадр V1), чтобы воспроизводимая часть не допустила этого.

Чтобы экспортировать клип в виде синемаграфа, выберите «Файл» > «Экспорт» > «Мультимедиа» (Command/Control+M). В диалоговом окне «Параметры экспорта» установите для параметра «Формат» значение «Анимированный GIF» и нажмите «Экспорт».

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

No related posts.