{"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-04-28T17:03:26","modified_gmt":"2025-04-28T15:03:26","slug":"cinemagraphes-images-animees","status":"publish","type":"post","link":"https:\/\/fr.onlineprinters.be\/blog\/cinemagraphes-images-animees\/","title":{"rendered":"Cin\u00e9magraphes : cr\u00e9ez des images anim\u00e9es et utilisez-les pour votre publicit\u00e9"},"content":{"rendered":"<p>Nous nous consacrons \u00e0 une tendance de l&rsquo;image qui, nous le croyons, reviendra bient\u00f4t \u00e0 la mode\u00a0: les images en mouvement, aussi appel\u00e9es cin\u00e9magraphes. Ces photos pr\u00e9sentent un effet \u00e9poustouflant. Avec les bons gestes, vous pouvez donner vie \u00e0 vos photos sans payer trop cher. Vous trouverez ici comment animer des images et sur quels canaux publicitaires les utiliser au mieux.<!--more--><\/p>\n<p>Le GIF classique est-il encore tendance\u00a0? Une chose est s\u00fbre\u00a0: certaines tendances reviennent inlassablement. C&rsquo;est pourquoi nous nous consacrons \u00e0 un autre type tr\u00e8s prometteur d&rsquo;images anim\u00e9es. Cette tendance a perc\u00e9 il y a quelques ann\u00e9es et semble de nouveau refleurir\u00a0: il s\u2019agit des cin\u00e9magraphes. Ces images se r\u00e9p\u00e8tent en boucle, \u00e0 la fa\u00e7on d\u2019un GIF, mais n\u2019ont rien en commun avec cette grande tendance qui s\u00e9vit sur les m\u00e9dias sociaux. Les cin\u00e9magraphes sont des images de haute qualit\u00e9 qui produisent un v\u00e9ritable effet \u00ab\u00a0Wow\u00a0\u00bb apr\u00e8s un visionnage court. Par cons\u00e9quent, les cin\u00e9magraphes offrent \u00e9galement un r\u00e9el potentiel de succ\u00e8s pour vos besoins publicitaires.<\/p>\n<p><strong>Sommaire\u00a0:<\/strong><\/p>\n<ul>\n<li>Pour vos besoins marketing\u00a0: des images anim\u00e9es \u00e0 int\u00e9grer dans votre message publicitaire professionnel\n<ul>\n<li><a href=\"#1\">Sites web et blogs<\/a><\/li>\n<li><a href=\"#2\">Publicit\u00e9s sur les m\u00e9dias sociaux, \u00e9crans ou Canvas Ads<\/a><\/li>\n<li><a href=\"#3\">Newsletter<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Cr\u00e9ez vous-m\u00eame des images anim\u00e9es\u00a0: revue des outils disponibles\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>Cin\u00e9magraphes vs. GIF<\/strong><br \/>\nEn mati\u00e8re de cin\u00e9magraphes, seules certaines parties de l&rsquo;image bougent, tandis que le reste demeure immobile. C&rsquo;est pourquoi les photos ressemblent vraiment \u00e0 des \u00ab\u00a0images anim\u00e9es\u00a0\u00bb et non \u00e0 des vid\u00e9os. Contrairement aux GIF, les cin\u00e9magraphes contiennent beaucoup plus de couleurs et offrent ainsi une impression de qualit\u00e9 sup\u00e9rieure.<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<p>Pourquoi les images anim\u00e9es sont-elles si impressionnantes\u00a0? Prenons l\u2019exemple d\u2019une femme dans une piscine qui profite du soleil quand soudain un \u00e9l\u00e9ment de l\u2019image se met en mouvement.<\/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>&nbsp;<\/p>\n<p>Des effets int\u00e9ressants peuvent \u00e9galement \u00eatre cr\u00e9\u00e9s dans l&rsquo;autre sens. L\u2019image pr\u00e9sente beaucoup d\u2019\u00e9l\u00e9ments en mouvement et ressemble \u00e0 une vid\u00e9o jusqu&rsquo;\u00e0 ce que vous remarquiez que certaines parties restent immobiles et qu\u2019il s\u2019agit d\u2019une image anim\u00e9e et non pas d&rsquo;une vid\u00e9o.<\/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>Les images anim\u00e9es telles que les cin\u00e9magraphes ne sont pas une tendance nouvelle et ont d\u00e9j\u00e0 \u00e9t\u00e9 utilis\u00e9es \u00e0 des fins professionnelles en 2011 pour des publicit\u00e9s de marques connues. Par exemple, par des cr\u00e9ateurs comme\u00a0<a href=\"http:\/\/cinemagraphs.com\/\" target=\"_blank\" rel=\"noopener\">Jamie Beck et Kevin Burg<\/a> lors de la Fashion Week de New York. Et elles rec\u00e8lent un potentiel r\u00e9el de mise en valeur des sites Web ou des messages publicitaires sans n\u00e9cessiter de vid\u00e9os co\u00fbteuses.<\/div>\n<div><\/div>\n<h2>Utilisation professionnelle d&rsquo;images anim\u00e9es<\/h2>\n<p>Comment les images anim\u00e9es sont-elles produites et quelle technique se cache derri\u00e8re elles\u00a0? C\u2019est ce que vous d\u00e9couvrirez gr\u00e2ce \u00e0 notre pr\u00e9sentation de cet outil disponible ci-dessous. Mais une chose est d\u00e9j\u00e0 pr\u00e9visible \u00e0 ce stade\u00a0: les images anim\u00e9es sont beaucoup moins ch\u00e8res \u00e0 produire que des vid\u00e9os publicitaires qui demandent beaucoup d\u2019investissement. L\u00e0 aussi, il se passe quelque chose dans l&rsquo;image qui attire et retient l&rsquo;attention du public. La taille du fichier des images est \u00e9galement beaucoup plus petite que celle d&rsquo;une vid\u00e9o publicitaire, ce qui permet une lecture automatique plus rapide sur de nombreux sites Web ou blogs. Ce point est important car les cin\u00e9magraphes \u00ab\u00a0fonctionnent\u00a0\u00bb mieux quand on les visionne imm\u00e9diatement et en boucle.<\/p>\n<div class=\"custom-background custom-background-donts\"><strong>Important\u00a0:<\/strong>\u00a0bien que ce soient des images anim\u00e9es, il s&rsquo;agit en r\u00e9alit\u00e9 de fichiers vid\u00e9o. Pour que l&rsquo;image anim\u00e9e puisse \u00eatre lue en boucle, il est judicieux d&rsquo;enregistrer le format vid\u00e9o sous forme de fichier GIF, ce format permettant en effet de lire automatiquement la vid\u00e9o en continu.<br \/>\nMais attention\u00a0! Un fichier MP4 peut reproduire d&rsquo;innombrables couleurs, un GIF seulement 256 et cette perte de qualit\u00e9 est souvent clairement visible. Par cons\u00e9quent, essayez d&rsquo;\u00e9viter la conversion GIF lors de l&rsquo;int\u00e9gration dans votre site Web, blog ou similaire et d&rsquo;int\u00e9grer la fonction Loop via le code d&rsquo;incorporation.<\/p>\n<figure id=\"attachment_50606\" aria-describedby=\"caption-attachment-50606\" style=\"width: 270px\" class=\"wp-caption alignleft\"><a href=\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/mp4-file.png\"><img loading=\"lazy\" decoding=\"async\" class=\"td-modal-image wp-image-50606\" src=\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/mp4-file-300x260.png\" alt=\"Une mer calme et ouverte sous un ciel clair aux douces couleurs pastel, montrant un horizon tranquille o\u00f9 l&#039;eau rencontre le ciel, comme une peinture vivante captur\u00e9e dans Cin\u00e9magraphes.\" width=\"270\" height=\"234\" srcset=\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/mp4-file-300x260.png 300w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/mp4-file-534x462.png 534w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/mp4-file-696x602.png 696w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/mp4-file-485x420.png 485w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/mp4-file.png 722w\" sizes=\"(max-width: 270px) 100vw, 270px\" \/><\/a><figcaption id=\"caption-attachment-50606\" class=\"wp-caption-text\">Qualit\u00e9 d&rsquo;un fichier MP4 vs.<\/figcaption><\/figure>\n<figure id=\"attachment_50607\" aria-describedby=\"caption-attachment-50607\" style=\"width: 235px\" class=\"wp-caption alignright\"><a href=\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/gif-file.png\"><img loading=\"lazy\" decoding=\"async\" class=\"td-modal-image wp-image-50607\" src=\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/gif-file-300x300.png\" alt=\"Un dauphin saute hors de l&#039;eau calme de l&#039;oc\u00e9an sous un ciel bleu clair, cr\u00e9ant des \u00e9claboussures lorsqu&#039;il saute au-dessus de la surface, tout comme une sc\u00e8ne vivante dans les cin\u00e9magraphes.\" width=\"235\" height=\"235\" srcset=\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/gif-file-300x300.png 300w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/gif-file-150x150.png 150w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/gif-file-420x420.png 420w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/gif-file.png 460w\" sizes=\"(max-width: 235px) 100vw, 235px\" \/><\/a><figcaption id=\"caption-attachment-50607\" class=\"wp-caption-text\">converti en fichier GIF<\/figcaption><\/figure>\n<\/div>\n<div><\/div>\n<\/div>\n<h3 id=\"1\">Sites web et blogs<\/h3>\n<p>Dans l&rsquo;en-t\u00eate d&rsquo;un site Web, les images anim\u00e9es sont un excellent moyen de capter instantan\u00e9ment l&rsquo;attention de l\u2019internaute sans l\u2019exc\u00e9der. Les pr\u00e9sentations de produits peuvent \u00e9galement \u00eatre rendues beaucoup plus attrayantes \u00e0 l\u2019aide de cin\u00e9magraphes. Tout d\u00e9pend, bien entendu, du secteur d\u2019activit\u00e9 et du produit. Cet avantage peut \u00e9galement \u00eatre utilis\u00e9 \u00e0 bon escient dans les blogs. \u00c0 cet effet, il est bon de respecter la maxime\u00a0: moins, c&rsquo;est plus. Si tout vient \u00e0 s\u2019animer sur la page \u00e0 un moment donn\u00e9 et que des publicit\u00e9s agressives sont ajout\u00e9es \u00e0 chaque encadr\u00e9, l&rsquo;effet \u00ab\u00a0Wow\u00a0\u00bb dispara\u00eet alors.<\/p>\n<p><strong>Exemples de pr\u00e9sentations de produits\u00a0:\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>Int\u00e9gration technique\u00a0:<\/strong>\u00a0l&rsquo;image anim\u00e9e peut \u00eatre int\u00e9gr\u00e9e via l&rsquo;\u00e9l\u00e9ment vid\u00e9o HTML. Les propri\u00e9t\u00e9s de \u00ab\u00a0Autoplay\u00a0\u00bb et \u00ab\u00a0Loop\u00a0\u00bb doivent \u00eatre incluses dans le code et la compatibilit\u00e9 avec les diff\u00e9rents navigateurs doit \u00eatre test\u00e9e. WordPress permet \u00e9galement d\u2019int\u00e9grer tr\u00e8s facilement l&rsquo;image anim\u00e9e. La fa\u00e7on la plus simple de le faire est de placer l&rsquo;image anim\u00e9e sur YouTube ou sur d&rsquo;autres plateformes telles que\u00a0<a href=\"https:\/\/flixel.com\/cinemagraphs\/fresh\/\" target=\"_blank\" rel=\"noopener\">flixel.com<\/a> (un site sp\u00e9cialis\u00e9 dans la production et la distribution de cin\u00e9magraphes) et ensuite de l\u2019int\u00e9grer sur votre site. Par exemple, cette derni\u00e8re plateforme offre des codes Embed pr\u00eats \u00e0 l&#8217;emploi pour copier et coller, qui lisent la vid\u00e9o en lecture automatique et en boucle.<\/p>\n<p>Exemple de code pour int\u00e9grer une image anim\u00e9e comme \u00e9l\u00e9ment HTML\u00a0:<\/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>Exemple de code pour int\u00e9grer une image anim\u00e9e de la Media-Gallery (de WordPress)\u00a0:<\/p>\n<pre>[ video width=\"1200\" height=\"800\" \r\nmp4=\"https:\/\/www.diedruckerei.de\/magazin\/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;\">(Remarque\u00a0: veuillez supprimer les espaces avant et apr\u00e8s\u00a0les parenth\u00e8ses avant d&rsquo;utiliser ce code.)<\/span><\/em><\/p>\n<p>Exemple de code pour int\u00e9grer une image anim\u00e9e sur YouTube\u00a0:<\/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>Exemple de code pour int\u00e9grer une image anim\u00e9e sur Flixel\u00a0:<\/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\">Publicit\u00e9s sur les m\u00e9dias sociaux, \u00e9crans ou Canvas Ads<\/h3>\n<p>Tout ce qui bouge interpelle. Cela s&rsquo;applique entretemps aux publications sur tous les r\u00e9seaux sociaux. Les images anim\u00e9es sont adapt\u00e9es aux \u00e9crans et Canvas Ads sur Facebook ou Instagram ainsi qu&rsquo;\u00e0 une strat\u00e9gie int\u00e9ressante de publicit\u00e9 sur les m\u00e9dias sociaux. Avantage de ces images par rapport aux vid\u00e9os\u00a0: les cin\u00e9magraphes sont per\u00e7us plus facilement que les vid\u00e9os car l&rsquo;\u0153il saisit moins d&rsquo;images en mouvement en m\u00eame temps. C&rsquo;est d&rsquo;une part plus agr\u00e9able pour les yeux et d&rsquo;autre part tr\u00e8s int\u00e9ressant \u00e0 regarder. De plus, les contenus publi\u00e9s sur les r\u00e9seaux sociaux doivent divertir &#8211; et ne venez pas maintenant nous dire que vous avez lu jusqu\u2019ici alors que vous trouvez les images anim\u00e9es sans int\u00e9r\u00eat\u00a0!<\/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;\">Sieh dir diesen Beitrag auf Instagram an<\/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\">Ein Beitrag geteilt von Coca-Cola (@cocacolaeu)<\/a> am <time style=\"font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;\" datetime=\"2017-11-09T19:16:59+00:00\">Nov 9, 2017 um 11:16 PST<\/time><\/p>\n<\/div>\n<\/blockquote>\n<p><script async defer src=\"\/\/www.instagram.com\/embed.js\"><\/script><\/p>\n<p><strong>Int\u00e9gration technique\u00a0:\u00a0<\/strong>avec la fonction Autoplay de Facebook, Instagram and Co., les vid\u00e9os ou les images anim\u00e9es peuvent \u00eatre lanc\u00e9es sans avoir en plus \u00e0 cliquer sur la photo. Entretemps, il est \u00e9galement possible d&rsquo;ins\u00e9rer des photos de profil ou des publicit\u00e9s sur Facebook \u00e0 l\u2019aide d\u2019images anim\u00e9es. Il est \u00e9galement possible de lire des cin\u00e9magraphes sur des terminaux mobiles derni\u00e8re g\u00e9n\u00e9ration. Cependant, assurez-vous que votre image puisse se lire en boucle de sorte que l&rsquo;effet d\u2019animation de votre sujet soit clairement visible. Si l&rsquo;image anim\u00e9e ne dure que trois secondes, votre public ne remarquera rien.<\/p>\n<h3 id=\"3\">Newsletter<\/h3>\n<p>Les images anim\u00e9es sont \u00e9galement tr\u00e8s enrichissantes dans ce domaine. Le g\u00e9ant de la s\u00e9rie Netflix, par exemple, en a plac\u00e9 une dans sa Newsletter pour le d\u00e9but de la 3\u00e8me saison de \u00ab\u00a0House of Cards\u00a0\u00bb. Ceci augmente la probabilit\u00e9 que les lecteurs se souviennent du d\u00e9but de la saison et qu&rsquo;un grand nombre d&rsquo;entre eux cliquent sur la bande-annonce.<\/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>Int\u00e9gration technique\u00a0:<\/strong>\u00a0si l&rsquo;image doit \u00eatre incluse dans une Newsletter, la conversion au format GIF (m\u00eame si elle doit \u00eatre \u00e9vit\u00e9e) peut, exceptionnellement, aider \u00e0 r\u00e9duire la taille du fichier. Le GIF peut \u00eatre int\u00e9gr\u00e9 normalement via le code d&rsquo;incorporation des images et la taille du fichier \u00e9vite alors un long chargement du contenu de la Newsletter. Cependant, vous devez vous assurer que la perte de qualit\u00e9 n\u2019est pas trop importante et que l&rsquo;image anim\u00e9e reste toujours de haute qualit\u00e9.<\/p>\n<p>Exemple de code pour l&rsquo;incorporation d&rsquo;une image anim\u00e9e dans la Newsletter (enregistr\u00e9e au format GIF)\u00a0:<\/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>Si l&rsquo;image est incorpor\u00e9e dans une vid\u00e9o avec beaucoup plus de couleurs et donc une taille de fichier plus grande, il est essentiel de tester au pr\u00e9alable que l&rsquo;image anim\u00e9e n\u2019alt\u00e8re pas les performances du contenu lors de l&rsquo;ouverture de la Newsletter &#8211; tant dans la version Desktop que dans la version pour terminaux mobiles.<\/p>\n<h2>Cr\u00e9ez vous-m\u00eame des images anim\u00e9es\u00a0: revue des outils disponibles<\/h2>\n<p>Pour donner vie \u00e0 une image, il faut avoir un \u0153il exerc\u00e9 et, selon l&rsquo;outil utilis\u00e9, une connexion Internet sans interruption. Certains outils permettent m\u00eame un traitement en ligne. Selon l&rsquo;outil, une image ou une vid\u00e9o est n\u00e9cessaire comme mat\u00e9riel source.<\/p>\n<h3 id=\"plotagraph\">Plotagraph<\/h3>\n<p>Contrairement aux autres outils, il est possible avec ce fournisseur de cr\u00e9er une image anim\u00e9e \u00e0 partir d&rsquo;un fichier image. Les photos peuvent \u00e9galement \u00eatre \u00e9dit\u00e9es en ligne ici. Avec Plotagraph, plus pr\u00e9cis\u00e9ment \u00ab\u00a0Plotaverse\u00a0\u00bb, vous pouvez vous inscrire gratuitement pour vous faire une premi\u00e8re id\u00e9e de cet outil. Le traitement ici est tr\u00e8s rapide et il n\u2019est pas n\u00e9cessaire d\u2019avoir proc\u00e9d\u00e9 \u00e0 l\u2019avance \u00e0 un pr\u00e9traitement. Il suffit de prendre une image appropri\u00e9e ou de la s\u00e9lectionner puis de la t\u00e9l\u00e9charger. Un pinceau peut \u00eatre utilis\u00e9 dans l&rsquo;\u00e9diteur afin de sp\u00e9cifier quelles parties de l&rsquo;image doivent rester immobiles.<\/p>\n<figure id=\"attachment_50612\" aria-describedby=\"caption-attachment-50612\" style=\"width: 696px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Plotagraph-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"td-modal-image wp-image-50612 size-large\" src=\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Plotagraph-1-1024x498.png\" alt=\"Une capture d&#039;\u00e9cran du logiciel Plotagraph montre une photo d&#039;une vieille grange en bois sous un ciel nuageux et dramatique. Les outils d&#039;\u00e9dition permettant de cr\u00e9er des cin\u00e9magraphes apparaissent \u00e0 gauche, et le premier plan est surlign\u00e9 en rouge.\" width=\"696\" height=\"338\" srcset=\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Plotagraph-1-1024x498.png 1024w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Plotagraph-1-300x146.png 300w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Plotagraph-1-768x373.png 768w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Plotagraph-1-696x338.png 696w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Plotagraph-1-1068x519.png 1068w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Plotagraph-1-864x420.png 864w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Plotagraph-1.png 1886w\" sizes=\"(max-width: 696px) 100vw, 696px\" \/><\/a><figcaption id=\"caption-attachment-50612\" class=\"wp-caption-text\">Capture d&rsquo;\u00e9cran du masquage dans Plotagraph<\/figcaption><\/figure>\n<p>Vous pouvez utiliser les fl\u00e8ches (orange et bleu) pour d\u00e9terminer la direction dans laquelle les pixels de l&rsquo;image doivent se d\u00e9placer ult\u00e9rieurement. Les \u00ab\u00a0stabilisateurs\u00a0\u00bb aident \u00e0 d\u00e9finir plus pr\u00e9cis\u00e9ment l&rsquo;animation de l&rsquo;image. Dans cet exemple, les stabilisateurs ont \u00e9t\u00e9 d\u00e9lib\u00e9r\u00e9ment plac\u00e9s dans le ciel nuageux afin d&rsquo;obtenir un mouvement plus contrast\u00e9 des nuages.<\/p>\n<figure id=\"attachment_50604\" aria-describedby=\"caption-attachment-50604\" style=\"width: 696px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Plotagraph-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"td-modal-image wp-image-50604 size-large\" src=\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Plotagraph-2-1024x498.png\" alt=\"Une capture d&#039;\u00e9cran du logiciel Plotagraph \u00e9ditant une photo d&#039;une grange en bois rustique sur un champ sous un ciel nuageux dramatique, pr\u00e9sentant des points d&#039;animation et des fl\u00e8ches pour cr\u00e9er des cin\u00e9magraphes qui apportent un mouvement subtil \u00e0 l&#039;image.\" width=\"696\" height=\"338\" srcset=\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Plotagraph-2-1024x498.png 1024w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Plotagraph-2-300x146.png 300w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Plotagraph-2-768x373.png 768w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Plotagraph-2-696x338.png 696w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Plotagraph-2-1068x519.png 1068w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Plotagraph-2-864x420.png 864w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Plotagraph-2.png 1886w\" sizes=\"(max-width: 696px) 100vw, 696px\" \/><\/a><figcaption id=\"caption-attachment-50604\" class=\"wp-caption-text\">Capture d&rsquo;\u00e9cran du traitement ult\u00e9rieur dans Plotagraph<\/figcaption><\/figure>\n<p>L\u2019outil calcule automatiquement le mouvement des pixels de l&rsquo;image. En outre, vous pouvez influencer le mouvement calcul\u00e9 automatiquement dans le temps. Plus la dur\u00e9e de l&rsquo;image anim\u00e9e est courte, plus les pixels d\u00e9finis se d\u00e9placeront rapidement. Vous pouvez ensuite exporter votre projet une fois termin\u00e9. Si vous n\u2019achetez pas la version Pro, vous obtiendrez un fichier MP4 contenant un filigrane. Dans la version payante, les formats MOV, JPEG seg, PNG seq, PNG anim\u00e9 PNG et GIF sont disponibles.<br \/>\nL&rsquo;un des avantages de cet outil est que vous pouvez v\u00e9rifier le montage \u00e0 tout moment en utilisant le bouton de lecture en bas au milieu, car l&rsquo;image est lue en boucle sans fin en cliquant sur le bouton. C&rsquo;est ainsi que l\u2019on peut d\u00e9tecter rapidement les incoh\u00e9rences et les mouvements contre nature.<\/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.diedruckerei.de\/magazin\/wp-content\/uploads\/2018\/09\/H\u00fctte-1200px-30fps.mp4?_=1\" \/><a href=\"https:\/\/www.diedruckerei.de\/magazin\/wp-content\/uploads\/2018\/09\/H\u00fctte-1200px-30fps.mp4\">https:\/\/www.diedruckerei.de\/magazin\/wp-content\/uploads\/2018\/09\/H\u00fctte-1200px-30fps.mp4<\/a><\/video><\/div>\n<p><strong>Conclusion\u00a0:<\/strong>\u00a0l&rsquo;application en ligne est \u00e9galement tr\u00e8s performante pour smartphone. Si vous d\u00e9cidez d&rsquo;acheter la version Pro, il est judicieux de t\u00e9l\u00e9charger la version Desktop de l&rsquo;application. Cependant, l&rsquo;outil ne peut pas donner vie \u00e0 chaque image de mani\u00e8re naturelle car il n\u2019est pas possible de d\u00e9cider du mouvement exact des pixels individuels.<\/p>\n<p>L\u2019outil montre ses limites lorsque des \u00e9l\u00e9ments comme les rayons du soleil doivent se d\u00e9placer au premier plan alors que le fond doit rester immobile comme un paysage de montagne. Cependant, si le mouvement du premier plan et de l&rsquo;arri\u00e8re-plan peut \u00eatre clairement divis\u00e9 dans l&rsquo;image (comme la mer et le ciel par exemple), Plotagraph peut \u00eatre utilis\u00e9 pour cr\u00e9er des images en mouvement tr\u00e8s rapides. Et ceci avec une seule photo fournie comme mat\u00e9riel source. Les motifs fluides comme les nuages, la mer ou les graphiques purs conviennent parfaitement \u00e0 cet outil.<\/p>\n<h3 id=\"flixel\">Flixel<\/h3>\n<p>Le programme\u00a0<a href=\"https:\/\/flixel.com\/\" target=\"_blank\" rel=\"noopener\">Cinemapraph Pro de Flixel<\/a><\/p>\n<p>est sp\u00e9cialement con\u00e7u pour la cr\u00e9ation de cin\u00e9magraphes. Ici aussi, vous avez la possibilit\u00e9 de tester l&rsquo;outil gratuitement. La plus grande et la plus importante diff\u00e9rence avec Plotagraph est qu&rsquo;il fonctionne avec du mat\u00e9riel vid\u00e9o. Cela signifie que les mouvements de l&rsquo;image semblent beaucoup plus naturels, puisqu&rsquo;il s&rsquo;agit de mouvements r\u00e9els que l&rsquo;on peut voir. Toutefois, la vid\u00e9o doit \u00eatre enregistr\u00e9e \u00e0 l&rsquo;avance dans certaines conditions.<\/p>\n<p>Pour cr\u00e9er l&rsquo;image en mouvement, il faut enregistrer une vid\u00e9o avec un tr\u00e9pied. Les bords de la vid\u00e9o ne doivent pas changer, mais uniquement les mod\u00e8les ou le motif de l&rsquo;image. Il n&rsquo;y a pas de limite \u00e0 votre cr\u00e9ativit\u00e9 et c\u2019est \u00e0 vous de d\u00e9cider de l\u2019animation de l\u2019image. Cependant, avant d&rsquo;enregistrer la vid\u00e9o, vous devez d\u00e9j\u00e0 avoir \u00e0 l&rsquo;esprit ce que vous aimeriez r\u00e9aliser dans votre cin\u00e9magraphe. Par cons\u00e9quent, vous devez donner des instructions aux mod\u00e8les ou positionner la cam\u00e9ra dans des environnements appropri\u00e9s.<\/p>\n<p>Ce tutoriel pour d\u00e9butants de Flixel anime une sc\u00e8ne de th\u00e9 dans laquelle, \u00e0 gauche, un homme boit \u00e0 petites gorg\u00e9es alors qu\u2019\u00e0 droite, une femme verse le th\u00e9.<\/p>\n<figure id=\"attachment_50599\" aria-describedby=\"caption-attachment-50599\" style=\"width: 696px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Flixel-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"td-modal-image wp-image-50599 size-large\" src=\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Flixel-1-1024x576.png\" alt=\"Un homme et une femme sont assis dans des fauteuils pr\u00e8s d&#039;une chemin\u00e9e et partagent un th\u00e9. La sc\u00e8ne, rappelant les \u00e9l\u00e9gants cin\u00e9magraphes, montre la femme versant le th\u00e9 d&#039;une th\u00e9i\u00e8re en verre tandis qu&#039;il sirote. Un plateau de tasses et de friandises est pos\u00e9 sur la table entre eux.\" width=\"696\" height=\"392\" srcset=\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Flixel-1-1024x576.png 1024w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Flixel-1-300x169.png 300w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Flixel-1-768x432.png 768w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Flixel-1-696x392.png 696w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Flixel-1-1068x601.png 1068w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Flixel-1-747x420.png 747w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Flixel-1.png 1920w\" sizes=\"(max-width: 696px) 100vw, 696px\" \/><\/a><figcaption id=\"caption-attachment-50599\" class=\"wp-caption-text\">S\u00e9lection d&rsquo;un segment vid\u00e9o dans Cinemagraph Pro<\/figcaption><\/figure>\n<p>Ainsi, lorsque la vid\u00e9o enregistr\u00e9e est t\u00e9l\u00e9charg\u00e9e dans Cinemapraph Pro, vous devez d&rsquo;abord d\u00e9terminer une courte s\u00e9quence vid\u00e9o puis d\u00e9finir une image fixe dans celle-ci. Cette image fixe correspond au mat\u00e9riel source pour le cin\u00e9magraphe.<\/p>\n<p>L&rsquo;\u00e9tape suivante consiste \u00e0 masquer certains \u00e9l\u00e9ments. Cela signifie que vous devez utiliser un pinceau pour marquer toutes les zones de l\u2019image fixe s\u00e9lectionn\u00e9e que vous voulez d\u00e9placer ult\u00e9rieurement.<\/p>\n<figure id=\"attachment_50600\" aria-describedby=\"caption-attachment-50600\" style=\"width: 696px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Flixel-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"td-modal-image wp-image-50600 size-large\" src=\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Flixel-2-1024x555.png\" alt=\"Un homme sirote une tasse tandis qu&#039;une femme verse du th\u00e9 \u00e0 une petite table dans un salon chaleureux. L&#039;image, rappelant celle des cin\u00e9magraphes, est partiellement mise en valeur par des outils d&#039;\u00e9dition d&#039;interface visibles en haut et sur les c\u00f4t\u00e9s.\" width=\"696\" height=\"377\" srcset=\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Flixel-2-1024x555.png 1024w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Flixel-2-300x163.png 300w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Flixel-2-768x416.png 768w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Flixel-2-696x377.png 696w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Flixel-2-1068x579.png 1068w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Flixel-2-775x420.png 775w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/Flixel-2.png 1920w\" sizes=\"(max-width: 696px) 100vw, 696px\" \/><\/a><figcaption id=\"caption-attachment-50600\" class=\"wp-caption-text\">Masquer les zones qui doivent s\u2019animer ult\u00e9rieurement<\/figcaption><\/figure>\n<p>\u00c0 l&rsquo;aide du masque nouvellement cr\u00e9\u00e9, la s\u00e9quence vid\u00e9o d\u00e9termin\u00e9e au pr\u00e9alable affiche en surbrillance tous les points sur lesquels vous avez d\u00e9plac\u00e9 le pinceau. L&rsquo;image restante correspond \u00e0 l&rsquo;image fixe s\u00e9lectionn\u00e9e.<\/p>\n<p>La s\u00e9quence vid\u00e9o doit \u00eatre soigneusement s\u00e9lectionn\u00e9e pour que le mouvement de l&rsquo;image soit fluide. En utilisant les options de r\u00e9glage \u00ab\u00a0Bounce\u00a0\u00bb ou \u00ab\u00a0Repeat\u00a0\u00bb, la vid\u00e9o derri\u00e8re l&rsquo;image fixe peut \u00eatre lue en avant, en arri\u00e8re et en avant \u00e0 nouveau ou de mani\u00e8re r\u00e9p\u00e9t\u00e9e vers l&rsquo;avant. La dur\u00e9e de r\u00e9p\u00e9tition peut \u00e9galement \u00eatre d\u00e9finie.<\/p>\n<p><strong>Conclusion\u00a0:<\/strong>\u00a0il s&rsquo;agit ici de coordonner parfaitement le support vid\u00e9o, la s\u00e9quence vid\u00e9o s\u00e9lectionn\u00e9e et l&rsquo;image fixe correspondante. Le programme est tr\u00e8s clairement agenc\u00e9 et \u00e9quip\u00e9 de tous les outils n\u00e9cessaires au traitement. Les options d&rsquo;exportation en particulier permettent de pr\u00e9parer le cin\u00e9magraphe de mani\u00e8re optimale pour les m\u00e9dias sociaux ou m\u00eame les Facebook Ads. Avec Cinemagraphs Pro, vous pouvez cr\u00e9er des images anim\u00e9es r\u00e9alistes sans \u00eatre submerg\u00e9 par trop de fonctions. Si vous souhaitez utiliser des images anim\u00e9es de mani\u00e8re professionnelle, nous pensons que cet outil repr\u00e9sente une option particuli\u00e8rement int\u00e9ressante.<\/p>\n<h3 id=\"photoshop\">Adobe Photoshop<\/h3>\n<p>Si vous disposez d\u00e9j\u00e0 de la suite logicielle de graphisme Creative Suite, vous n&rsquo;avez pas n\u00e9cessairement besoin d&rsquo;acheter un programme suppl\u00e9mentaire pour cr\u00e9er des images anim\u00e9es. Celles-ci peuvent \u00e9galement \u00eatre cr\u00e9\u00e9es avec Photoshop C6 ou une version ult\u00e9rieure. Il vous suffit ici de \u00ab\u00a0tricher\u00a0\u00bb un peu, car Photoshop n&rsquo;est pas vraiment con\u00e7u pour le montage vid\u00e9o.<\/p>\n<p>Mais depuis Photoshop C6, les vid\u00e9os peuvent \u00e9galement \u00eatre ouvertes et une barre de temps appara\u00eet au bas du programme. Dans cette <a href=\"https:\/\/blogs.adobe.com\/creative\/de\/bewegte-bilder-so-entstehen-cinemagraphs\/\">video tutoriel<\/a> (il s&rsquo;agit d&rsquo;un vid\u00e9o allemand!) est pr\u00e9sente\u00a0comment obtenir rapidement une image anim\u00e9e dans Photoshop. En bref, il s&rsquo;agit d&rsquo;enregistrer une vid\u00e9o (similaire au programme Flixel Cinemapraph Pro) et de d\u00e9finir une courte s\u00e9quence appropri\u00e9e. Lorsque vous avez s\u00e9lectionn\u00e9 cette s\u00e9quence, vous pouvez copier une image fixe \u00e0 partir de celle-ci. \u00ab\u00a0Masques de calque\u00a0\u00bb est alors le mot magique. En utilisant les masques de calque, vous pouvez maintenant d\u00e9finir dans cette image fixe o\u00f9 voir la vid\u00e9o situ\u00e9e en-dessous. En effet, la superposition de calques avec les fichiers vid\u00e9o fonctionne aussi bien dans Photoshop qu&rsquo;avec les calques d&rsquo;image. Ainsi, l&rsquo;image doit toujours \u00eatre vue en priorit\u00e9 et seulement \u00e0 des endroits s\u00e9lectionn\u00e9s de la vid\u00e9o situ\u00e9e en-dessous.<\/p>\n<p><a href=\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/PS-Tutorial.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"td-modal-image alignnone wp-image-50602 size-large\" src=\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/PS-Tutorial-1024x543.jpg\" alt=\"Un homme se tient sur un podium pr\u00e9sentant Adobe Photoshop sur un \u00e9cran, qui affiche un cin\u00e9magraphe d&#039;une femme en robe fleurie posant dans les hautes herbes au bord de l&#039;oc\u00e9an sous un ciel bleu.\" width=\"696\" height=\"369\" srcset=\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/PS-Tutorial-1024x543.jpg 1024w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/PS-Tutorial-300x159.jpg 300w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/PS-Tutorial-768x407.jpg 768w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/PS-Tutorial-696x369.jpg 696w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/PS-Tutorial-1068x566.jpg 1068w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/PS-Tutorial-792x420.jpg 792w, https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/PS-Tutorial.jpg 1273w\" sizes=\"(max-width: 696px) 100vw, 696px\" \/><\/a><\/p>\n<p>Avantage du traitement dans Photoshop\u00a0: si vous convertissez l&rsquo;image fixe s\u00e9lectionn\u00e9e en un objet intelligent, le programme vous offre toutes les options pour le traitement de l\u2019image. Que ce soit des filtres RAW ou d&rsquo;autres applications, vous pouvez \u00e9diter votre image anim\u00e9e selon le m\u00eame sch\u00e9ma avec lequel vous \u00e9diteriez vos autres produits ou photos.<\/p>\n<div class=\"custom-background-grey\">\n<p><strong>Int\u00e9ressant \u00e0 noter\u00a0:<\/strong> dans Photoshop cependant, vous ne pouvez pas seulement faire appara\u00eetre des vid\u00e9os sur une image anim\u00e9e. Vous pouvez modifier une photo pure \u00e0 l\u2019aide de la barre de temps pour qu&rsquo;elle puisse s\u2019animer plus tard. Cependant, cette m\u00e9thode est moins flexible puisqu&rsquo;on essaie de simuler un mouvement en le masquant et en le transformant (par exemple en agrandissant). Ici encore, tout comme avec\u00a0<a href=\"#plotagraph\">Plotagraph<\/a>, utiliser plut\u00f4t des motifs fluides, comme les nuages ou l\u2019eau.<\/p>\n<\/div>\n<p><strong><br \/>\n<\/strong><strong>Conclusion\u00a0:<\/strong>\u00a0si vous \u00eates \u00e0 l\u2019aise dans Photoshop ou, mieux encore, d\u00e9j\u00e0 familier avec la barre de temps du programme, cette variante d&rsquo;\u00e9dition sera la plus facile pour vous. En plus de cr\u00e9er une image anim\u00e9e, vous pouvez \u00e9galement appliquer \u00e0 l&rsquo;image toutes les retouches et modifications de filtre n\u00e9cessaires comme d\u00e9crit ci-dessus. Vous n&rsquo;avez donc pas besoin d&rsquo;acheter un nouveau programme et restez flexibles.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nous nous consacrons \u00e0 une tendance de l&rsquo;image qui, nous le croyons, reviendra bient\u00f4t \u00e0 la mode : les images anim\u00e9es, aussi appel\u00e9es cin\u00e9magraphes.<\/p>\n","protected":false},"author":24,"featured_media":50603,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,5],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cin\u00e9magraphes : cr\u00e9ez des images anim\u00e9es pour votre publicit\u00e9.<\/title>\n<meta name=\"description\" content=\"Les images anim\u00e9es telles que les cin\u00e9magraphes sont une tendance qui pourrait bient\u00f4t revenir \u00e0 la mode. Vous devez en tenir compte lors de vos cr\u00e9ations 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:\/\/fr.onlineprinters.be\/blog\/cinemagraphes-images-animees\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cin\u00e9magraphes : cr\u00e9ez des images anim\u00e9es et utilisez-les pour votre publicit\u00e9\" \/>\n<meta property=\"og:description\" content=\"Les images anim\u00e9es telles que les cin\u00e9magraphes sont une tendance qui pourrait bient\u00f4t revenir \u00e0 la mode. Vous devez en tenir compte lors de vos cr\u00e9ations marketing.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fr.onlineprinters.be\/blog\/cinemagraphes-images-animees\/\" \/>\n<meta property=\"og:site_name\" content=\"fr.onlineprinters.be Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-13T07:36:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-28T15:03:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/fr.onlineprinters.be\/blog\/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=\"Cin\u00e9magraphes : cr\u00e9ez des images anim\u00e9es et utilisez-les pour votre publicit\u00e9\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ramona\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fr.onlineprinters.be\/blog\/cinemagraphes-images-animees\/\",\"url\":\"https:\/\/fr.onlineprinters.be\/blog\/cinemagraphes-images-animees\/\",\"name\":\"Cin\u00e9magraphes : cr\u00e9ez des images anim\u00e9es pour votre publicit\u00e9.\",\"isPartOf\":{\"@id\":\"https:\/\/fr.onlineprinters.be\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/fr.onlineprinters.be\/blog\/cinemagraphes-images-animees\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/fr.onlineprinters.be\/blog\/cinemagraphes-images-animees\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/cinemagraphs.jpg\",\"datePublished\":\"2019-02-13T07:36:55+00:00\",\"dateModified\":\"2025-04-28T15:03:26+00:00\",\"author\":{\"@id\":\"https:\/\/fr.onlineprinters.be\/blog\/#\/schema\/person\/d79ba2db96e33e04ed71525f52bb1eb9\"},\"description\":\"Les images anim\u00e9es telles que les cin\u00e9magraphes sont une tendance qui pourrait bient\u00f4t revenir \u00e0 la mode. Vous devez en tenir compte lors de vos cr\u00e9ations marketing.\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fr.onlineprinters.be\/blog\/cinemagraphes-images-animees\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/fr.onlineprinters.be\/blog\/cinemagraphes-images-animees\/#primaryimage\",\"url\":\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/cinemagraphs.jpg\",\"contentUrl\":\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/cinemagraphs.jpg\",\"width\":1068,\"height\":580,\"caption\":\"Cin\u00e9magraphes\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fr.onlineprinters.be\/blog\/#website\",\"url\":\"https:\/\/fr.onlineprinters.be\/blog\/\",\"name\":\"fr.onlineprinters.be Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fr.onlineprinters.be\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/fr.onlineprinters.be\/blog\/#\/schema\/person\/d79ba2db96e33e04ed71525f52bb1eb9\",\"name\":\"Ramona\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/fr.onlineprinters.be\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2018\/08\/avatar.png\",\"contentUrl\":\"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2018\/08\/avatar.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:\/\/fr.onlineprinters.be\/blog\/author\/ramona\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cin\u00e9magraphes : cr\u00e9ez des images anim\u00e9es pour votre publicit\u00e9.","description":"Les images anim\u00e9es telles que les cin\u00e9magraphes sont une tendance qui pourrait bient\u00f4t revenir \u00e0 la mode. Vous devez en tenir compte lors de vos cr\u00e9ations 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:\/\/fr.onlineprinters.be\/blog\/cinemagraphes-images-animees\/","og_locale":"fr_FR","og_type":"article","og_title":"Cin\u00e9magraphes : cr\u00e9ez des images anim\u00e9es et utilisez-les pour votre publicit\u00e9","og_description":"Les images anim\u00e9es telles que les cin\u00e9magraphes sont une tendance qui pourrait bient\u00f4t revenir \u00e0 la mode. Vous devez en tenir compte lors de vos cr\u00e9ations marketing.","og_url":"https:\/\/fr.onlineprinters.be\/blog\/cinemagraphes-images-animees\/","og_site_name":"fr.onlineprinters.be Blog","article_published_time":"2019-02-13T07:36:55+00:00","article_modified_time":"2025-04-28T15:03:26+00:00","og_image":[{"width":1068,"height":580,"url":"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/cinemagraphs.jpg","type":"image\/jpeg"}],"author":"Ramona","twitter_card":"summary_large_image","twitter_title":"Cin\u00e9magraphes : cr\u00e9ez des images anim\u00e9es et utilisez-les pour votre publicit\u00e9","twitter_misc":{"\u00c9crit par":"Ramona","Dur\u00e9e de lecture estim\u00e9e":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fr.onlineprinters.be\/blog\/cinemagraphes-images-animees\/","url":"https:\/\/fr.onlineprinters.be\/blog\/cinemagraphes-images-animees\/","name":"Cin\u00e9magraphes : cr\u00e9ez des images anim\u00e9es pour votre publicit\u00e9.","isPartOf":{"@id":"https:\/\/fr.onlineprinters.be\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fr.onlineprinters.be\/blog\/cinemagraphes-images-animees\/#primaryimage"},"image":{"@id":"https:\/\/fr.onlineprinters.be\/blog\/cinemagraphes-images-animees\/#primaryimage"},"thumbnailUrl":"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/cinemagraphs.jpg","datePublished":"2019-02-13T07:36:55+00:00","dateModified":"2025-04-28T15:03:26+00:00","author":{"@id":"https:\/\/fr.onlineprinters.be\/blog\/#\/schema\/person\/d79ba2db96e33e04ed71525f52bb1eb9"},"description":"Les images anim\u00e9es telles que les cin\u00e9magraphes sont une tendance qui pourrait bient\u00f4t revenir \u00e0 la mode. Vous devez en tenir compte lors de vos cr\u00e9ations marketing.","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fr.onlineprinters.be\/blog\/cinemagraphes-images-animees\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/fr.onlineprinters.be\/blog\/cinemagraphes-images-animees\/#primaryimage","url":"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/cinemagraphs.jpg","contentUrl":"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2019\/01\/cinemagraphs.jpg","width":1068,"height":580,"caption":"Cin\u00e9magraphes"},{"@type":"WebSite","@id":"https:\/\/fr.onlineprinters.be\/blog\/#website","url":"https:\/\/fr.onlineprinters.be\/blog\/","name":"fr.onlineprinters.be Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fr.onlineprinters.be\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/fr.onlineprinters.be\/blog\/#\/schema\/person\/d79ba2db96e33e04ed71525f52bb1eb9","name":"Ramona","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/fr.onlineprinters.be\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2018\/08\/avatar.png","contentUrl":"https:\/\/fr.onlineprinters.be\/blog\/wp-content\/uploads\/2018\/08\/avatar.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:\/\/fr.onlineprinters.be\/blog\/author\/ramona\/"}]}},"_links":{"self":[{"href":"https:\/\/fr.onlineprinters.be\/blog\/wp-json\/wp\/v2\/posts\/14689"}],"collection":[{"href":"https:\/\/fr.onlineprinters.be\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fr.onlineprinters.be\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fr.onlineprinters.be\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/fr.onlineprinters.be\/blog\/wp-json\/wp\/v2\/comments?post=14689"}],"version-history":[{"count":6,"href":"https:\/\/fr.onlineprinters.be\/blog\/wp-json\/wp\/v2\/posts\/14689\/revisions"}],"predecessor-version":[{"id":52147,"href":"https:\/\/fr.onlineprinters.be\/blog\/wp-json\/wp\/v2\/posts\/14689\/revisions\/52147"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fr.onlineprinters.be\/blog\/wp-json\/wp\/v2\/media\/50603"}],"wp:attachment":[{"href":"https:\/\/fr.onlineprinters.be\/blog\/wp-json\/wp\/v2\/media?parent=14689"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fr.onlineprinters.be\/blog\/wp-json\/wp\/v2\/categories?post=14689"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fr.onlineprinters.be\/blog\/wp-json\/wp\/v2\/tags?post=14689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}