Ashampoo Cinemagraph — лёгкий способ создания синемаграфии
Пусть Ваши фотографии оживут
Синемаграфии привлекают взгляды на домашних страничках и в профилях в социальных сетях! Это потому что они не похожи ни на фото, ни на видео. Синемаграфии добавляют лёгкое движение к неподвижным фотографиям, что сродни магии. Конечно Вы можете использовать Photoshop, чтобы создать нечто подобное, но зачем использовать дорогое и сложное программное обеспечение, когда Вы можете создавать ослепительные синемаграфии всего за несколько минут с помощью Ashampoo Cinemagraph?
Так же просто как и редактирование фотографий
Всё что Вам понадобится – видео. И конечно же Ashampoo Cinemagraph. Видео должно быть максимально ровным, без дрожаний. Идеальный вариант – видео со штатива. С помощью специальной кисточки в Ashampoo Cinemagraph, Вы можете отметить те части Вашего видео, которые должны двигаться или оставаться неподвижными. Размер, твёрдость и прозрачность могут быть настроены с помощью слайдеров. Мы верим, что с помощью нашей программы любой может создавать впечатляющие синемаграфии, и мы придерживаемся этого утверждения!
Больше чем просто анимация
Взаимодействие неподвижных и движущихся частей неизбежно привлекает зрителей к любому мотиву, который Вы стремитесь подчеркнуть. Умелое сочетание нескольких визуальных слоёв позволяет создавать невероятно яркие фотографии и зацикленные видео! Хотя синемаграфии всегда основаны на видео, Ваши зрители будут думать, будто Вы как Гарри Поттер наложили магическое заклинание, которое вдохнуло жизнь в Ваши безжизненные фотографии. Это идеальное завершение Ваших видео или слайд-шоу!
Набор инструментов художника
Только Вам решать, какие части изображений будут без изменений, а какие станут анимированными. Получающиеся видео создают необычайное настроение и идеально подходят, чтобы запечатлеть особенные моменты! Вы можете экспортировать результаты в GIF или в видео. Параметры экспортирования, такие как размер, качество и число повторов могут быть изменены несколькими кликами. Более того, при желании Вы можете оставить оригинальные звук.
Улучшайте видео для создания идеальных синемаграфий
Успех любого видео сильно зависит от исходного материала. Вот почему Ashampoo Cinemagraph позволяет Вам быстро настроить параметры экспозиции и цвета. Выполняйте настройку температуры цвета, изменяйте тени и оптимизируйте состояние освещения в мгновение! Используйте коррекцию тона и изменяйте баланс белого, чтобы максимально раскрыть Ваши синемаграфии!
Добавляйте текст и эффекты
Как и видео, синемаграфии могут быть улучшены с помощью специальных эффектов и текстовых надписей. Ashampoo Cinemagraph позволяет с особой лёгкостью добавлять текст или выбирать из 23 эффектов с 6 эффектами переходов для придания нужного настроения. Естественно, Вы можете изменять длительность как эффектов, так и переходов. Позвольте Вашей креативности разыграться и установить такие акценты, которые больше всего впечатлят Ваших зрителей.
Вращайте, обрезайте и управляйте временем с лёгкостью
Эта синемаграфическая программа просто идеальна для захвата важных моментов в превосходной позиции и с помощью наиболее подходящего формата. Выполняйте свободное вращение видео, обрезайте фокусировки на ключевых элементах и при необходимости изменяйте соотношение сторон. Возьмите время под контроль и добавляйте эффекты таймлапс и слоумо, чтобы изменять скорость воспроизведения по нажатию одной кнопки для ещё большего волшебства. Естественно, Ваши настройки могут быть сохранены для повторного использования.
Выполняйте стабилизацию трясущихся видео
Тряска камеры – настоящий враг синемаграфии. Однако снимки с телефонов или экшн-камер в большинстве своём страдают от проблем со стабильностью. В Ashampoo Cinemagraph встроена передовая функция стабилизации видео! Даже снимки, сделанные с рук, станут более стабильными и реалистичными.
Превращайте обычные фотографии во впечатляющие анимированные фотографии!
Хотите создавать синемаграфии бесплатно? Без проблем! Вы можете использовать наш продукт бесплатно в течение 10 дней, а после бесплатной регистрации ещё 20 дней. Целый месяц зрелищных синемаграфий для Вас бесплатно!
Создаем синемаграф с идущими часами в Фотошоп / Фотошоп-мастер
За последние несколько лет анимированные 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
Синемаграфы — тренд веб-дизайна
Привет, друзья. Сегодня поговорим об одном из трендов в веб-дизайне — синемаграфах (cinemagraphs). Для тех, кто еще не в курсе — это что-вроде «живых» фотографий (гифок), но отличающихся тем, что вся картинка неподвижна, а анимирован только один (реже 2-3) отдельных элемента.
Получается зацикленная, плавная анимация, которая и акцентирует на себе внимание.
Синемаграфы могут заменить как полноценные тяжеловесные видео, так и статичные картинки, а эффект на пользователя производят, в ряде случаев, даже больший. Дело в том, что синемаграфия оживляет только часть изображения, со своими эффектами и сценами, которые на полноценном видео можно не заметить и упустить.
Вот несколько примеров, которые мне понравились:
По настоящему популярными синемаграфы стали после того, как социальные сети разрешили автоматически воспроизводить видео и gif, а также появилась возможность создавать их при помощи камеры в телефоне.
На сегодняшний день их называют трендом 2018 года, который активно используется не только в соц. сетях. И неудивительно, по данным различных исследований, вирусность синемаграфов от 40 до 70% выше, чем у обычных картинок, что, в свою очередь, свидетельствует и о большей вовлеченности аудитории, что, в свою очередь, увеличивает время пребывания на странице, что, в свою очередь, положительно влияет на поведенческие факторы и т.д.
Цепочку можно и продолжить 🙂
Как использовать cinemagraphs
Как я уже говорил, синемаграфы могут заменить полноценные видео на сайте, например те, которые используются в качестве видеофона. Зачастую анимации достаточно, чтобы фон выглядел привлекательно, а вес намного меньше. Что положительно влияет на скорость загрузки страницы, а это один из важных факторов ранжирования в поисковой выдаче.
Часто, от разных экспертов мы слышим, что на landing page, возле формы, нужно показать товар, пример его использования или результат. Так почему бы вместо картинки не использовать cinemagraph?
Довольно интересно смотрелся бы слайдер.
Если анимация не навязчивая, аккуратная и продуманная, то можно было бы использовать в карточках товара. Например при продаже свадебных платьев, можно было бы показать как оно колышется на модели, как развивается.
Если это кожаные куртки, то показать блеск, изгибы и перелив, который был бы не заметен на обычном фото. В ювелирных украшениях можно было бы сделать анимацию покачивания сережки. При продаже элитного алкоголя, процесс наливания вина в бокал. В меню кофейни — пар от чашек с горячим кофе. Качающиеся пальмы на фоне моря при продаже тура.
Да, в карточках товаров это может быть слишком навязчиво, но почему не оживить фото при наведении курсора?
А какие у вас идеи использования cinemagraphs?
Синемаграфия: 10 вдохновляющих примеров
Синемаграфию смело называют новой эрой UX-дизайна. Эта концепция объединяет фотографию и видео. Синемаграфичный эффект можно получить, взяв за основу видео, в котором некоторые элементы оставляют статичными, а другие — подвижными, анимированными.
Благодарить за создание новой техники нужно фотографов Кевина Бурга (Kevin Burg) и Джеймса Бека (James Beck), которые ввели термин «синемаграфия» в 2011 году. Спустя 5 лет эта концепция все еще остается одним из актуальных трендов веб-дизайна. «Живые картинки» в gif-формате используются как альтернатива привычным видеозаставкам, захватывая все внимание пользователей (доказано, что живая картинка привлекает покупателей намного больше, чем статичное изображение).
Для создания эффекта синемаграфии можно использовать Adobe Photoshop, After Effects и другие программы; в последние годы появились даже приложения для iPhone и Android. Вашему вниманию — 10 завораживающих примеров использования этой техники, которые никого не оставят равнодушным.
1. Отражение
Это ожившее фото от Toma Iakopo передает все оттенки движения в отражении солнцезащитных очков женщины.
2. Бабочка в колокольчике
«Живая картинка» от студии Ann Street притягивает взгляд мягким освещением и сдержанными, приятными цветами. В первую очередь, зрители замечают анимированную бабочку и позже переключаются на мерцание огонька свечи на заднем фоне.
3. Знойное утро
Глядя на этот реалистичный портрет, мы буквально ощущаем, как жарко этим утром на кухне. Такой эффект создается благодаря вращению вентилятора и ожившим теням на плите.
4. Рей на планете Такодана
Даже если вы не фанат Звездных войн, живая картинка из эпизода VII «Пробуждение Силы» («The Force Awakens») достойна внимания. Течение воды и игра света как нельзя лучше передают важность момента — первого визита Рея на планету Такодана.
Фоновое видео на вашем лендинге: польза или вред?
5. Ниагарский водопад
От движения огромной массы воды и исходящего от нее пара просто захватывает дух! Именно на этот эффект и рассчитывали мастера из Orbo Cinemagraphs.
6. Паровоз в зимнем лесу
Огромные клубы дыма, перекликаясь по цвету с засыпанными снегом елками, наталкивают на мысли о мощности не только этой машины, но и всего технического прогресса в целом.
7. Бруклинский мост в движении
Мишель Молдер (Michel Molder) известен благодаря своей библиотеке «живых картинок». Его Бруклинский мост — отличный пример того, как привычное движение может стать удивительным, если убрать все отвлекающие факторы.
8. Высокая мода
Эффект синемаграфии помогает автору этого снимка Шерифу Мокбель (Sherif Mokbel) подчеркнуть изысканную одежду модели, создавая резкий контраст с industrial-фоном.
9. Гамлет (Hamlet at Elsinore)
Ожившая фотография одной из версий шекспировской пьесы передает внутреннее смятение главного героя.
10. Виски и сигареты
Дым от сигареты, которую курит главная героиня снимка, заставляет задержаться взгляд на этой ожившей фотографии и внимательно ее разглядеть.
Встречали яркие примеры синемаграфии? Поделитесь ими в комментариях!
Высоких вам конверсий!
По материалам: ceros.com
18-11-2016
Как сделать классное синемаграфическое изображение
Вы, конечно, слышали о синемаграфии, поскольку в свое время этот термин здорово нашумел в интернете. Впервые придуманные фотографами Кевином Бургом и Джеми Беком, синемаграфии представляют собой не что иное, как искусные реконструкции классических анимированных GIF картинок. Они сочетают в себе качества видео и фотографии, создавая иллюзию ожившего изображения, вызванную впечатляющим эффектом легкого движения на неподвижном фоне.
Давайте посмотрим, как создать свою собственную, анимированную GIF синемаграфию, манипулируя возможностями инструментов анимации в Photoshop.
Что такое синемаграфия?
Некоторые из лучших примеров синемаграфий можно найти на собственном сайте создателей. Их оригинальные синемаграфии, снятые во время недели моды в Нью-Йорке, запечатлели, казалось бы, обычные для фотографий моменты, но при этом сохранили фрагменты того живого движения во времени, которое завораживает, позволяя бесконечно воспринимать увиденное, как в первый раз.
По мере роста популярности синемаграфии, стали появляться мобильные приложения типа «Cinemagram emerge», которые позволяют легко создавать любительские синемаграфии с помощью специальных устройств, встроенных в камеру. Эти приложения предлагают быстрые и простые решения, но, как всегда, лучших результатов можно достичь, обладая возможностями точной настройки для контроля всего процесса производства, так что давайте посмотрим, как создать свою собственную и неповторимую синемаграфию с нуля.
Как создать синемаграфию
Синемаграфии предусматривают некоторое движение, поэтому, несмотря на то, что финальное изображение должно более походить на фотографию, чем на видео, нам нужно начинать с выбора реального видеофутажа, однако для синемаграфии подходят не все видео. На результирующем изображении должны быть в равной мере проявлены как стационарные, так и анимированные объекты, поэтому синемаграфии составляются из зацикленных фрагментов видео с использованием определенной части изображения, как некого застывшего фона.
Вот несколько советов, которые следует учитывать при создании своего собственного синемаграфического футажа:
• Для того чтобы анимировать конкретный объект, фон вашей сцены должен оставаться совершенно неподвижным, поэтому используйте штатив.
• Выбирайте сюжеты, которые включают какие-нибудь непрерывные или циклические движения. Так, например, отлично работают синемаграфии поезда метро или эскалатора, потому что они движутся последовательно и предсказуемо.
• Иногда тонкие эффекты приводят к созданию потрясающих синемаграфий. Визуально активные сцены, безусловно, могут работать лучше в формате видео, но легкие движения травы, колышущейся на ветру, или неожиданно моргнувший глаз могут создать очень впечатляющую картину.
В качестве альтернативы собственному видео-сюжету вы всегда можете поэкспериментировать с готовыми видеороликами на стоковых ресурсах. В этом уроке я буду использовать вот такой видеофутаж от сайта videohive.net. Я представил себе, как здорово было бы оставить анимированным отражение девушки в зеркале на фоне неподвижного окружения остальной части изображения, наделив воображение девушки некой способностью видеть в зеркале, как она восхищается красным платьем.
В первую очередь нам нужно тщательно просмотреть видеоролик и подобрать подходящий для анимации фрагмент. Это должен быть относительно короткий отрезок, в котором бы можно было либо плавно зациклить анимацию, либо прокрутить ее в обратную сторону, но без лишнего утрирования. Вырежьте и сохраните выбранный фрагмент, как новый видео файл. В проигрывателе QuickTime Player это легко делается с помощью функции обрезки, но такая операция посильна многим видео редакторам.
Откройте Photoshop, перейдите в File > Import (Файл > Импортировать) и выберите команду Video Frames to Layers (Кадры видео в слои). Оставьте выбранными настройки по умолчанию «From Beginning To End» (От начала до конца) и «Make Frame Animation» (Создать покадровую анимацию). Пользователям Mac, получившим что-нибудь вроде «32bit/64bit error», будет полезна эта ссылка.
Каждый кадр изображения будет импортирован на отдельный слой. Некоторые сложные синемаграфии могут потребовать кропотливой и скрупулезной работы над каждым кадром, но большинства из них можно создать, применив лишь маску.
Ключ к достижению искусного эффекта синемаграфии кроется в том, чтобы скрыть под маской всю последовательность слоев (а значит обездвижить сцену), оставив нетронутым только анимируемый объект, который должен привлекать к себе внимание, оживляя застывшее окружение. Поэтому создайте выделение вокруг объекта анимации (в нашем случае это отражение в зеркале девушки с красным платьем), затем сгруппируйте в (Ctrl+G) слои всех кадров, за исключением первого (самого нижнего) слоя и добавьте группе маску слоя (Layer Mask), кликнув на иконке в палитре слоев внизу. Проследите, чтобы в область выделения не попали другие «живые» элементы.
Теперь откройте Animation window (Окно > Шкала времени). Вы видите, что 99% кадров оказалось на прозрачном фоне благодаря слой-маске, и чтобы исправить это, выберите первый (нижний) слой и нажмите на иконку с подсказкой Unify Layer Visibility (Унифицировать видимость слоя) в строке Unify (Унифицировать) в палитре слоев вверху. В открывшемся окне с вопросом: «Make the visibility in other frames…?» (Синхронизировать видимость других кадров и состояний ……?) выберите «Синхронизировать» (Match).
Нажмите кнопку play (воспроизведение) в окне анимации, чтобы оценить базовый эффект. Если ваш футаж зациклен неудачно, сцена будет нескладно останавливаться и повторяться, или попросту дергаться. Чтобы исправить это, нам нужно прокрутить запись в обратном направлении. Выделите все кадры, открыв меню панели анимации щелчком по маленькому треугольнику справа, и выбрав команду Select all the frames (Выделить все кадры). Затем скопируйте кадры по команде из меню, или нажав на иконку «Создание копии выделенных кадров» на панели анимации внизу.
Теперь вставьте кадры в конце исходного цикла анимации, выбрав в меню команду Paste Frames > Paste After Selection (Вставить кадры > Вклеить после выделенной области).
Не снимая выделения с новых кадров, откройте всплывающее меню и выберите Reverse Frames (Обратный порядок кадров), чтобы прямое воспроизведение анимации, заканчиваясь, переходило в обратное и возвращалось к началу, замыкая петлю.
Натурально зацикленные анимации всегда дают лучший и наиболее реалистичный результат, поскольку такие реверсивные эффекты, как правило, не столь очевидны. Впрочем, вы можете настроить свою анимацию, чтобы реверсивный эффект выглядел более естественно. Для этого нужно щелкнуть по стрелочке под кадром с подсказкой: «Выбор времени отображения кадра» и в развернувшемся списке выбрать время задержки кадра. Таким образом, меняя паузу на определенных кадрах, можно либо растянуть анимацию, либо сжать вплоть до выбора опции No delay (Без задержки).
Постепенное замедление анимации сцены, в которой девушка вертится в разные стороны, делает движения более естественными и устраняет некоторые огрехи в замкнутом цикле анимации.
Добавление эффектов коррекции цвета в стиле ретро делает изображение не только стильным, но и способствует сокращению количества цветов, обеспечивая более высокое качество конечного GIF файла с его ограниченной палитрой 256 цветов.
Создайте поверх всех слоев корректирующий слой Color Balance (Цветовой баланс) и, выбрав тон «тени» (shadows), переместите ползунок голубой составляющей на 100%. Снимите галочку с чекбокса Preserve Luminosity (Сохранять свечение).
Теперь выберите Midtones (Средние тона) и настройте цвета, как на рисунке выше.
В режиме Highlights (Света) передвиньте ползунки в сторону красного, зеленого и синего.
Теперь добавьте корректирующий слой Gradient Map (Карта градиента) и установите градиент, выбрав слева направо следующие цвета: очень темный, синий (#020413), средне-синий (#2b4a61), зеленый (#a8c6a0) и палево-желтый (#feffe6). Измените режим наложения этого слоя на Lighten (Замена светлым).
Добавьте корректирующий слой Curves (Кривые) и настройте яркость теней и светов, чтобы усилить контраст изображения.
Файл анимированного GIF изображения с таким большим количеством деталей в каждом кадре будет иметь колоссальные размеры. Самый лучший способ сжать объем файла – это уменьшить физический размер изображения, что можно сделать, перейдя в меню «Изображение > Уменьшить изображение».
Выберите File > Save for Web (Файл > Сохранить для Web) и укажите формат файла GIF. Определите оптимальную модель дизеринга прозрачности, чтобы достичь наилучшего качества воспроизведения. Кроме того можно сократить в палитре количество цветов вплоть до двухцветного или черно-белого эффекта, что тоже может улучшить качество изображения.
Наше финальное своеобразное изображение воспроизводит впечатляющий синемаграфический эффект, захватив момент, передающий восхищение девушки, примеряющей платье. Однако надо признать, что анимационный цикл все еще выглядит немного дерганым. В этом видео был большой отрезок, из которого бы получилась отличная синемаграфия, но этот фрагмент стал непригодным из-за того, что руки второй девушки, предлагающей примерить очередное платье, постоянно мелькают перед объектом, препятствуя его изоляции в кадре при маскировании фона.
Тем не менее, это техника очень увлекает и может пригодиться в будущем. Анимированные GIF синемаграфии хорошо бы смотрелись в рекламных баннерах, цифровых постерах и на обложках альбомов.