Compresser des GIFs comme un pro

1. Qu'est-ce qui caractérise un excellent GIF ?: Hey, je suis Jake Bartlett et ça compresse GIFS comme un patron. Dans ce cours rapide, je vais vous montrer mes trois meilleures façons de compresser GIFS à partager sur Internet. Première partie, GIF ou JIF. Allons juste sortir ça du chemin. L' inventeur du GIF dit JIF. La majorité de la planète dit GIF. Je suis inclus dans le camp GIF donc c'est comme ça que je vais le prononcer. Deuxième partie, qu'est-ce qui fonctionne le mieux ? GIFS ont certainement une utilisation très spécifique. Pour savoir quand utiliser un GIF sur une vidéo. Rappelez-vous simplement les trois S ; courts, simples et petits. Les GIFS doivent être courts et plus ils sont longs, la taille du fichier est grande. Le GIFS devrait être simple. Beaucoup de GIFS fonctionnent comme des boucles. Si vous rendez un tas de graphismes 3D supercompliqués ou si vous incorporez des photos ou des vidéos dans votre travail, un GIF ne sera probablement pas votre meilleur pari car il va compresser vos images tellement que votre le travail ne va pas être si génial. Des animations simples, avec de l'art vectoriel propre, fonctionnent très bien pour GIFS. Avoir une palette de couleurs plus petite aide vraiment à réduire la taille du fichier. ne veut pas dire que vous ne pouvez pas avoir beaucoup de couleurs et ajouter des choses comme des textures et des ombrages, mais plus c'est simple, plus votre GIF aura l'air à la fin. Petit, il y a deux objectifs principaux lors de la compression d'un GIF. Garder la taille de fichier petite et la qualité élevée. Maintenir votre résolution d'exportation réduite aidera ces deux objectifs. La plupart de mes GIFS finissent sur dribble et dribble n'accepte que deux résolutions, 400 par 300 et 800 par 600 donc généralement je n'exporte pas un GIF supérieur à 800 par 600. Si vous souhaitez compresser spécifiquement pour Skillshare, la largeur d'un élément de projet est de 580 pixels. Maintenant, ce sont toutes des résolutions d'exportation. Je vous recommande de travailler à une résolution plus élevée comme 1920 par 1080 ou 1440 par 1080 pour 4 par 3. Troisième partie, compresse comme un patron. 2. Méthode 1: Gifgun: Il existe trois méthodes que je recommande pour compresser les GIF, et chacune a son propre avantage et inconvénient. Méthode 1, GIF Gun. Le pistolet GIF est de loin la méthode la plus simple pour compresser les GIF d'After Effects. C' est 30$. Mais je peux vous garantir que si l'exploitation des cadeaux d'après effets est quelque chose que vous faites régulièrement, c'est le meilleur $30 que vous pouvez dépenser. Ici, dans After Effects, j'ai un tas de mes motifs à partir de mon graphique de titre tout prêt à être compressé. Cette composition est de 1920 par 1080 à 24 images par seconde. Je vais monter à la fenêtre et descendre à GIF Gun, et vous pouvez voir que c'est ce petit panneau, juste deux boutons, et je pourrais même ancrer ça dans mes panneaux ici, que j'y ai toujours accès, et les deux sont faire GIF et les paramètres. La façon dont cela fonctionne est que tout comme le rendu d'une vidéo à partir d'After Effects, elle est configurée pour afficher la valeur de votre zone de travail. Chacune de ces couches est déjà taillée pour être une boucle transparente. Si je passe à la première image et que je mets mon encre en appuyant sur B sur le clavier, appuyez sur O pour sauter vers le haut de ce calque et appuyez sur N pour définir mon point de tableau. Je vais appuyer sur 0 sur le pavé numérique pour rendre, et vous voyez que c'est une boucle transparente. Puisque je sais que cela est configuré correctement, je peux alors configurer mon exportation. Maintenant, si je devais cliquer sur faire GIF maintenant, il va compresser le GIF à la résolution de mon comp, qui est plein dix ADP, et comme nous avons déjà discuté, c'est beaucoup plus élevé que je veux qu'il soit. Je vais dans mes paramètres et j'ai quelques options. La première est de choisir où je voulais exporter. J' ai juste changé pour être sur le bureau. Ensuite, nous avons la possibilité de redimensionner la largeur et il sera proportionnellement à l'échelle de la hauteur. Je ne veux pas qu'elle soit de 1920. Je vais cliquer sur la coche de redimensionnement à la largeur et 800 pixels est la façon dont nous aimerions que cela soit exporté. L' option suivante consiste à choisir le nombre maximum de couleurs, et comme vous pouvez le voir sur l'info-bulle ici, plus de couleurs signifie GIF plus grands, et plus ils signifient la taille du fichier. Si je clique sur cette liste déroulante, vous voyez que nous avons quelques options prédéfinies. Maintenant, cette animation particulière n'a que trois couleurs. Vraiment, je peux abattre ce maximum de couleurs à huit et ça aura probablement l'air très bien. Mais en général, je laisse ça à 128 et c'est très bien. Si la qualité n'est pas assez élevée à ce stade, je vais le faire sauter jusqu'à 256, nous pouvons contrôler la fréquence d'images. En ce moment, il est défini pour être la fréquence d'images comps, donc 24 images par seconde, mais je peux le laisser tomber à 12 si je veux réduire le nombre d' images et la moitié pour économiser sur la taille du fichier. Je vais laisser ça pour l'instant parce que je veux que ce soit la fréquence d'images complète, et enfin, nous avons la possibilité d'enregistrer une copie vidéo. Ce que je n'ai pas besoin de faire, et la dernière option est de m'assurer que votre GIF boucle. Je veux la mienne la boucle, je laisserai ça coché et cliquez sur Terminé. Ensuite, c'est aussi simple que de cliquer, faire GIF. After Effects exporte une vidéo. GIF Gun me donne un peu de statut. Il me dit que le GIF se comprime et ouvre automatiquement le fichier où vous exportez le GIF sur mon bureau, et bien sûr, il y a mon GIF en boucle. Maintenant, si vous regardez cette vidéo en plein écran, vous pouvez probablement dire que les bords de mon œuvre sont vraiment croustillants. C' est parce que j'ai limité mon motif de couleur à huit couleurs. Vous penseriez que parce que mon œuvre n'a que trois couleurs, huit seraient plus que suffisant. Mais si je zoom ici très près sur les bords de ces deux couleurs, vous pouvez voir que ce n'est pas seulement ce violet et ce rouge. Il y a ce qu'on appelle l'anti-aliasing qui se passe entre les deux graphiques pour rendre les bords plus lisses, et la même chose est vraie pour le jaune et le violet. Si je fais un zoom arrière pour s'adapter, je vais aller dans mes paramètres, changer les couleurs maximales jusqu'à 128 juste pour s'assurer que super lisse clic puis faire GIF à nouveau, et voilà. Nous avons notre deuxième GIF, prévisualisez cela. Vous pouvez voir qu'il est beaucoup plus propre que cela. C' est notre original, qui est limité à huit couleurs, et c'est notre deuxième compression avec un 128. Maintenant, la différence de taille de fichier est assez significative. Le premier n'est que de 388 kilo-octets, et le second est d'un mégaoctet. Mon objectif est généralement de garder mes GIF autour de deux mégaoctets ou moins, car le partage de compétences limite votre téléchargement de taille de fichier à deux mégaoctets. Maintenant, si garder mon cadeau à deux mégaoctets ou moins réduit vraiment la qualité, alors je vais certainement augmenter la taille du fichier et ensuite gérer juste la publication du GIF d'une manière différente, mais nous y arriverons plus tard. Pour l'instant, je suis parfaitement satisfait de ce GIF, et c'est de loin le moyen le plus simple d'exporter un GIF depuis After Effects. Alors que j'enregistre cette classe, GIF Gun est un tout nouveau plug-in et ils travaillent toujours sur le développement d'autres fonctionnalités. Il pourrait s'agir d'un achat encore plus précieux à l'avenir. 3. Méthode 2: Photoshop: La deuxième méthode de compression des GIF consiste à utiliser Photoshop. Si vous avez des séquelles, il y a des chances que vous ayez Photoshop à. Comment passer des séquelles à Photoshop ? Laisse-moi sauter à mon deuxième GIF. Je vais définir la zone de travail et je vais exporter ceci sous forme de fichier vidéo. Nous allons monter la composition, Ajouter à la file d'attente de rendu et vos modules de sortie sont probablement définis sur sans perte, et c'est très bien. Je ne veux pas vraiment le compresser des séquelles à Photoshop. Ensuite, je vais juste lui dire d'aller sur mon bureau et de cliquer sur Rendu. Ensuite, je passerai à Photoshop, allez dans Fichier, ouvrez, allez sur mon bureau, et voici mon fichier QuickTime. Je vais juste double-cliquer dessus. Photoshop va traiter, lire le format vidéo, ce qui peut prendre un peu de temps en fonction de la taille de votre fichier , et nous l'avons là. Je peux jouer ça à l'intérieur de Photoshop. Il peut ne pas être lu en temps réel au début, mais cela me permet au moins de voir que l'animation fonctionne. Maintenant, si Photoshop ne vous permet pas d'ouvrir le fichier QuickTime directement, alors vous devez passer à Fichier, Importer, Frames vidéo vers les calques. Sélectionnez ensuite votre vidéo, laissez la plage définie Du début à la fin et cochez l'option Créer une animation d'image et cliquez sur OK. Cela fera apparaître une chronologie un peu différente, mais cela fonctionne fondamentalement de la même manière. Je vais fermer celui-là et revenir ici. L' étape suivante est de passer à Fichier, Exporter, Enregistrer pour le Web (Legacy). Maintenant, j'utilise Photoshop CC 2015. Toutes les versions précédentes auraient un taux Web listé plus sûr ici par Enregistrer et Enregistrer sous. Accédez à Enregistrer pour le Web. Cela ouvre ce dialogue qui nous permet de compresser pour le web. La première chose que je vais faire est de venir à la présélection, cliquer sur la liste déroulante, et venir à GIF 128 Dithered. Maintenant, ce n'est qu'un préréglage et nous avons beaucoup et beaucoup de contrôles sur la façon dont ce GIF va exporter. La première chose que je veux faire est de redimensionner l'image. Il est toujours fixé à 1920 d'ici 1080. Je vais double-cliquer sur la largeur et taper 800, et cela prendra une seconde pour redimensionner. Maintenant, nous recevons un aperçu en direct de ce à quoi ressemblera notre GIF une fois qu'il sera compressé. Ici, dans le coin inférieur gauche, vous pouvez voir que cela nous dit que le GIF résultant sera de 1,1 mégaoctets. C' est parfaitement acceptable. L' une des belles choses que Photoshop vous permet de voir est les couleurs qu'il utilise pour compresser votre GIF. Tout comme l'utilisation d'un pistolet GIF, je peux augmenter ou diminuer le nombre de couleurs utilisées. Si je baisse ça à 8, vous pouvez voir que nous avons encore ces bords croquants. Si je tape 3, puisqu'il n'y en a que trois, nous perdons cette couleur de peinture. Si je l'augmente à 4, il le ramènerait probablement parce que l'une des couleurs est en fait la transparence. Mais c'est probablement beaucoup plus technique que vous n'avez même besoin de vous inquiéter. Ma règle de base est de 128 couleurs, et si cela ne semble pas assez bien, pompez-le jusqu'à 256. Cela n'a même pas augmenté la taille du fichier autant, mais 128, c'est très bien. Comme c'est une taille de fichier plus petite, je vais aller de l'avant et le laisser là. Puisque je suis satisfait de la façon dont cela ressemble, la dernière chose que je dois faire est de changer mes Options de boucle de Once à Forever. Parfois, Photoshop aime revenir à une fois si vous l'avez configuré, puis revenir et modifier vos paramètres de compression, je n'ai aucune idée de pourquoi. Parfois, c'est juste le cas. La dernière chose que je fais toujours avant d'appuyer sur Enregistrer est de m'assurer que ma boucle est définie sur Forever. Ensuite, je vais cliquer sur Enregistrer, le mettre sur mon bureau, appeler Photoshop pour que nous puissions les garder organisés. Là, nous l'avons, il l'a exporté. Si je vais à mon bureau, voici, Photoshop aperçu. Nous avons un GIF en boucle. Voici le titre graphique de mon Rock avec le cours d'animation de personnage. Comme vous pouvez le voir, j'ai une Vignette texturée dans les coins, il y a des ombrages sur le texte, et c'est un peu plus long que les motifs de boucle que j'ai déjà eu. Maintenant, cette texture granuleuse que j'ai ajoutée est un choix de conception, mais c'est aussi quelque chose qui aide à compresser les GIF. Si je devais ouvrir cette vidéo sans le bruit en arrière-plan, et essayer de compresser cela comme un GIF, parce que ma palette de couleurs est limitée à un 128, nous obtenons toute cette bande laide qui se produit à cause de la compression. Sans la compression, il y a tellement de nuances différentes de cette couleur orange va être jaune. Mais parce qu'un GIF est un format si fortement compressé, il est super perceptible. Maintenant, je pourrais augmenter les couleurs pour essayer de réparer ça. Mais même au maximum de 256, il n'a toujours pas l'air très bon. Je pourrais essayer de monter mon dither tout le chemin et que le lisser un peu plus. Mais vous pouvez toujours voir clairement ce baguage. C' est là que cette texture granuleuse est utile. Si je le rallume, le baguage a complètement disparu, même à 128 couleurs. Ce grain permet à Photoshop de générer ce gradient d'une manière qui élimine tous les baguages. Maintenant, si je vais de l'avant vers le texte entre, vous voyez que l'ombrage n'apparaît pas sur cela. Si nous regardons notre table de couleurs, il n'y a vraiment que deux nuances de rouge différentes, et c'est pourquoi nous avons perdu tout ça. Je vais encore augmenter ça à 256 couleurs, et voilà. Maintenant, l'ombrage s'affiche parce que nous avons beaucoup plus de nuances de rouge. Maintenant, notre taille de fichier est de 2,7 mégaoctets, c'est trop grand pour le partage de compétences. Mais peut-être que si je change la largeur à 580, cela aidera à compresser l'image encore plus. Parfait, qui a chuté à 1,4 mégaoctets et l'égalité a l'air génial. Maintenant que tout est réglé, ma boucle est définie sur Forever. Je peux cliquer sur Enregistrer, choisir un bureau. Je vais appeler ça Rock Out Title Photoshop. Je peux aller sur mon bureau. Ici, c'est. Super. C'est ainsi que vous utilisez Photoshop pour compresser les GIF. 4. Méthode 3 : Giphy.com: La dernière méthode consiste à utiliser un site Web en ligne pour convertir votre vidéo en GIF pour vous. Maintenant, il y a beaucoup de sites Web avec lesquels vous pouvez le faire. Celui que je vais te montrer s'appelle Giphy. Mais dans ce cas, je suppose que ça aurait plus de sens si tu le prononçais Giphy. De retour après les effets, je vais exporter ceci en tant que fichier vidéo, mais cette fois je vais le compresser pour que mon téléchargement ne prenne pas beaucoup de temps. Je vais aller à Composition, Ajouter à la file d'attente de rendu, et au lieu de ProRes, je vais m'assurer que mon format est défini sur QuickTime, changez mes options de format. Modifiez le codec vidéo en H.264. Qualité définie à 100. Je vais limiter mon débit de données à 15 000 kilobits par seconde clic « Okay », tout le reste est réglé. Je vais cliquer sur « OK ». Assurez-vous qu'il s'agit de l'exportation vers mon bureau. Je vais le nommer, le téléchargement de motifs, puis « Render ». Ensuite, je passerai à Giphy Dot-com. En haut, je vais cliquer sur le bouton « Télécharger », cliquez sur « Parcourir ». Le téléchargement de motif est mon fichier QuickTime. Je vais en prévisualiser, vous pouvez voir que c'est une qualité complète. Cliquez sur « Ouvrir ». Si vous envisagez de partager votre animation sur Giphy, vous avez des options pour ajouter des balises pour la rendre accessible à la recherche. Je n'ai pas besoin de le faire, donc je vais cliquer sur « Télécharger GIF », et cela prendra une minute pour télécharger ce fichier. Une fois cela terminé, il ouvrira automatiquement votre animation. Comme vous pouvez le voir, la qualité n'est pas si grande. Malheureusement, il n'y a aucun moyen réel de contrôler la qualité de votre téléchargement sur des sites comme Giphy ou Imager. Si je fais défiler vers le bas, cela nous donne le code d'intégration, ce qui est génial. Nous pouvons ouvrir plus d'options et il y a toutes sortes de paramètres de partage. Mais si je vais dans avancé, nous avons un lien Giphy qui ira directement à cette page, ou si vous voulez une URL directe à cette animation, c'est à cela que sert le lien de téléchargement GIF. Donc, si je copie ceci et le colle dans un nouvel onglet, vous voyez que des liens directement vers elle. Maintenant, cela pourrait être parfaitement acceptable pour ce dont vous avez besoin, mais je peux certainement dire que la qualité est inférieure, et il semble même qu'il a baissé ma fréquence d'images. Maintenant, comme je l'ai dit, en téléchargeant sur un site comme Giphy, vous n'avez aucun contrôle sur ces paramètres, mais c'est rapide et il héberge automatiquement votre image, donc ce n'est pas une option que vous devriez exclure. 5. Poster un GIF sur Skillshare: Donc, ce sont mes trois meilleures façons de compresser les GIF pour le web. Une fois que vous avez votre GIF, vous pouvez créer un projet de classe et le partager sur la page du projet de classe. Lorsque vous allez réellement télécharger votre projet sur Skillshare, assurez-vous de ne pas le charger comme photo de couverture. Ceci est juste pour générer une miniature sur la page du projet de classe et pour avoir fondamentalement un en-tête pour votre projet de classe. Maintenant, Skillshare dit que GIF est un format acceptable, et il l'est, mais il n'animera pas. Au lieu de cela, descendez dans votre espace de travail de projet, cliquez sur télécharger la photo , choisissez votre GIF, tant qu'il est inférieur à deux mégaoctets, vous pouvez la télécharger, et cela va charger l'image directement dans votre espace de travail de projet. Il est là. Maintenant, j'ai toujours mon lien copié à partir de mon téléchargement Jiffy, disons que GIF était trop grand pour télécharger directement sur Skillshare. Eh bien, alors je cliquerais sur le bouton Image, collez cette URL dans la source, et cliquez sur OK. Cela affiche automatiquement l'image à partir de l'URL hébergée sur Jiffy. C' est ainsi que vous publiez un GIF trop grand pour être sur Skillshare, et c'est tout ce qu'il y a à compresser GIFS comme un boss. J' espère que vous avez apprécié ce cours rapide. J' adorerais que vous me laissiez un avis. Faites des animations impressionnantes, compresser ces GIF et téléchargez-les sur votre page de projet, marquez-moi sur les réseaux sociaux @jakeinmotion, si vous partagez l'un de vos travaux. Comme toujours, posez toutes les questions que vous avez dans la discussion posez-moi quelque chose sur la page Communauté. Merci encore, et je te verrai la prochaine fois.