Le guide ultime de la conception GIF

Nous sommes dans un monde où la communication se fait de plus en plus en ligne et où les GIF sont à la hausse. Ils imprègnent désormais tout, de la culture populaire aux campagnes publicitaires. Pour la prochaine génération de concepteurs et de développeurs, il est essentiel de connaître les graphismes animés et de bien comprendre les bases de la création d'un GIF.

Un bon GIF peut être ludique et plein de dynamisme, ou il peut être lent et fluide; tout ce qui décrit le sentiment derrière les images en mouvement. La clé est de comprendre ce qui fait un GIF accrocheur et de créer un langage qui correspond à l'ambiance du message.

Cependant, il y a quelques règles à apprendre et des outils qui peuvent vous aider sur votre chemin. Ici, des créatifs de grands studios, ainsi que des pigistes bien connus, partagent leurs conseils pour maîtriser l'art du GIF.

Construire un site pour afficher vos GIF? Vous pourriez avoir besoin d'un Générateur de site Web . S'il s'agit d'un site complexe, vous aurez besoin du parfait hébergement Web service, et une fois que vous les avez faits, assurez-vous de les ranger en toute sécurité dans stockage en ligne .

01. Gardez-le accrocheur

Avec une utilisation toujours élevée des médias sociaux, il n'est peut-être pas surprenant que la tendance des GIF dans la publicité augmente rapidement. `` L'utilisation de GIF dans le contenu social peut être très puissante si elle est exécutée correctement '', déclare Tom Grant, concepteur chez Conception de fiasco à Bristol.

Il considère les GIF comme le dispositif ultime de recherche d'attention, donnant vie à ce qui serait une publication plate et statique de manière `` accrocheuse, engageante et informative ''.

Fiasco Design GIF de Mo Farah

Fiasco Design a créé une gamme de GIF énergiques pour les Jeux Olympiques de Rio 2016

Fiasco Design a créé une gamme de GIF animés et énergiques pour les Jeux olympiques de Rio, combinant une palette de couleurs vives avec des vitesses de trame rapides et flashy, et expérimentant avec une police qui serait lisible à différentes tailles.

02. Réduisez la taille pour le partage social

Pour les concepteurs, il existe quelques règles pour créer des GIF efficaces pour les plateformes sociales. `` Le principal défi technique consiste à les maintenir en dessous des limites de taille de fichier de chaque plate-forme de médias sociaux '', suggère James Curran , directeur principal d'une société de production mondiale Partizan . 'Tumblr en particulier est toujours délicat car il a une limite de 2 Mo [maintenant 3 Mo], donc j'ai parfois besoin d'être créatif avec des moyens de raccourcir les boucles pour réduire la taille.'

Il existe également des règles particulières pour créer des GIF qui seront compressés: tout d'abord, respectez une palette de couleurs limitée. Éviter les dégradés est essentiel, car vous vous retrouverez avec un ombrage sale ou des fichiers de grande taille. Les pixels semi-transparents sont également un non-non, car la transparence est soit complètement activée, soit complètement désactivée - quelque chose à garder à l'esprit pour éviter ces bords irréguliers.

03. Concevez en pensant aux utilisateurs mobiles

Bien que différents types de sites Web utilisent les GIF de différentes manières, la plupart des concepteurs conviennent qu'il vaut mieux ne pas avoir un grand nombre de GIF en même temps sur une page. Curran recommande d'utiliser les rollovers pour éviter le ralentissement et pour que les animations restent lues à la vitesse à laquelle elles étaient destinées.

Et cela vaut la peine de garder à l'esprit le type d'appareils sur lesquels votre GIF sera affiché. Le conseil de Curran est de concevoir avec un petit écran à l'esprit: «Gardez tout simple et audacieux pour que cela fonctionne bien sur n'importe quel appareil.

Russell Etheridge , un membre de Animade L'équipe créative de, privilégie la conception dans un carré. «Beaucoup de nos GIF commencent sous cette forme et sont recadrés si nécessaire. De plus, vous avez tendance à faire défiler les sites sociaux en mode portrait sur votre téléphone, il est donc préférable d'avoir un design plus proche d'un carré car les images plus étroites sembleront plus petites.

Pour son GIF Olympops (ci-dessus), Etheridge a tout animé en 4: 3, qui pouvait ensuite être rogné en une vidéo 16: 9 carrée ou standard.

