10

/

12

/

2016

kataloop.com/en/magazine/cinemagraphs-from-production-to-editing-in-adobe-photoshop-part-1-production

Table of contents:

I originally wrote this article for gallereplay, my first company featuring a stock collection of cinemagraphs and loop videos.

In this two-part tutorial, originally published in Docma Magazine, gallereplay co-founder Lydia Dietsch explains how cinemagraphs can be created using Adobe Photoshop. First up: capturing your cinemagraph with Photoshop’s functionality already in mind.

Cinemagraphs, also known as “living photos” or “motion stills”, are becoming increasingly popular amongst brands, digital agencies, journalists and designers. The reason is simple: these catchy visuals – in which a part of the image moves in an infinite loop – evoke more emotion than static photos. This leads to higher click-through rates (CTR), more engagement and longer dwell-times. Cinemagraphs undoubtedly have a lot of potential, particularly in terms of marketing.

What many photographers don’t know is that cinemagraphs can easily be created using Adobe Photoshop. I myself was not aware of this 1.5 years ago when I first found out about cinemagraphs and caught myself thinking “I can’t do this, it involves video” (my background is in graphic design and photography). After doing a little bit of research, I learnt that all I needed to do, was activate the “timeline” panel in Photoshop, and I was on my way to creating my first cinemagraphs.

A lot has happened since: together with my business partner Marco Woldt, I (Lydia Dietsch) launched an image provider specialising in cinemagraphs. The name of our company is gallereplay; more and more artists around the world are joining us to sell their stock cinemagraphs or produce custom cinemagraphs for our clients. Photoshop has always been my software of choice – hardly a day went by, without me using it. In this article I would like to demonstrate, using a recent production of ours as an example, how cinemagraphs can be created with Photoshop.

Production

The biggest difference compared to photography is that the visuals aren’t captured as RAW photos or JPG’s, but as video. This may sound daunting if you haven’t worked with video before, however the process of composing the image is similar: you place your camera on a tripod and select your perspective just as you would a photo. During the recording, the camera shouldn’t move in the slightest, which also means you don’t have to worry about pans, tracking shots and other film techniques. Audio doesn’t matter either, as cinemagraphs tend to be silent. Something that is very important however, is the movement within the image itself, and this is where you will encounter a new challenge.

During a recent gallereplay production I decided to have two elements moving within the same cinemagraph: the curtain in the background and the visual displayed on the TV monitor. Other movements would have been a possibility: the person on the left-hand side of the image could have been taking notes; the person on the right could have clicked the remote control in his hand. But I decided not to overload the image and center the attention on the TV monitor. The moving curtain in the background strengthens the special atmosphere within this visual, which could not have been created in a static image. By selecting which elements move and which are static, the creator has the power to tell stories and highlight certain parts of the image.

For this particular production we used a Sony Alpha 7s II, which is able to shoot video in 4K. By editing the 4K video on a Full HD timeline (i.e. cramming more pixels into a smaller frame), it’s possible to generate a sharper image. As someone coming from a photo background, you may otherwise be disappointed with the image quality delivered by video. Another way to avoid such disappointment is to take a photograph from the same angle as your video, and then to combine the two in post-production.

You can read more about the post-production in Adobe Photoshop in Part 2.

Weiterlesen

Cinemagraphs: From Production to Editing in Adobe Photoshop (Part 2: Postproduction)

Cinemagraphs: From Production to Editing in Adobe Photoshop (Part 2: Postproduction)

Cinemagraphs: From Production to Editing in Adobe Photoshop (Part 2: Postproduction)

What is Kataloop?

We are your creative agency for everything from setting up your online store to producing professional studio shots. Our workflow is optimized to focus on efficient execution. Thanks to our subscription model, we offer flexibility that allows you to adapt quickly to changes in your business routine: adjust tasks in the task management tool, add new ones, or remove those no longer needed.

Figma designs

Figma is the leading design tool for user interface designs, straightforward prototyping, and design systems. Most of our design tasks, such as web designs, are created using Figma, while print products are developed with Adobe InDesign.

Webflow websites

Webflow is THE tool for creating professional websites. Webflow CMS, Webflow E-Commerce, Webflow Interactions, and Webflow Localization are just some of the features that significantly accelerate processes and offer limitless possibilities.

Stock media

Kataloop has an exclusive collection of high-quality photos and videos that you can use in your projects. License media with just a few clicks or subscribe to Kataloop to receive a monthly allowance.

Studio productions

Convey professionalism and quality to your target audience with a high-quality, cohesive visual identity. At Kataloop’s studio, we create photo and video concepts that enhance your brand identity and boost your revenue.

And more:

Cinemagraphs

Corporate design style guides

Microinteractions

Still life photography

Graphic design

Online shops

Lottie animations

Branding

Product photography

Complex website animations

Static short videos

Custom code

Print products

(Streamline) icons

Landing pages

Micro videos

Cinemagraphs

Corporate design style guides

Microinteractions

Still life photography

Graphic design

Online shops

Lottie animations

Branding

Product photography

Complex website animations

Static short videos

Custom code

Print products

(Streamline) icons

Landing pages

Micro videos