{"id":14689,"date":"2019-02-13T08:36:55","date_gmt":"2019-02-13T07:36:55","guid":{"rendered":"https:\/\/www.diedruckerei.de\/magazin\/?p=14689"},"modified":"2025-05-19T10:11:01","modified_gmt":"2025-05-19T08:11:01","slug":"cinemagraphs","status":"publish","type":"post","link":"https:\/\/www.onlineprinters.ie\/magazine\/cinemagraphs\/","title":{"rendered":"Cinemagraphs: How to create animated photos for successful advertising"},"content":{"rendered":"<p>The art of cinemagraphs is currently being rediscovered as a popular medium for advertisers. The animated pictures create a stunning WOW effect for little money. They bring photos to life by incorporating moving elements. In this article you will learn how to get photos in motion and which advertising channels are ideal to share cinemagraphs.<\/p>\n<p><!--more--><\/p>\n<p>Is the classic GIF dead? One thing is for sure: Some trends cycle back into fashion again and again. This is why we have devoted this article to a very special kind of moving picture. Cinemagraphs have been making a name for themselves for some time and seem to be coming back as a trend. They combine still photos with looping moving elements to create a dynamic effect. Cinemagraphs are a hybrid of photo and video that WOW viewers, making them ideal for advertising purposes.<\/p>\n<p><strong>Content:<\/strong><\/p>\n<ul>\n<li>For your marketing: professional advertising with moving pictures\n<ul>\n<li><u><a href=\"#1\">Websites and blogs<\/a><\/u><\/li>\n<li><u><a href=\"#2\">Social media content, display or canvas advertising<\/a><\/u><\/li>\n<li><a href=\"#3\">Newsletter<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Create your own moving pictures: Tool check\n<ul>\n<li><a href=\"#plotagraph\">Plotagraph<\/a><\/li>\n<li><a href=\"#flixel\">Flixel<\/a><\/li>\n<li><a href=\"#photoshop\">Adobe Photoshop<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div class=\"custom-background-grey\">\n<p><strong>Cinemagraph vs. GIF<\/strong><br \/>\nIn cinemagraphs, only specific elements of a photo are moving, the rest remains still. They are perceived more as &#8220;living pictures&#8221; and less as videos. Compared to GIFs, cinemagraphs have a lot more colours and create a more vivid impression.<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<p>The moving pictures contain a surprise element. Take the photo of a woman soaking up the sun in the pool below. The scene appears still, but suddenly you notice an isolated subtle movement.<\/p>\n<div class=\"flx-embed\">\n<div style=\"position: relative; height: 0; padding-bottom: 56.25%; width: 100%;\"><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" src=\"https:\/\/media.flixel.com\/cinemagraph\/i9jeipyw7955dpjvbnbp?hd=false\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<div><span style=\"font-size: 8pt;\"><em>Source\u00a0: flixel.com\/cinemagraph\/ &#8211;\u00a0DomQuichotte<\/em><\/span><\/div>\n<\/div>\n<div class=\"flx-embed\">\n<div><\/div>\n<div>\n<p>The other way round, you also get interesting effects. A lot of moving elements create the impression of a video until you realise that certain elements stay still.<\/p>\n<\/div>\n<div><\/div>\n<\/div>\n<div class=\"flx-embed\">\n<div style=\"position: relative; height: 0; padding-bottom: 56.25%; width: 100%;\"><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" src=\"https:\/\/media.flixel.com\/cinemagraph\/6bfwuaefmottf8midnrm?hd=false\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<div><span style=\"font-size: 8pt;\"><em>Source\u00a0: flixel.com\/cinemagraph\/ &#8211;\u00a0DomQuichotte<\/em><\/span><\/div>\n<div><\/div>\n<div class=\"flx-embed\">\n<div style=\"position: relative; height: 0; padding-bottom: 56.25%; width: 100%;\"><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" src=\"https:\/\/media.flixel.com\/cinemagraph\/iayq1tlbf008ev7bltyc?hd=false\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<div class=\"flx-embed\">\n<div><span style=\"font-size: 8pt;\"><em>Source\u00a0: flixel.com\/cinemagraph\/ &#8211;\u00a0DomQuichotte<\/em><\/span><\/div>\n<div><\/div>\n<div>\n<p>Produced to advertise well-known brands already in 2011, moving pictures such as cinemagraphs are not a new trend. The cinemagraphs made by creative artists\u00a0<u><a href=\"http:\/\/cinemagraphs.com\/\">Jamie Beck and Kevin Burg<\/a><\/u>\u00a0for the New York Fashion Week back in 2009 are one such example. They have a lot of potential to create more inspiring websites or internet ads without producing expensive videos.<\/p>\n<\/div>\n<h2>Professional uses of moving pictures<\/h2>\n<p>The tool presentation below explains how to make moving pictures and details the technical background. But one thing is certain, cinemagraphs are cheaper and easier to produce than videos and the subtly animated photos have a hypnotic effect on the observer. Moreover, cinemagraphs have a much smaller file size than videos which results in faster autoplay performance on many websites or blogs. And this is important since the mesmerising effect of cinemagraphs works best when auto-played without delay in a seamless loop.<\/p>\n<div class=\"custom-background custom-background-donts\">\n<p><strong>Note:<\/strong>\u00a0Although we are talking about moving<strong>\u00a0pictures<\/strong>, cinemagraphs are actually\u00a0<strong>video files<\/strong> in most cases. In order to play the animated photo in an endless loop, it might seem a good idea to save the video format as a GIF file since this format automatically repeats the sequence over and over again.<br \/>\nBut be cautious: An MP4 file is capable of reproducing innumerable colours, whereas a GIF is limited to 256 colours and this quality loss is often quite obvious. For this reason, you should avoid converting the file to GIF when embedding the cinemagraph in your website or blog and incorporate the loop function using the embed code instead.<\/p>\n<figure id=\"attachment_14796\" aria-describedby=\"caption-attachment-14796\" style=\"width: 266px\" class=\"wp-caption alignleft\"><a href=\"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/mp4-file.png\"><img loading=\"lazy\" decoding=\"async\" class=\"td-modal-image wp-image-14796\" src=\"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/mp4-file.png\" alt=\"Calm ocean water extends to the horizon under a clear sky, which gradually shifts from blue at the top to a lighter hue near the horizon. The overall scene is peaceful and minimalist.\" width=\"266\" height=\"230\" \/><\/a><figcaption id=\"caption-attachment-14796\" class=\"wp-caption-text\">Quality of an MP4 file vs.<\/figcaption><\/figure>\n<figure id=\"attachment_14795\" aria-describedby=\"caption-attachment-14795\" style=\"width: 230px\" class=\"wp-caption alignleft\"><a href=\"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/gif-file.png\" rel=\"attachment wp-att-14795\"><img loading=\"lazy\" decoding=\"async\" class=\"td-modal-image wp-image-14795\" src=\"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/gif-file.png\" alt=\"A person on a jet ski rides quickly across calm water under a clear blue sky, leaving a white trail behind.\" width=\"230\" height=\"230\" \/><\/a><figcaption id=\"caption-attachment-14795\" class=\"wp-caption-text\">conversion to a GIF file<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<h3 id=\"1\">Websites and blogs<\/h3>\n<p>Moving pictures are a great way to immediately grab a website visitor&#8217;s attention without creating sensory overload. Cinemagraphs also make more attractive product presentations that can be tailored to the industry and the product. This advantage can also be harnessed to visually upgrade blogs. But bear in mind that less is more when creating cinemagraphs. To achieve that WOW effect you are aiming for, it is important not to overdo it.<\/p>\n<p><strong>Examples of product presentations:\u00a0<\/strong><\/p>\n<div>\n<div class=\"flx-embed\">\n<div style=\"position: relative; height: 0; padding-bottom: 80.00%; width: 100%;\"><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" src=\"https:\/\/media.flixel.com\/cinemagraph\/58wkj6qoxfdlu5u080f1?hd=false\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" data-mce-fragment=\"1\"><\/iframe><\/div>\n<\/div>\n<p><em><span style=\"font-size: 8pt;\">Source\u00a0: flixel.com\/cinemagraphs\/advertising &#8211; CinePix<\/span><\/em><\/p>\n<div class=\"flx-embed\">\n<div>\n<div class=\"flx-embed\">\n<div style=\"position: relative; height: 0; padding-bottom: 52.76%; width: 100%;\"><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" src=\"https:\/\/media.flixel.com\/cinemagraph\/n7u0t3tl0exu4ynqq8u6?hd=false\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/div>\n<p><em><span style=\"font-size: 8pt;\">Source\u00a0: flixel.com\/cinemagraphs\/advertising &#8211;\u00a0<\/span><span style=\"font-size: 8pt;\">AndrewPavlidis<\/span><\/em><\/p>\n<\/div>\n<div style=\"position: relative; height: 0; padding-bottom: 80.00%; width: 100%;\"><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" src=\"https:\/\/media.flixel.com\/cinemagraph\/42q0i5raed0h1yauych0?hd=false\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/div>\n<p><em><span style=\"font-size: 8pt;\">Source\u00a0: flixel.com\/cinemagraphs\/advertising &#8211;\u00a0<\/span><span style=\"font-size: 8pt;\">CinePix<\/span><\/em><\/p>\n<\/div>\n<p><strong>Technical embedding:<\/strong>\u00a0The moving picture can be embedded using the HTML video element. The properties for &#8220;Autoplay&#8221; and &#8220;Loop&#8221; should be included in the code and you should test the compatibility with different browsers. Embedding the cinemagraph in WordPress is also possible without difficulty. The best idea is to upload the moving picture to YouTube or other platforms such as\u00a0<u><a href=\"https:\/\/flixel.com\/cinemagraphs\/fresh\/\">flixel.com<\/a><\/u>\u00a0(a website that has specialised in the production and distribution of cinemagraphs) and then embed it on your website. The latter platform offers ready-made embed codes you can copy and paste to autoplay and loop the video.<\/p>\n<p>Sample code to embed a moving picture as an HTML element:<\/p>\n<pre>&lt;video width=\"320\" height=\"240\" autoplay loop&gt;\r\n&lt;source src=\"movie.mp4\" type=\"video\/mp4\"&gt;\r\n&lt;source src=\"movie.ogg\" type=\"video\/ogg\"&gt;\r\nYour browser does not support the video tag.\r\n&lt;\/video&gt;<\/pre>\n<div>\n<p>Sample code to embed a moving picture from the Media Gallery (of WordPress):<\/p>\n<pre>[ video width=\"1200\" height=\"800\" \r\nmp4=\"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2018\/09\/Test_Wasser\r\n-1200px-25fps-2.mp4\" loop=\"on\" autoplay=\"on\" ] [ \/video ]<\/pre>\n<p><em><span style=\"font-size: 8pt;\">(Note: Please delete the blanks before and after the parentheses before using this code.)<\/span><\/em><\/p>\n<p>Sample code to embed a moving picture on YouTube:<\/p>\n<pre>&lt;iframe class=\"embed-responsive-item\"id=\"ytplayer\" type=\"text\/html\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/DWamwL9e3EY?&amp;autoplay=1&amp;loop=1&amp;rel=0&amp;showinfo=0&amp;color=white&amp;iv_load_policy=3&amp;playlist=DWamwL9e3EY\" frameborder=\"0\" allowfullscreen&gt;&lt;\/iframe&gt;<\/pre>\n<\/div>\n<p>Sample code to embed a moving picture on Flixel:<\/p>\n<pre>&lt;div class=\"flx-embed\"&gt;&lt;div style=\"position:relative; height:0; padding-bottom:56.25%; width:100%\"&gt;&lt;iframe style=\"position:absolute; top:0; left:0; width:100%; height:100%;\" src=\"https:\/\/media.flixel.com\/cinemagraph\/tpaqkloxud1mvjq08bfh?hd=false\" frameborder=\"0\" allowfullscreen allow='autoplay'&gt;&lt;\/iframe&gt;&lt;\/div&gt;&lt;\/div&gt;<\/pre>\n<h3 id=\"2\">Social media content, display or canvas advertising<\/h3>\n<p>Moving content is interesting. This is true for content posted on all social media channels. Moving pictures are great both for display and canvas advertising on Facebook or Instagram and to highlight interesting strategic content. These pictures have an advantage over videos: They create a more subtle effect and because there is less movement to catch the eye, cinemagraphs capture a moment in time which captivates the viewer. Moreover, they should feel authentic and tell better stories that entertain millions of users on social media sites.<\/p>\n<blockquote class=\"instagram-media\" style=\"background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width: 540px; min-width: 326px; padding: 0; width: calc(100% - 2px);\" data-instgrm-permalink=\"https:\/\/www.instagram.com\/p\/BbSTEDUgUeK\/?utm_source=ig_embed&amp;utm_medium=loading\" data-instgrm-version=\"12\">\n<div style=\"padding: 16px;\">\n<p>&nbsp;<\/p>\n<div style=\"display: flex; flex-direction: row; align-items: center;\">\n<div style=\"background-color: #f4f4f4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;\"><\/div>\n<div style=\"display: flex; flex-direction: column; flex-grow: 1; justify-content: center;\">\n<div style=\"background-color: #f4f4f4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;\"><\/div>\n<div style=\"background-color: #f4f4f4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;\"><\/div>\n<\/div>\n<\/div>\n<div style=\"padding: 19% 0;\"><\/div>\n<div style=\"display: block; height: 50px; margin: 0 auto 12px; width: 50px;\"><\/div>\n<div style=\"padding-top: 8px;\">\n<div style=\"color: #3897f0; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: 550; line-height: 18px;\">View this post on Instagram<\/div>\n<\/div>\n<div style=\"padding: 12.5% 0;\"><\/div>\n<div style=\"display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;\">\n<div>\n<div style=\"background-color: #f4f4f4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);\"><\/div>\n<div style=\"background-color: #f4f4f4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;\"><\/div>\n<div style=\"background-color: #f4f4f4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);\"><\/div>\n<\/div>\n<div style=\"margin-left: 8px;\">\n<div style=\"background-color: #f4f4f4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;\"><\/div>\n<div style=\"width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg);\"><\/div>\n<\/div>\n<div style=\"margin-left: auto;\">\n<div style=\"width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);\"><\/div>\n<div style=\"background-color: #f4f4f4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);\"><\/div>\n<div style=\"width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);\"><\/div>\n<\/div>\n<\/div>\n<div style=\"display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;\">\n<div style=\"background-color: #f4f4f4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;\"><\/div>\n<div style=\"background-color: #f4f4f4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;\"><\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p style=\"color: #c9c8cd; font-family: Arial,sans-serif; font-size: 14px; line-height: 17px; margin-bottom: 0; margin-top: 8px; overflow: hidden; padding: 8px 0 7px; text-align: center; text-overflow: ellipsis; white-space: nowrap;\"><a style=\"color: #c9c8cd; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none;\" href=\"https:\/\/www.instagram.com\/p\/BbSTEDUgUeK\/?utm_source=ig_embed&amp;utm_medium=loading\" target=\"_blank\" rel=\"noopener\">A post shared by Coca-Cola (@cocacolaeu)<\/a> on <time style=\"font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;\" datetime=\"2017-11-09T19:16:59+00:00\">Nov 9, 2017 at 11:16am PST<\/time><\/p>\n<\/div>\n<\/blockquote>\n<p><script async src=\"\/\/www.instagram.com\/embed.js\"><\/script><\/p>\n<p><strong>Technical embedding:\u00a0<\/strong>The autoplay function of Facebook, Instagram and similar sites launches videos or animated pictures without having to click on the photo. Even profile pictures or ads can now include cinemagraphs on Facebook. Cinemagraphs can also be played on newer mobile devices. But make sure that your moving picture is looped to highlight the moving effect of the subject. If the animated picture appears for a few seconds only, the effect on the viewer will be lost.<\/p>\n<h3 id=\"3\">Newsletters<\/h3>\n<p>Moving pictures also create more inspiring newsletters. The streaming service Netflix, for instance, incorporated a cinemagraph in their newsletter for the start of the third season of &#8220;House of Cards&#8221;. This makes it more likely that readers of the newsletter will remember the start of the new season and click the trailer.<\/p>\n<div class=\"flx-embed\">\n<div style=\"position: relative; height: 0; padding-bottom: 114.94%; width: 100%;\"><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" src=\"https:\/\/media.flixel.com\/cinemagraph\/f8yz1tdwi0jtppyq7oio?hd=false\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/div>\n<p><span style=\"font-size: 8pt;\"><em>Source\u00a0: blog.flixel.com<\/em><\/span><\/p>\n<p><strong>Technical embedding:<\/strong>\u00a0If you want to embed the picture in a newsletter, it can make sense to convert it to GIF format out of practicality to keep the file size small. You can integrate the GIF in the usual way using the embed code of pictures and the small file size would prevent slow loading of newsletter content. But make sure that the quality doesn&#8217;t suffer too much and that the animated picture still creates a high-quality impact.<\/p>\n<p>Sample code to embed a moving picture in a newsletter (saved as GIF):<\/p>\n<div class=\"custom-background-grey\">\n<p>&lt;img src=\u201cXXXXX.gif\u201c width=\u201c600\u201c height=\u201c340\u201c alt=\u201cxx\u201c border=\u201c0\u201c hspace=\u201c0\u201c vspace=\u201c0\u201c&gt;<\/p>\n<\/div>\n<p>If you embed the cinemagraph as a video with much more colours and a larger file size, it is imperative to test first whether the animated photo affects the performance of the content when opening the newsletter \u2013 both of the desktop and mobile version.<\/p>\n<h2>Create your own moving pictures: Tool check<\/h2>\n<p>To bring a picture to life, you need a good eye and a constant internet connection depending on the tool. Some tools even allow users to edit the cinemagraphs online. Depending on which tool you use, you need a photo or video to start from.<\/p>\n<h3 id=\"plotagraph\">Plotagraph<\/h3>\n<p>Unlike other services, this provider enables you to create a moving picture based on an image file. You can also edit pictures online here. To use Plotagraph, or more exactly Plotaverse, you can register for free and create a first impression of the tool. Animating an image is done very quickly here and does not require a lot to be produced in advance. All you have to do is take a suitable photo and upload it. The brush function in the editor enables you to define which areas will stay still.<\/p>\n<figure id=\"attachment_14805\" aria-describedby=\"caption-attachment-14805\" style=\"width: 696px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/Plotagraph-1.png\" rel=\"attachment wp-att-14805\"><img loading=\"lazy\" decoding=\"async\" class=\"td-modal-image wp-image-14805 size-large\" src=\"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/Plotagraph-1.png\" alt=\"An old wooden barn sits in a grassy field under a dramatic, cloudy sky. The barn and surrounding land are highlighted in red within photo editing software, with toolbars visible on the sides.\" width=\"696\" height=\"338\" \/><\/a><figcaption id=\"caption-attachment-14805\" class=\"wp-caption-text\">Screenshots of masking in Plotagraph<\/figcaption><\/figure>\n<p>Drag animation points (orange and blue arrows) to specify in which direction you want the picture to move. Use the stabilising anchor points to outline anything you don&#8217;t want to move. In the example, anchor points were added to the cloudy sky to create differentiated movement of the clouds.<\/p>\n<figure id=\"attachment_14797\" aria-describedby=\"caption-attachment-14797\" style=\"width: 696px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/Plotagraph-2.png\" rel=\"attachment wp-att-14797\"><img loading=\"lazy\" decoding=\"async\" class=\"td-modal-image wp-image-14797 size-large\" src=\"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/Plotagraph-2.png\" alt=\"A rustic wooden barn sits in a grassy field under a dramatic, cloudy sky. The image editing software interface displays animation points and tools, suggesting motion will be added to the clouds.\" width=\"696\" height=\"338\" \/><\/a><figcaption id=\"caption-attachment-14797\" class=\"wp-caption-text\">Screenshot of the editing process in Plotagraph<\/figcaption><\/figure>\n<p>The tool automatically calculates the movement of the pixels. Additionally, you can adjust the time of the automatically calculated movement. The shorter the duration of the animated picture, the faster the defined image points will move. Lastly, export the project. If you do not use the paid Pro version, you will get an MP4 file which contains a watermark. The paid version provides the formats MOV, JPEG seg, PNG seq, animated PNG and GIF.<br \/>\nHit the play button at the bottom of the screen at any time to instantly see what your animation looks like. This allows you to experiment a bit to fine-tune the animation until it is just right.<\/p>\n<div style=\"width: 696px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]-->\n<video class=\"wp-video-shortcode\" id=\"video-14689-1\" width=\"696\" height=\"463\" loop=\"1\" autoplay=\"1\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/house-1200px-30fps.mp4?_=1\" \/><a href=\"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/house-1200px-30fps.mp4\">https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/house-1200px-30fps.mp4<\/a><\/video><\/div>\n<p><strong>Conclusion:<\/strong>\u00a0The online application offers high performance also on the smartphone. If you decide to purchase the Pro version, it can make sense to download the desktop version. But the tool sometimes fails to create naturally moving pictures, because it is not possible to adjust the exact movement of the individual image points.<\/p>\n<p>For example, it is difficult to animate elements such as sunrays in the foreground with the background, e.g., a mountain range, staying still. Plotagraph is a good choice for images where the movement in the foreground and background are clearly separated (such as the sea and sky). All you need is a photo to transform it into a gorgeous animation. Flowing elements like clouds, the sea or graphics are ideal for this tool.<\/p>\n<h3 id=\"flixel\">Flixel<\/h3>\n<p>The program\u00a0<a href=\"https:\/\/flixel.com\/\">Cinemapraph Pro by Flixel<\/a>\u00a0has specialised in the making of cinemagraphs. It also offers a free trial option. Unlike Plotagraph, Flixel works with video material. This means that the animations in the picture appear much more natural, because they are real movements. But first you have to film the video according to certain criteria.<\/p>\n<p>To create a cinemagraph, you have to shoot the video using a digital camera on a tripod. This creates stable video footage where only the desired elements are moving. There are no limits to your creativity when it comes to deciding which content will be animated in the final result. Before shooting the video, you should already have an idea of what to implement in the cinemagraph. You have to instruct the models accordingly or position the camera in a suitable environment for this purpose.<\/p>\n<p>The Flixel tutorial for beginners uses the scene of two people drinking tea to demonstrate the procedure with the man on the left drinking from his cup and the woman on the right pouring tea.<\/p>\n<figure id=\"attachment_14793\" aria-describedby=\"caption-attachment-14793\" style=\"width: 696px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/Flixel-1_en.png\" rel=\"attachment wp-att-14793\"><img loading=\"lazy\" decoding=\"async\" class=\"td-modal-image wp-image-14793 size-large\" src=\"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/Flixel-1_en.png\" alt=\"A man and a woman sit in armchairs by a fireplace, sharing tea and snacks. The woman pours tea while the man sips from a cup. A tray with cups, a teapot, and snacks is on the table between them.\" width=\"696\" height=\"392\" \/><\/a><figcaption id=\"caption-attachment-14793\" class=\"wp-caption-text\">Selecting a video segment in Cinemagraph Pro<\/figcaption><\/figure>\n<p>Now if you upload the video in Cinemagraph Pro, you have to specify a short sequence in the video first and then select a still image in this sequence. This still image is the starting material of the cinemagraph.<\/p>\n<p>It will be masked in the next step. To reveal motion from your video, use the brush tool to paint over selected areas you want to animate.<\/p>\n<figure id=\"attachment_14794\" aria-describedby=\"caption-attachment-14794\" style=\"width: 696px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/Flixel-2_en.png\" rel=\"attachment wp-att-14794\"><img loading=\"lazy\" decoding=\"async\" class=\"td-modal-image wp-image-14794 size-large\" src=\"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/Flixel-2_en.png\" alt=\"A man drinks from a cup while a woman pours tea at a small table in a cozy, modern living room. The image features editing overlays and adjustment tools on the screen.\" width=\"696\" height=\"377\" \/><\/a><figcaption id=\"caption-attachment-14794\" class=\"wp-caption-text\">Masking the areas you want to animate<\/figcaption><\/figure>\n<p>The mask now reveals all areas in the still photo which you selected with the brush tool. The rest of the picture shows the selected still image.<\/p>\n<p>To create flowing movement, you have to select the video sequence carefully. The &#8220;Bounce&#8221; and &#8220;Repeat&#8221; functions bounce the video either forward or back or repeat the motion from beginning to end. The duration of the repeat loop can also be defined.<\/p>\n<p><strong>Conclusion:<\/strong>\u00a0In this step, it is all about the perfect alignment of the video material, the selected video sequence and the associated still photo. The program has a clearly structured user interface and provides all the necessary editing tools. The export option enables optimising the cinemagraph for use on social media or as Facebook ads. Cinemagraph Pro creates realistically looking moving images and features a manageable scope of functions. If you use moving pictures professionally, the tool is really worth the investment.<\/p>\n<h3 id=\"photoshop\">Adobe Photoshop<\/h3>\n<p>If you already have the Creative Suite, you don&#8217;t necessarily have to purchase an extra tool. Cinemagraphs can also be created using Photoshop C6 or later versions. Although it was not originally designed to edit videos, Photoshop C6 and later versions enable you to create stunning cinemagraphs using the Timeline panel at the bottom of the screen.<\/p>\n<p>DomQuichotte, the media designer that has become famous for his tutorials on fx-ray.com, demonstrates how to use Photoshop to quickly create a cinemagraph in his Tutorial for Adobe. Put briefly, the tutorial explains (similar to Cinemagraph Pro by Flixel) how to film a video and define a suitable segment. Once you have selected this segment, you can copy the still photo from it. Now it&#8217;s all about &#8220;layer masks&#8221;. Layer masks enable you to define in which areas of the still photo the underlying video will be visible. This is because layer overlay with video files in Photoshop works similar to image layer overlay. As a result, you always see the picture first and the video underneath only in selected areas.<\/p>\n<figure id=\"attachment_14794\" aria-describedby=\"caption-attachment-14794\" style=\"width: 696px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/PS-Tutorial.jpg\" rel=\"attachment wp-att-14794\"><img loading=\"lazy\" decoding=\"async\" class=\"td-modal-image wp-image-14794 size-large\" src=\"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/PS-Tutorial.jpg\" alt=\"A man gives a Photoshop tutorial on a computer. The screen shows a photo of a woman in a dress standing in tall grass by the ocean, with editing panels visible. The instructor stands at a desk, wearing a black hat and shirt.\" width=\"696\" height=\"377\" \/><\/a><figcaption id=\"caption-attachment-14794\" class=\"wp-caption-text\">Screenshot from the tutorial of DomQuichotte, source: blogs.adobe.com<\/figcaption><\/figure>\n<p>The advantage of editing in Photoshop: When converting the still image to a smart object, you can continue to use all image editing functions. Whether RAW filter or other functions \u2013 you can edit your moving picture in the same way as you would do with other photos.<\/p>\n<div class=\"custom-background-grey\">\n<p>In addition to videos, you can also turn a normal photo into an animated picture using the timeline. This method, however, is not as flexible, because you try to simulate movement through masking and transformation (such as magnifying). As in\u00a0<a href=\"#plotagraph\">Plotagraph<\/a>,\u00a0flowing subjects such as clouds or water are better suited for this purpose.<\/p>\n<\/div>\n<p><strong>Conclusion:<\/strong>\u00a0If you are an experienced Photoshop user and know how to work with the timeline, you will find it easy to make cinemagraphs. And in addition to creating the animated picture, you can apply all the necessary retouch and filter functions to the image. You don&#8217;t have to buy a new tool and stay flexible.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The art of cinemagraphs is currently being rediscovered as a popular medium for advertisers.<\/p>\n","protected":false},"author":24,"featured_media":14917,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,4],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cinemagraphs: How to create animated photos for successful advertising<\/title>\n<meta name=\"description\" content=\"Moving pictures such as cinemagraphs are a hot web design trend. Cinemagraphs open up endless possibilities you can use for your marketing.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.onlineprinters.ie\/magazine\/cinemagraphs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cinemagraphs: How to create animated photos for successful advertising\" \/>\n<meta property=\"og:description\" content=\"Moving pictures such as cinemagraphs are a hot web design trend. Cinemagraphs open up endless possibilities you can use for your marketing.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.onlineprinters.ie\/magazine\/cinemagraphs\/\" \/>\n<meta property=\"og:site_name\" content=\"onlineprinters.ie MAGAZINE\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-13T07:36:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-19T08:11:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/cinemagraphs.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1068\" \/>\n\t<meta property=\"og:image:height\" content=\"580\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ramona\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Cinemagraphs: How to create animated photos for successful advertising\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ramona\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.onlineprinters.ie\/magazine\/cinemagraphs\/\",\"url\":\"https:\/\/www.onlineprinters.ie\/magazine\/cinemagraphs\/\",\"name\":\"Cinemagraphs: How to create animated photos for successful advertising\",\"isPartOf\":{\"@id\":\"https:\/\/www.onlineprinters.ie\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.onlineprinters.ie\/magazine\/cinemagraphs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.onlineprinters.ie\/magazine\/cinemagraphs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/cinemagraphs.jpg\",\"datePublished\":\"2019-02-13T07:36:55+00:00\",\"dateModified\":\"2025-05-19T08:11:01+00:00\",\"author\":{\"@id\":\"https:\/\/www.onlineprinters.ie\/magazine\/#\/schema\/person\/d79ba2db96e33e04ed71525f52bb1eb9\"},\"description\":\"Moving pictures such as cinemagraphs are a hot web design trend. Cinemagraphs open up endless possibilities you can use for your marketing.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.onlineprinters.ie\/magazine\/cinemagraphs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.onlineprinters.ie\/magazine\/cinemagraphs\/#primaryimage\",\"url\":\"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/cinemagraphs.jpg\",\"contentUrl\":\"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/cinemagraphs.jpg\",\"width\":1068,\"height\":580},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.onlineprinters.ie\/magazine\/#website\",\"url\":\"https:\/\/www.onlineprinters.ie\/magazine\/\",\"name\":\"onlineprinters.ie MAGAZINE\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.onlineprinters.ie\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.onlineprinters.ie\/magazine\/#\/schema\/person\/d79ba2db96e33e04ed71525f52bb1eb9\",\"name\":\"Ramona\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.onlineprinters.ie\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2018\/07\/avatar-1.png\",\"contentUrl\":\"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2018\/07\/avatar-1.png\",\"caption\":\"Ramona\"},\"description\":\"H\u00e4tte, h\u00e4tte, Fahrradkette \u2013 ich bin ein Fan davon die Dinge konsequent anzupacken und versuche weniger verpassten Gelegenheiten nachzuh\u00e4ngen. Jeden Tag \u00f6ffnen sich neue T\u00fcren und in unserer schnelllebigen Zeit der selbstf\u00fcllenden K\u00fchlschr\u00e4nke, Next-day-deliverys und twitternden Pr\u00e4sidenten sind das jede Menge. Nach meinem Studium der Medienkommunikation habe ich mich vor allem den spannenden Entwicklungen des Online Marketings verschrieben. In meinen Artikeln m\u00f6chte ich die neuen Trends und Inspirationen auf diesem Gebiet so lebhaft und praxisnah wie m\u00f6glich an die Leser weitergeben.\",\"url\":\"https:\/\/www.onlineprinters.ie\/magazine\/author\/ramona\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cinemagraphs: How to create animated photos for successful advertising","description":"Moving pictures such as cinemagraphs are a hot web design trend. Cinemagraphs open up endless possibilities you can use for your marketing.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.onlineprinters.ie\/magazine\/cinemagraphs\/","og_locale":"en_US","og_type":"article","og_title":"Cinemagraphs: How to create animated photos for successful advertising","og_description":"Moving pictures such as cinemagraphs are a hot web design trend. Cinemagraphs open up endless possibilities you can use for your marketing.","og_url":"https:\/\/www.onlineprinters.ie\/magazine\/cinemagraphs\/","og_site_name":"onlineprinters.ie MAGAZINE","article_published_time":"2019-02-13T07:36:55+00:00","article_modified_time":"2025-05-19T08:11:01+00:00","og_image":[{"width":1068,"height":580,"url":"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/cinemagraphs.jpg","type":"image\/jpeg"}],"author":"Ramona","twitter_card":"summary_large_image","twitter_title":"Cinemagraphs: How to create animated photos for successful advertising","twitter_misc":{"Written by":"Ramona","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.onlineprinters.ie\/magazine\/cinemagraphs\/","url":"https:\/\/www.onlineprinters.ie\/magazine\/cinemagraphs\/","name":"Cinemagraphs: How to create animated photos for successful advertising","isPartOf":{"@id":"https:\/\/www.onlineprinters.ie\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.onlineprinters.ie\/magazine\/cinemagraphs\/#primaryimage"},"image":{"@id":"https:\/\/www.onlineprinters.ie\/magazine\/cinemagraphs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/cinemagraphs.jpg","datePublished":"2019-02-13T07:36:55+00:00","dateModified":"2025-05-19T08:11:01+00:00","author":{"@id":"https:\/\/www.onlineprinters.ie\/magazine\/#\/schema\/person\/d79ba2db96e33e04ed71525f52bb1eb9"},"description":"Moving pictures such as cinemagraphs are a hot web design trend. Cinemagraphs open up endless possibilities you can use for your marketing.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.onlineprinters.ie\/magazine\/cinemagraphs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.onlineprinters.ie\/magazine\/cinemagraphs\/#primaryimage","url":"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/cinemagraphs.jpg","contentUrl":"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2019\/01\/cinemagraphs.jpg","width":1068,"height":580},{"@type":"WebSite","@id":"https:\/\/www.onlineprinters.ie\/magazine\/#website","url":"https:\/\/www.onlineprinters.ie\/magazine\/","name":"onlineprinters.ie MAGAZINE","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.onlineprinters.ie\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.onlineprinters.ie\/magazine\/#\/schema\/person\/d79ba2db96e33e04ed71525f52bb1eb9","name":"Ramona","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.onlineprinters.ie\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2018\/07\/avatar-1.png","contentUrl":"https:\/\/www.onlineprinters.ie\/magazine\/wp-content\/uploads\/2018\/07\/avatar-1.png","caption":"Ramona"},"description":"H\u00e4tte, h\u00e4tte, Fahrradkette \u2013 ich bin ein Fan davon die Dinge konsequent anzupacken und versuche weniger verpassten Gelegenheiten nachzuh\u00e4ngen. Jeden Tag \u00f6ffnen sich neue T\u00fcren und in unserer schnelllebigen Zeit der selbstf\u00fcllenden K\u00fchlschr\u00e4nke, Next-day-deliverys und twitternden Pr\u00e4sidenten sind das jede Menge. Nach meinem Studium der Medienkommunikation habe ich mich vor allem den spannenden Entwicklungen des Online Marketings verschrieben. In meinen Artikeln m\u00f6chte ich die neuen Trends und Inspirationen auf diesem Gebiet so lebhaft und praxisnah wie m\u00f6glich an die Leser weitergeben.","url":"https:\/\/www.onlineprinters.ie\/magazine\/author\/ramona\/"}]}},"_links":{"self":[{"href":"https:\/\/www.onlineprinters.ie\/magazine\/wp-json\/wp\/v2\/posts\/14689"}],"collection":[{"href":"https:\/\/www.onlineprinters.ie\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.onlineprinters.ie\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.onlineprinters.ie\/magazine\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.onlineprinters.ie\/magazine\/wp-json\/wp\/v2\/comments?post=14689"}],"version-history":[{"count":6,"href":"https:\/\/www.onlineprinters.ie\/magazine\/wp-json\/wp\/v2\/posts\/14689\/revisions"}],"predecessor-version":[{"id":40434,"href":"https:\/\/www.onlineprinters.ie\/magazine\/wp-json\/wp\/v2\/posts\/14689\/revisions\/40434"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.onlineprinters.ie\/magazine\/wp-json\/wp\/v2\/media\/14917"}],"wp:attachment":[{"href":"https:\/\/www.onlineprinters.ie\/magazine\/wp-json\/wp\/v2\/media?parent=14689"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.onlineprinters.ie\/magazine\/wp-json\/wp\/v2\/categories?post=14689"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.onlineprinters.ie\/magazine\/wp-json\/wp\/v2\/tags?post=14689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}