04. Faites-le fonctionner comme une boucle continue

Le designer parisien Valentin Adam, qui travaille comme Aire de jeux Paris , fait valoir que plutôt que de penser spécifiquement aux GIF, c'est le concept du format «boucle» qui prend de l'ampleur: «C'est vraiment amusant de créer une animation de deux secondes qui se joue à l'infini et qui semble différente à chaque boucle.

Curran est d'accord et suggère de considérer les GIF comme étant continus, plutôt que d'avoir un point de départ et un point d'arrivée précis. «Essayez de raconter une histoire qui fonctionne dans la boucle», suggère-t-il. «Je pense que cela permet aux gens de continuer à regarder des GIF plus longtemps.

Jamie Curran GIF

Les GIF ludiques de James Curran l'ont propulsé vers la popularité

Si l'animation est courte, il est recommandé de limiter les boucles à pas plus de trois fois avant d'arrêter complètement l'animation, recommande Nick Lewis, concepteur et développeur front-end chez Fiasco Design.

Cependant, si vous concevez le GIF pour qu'il soit diffusé sur une plateforme de médias sociaux telle que Twitter, vous n'avez pas à vous inquiéter autant, car les fonctions intégrées ne lisent les GIF que lorsqu'ils sont visibles.

Enfin, il est essentiel que vos boucles soient belles et fluides - et il y a un piège particulier à éviter. «Le fait que la dernière image de votre animation soit la même que celle de votre début entraîne une toute petite prise où vous voyez deux fois la même image, ce qui provoque une boucle irrégulière», souligne Etheridge. «Assurez-vous de supprimer celui-là à la fin pour éviter cela.

05. Trouvez les bons outils pour vous

Pour la majorité des designers, maîtrise de Photoshop est à peu près essentiel pour créer vos propres GIF. Curran recommande YouTube comme une ressource incontournable pour les didacticiels en ligne afin de reprendre les bases du logiciel: «Une fois que vous avez une bonne compréhension, vous pouvez trouver comment adapter ces principes au style de travail que vous souhaitez créer.

Grant suggère de jouer dans CodePen: «Il contient de grandes sources d'inspiration et offre un endroit pour apprendre et faire preuve de créativité avec le code; que vous soyez novice ou professionnel chevronné.

Pour les GIF plus complexes, Effets secondaires est l'outil de choix de nombreux designers. «Il existe un contrôle beaucoup plus grand sur les fonctions de mouvement et de chronométrage, ainsi que des outils supplémentaires pour créer des animations vraiment puissantes», révèle Lewis.

Si vous souhaitez rafraîchir vos compétences After Effects, essayez le didacticiel de création de GIF de Curran (ci-dessus), notre guide Premiers pas avec l'animation dans After Effects ou notre compilation de 50 tutoriels After Effects incroyables disponible en ligne.

Il est possible d'exporter directement vos créations sous forme de GIF, mais Lewis suggère d'exporter d'abord sous forme de vidéo: «Il semble être plus facile de compresser de cette façon et de réduire la taille du fichier.

06. Commencez simplement

Avec toutes ces différentes options, il est facile de se sentir dépassé. «Parce qu'il y a de nombreuses variables à prendre en compte, il y a beaucoup de test et de savoir-faire technique requis. La création d'un GIF en boucle peut prendre deux fois plus de temps qu'une illustration habituelle '', explique un illustrateur basé à Melbourne. Ellen Porteus .

Son conseil aux débutants est de garder les choses simples: «Commencez par quelques éléments, pour comprendre comment les choses bougent, et passez lentement à une animation plus compliquée. J'ai commencé par créer beaucoup de balles rebondissantes.

Femme aux jambes en l

Valentin Adam (alias Playground Paris) a construit son portfolio en créant un GIF par jour pendant un mois

Adam a maîtrisé l'art de garder les choses simples lorsqu'il travaillait à élargir son portefeuille GIF. «J'avais en tête de faire un énorme mouvement divers avec beaucoup de choses idiotes et folles, mais pour y arriver, je devais publier un GIF tous les jours - en partie pour éviter de trop y penser», explique-t-il.

Il a couru le défi pendant un mois entier, publiant les GIF sur son Page Instagram . En employant une gamme d'astuces, il a réussi à réduire son temps de création moyen à environ une heure.

07. Transformez une vidéo en GIF

