{"id":15134,"date":"2016-08-04T12:18:47","date_gmt":"2016-08-04T19:18:47","guid":{"rendered":"http:\/\/photoshopcafe.com\/?p=15134"},"modified":"2022-10-24T20:18:21","modified_gmt":"2022-10-25T03:18:21","slug":"make-cinemagraph-video-photoshop-animated-gif-tutorial","status":"publish","type":"post","link":"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/","title":{"rendered":"Make a Cinemagraph from a video in Photoshop, &#038; animated gif tutorial"},"content":{"rendered":"<p>Cinemagraphs, also called &#8220;living photos&#8221; have made a bit of a comeback lately (sorry, they aren&#8217;t new). I actually wrote a tutorial on how to do this back in 2005 in my How to Wow for the Web book from Peachpit press, I actually called it &#8220;Bringing a Picture to Life&#8221; back then. Now it&#8217;s time to do them in Adobe Photoshop using videos. \u00a0Its really useful for a website header, ad, Facebook post, or a kiosk because you can make a gif and set it to looping forever and get an endless looping video at a pretty small file size.<\/p>\n<p>A Cinemagraph is when you have a photograph, but parts of it are moving. This is done by masking a photo with a looping video underneath. We will do this from a video, this tutorial works in Photoshop CS6 (extended) and Photoshop CC only. Check out my video which shows you step-by-step how to do this. I have a few extra tips in here including:<\/p>\n<ul>\n<li>How to use guides to get a better match for the loop<\/li>\n<li>How to easily see what you are masking from the video<\/li>\n<li>How to export as an animated gif<\/li>\n<li>How to get the gif into facebook<\/li>\n<\/ul>\n<h2>How to Make a Cinemagraph with Photoshop CS6 and CC<\/h2>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/mG8Kkloooy0?rel=0&amp;showinfo=0\" width=\"853\" height=\"480\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>The model here was Tiffany, and I shot this (Canon 5D MkIII) at Eaves Ranch, Santa Fe, New Mexico<\/p>\n<p>Note: If you don&#8217;t have Photoshop CS6 Extended (for video support) or Photoshop CC this tutorial won&#8217;t work for you, I&#8217;m sorry, but the video features before that were different, but you might be able to adapt the tutorial to work in earlier versions, but I can&#8217;t offer support on that.<\/p>\n<p>Once you have made your cinemagraph, you can export it as video or as a gif. Use save for web to export the gif and make sure you set looping to &#8220;forever&#8221;.<\/p>\n<p>You can upload this gif to your website, See example here<\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15136 size-full\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph.gif\" alt=\"cinemagraph\" width=\"650\" height=\"366\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph.gif 650w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-600x338.gif 600w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-300x169.gif 300w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-100x56.gif 100w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Here are written step-by-step instructions, for those who prefer to read.<\/p>\n<h2>Make a CINEMAGRAPH in Photoshop Tutorial and Make a GIF<\/h2>\n<p>Start with a video, \u00a0here&#8217;s a video that I shot just recently of Tiffany.\u00a0The goal is to find repeating movements and\u00a0to freeze this into a photograph and just kind of have her hair and the tassel moving, and then, we can loop it, and then, you can upload it to a website as an animated gif or whatever, via small file size, and it can endlessly loop and create this movement. It&#8217;s kind of a cool effect.<\/p>\n<p>This tutorial will work in Photoshop CS 6 or CC. Earlier versions have different animation engines. Now, to get the video in here, you just choose File, Open, and then, you just choose the video and it will open\u00a0in the timeline.\u00a0Open the video into Photoshop and make sure the timeline is visible. Window&gt;Timeline (This only works in Photoshop CS6 Extended or CC)\u00a0So, as you can see, we&#8217;ve got 16 seconds here; it&#8217;s way too long.<\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial01.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15204 size-full\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial01.jpg\" alt=\"cinemagraph-photoshop-tutorial01\" width=\"650\" height=\"357\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial01.jpg 650w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial01-600x330.jpg 600w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial01-300x165.jpg 300w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial01-100x55.jpg 100w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/a><\/p>\n<p>The\u00a0\u00a0first thing, is to break this down to a short loop where the action is happening. So we&#8217;re going to grab the play head here and just pull it across. This is known as\u00a0scrubbing.\u00a0So what I&#8217;m doing is I&#8217;m looking at the movement around here in the tassels, and around here in the hair. In also noticing she&#8217;s blinking about once a second. What we&#8217;re looking for is a consistent loop where the wind is blowing about the same. Make sure her eyes are looking in the same direction, we are looking for a seamless trasition to use as the looping point.<\/p>\n<p>We trim the video, by clicking and dragging on the end and the beginning. \u00a0We have it down to\u00a0a couple of seconds, which is all we need.<\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial02.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15205 size-full\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial02.jpg\" alt=\"cinemagraph-photoshop-tutorial02\" width=\"650\" height=\"190\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial02.jpg 650w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial02-600x175.jpg 600w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial02-300x88.jpg 300w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial02-100x29.jpg 100w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/a><\/p>\n<p>Now we want to check this to make sure that it&#8217;s looping correctly. First thing we can do is just expand our timeline a little bit. This is not changing the direction of the video at all. All its doing is just giving us a little bit more to play with here on our timeline.<\/p>\n<p>Now if you want to know more about video, I have a two actual full training tutorials on working with video on Photoshop.<a href=\"http:\/\/photoshopcafe.com\/tutorials\/edit-video-in-photoshop.htm\"> I have a free one here,<\/a> I have a couple of more in-depth courses.<\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/video-editing-photoshop\">Making Movies in Photoshop<\/a><\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/video\/products\/Photoshop_video_editing.htm\">Video in Photoshop<\/a><\/p>\n<p>Click on the menu at the right of the timeline\u00a0and choose Loop Playback. Now, by doing this, this will enable us to look at our loop. So when it gets to the end, it will go back again, so make sure that&#8217;s turned on. And then, when we hit the Play, notice it&#8217;s going to go all the way through, and then, play again. So let&#8217;s just watch that and what we&#8217;re looking for is just any sudden jumps.<\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial03.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15206\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial03.jpg\" alt=\"cinemagraph-photoshop-tutorial03\" width=\"612\" height=\"481\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial03.jpg 612w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial03-600x472.jpg 600w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial03-300x236.jpg 300w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial03-100x79.jpg 100w\" sizes=\"auto, (max-width: 612px) 100vw, 612px\" \/><\/a><\/p>\n<p>This is a good base video for use to use. So the next thing we want to do is\u00a0freeze this into a photograph and that&#8217;s super easy.Duplicate the video layer. So you can hit Ctrl J or Command J on Mac for jump, or just drag into the New Layer icon, and that&#8217;s going to duplicate that video.<\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial04.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15207\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial04.jpg\" alt=\"cinemagraph-photoshop-tutorial04\" width=\"236\" height=\"205\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial04.jpg 236w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial04-100x87.jpg 100w\" sizes=\"auto, (max-width: 236px) 100vw, 236px\" \/><\/a><\/p>\n<p>Now we don&#8217;t want this to be a video anymore. We want this top layer to be an image, so we just right click and then choose Rasterize Layer.<\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial05.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15208\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial05.jpg\" alt=\"cinemagraph-photoshop-tutorial05\" width=\"267\" height=\"205\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial05.jpg 267w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial05-100x77.jpg 100w\" sizes=\"auto, (max-width: 267px) 100vw, 267px\" \/><\/a><\/p>\n<p>If\u00a0you&#8217;ll look at our timeline, notice the image clip is\u00a0right after the other one on the same layer. We want\u00a0them\u00a0on top of each other though, not one after the other.\u00a0What you need to do is remove it out of the video group. So take that layer, which is an image, and drag it above, and see that little line will appear there. Release and notice, now, it&#8217;s on a layer above the video.<\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial08.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15211\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial08.jpg\" alt=\"cinemagraph-photoshop-tutorial08\" width=\"233\" height=\"191\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial08.jpg 233w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial08-100x82.jpg 100w\" sizes=\"auto, (max-width: 233px) 100vw, 233px\" \/><\/a><\/p>\n<p>Make sure you drag the image to the left so that it lines up at the beginning.<\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial10.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15213\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial10.jpg\" alt=\"cinemagraph-photoshop-tutorial10\" width=\"243\" height=\"125\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial10.jpg 243w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial10-100x51.jpg 100w\" sizes=\"auto, (max-width: 243px) 100vw, 243px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial11.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15214\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial11.jpg\" alt=\"cinemagraph-photoshop-tutorial11\" width=\"650\" height=\"94\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial11.jpg 650w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial11-600x87.jpg 600w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial11-300x43.jpg 300w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial11-100x14.jpg 100w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/a><\/p>\n<p>Now, what we need to do is just reveal the areas that we want to have movement and we can do that by using a layer mask. However, it&#8217;s going to be quite difficult to see where we&#8217;ve masked that because both of these layers look the same, it&#8217;s pretty hard to tell what&#8217;s video and what&#8217;s an image. So what we&#8217;re going to do is we&#8217;re going to put a temporary effect on this video so we can see clearly where we&#8217;re masking it.<\/p>\n<p>Hide the top\u00a0layer<\/p>\n<p>Apply a Hue and Saturation Adjustment layer right above the video. Drag the hue slider\u00a0across for some crazy colors, which we can hide later on, but now, we can see where we&#8217;re masking,\u00a0 because we just want to mask around the hair and and the tassels.<\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial13.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15216\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial13.jpg\" alt=\"cinemagraph-photoshop-tutorial13\" width=\"650\" height=\"341\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial13.jpg 650w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial13-600x315.jpg 600w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial13-300x157.jpg 300w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial13-100x52.jpg 100w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/a><\/p>\n<p>Apply a layer mask to the top layer (image layer).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15217\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial14.jpg\" alt=\"cinemagraph-photoshop-tutorial14\" width=\"233\" height=\"207\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial14.jpg 233w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial14-100x89.jpg 100w\" sizes=\"auto, (max-width: 233px) 100vw, 233px\" \/><\/p>\n<p>Now this layer mask is filled with white so it has no effect. Paint the white parts of the photograph to allow the video to display underneath.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15218\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial15.jpg\" alt=\"cinemagraph-photoshop-tutorial15\" width=\"231\" height=\"211\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial15.jpg 231w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial15-100x91.jpg 100w\" sizes=\"auto, (max-width: 231px) 100vw, 231px\" \/><\/p>\n<p>Choose black for the foreground color, grab a brush, Opacity is set to 100, and I&#8217;m actually, even just going to turn off pen pressure.\u00a0 I want to just have a solid opacity.<\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial16.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15219\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial16.jpg\" alt=\"cinemagraph-photoshop-tutorial16\" width=\"619\" height=\"452\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial16.jpg 619w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial16-600x438.jpg 600w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial16-300x219.jpg 300w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial16-100x73.jpg 100w\" sizes=\"auto, (max-width: 619px) 100vw, 619px\" \/><\/a><\/p>\n<p>Paint around the area of the hair. The feather is definitely going to move a little bit, and her hair here is definitely going to blow around, so let&#8217;s just give it a little space over here for it to move into.<\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial18.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15221\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial18.jpg\" alt=\"cinemagraph-photoshop-tutorial18\" width=\"625\" height=\"500\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial18.jpg 625w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial18-600x480.jpg 600w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial18-300x240.jpg 300w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial18-100x80.jpg 100w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/a><\/p>\n<p>When you preview the video,\u00a0hide the Hue and Saturation Adjustment Layer.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15222\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial19.jpg\" alt=\"cinemagraph-photoshop-tutorial19\" width=\"225\" height=\"212\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial19.jpg 225w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial19-100x94.jpg 100w\" sizes=\"auto, (max-width: 225px) 100vw, 225px\" \/><\/p>\n<p>You can spend as much time noodling as you want to get the masking\u00a0perfect.<\/p>\n<p>Let&#8217;s get a little bit of movement going in these tassels, so I&#8217;m just going to turn on our Hue and Saturation Adjustment again so I can see what&#8217;s going on, make sure I select black, maybe make this brush a little bit larger, and I&#8217;m just going to paint over these tassels because I want to see these move around in the wind. I think it&#8217;s going to add a really nice effect, and okay.<\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial21.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15224\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial21.jpg\" alt=\"cinemagraph-photoshop-tutorial21\" width=\"650\" height=\"357\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial21.jpg 650w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial21-600x330.jpg 600w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial21-300x165.jpg 300w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial21-100x55.jpg 100w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/a><\/p>\n<p>So let&#8217;s hide the adjustment layers again and\u00a0\u00a0play this back. \u00a0We&#8217;ve got some really nice movement going there and we&#8217;ve created our basic cinemagraph.<\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15136 size-full\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph.gif\" alt=\"cinemagraph\" width=\"650\" height=\"366\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph.gif 650w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-600x338.gif 600w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-300x169.gif 300w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-100x56.gif 100w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/a><\/p>\n<h2>Exporting as an animated gif<\/h2>\n<p>Now, I&#8217;ll show you how to export this out \u00a0as an animated gif. Choose Export and we&#8217;re going to go to Save for Web.<\/p>\n<p>Change the size to 650 width because, maybe, I want to put it on a WordPress blog.<\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial23.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15226\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial23.jpg\" alt=\"cinemagraph-photoshop-tutorial23\" width=\"650\" height=\"349\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial23.jpg 650w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial23-600x322.jpg 600w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial23-300x161.jpg 300w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial23-100x54.jpg 100w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/a><\/p>\n<p>Make sure you choose gif and not jpg.<\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial24.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15227\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial24.jpg\" alt=\"cinemagraph-photoshop-tutorial24\" width=\"307\" height=\"670\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial24.jpg 307w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial24-137x300.jpg 137w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial24-100x218.jpg 100w\" sizes=\"auto, (max-width: 307px) 100vw, 307px\" \/><\/a><\/p>\n<p>Make sure you&#8217;re not under Original, but you&#8217;re under Optimized to see what the image will look like. \u00a0We&#8217;ve got 67 frames in here. We can hit the Play button, and, look, we can actually preview that gif right in save for web.<\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial25.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15228\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial25.jpg\" alt=\"cinemagraph-photoshop-tutorial25\" width=\"304\" height=\"169\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial25.jpg 304w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial25-300x167.jpg 300w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial25-100x56.jpg 100w\" sizes=\"auto, (max-width: 304px) 100vw, 304px\" \/><\/a><\/p>\n<p>Set the Tone in 256 colors, which is the maximum. We pretty much want to do that and whatever settings you&#8217;ve got here<\/p>\n<p>Look\u00a0at Looping Options. We want to change this to Forever because you want this to loop endlessly.<\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial26.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15229\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial26.jpg\" alt=\"cinemagraph-photoshop-tutorial26\" width=\"298\" height=\"187\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial26.jpg 298w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial26-100x63.jpg 100w\" sizes=\"auto, (max-width: 298px) 100vw, 298px\" \/><\/a><\/p>\n<p>And let&#8217;s click the preview and have a look in the browser and see what our gif is actually going to look like.<\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial27.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15230\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial27.jpg\" alt=\"cinemagraph-photoshop-tutorial27\" width=\"309\" height=\"217\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial27.jpg 309w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial27-300x211.jpg 300w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial27-100x70.jpg 100w\" sizes=\"auto, (max-width: 309px) 100vw, 309px\" \/><\/a><\/p>\n<p>So you can see up here, that&#8217;s exactly what it&#8217;s going to look like. It&#8217;s going to look quite nice. It&#8217;s going to play well.<\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial28.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15231\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial28.jpg\" alt=\"cinemagraph-photoshop-tutorial28\" width=\"650\" height=\"625\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial28.jpg 650w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial28-600x577.jpg 600w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial28-300x288.jpg 300w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial28-100x96.jpg 100w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/a><\/p>\n<p>We&#8217;re just going to hit Save\u00a0and\u00a0call this cinemagraph.gif. \u00a0All right and thats our final\u00a0gif.<\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial29.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15232\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial29.jpg\" alt=\"cinemagraph-photoshop-tutorial29\" width=\"650\" height=\"372\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial29.jpg 650w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial29-600x343.jpg 600w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial29-300x172.jpg 300w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial29-100x57.jpg 100w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/a><\/p>\n<h3>Posting an animated gif on Facebook<\/h3>\n<p>You cannot upload an animated gif directly to Facebook. If you want to share it\u00a0on Facebook, you will need to upload it to your website and paste the image url (hotlink it from your website). If you don&#8217;t have a website, or don&#8217;t wan to post it there, there are other solutions. The most popular is a free website called\u00a0<a href=\"https:\/\/giphy.com\">giphy<\/a><\/p>\n<p><a href=\"https:\/\/giphy.com\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15137 size-full\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/gify.jpg\" alt=\"gify\" width=\"500\" height=\"379\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/gify.jpg 500w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/gify-300x227.jpg 300w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/gify-100x76.jpg 100w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>I hope you found this tutorial useful. Add a comment and let me know what you would like to learn. I create a new tutorial each week here at PhotoshopCAFE. You can see all the <a href=\"http:\/\/photoshopcafe.com\/tutorials.htm\">\u00a0free photoshop tutorials here<\/a><\/p>\n<p>BTW, <a href=\"http:\/\/photoshopcafe.com\/blendmodeebook\">I have a free ebook on Working with Layer Blending Modes in Photoshop that you will love. Drop your info here and I&#8217;ll send it to you in an email right away.\u00a0<\/a><\/p>\n<p>See you at the CAFE!<\/p>\n<p>Colin<\/p>\n<h2>I have more Photoshop animation tutorials here<\/h2>\n<ul>\n<li><a href=\"http:\/\/photoshopcafe.com\/animate-photoshop-video-animation\/\">How to Animate in Photoshop (animate a jet)<\/a><\/li>\n<li><a href=\"http:\/\/photoshopcafe.com\/make-animated-rain-photoshop-effects\/\">Make Animated Rain<\/a><\/li>\n<li><a href=\"http:\/\/photoshopcafe.com\/edit-video-photoshop-free-mini-course\/\">Edit video in Photoshop<\/a><\/li>\n<li><a href=\"http:\/\/photoshopcafe.com\/make-animated-snow-photoshop-scratch\/\">Make Animated snow in Photoshop<\/a><\/li>\n<li><a href=\"http:\/\/photoshopcafe.com\/make-an-animated-cartoon-book-from-video-in-photoshop-tutorial\/\">Make an animated cartoon Cinemagraph<\/a><\/li>\n<li><a href=\"http:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/\">Make a Cinemagraph gif<\/a><\/li>\n<li><a href=\"http:\/\/photoshopcafe.com\/star-wars-perspective-text-animated-photoshop-tutorial\">Make Animated Star Wars Intro<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>P.S\u00a0I have a couple of premium courses that teach you video in Photoshop. They are<\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/video\/products\/Photoshop_video_editing.htm\">Video in Photoshop (Designer and Photographers guide)<\/a> and<\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2017\/01\/video_PS_tn.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16978\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2017\/01\/video_PS_tn.jpg\" alt=\"\" width=\"143\" height=\"252\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2017\/01\/video_PS_tn.jpg 143w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2017\/01\/video_PS_tn-100x176.jpg 100w\" sizes=\"auto, (max-width: 143px) 100vw, 143px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/video-editing-photoshop\">Making Movies in Photoshop (video with included\u00a0ebook)<\/a><\/p>\n<p><a href=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2017\/01\/makingmovies-in-photoshop.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16977\" src=\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2017\/01\/makingmovies-in-photoshop.jpg\" alt=\"\" width=\"143\" height=\"252\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2017\/01\/makingmovies-in-photoshop.jpg 143w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2017\/01\/makingmovies-in-photoshop-100x176.jpg 100w\" sizes=\"auto, (max-width: 143px) 100vw, 143px\" \/><\/a><hr \/>\r\n\r\n<strong>PS Don\u2019t forget to follow us on Social Media for more tips..<\/strong>\r\n<ul>\r\n\t<li><a href=\"https:\/\/www.instagram.com\/photoshopcafe\/\">Instagram<\/a><\/li>\r\n\t<li><a href=\"https:\/\/www.youtube.com\/photoshopcafe\">Youtube.<\/a><\/li>\r\n\t<li><a href=\"https:\/\/www.facebook.com\/photoshopCAFE\">facebook<\/a><\/li>\r\n\t<li><a href=\"https:\/\/twitter.com\/photoshopCAFE\">twitter<\/a><\/li>\r\n<\/ul>\r\n(I've been posting some fun Instagram and Facebook Stories lately)<br \/>\r\n\r\n<a href=\"https:\/\/photoshopcafe.com\/vault\/\">You can get my free Layer Blending modes ebook along with dozens of exclusive Photoshop Goodies here<\/a>\r\n\r\n<a href=\"https:\/\/photoshopcafe.com\/vault\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-48395 size-full\" src=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2021\/03\/PS-vault-newsltter.jpg\" alt=\"photoshop goodies for free\" width=\"550\" height=\"363\" srcset=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2021\/03\/PS-vault-newsltter.jpg 550w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2021\/03\/PS-vault-newsltter-300x198.jpg 300w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2021\/03\/PS-vault-newsltter-100x66.jpg 100w, https:\/\/photoshopcafe.com\/wp-content\/uploads\/2021\/03\/PS-vault-newsltter-120x80.jpg 120w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this easy Photoshop tutorial, you learn how to make a cinemagraph from a video. You learn how to export it as a gif and how to upload the gif to facebook or your website. <\/p>\n","protected":false},"author":6,"featured_media":15135,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"video","meta":{"_acf_changed":false,"footnotes":""},"categories":[43,56],"tags":[410,76,306,510,511],"class_list":["post-15134","post","type-post","status-publish","format-video","has-post-thumbnail","hentry","category-photoshop-tutorials","category-misc","tag-video","tag-timeline","tag-save-for-web","tag-cinemagraph","tag-gif","post_format-post-format-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.2 (Yoast SEO v24.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Make a Cinemagraph from a video in Photoshop, &amp; animated gif tutorial - PhotoshopCAFE<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Make a Cinemagraph from a video in Photoshop, &amp; animated gif tutorial\" \/>\n<meta property=\"og:description\" content=\"In this easy Photoshop tutorial, you learn how to make a cinemagraph from a video. You learn how to export it as a gif and how to upload the gif to facebook or your website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"PhotoshopCAFE\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/photoshopCAFE\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-04T19:18:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-25T03:18:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial-gif-tn.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"254\" \/>\n\t<meta property=\"og:image:height\" content=\"255\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Colin Smith\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@photoshopCAFE\" \/>\n<meta name=\"twitter:site\" content=\"@photoshopCAFE\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Colin Smith\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/\"},\"author\":{\"name\":\"Colin Smith\",\"@id\":\"https:\/\/photoshopcafe.com\/#\/schema\/person\/a2452c052fad7b30a7d49eeefb8ec2b1\"},\"headline\":\"Make a Cinemagraph from a video in Photoshop, &#038; animated gif tutorial\",\"datePublished\":\"2016-08-04T19:18:47+00:00\",\"dateModified\":\"2022-10-25T03:18:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/\"},\"wordCount\":1870,\"commentCount\":7,\"publisher\":{\"@id\":\"https:\/\/photoshopcafe.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial-gif-tn.jpg\",\"keywords\":[\"Video\",\"Timeline\",\"Save for web\",\"cinemagraph\",\"gif\"],\"articleSection\":[\"Tutorials\",\"MISC\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/\",\"url\":\"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/\",\"name\":\"Make a Cinemagraph from a video in Photoshop, & animated gif tutorial - PhotoshopCAFE\",\"isPartOf\":{\"@id\":\"https:\/\/photoshopcafe.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial-gif-tn.jpg\",\"datePublished\":\"2016-08-04T19:18:47+00:00\",\"dateModified\":\"2022-10-25T03:18:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/#primaryimage\",\"url\":\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial-gif-tn.jpg\",\"contentUrl\":\"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial-gif-tn.jpg\",\"width\":254,\"height\":255},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/photoshopcafe.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Make a Cinemagraph from a video in Photoshop, &#038; animated gif tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/photoshopcafe.com\/#website\",\"url\":\"https:\/\/photoshopcafe.com\/\",\"name\":\"PhotoshopCAFE\",\"description\":\"Adobe Photoshop tutorials and Lightroom tutorials\",\"publisher\":{\"@id\":\"https:\/\/photoshopcafe.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/photoshopcafe.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/photoshopcafe.com\/#organization\",\"name\":\"PhotoshopCAFE\",\"url\":\"https:\/\/photoshopcafe.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/photoshopcafe.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2021\/12\/cropped-psc512.png\",\"contentUrl\":\"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2021\/12\/cropped-psc512.png\",\"width\":512,\"height\":512,\"caption\":\"PhotoshopCAFE\"},\"image\":{\"@id\":\"https:\/\/photoshopcafe.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/photoshopCAFE\",\"https:\/\/x.com\/photoshopCAFE\",\"https:\/\/www.instagram.com\/photoshopcafe\/\",\"https:\/\/www.linkedin.com\/in\/photoshopcafe\/\",\"https:\/\/www.youtube.com\/photoshopcafe\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/photoshopcafe.com\/#\/schema\/person\/a2452c052fad7b30a7d49eeefb8ec2b1\",\"name\":\"Colin Smith\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/photoshopcafe.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/91ba6bedfc9917695b2173d6cfaefe08?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/91ba6bedfc9917695b2173d6cfaefe08?s=96&d=mm&r=g\",\"caption\":\"Colin Smith\"},\"description\":\"Colin Smith is founder of the #1 PhotoshopCAFE online community which has received over 30 million visitors. Colin has Authored\/Coauthored 18 books. He has won numerous awards including 3 Guru awards. He\u2019s been nominated for the Photoshop Hall of Fame twice. Colin is a regular columnist for Photoshop User Magazine. He\u2019s been featured in almost every major imaging magazine, and is in high demand as a speaker at major industry events including Flash Forward and WPPI . He consults such companies as ABC Disney, Apple and Adobe\",\"url\":\"https:\/\/photoshopcafe.com\/author\/colin-smith\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Make a Cinemagraph from a video in Photoshop, & animated gif tutorial - PhotoshopCAFE","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:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"Make a Cinemagraph from a video in Photoshop, & animated gif tutorial","og_description":"In this easy Photoshop tutorial, you learn how to make a cinemagraph from a video. You learn how to export it as a gif and how to upload the gif to facebook or your website.","og_url":"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/","og_site_name":"PhotoshopCAFE","article_publisher":"https:\/\/www.facebook.com\/photoshopCAFE","article_published_time":"2016-08-04T19:18:47+00:00","article_modified_time":"2022-10-25T03:18:21+00:00","og_image":[{"width":254,"height":255,"url":"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial-gif-tn.jpg","type":"image\/jpeg"}],"author":"Colin Smith","twitter_card":"summary_large_image","twitter_creator":"@photoshopCAFE","twitter_site":"@photoshopCAFE","twitter_misc":{"Written by":"Colin Smith","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/#article","isPartOf":{"@id":"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/"},"author":{"name":"Colin Smith","@id":"https:\/\/photoshopcafe.com\/#\/schema\/person\/a2452c052fad7b30a7d49eeefb8ec2b1"},"headline":"Make a Cinemagraph from a video in Photoshop, &#038; animated gif tutorial","datePublished":"2016-08-04T19:18:47+00:00","dateModified":"2022-10-25T03:18:21+00:00","mainEntityOfPage":{"@id":"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/"},"wordCount":1870,"commentCount":7,"publisher":{"@id":"https:\/\/photoshopcafe.com\/#organization"},"image":{"@id":"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial-gif-tn.jpg","keywords":["Video","Timeline","Save for web","cinemagraph","gif"],"articleSection":["Tutorials","MISC"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/","url":"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/","name":"Make a Cinemagraph from a video in Photoshop, & animated gif tutorial - PhotoshopCAFE","isPartOf":{"@id":"https:\/\/photoshopcafe.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial-gif-tn.jpg","datePublished":"2016-08-04T19:18:47+00:00","dateModified":"2022-10-25T03:18:21+00:00","breadcrumb":{"@id":"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/#primaryimage","url":"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial-gif-tn.jpg","contentUrl":"https:\/\/photoshopcafe.com\/wp-content\/uploads\/2016\/08\/cinemagraph-photoshop-tutorial-gif-tn.jpg","width":254,"height":255},{"@type":"BreadcrumbList","@id":"https:\/\/photoshopcafe.com\/tutorials\/make-a-cinemagraph-from-a-video-in-photoshop-animated-gif-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/photoshopcafe.com\/"},{"@type":"ListItem","position":2,"name":"Make a Cinemagraph from a video in Photoshop, &#038; animated gif tutorial"}]},{"@type":"WebSite","@id":"https:\/\/photoshopcafe.com\/#website","url":"https:\/\/photoshopcafe.com\/","name":"PhotoshopCAFE","description":"Adobe Photoshop tutorials and Lightroom tutorials","publisher":{"@id":"https:\/\/photoshopcafe.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/photoshopcafe.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/photoshopcafe.com\/#organization","name":"PhotoshopCAFE","url":"https:\/\/photoshopcafe.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/photoshopcafe.com\/#\/schema\/logo\/image\/","url":"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2021\/12\/cropped-psc512.png","contentUrl":"http:\/\/photoshopcafe.com\/wp-content\/uploads\/2021\/12\/cropped-psc512.png","width":512,"height":512,"caption":"PhotoshopCAFE"},"image":{"@id":"https:\/\/photoshopcafe.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/photoshopCAFE","https:\/\/x.com\/photoshopCAFE","https:\/\/www.instagram.com\/photoshopcafe\/","https:\/\/www.linkedin.com\/in\/photoshopcafe\/","https:\/\/www.youtube.com\/photoshopcafe"]},{"@type":"Person","@id":"https:\/\/photoshopcafe.com\/#\/schema\/person\/a2452c052fad7b30a7d49eeefb8ec2b1","name":"Colin Smith","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/photoshopcafe.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/91ba6bedfc9917695b2173d6cfaefe08?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/91ba6bedfc9917695b2173d6cfaefe08?s=96&d=mm&r=g","caption":"Colin Smith"},"description":"Colin Smith is founder of the #1 PhotoshopCAFE online community which has received over 30 million visitors. Colin has Authored\/Coauthored 18 books. He has won numerous awards including 3 Guru awards. He\u2019s been nominated for the Photoshop Hall of Fame twice. Colin is a regular columnist for Photoshop User Magazine. He\u2019s been featured in almost every major imaging magazine, and is in high demand as a speaker at major industry events including Flash Forward and WPPI . He consults such companies as ABC Disney, Apple and Adobe","url":"https:\/\/photoshopcafe.com\/author\/colin-smith\/"}]}},"_links":{"self":[{"href":"https:\/\/photoshopcafe.com\/wp-json\/wp\/v2\/posts\/15134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/photoshopcafe.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/photoshopcafe.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/photoshopcafe.com\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/photoshopcafe.com\/wp-json\/wp\/v2\/comments?post=15134"}],"version-history":[{"count":7,"href":"https:\/\/photoshopcafe.com\/wp-json\/wp\/v2\/posts\/15134\/revisions"}],"predecessor-version":[{"id":15139,"href":"https:\/\/photoshopcafe.com\/wp-json\/wp\/v2\/posts\/15134\/revisions\/15139"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/photoshopcafe.com\/wp-json\/wp\/v2\/media\/15135"}],"wp:attachment":[{"href":"https:\/\/photoshopcafe.com\/wp-json\/wp\/v2\/media?parent=15134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/photoshopcafe.com\/wp-json\/wp\/v2\/categories?post=15134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/photoshopcafe.com\/wp-json\/wp\/v2\/tags?post=15134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}