БЛОГ 2410

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

Как создавать и добавлять синемаграфы в WordPress
Обсудим ваш проект?

Предлагаем обсудить, чем мы можем вам помочь. Забронируйте 15-минутную консультацию.

Поделиться статьей

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

Создание синемаграфов для вашего сайта WordPress
Создание синемаграфов для вашего сайта WordPress Изображение с сайта wpbeginner.com

Что такое Cinemagraphs?

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

Предварительный просмотр синемаграфов
Предварительный просмотр синемаграфов Изображение с сайта wpbeginner.com

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

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

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

Создание Cinemagraphs из видео

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

  1. Небольшой видеоклип, который нужно преобразовать в синемаграф.
  2. Adobe Photoshop
  3. Ваше время, терпение и творчество

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

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

Затем вам нужно открыть Photoshop и импортировать ваше видео в слои, щелкнув меню File »Import» Video Frames to Layers.

Импортируйте видео в слои
Импортируйте видео в слои Изображение с сайта wpbeginner.com

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

Импорт видео в слои
Импорт видео в слои Изображение с сайта wpbeginner.com

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

Слои, импортированные из видео
Слои, импортированные из видео Изображение с сайта wpbeginner.com

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

Перейдите в меню Слой »Новый» Группа из слоев или нажмите Command + G (CTRL + G в Windows), чтобы добавить слои в группу.

Сгруппированные слои
Сгруппированные слои Изображение с сайта wpbeginner.com

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

Раскрыть все
Раскрыть все Изображение с сайта wpbeginner.com

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

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

Почистите движущиеся части, чтобы выделить их
Почистите движущиеся части, чтобы выделить их Изображение с сайта wpbeginner.com

После этого перейдите в Окно »Временная шкала, чтобы открыть все ваши слои в формате анимации.

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

Лента новостей
Лента новостей Изображение с сайта wpbeginner.com

Чтобы изменить это, выберите первый слой (Layer 1) на панели слоев и щелкните значок Unfiy Layer Visibility, а затем нажмите кнопку Match.

Унифицировать видимость
Унифицировать видимость Изображение с сайта wpbeginner.com

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

Копировать кадры
Копировать кадры Изображение с сайта wpbeginner.com

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

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

Вставить после выбора
Вставить после выбора Изображение с сайта wpbeginner.com

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

Обратные кадры
Обратные кадры Изображение с сайта wpbeginner.com

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

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

Сохранить как GIF
Сохранить как GIF Изображение с сайта wpbeginner.com

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

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

Загрузите свой синемаграфический GIF в WordPress
Загрузите свой синемаграфический GIF в WordPress Изображение с сайта wpbeginner.com

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

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

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

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

Пример синемаграфа
Пример синемаграфа Изображение с сайта wpbeginner.com

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

Свяжитесь с нами.

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

Контакты
Как создавать и добавлять синемаграфы в WordPress | Блог 2410

Агентство веб разработки.

Услуги программирования и веб разработки по фиксированной цене. Специализация: WordPress, разработка B2B решений и создание кастомных скриптов.

WordPress

Разработка шаблонов, плагинов, интернет магазинов на WooCommerce, создание сайтов

Подробнее

B2B решения

CRM, ERP, внутренние системы, автоматизация, калькуляторы, SaaS и индивидуальные решения

Подробнее

Программирование

Разработка кастомных скриптов, API, интеграции, Zapier, Integromat, автоматизация

Подробнее

Подписка

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

Подробнее