La création de GIF n'est pas nécessairement le seul domaine des illustrateurs - vous pouvez importer n'importe quelle vidéo dans Photoshop pour la convertir en GIF. Pour ceux dont les compétences Photoshop manquent, Grant recommande d'expérimenter avec Giphy , qui offre un moyen simple et gratuit de diviser vos vidéos en cadres.

«Je n'utilise pas vraiment le système d'animation d'images de Photoshop, car les calques vidéo sont beaucoup plus intuitifs», commente Etheridge. 'Si j'anime des graphiques, je vais animer dans After Effects et importer dans Photoshop en tant que fichier vidéo rendu avant la conversion.'

Cependant, il souligne que si vous créez un GIF à partir de séquences vidéo d'action en direct, la réalisation d'une boucle fluide sera beaucoup plus délicate, tout comme l'obtention d'une couleur uniforme.

08. Rendez-le accessible à tous

Pour s'assurer que le contenu peut interagir avec un public plus large, les développeurs doivent être conscients accessibilité et normes Web . «L'animation Web doit toujours être utilisée pour améliorer progressivement l'expérience», affirme Grant.

Il suggère de décrire les animations et les GIF animés sous forme de texte afin qu'ils puissent être compris par les utilisateurs de lecteurs d'écran, et d'éviter trop de clignements ou de clignotements pour qu'ils restent adaptés aux téléspectateurs souffrant d'épilepsie photosensible.

GIF d

GIF de Fiasco Design pour Larmer Tree Festival

James Chambers, co-fondateur d'Animade, convient que l'accessibilité doit être intégrée dès le début: «Les bases telles que la fourniture de balises alt sur les images - GIF animé ou autre - devraient être une base de référence.

Il souligne également que pour l'animation vectorielle, utilisation de SVG en ligne peut considérablement améliorer l'accessibilité. En termes simples, un SVG est un format d'image vectorielle basé sur XML pour les graphiques en deux dimensions qui prend en charge l'interactivité et l'animation. 'Du point de vue de l'accessibilité, les SVG en ligne contiennent plus d'informations par rapport à un espace vide et peut donc être mieux interprétée par le navigateur », explique-t-il.

Pour les sites à forte animation, Chambers suggère de combiner SVG avec une utilisation réfléchie de l'étiquetage ARIA. Prêt à l'emploi, les lecteurs d'écran fonctionnent avec du HTML standard, mais l'ajout d'ARIA peut fournir aux utilisateurs de lecteurs d'écran plus de contexte et une plus grande interactivité avec le contenu. Pourtant, ARIA n'a aucun effet sur la façon dont les éléments sont affichés ou se comportent dans les navigateurs - il est uniquement destiné à agir comme une couche descriptive supplémentaire. C'est un outil extrêmement utile pour les développeurs Web.

09. Explorez quelque chose de nouveau

Alors pourquoi les GIF sont-ils devenus si populaires? Pour de nombreux designers, ils offrent un nouveau débouché à l'expression créative. «Je pense que c'est en partie parce que le public cible des GIF est plus jeune, [les clients] sont plus intéressés par un contenu un peu décalé», déclare Curran.

`` Pour une raison quelconque, les marques semblent plus disposées à permettre aux créateurs d'être plus créatifs avec les GIF qu'ils ne le seraient avec un contenu plus conventionnel. Étant donné que les GIF sont des projets plus petits avec des budgets généralement plus petits, il est moins risqué pour les marques d'utiliser ce format pour essayer quelque chose de différent.

GIF pour Quantcast

Ellen Porteus a conçu ce GIF en boucle pour Quantcast

Porteus est d'accord: «Il s'agit de tirer le meilleur parti de la flexibilité du support numérique. Les illustrations traditionnelles sont excellentes, mais les GIF peuvent être vraiment attrayants, amusants et intelligents. Pour moi, les GIF les plus attrayants sont ceux qui bouclent de manière transparente et infinie, avec beaucoup de mouvement et de jeu. ''

Quant à ce qui fait un bon GIF, l'intuition a quelque chose à voir avec cela. «Il s'agit d'avoir une compréhension des principes de base de l'animation, un sens du rythme et être capable de penser à une idée», conclut Curran. «J'apprends encore toutes ces choses moi-même après plus de 10 ans d'animation!

Illustration principale: Yukai Du

Cet article a été initialement publié dans un numéro de 2017 de rapporter . Abonnez-vous au magazine net ici .

Articles Liés: