Créez des modèles pour vos graphiques vidéo avec Inkscape

Récemment, j’ai enregistré un Tutoriel de 15 minutes avec des supports sur la façon d’automatiser la production graphique dans Inkscape. Je l’ai démontré en créant un modèle de base et en remplaçant automatiquement diverses chaînes de texte dans le fichier à partir d’un CSV à l’aide de la Générateur suivant Extension Inkscape par Maren Hachmann. Au cas où vous préféreriez lire au lieu de regarder une vidéo, vous pouvez lire l’article d’accompagnement Comment j’automatise la création graphique avec Inkscape ici sur Opensource.com.

Sur la base de la demande populaire de ce didacticiel, j’ai créé un didacticiel plus avancé qui développe le dernier. Il montre comment automatiser le remplacement d’image et le changement de couleurs en utilisant la même méthode.

Vous pouvez le regarder sur L’équipe de conception Fedora Linux Rocks canal PeerTube ou la vidéo YouTube intégrée ci-dessous :

Dans cet article, je fournis un contexte sur l’utilité de ce didacticiel. J’inclus également un résumé de très haut niveau du contenu de la vidéo au cas où vous préféreriez survoler le texte et ne pas regarder une vidéo.

Graphiques de cartes de conférence

L’arrière-plan de ce didacticiel est la suite du didacticiel d’origine. Pour chaque conférence Flock/Nest, vous avez besoin d’un graphique pour chaque présentation pour la plateforme en ligne utilisée pour héberger la conférence virtuelle. Il y a généralement 50 conférences ou plus pour les grands événements. Cela fait beaucoup de graphiques à produire manuellement.

Avec ce tutoriel, vous apprendrez à créer un modèle comme celui-ci dans Inkscape :

Et un fichier CSV comme celui-ci :

ConferenceName, TalkName, PresenterNames, TrackNames, BackgroundColor1, BackgroundColor2, AccentColor, Photo
BestCon, The Pandas Are Marching, Beefy D. Miracle, Exercise, 51a2da, 294172, e59728, beefy.png
Fedora Nest, Why Fedora is the Best Linux, Colúr and Badger, The Best Things, afda51, 0d76c4, 79db32, colur.png
BambooFest 2022, Bamboo Tastes Better with Fedora, Panda, Panda Life, 9551da, 130dc4, a07cbc, panda.png
AwesomeCon, The Best Talk You Ever Heard, Dr. Ver E. Awesome, Hyperbole, da51aa, e1767c, db3279, badger.png

Vous pouvez les combiner pour générer un graphique par ligne dans le CSV, où la couleur d’arrière-plan de la diapositive, la couleur d’arrière-plan du nom de la piste, l’arrière-plan de la tête de l’intervenant et l’image de la tête de l’intervenant changent en conséquence :

Il y a beaucoup de choses pour lesquelles vous pouvez utiliser cette technique. Vous pouvez l’utiliser pour créer des images de couverture cohérentes pour les vidéos de votre chaîne. Vous pouvez même l’utiliser pour créer de superbes bannières et graphiques pour Fedora en tant que membre du Équipe de conception Fedora!

Installer l’extension Inkscape Next Generator

La première étape pour les créer est d’installer l’extension Next Generator pour Inkscape créé par Maren Hachmann :

1. Allez sur le site et téléchargez le next_gen.inx et next_gen.py depuis le niveau supérieur du dépôt.
2. Allez ensuite dans le Edition > Préférences > Système boîte de dialogue dans Inkscape. Rechercher le Postes utilisateur liste de répertoires et cliquez sur le Ouvrir icône à côté. Faites glisser les fichiers .inx et .py dans ce dossier.
3. Enfin, vous devez fermer toutes les fenêtres d’Inkscape ouvertes et redémarrer Inkscape. La nouvelle extension est sous le Rallonges menu: Extensions > Exporter > Générateur suivant.

Créer le modèle

Chaque en-tête de votre fichier CSV (dans mon exemple : ConferenceName, TalkName, PresenterNames) est une variable que vous pouvez placer dans un fichier Inkscape qui vous sert de modèle. Jetez un oeil à la exemple de fichier de modèle SVG pour directions. Si vous voulez que le TalkName apparaisse dans votre modèle, créez un objet texte dans Inkscape et mettez-y le contenu suivant :

%VAR_TalkName%

Lorsque vous exécutez l’extension, le %VAR_TalkName% le texte est remplacé par le TalkName répertoriés pour chaque ligne du CSV. Donc pour la première rangée, %VAR_TalkName% est remplacé par le texte Les pandas marchent pour le premier graphique. Pour le deuxième graphique, le TalkName est Pourquoi Fedora est le meilleur Linux. Vous continuez ainsi jusqu’à ce que vous arriviez au TalkName colonne pour chaque graphique.

Étendre le modèle pour les changements de couleur

Vous n’avez pas grand-chose à faire pour les changements de couleur, sauf décider quelles couleurs vous voulez changer. Vous pouvez leur attribuer des noms de champ dans votre CSV et choisir des couleurs pour chaque ligne de votre CSV. Dans mon exemple CSV, il y a deux couleurs du dégradé d’arrière-plan qui changent (BackgroundColor1 et BackgroundColor2) et une couleur d’accentuation (AccentColor) qui est utilisée pour colorer le losange d’arrière-plan du nom de la piste de conférence ainsi que le contour sur la photo du haut-parleur :

BackgroundColor1, BackgroundColor2, AccentColor
51a2da, 	         ,294172 	     ,e59728
afda51, 	         ,0d76c4 	     ,79db32
9551da, 	         ,130dc4 	     ,a07cbc
da51aa, 	         ,e1767c 	     ,db3279

Changer seulement certains éléments de la même couleur

Il y a une astuce que vous devez faire si vous avez la même couleur que vous voulez changer dans certaines parties de l’image et rester la même dans d’autres parties de l’image.

La façon dont les changements de couleur fonctionnent dans Next Generator est un simple type de mécanisme de recherche et de remplacement. Ainsi, lorsque vous dites à Next Generator dans Inkscape de remplacer quoi que ce soit par le code couleur #ff0000 (qui est dans le modèle d’exemple et ce que j’aime appeler le rouge odieux) à une autre couleur (disons #aaaa00), il remplacera chaque objet du fichier qui a #ff0000 comme couleur à la nouvelle valeur, #aaaa00.

Si vous souhaitez que le rouge de l’arrière-plan du nom de la piste de conférence change de couleur, mais que vous souhaitiez conserver la bordure de couleur rouge autour de la photo de l’orateur dans tous les graphiques, vous pouvez utiliser une petite astuce pour y parvenir. Utilisez simplement l’outil HSV dans le Remplissage et contour boîte de dialogue dans Inkscape pour ajuster l’élément rouge que vous ne vouliez pas descendre d’un cran. Si vous le changez #fa0000, il a une valeur hexadécimale différente pour son code couleur. Ensuite, vous pouvez avoir n’importe quoi avec #ff0000 changer de couleur en fonction des valeurs de votre CSV. Quoi que ce soit #fa0000 resterait rouge et ne serait pas affecté par le mécanisme de remplacement de couleur.

Maintenant, quelques points à noter à propos des codes de couleur :

• Ne pas utiliser # dans le CSV ou le JSON (plus d’informations sur le JSON ci-dessous) pour ces valeurs de couleur.
• N’utilisez que les six premiers “chiffres” du code couleur hexadécimal. Inkscape en inclut par défaut 8, les deux derniers sont la valeur de canal alpha/opacité pour la couleur. (Mais attendez, comment utilisez-vous différentes valeurs de couleur d’opacité ici alors? Vous pourrez peut-être utiliser une feuille de style en ligne qui modifie le opacité de remplissage valeur pour les éléments sur lesquels vous voulez de la transparence, mais je n’ai pas encore testé cela.)

Extension du modèle pour les modifications d’image

Tout d’abord, vous souhaitez ajouter des images “de remplissage” à votre modèle. Faites-le en les liant. Ne les intégrez pas lorsque vous les importez dans Inkscape. J’en ai intégré un dans le modèle – photo.png.

Ensuite, préparez le CSV pour les changements de couleur et pour les changements d’image. Vous devez trouver des noms de champ pour toutes les images que vous souhaitez échanger dans votre CSV. Vous pouvez répertorier les noms de fichiers image que vous souhaitez remplacer dans chaque ligne de votre CSV. Dans l’exemple CSV, vous n’avez qu’une seule image avec un nom de champ “Photo” :

Photo
beefy.png
colur.png
panda.png
badger.png

Notez que les images répertoriées dans le CSV ne sont que des noms de fichiers. Je vous recommande de placer ces fichiers dans le même répertoire que votre fichier SVG de modèle. Ensuite, vous n’aurez pas à vous soucier de spécifier des chemins de fichiers spécifiques. Cela rend votre modèle plus portable (tar ou compressez-le et partagez-le).

Construire le JSON pour la boîte de dialogue Générateur suivant

La dernière étape (et la plus délicate) pour que tout cela fonctionne consiste à écrire des paires clé-valeur au format JSON pour Next Generator. Cela l’aide à comprendre quelles couleurs et images sont présentes dans la carte du fichier de modèle et quels noms de champs et en-têtes de colonne se trouvent dans votre fichier CSV, afin qu’il sache ce qui va où.

Voici l’exemple JSON que j’ai utilisé :

{"BackgroundColor1":"51a2da","BackgroundColor2":"294172","AccentColor":"ff0000","Photo":"photo.png"}

Où ai-je trouvé ces codes de couleur pour le JSON ? Ils sont tous sélectionnés parmi les modèle.svg déposer. Le code couleur 51a2da est la couleur bleue plus claire du dégradé circulaire en arrière-plan et 294172 est le bleu le plus foncé vers le bas du dégradé. Le code couleur ff0000 (rouge odieux) est la bordure de couleur autour de la photo du haut-parleur et la couleur d’arrière-plan en losange derrière le nom de la piste.

Où est passé le photo.png nom de fichier vient? C’est le nom de l’image de remplissage que j’ai utilisée pour le placement de la tête. Si vous êtes dans Inkscape et que vous n’êtes pas sûr du nom de fichier de l’image que vous utilisez, faites un clic droit, sélectionnez Propriétés de l’image et c’est la valeur dans le champ URL qui apparaît dans la barre latérale.

Exécutez le générateur

Une fois votre modèle prêt, lancez simplement l’extension Next Generator en y chargeant votre CSV. Sélectionnez les variables (noms d’en-tête) que vous souhaitez utiliser dans chaque nom de fichier et copiez-collez votre extrait JSON dans la boîte de dialogue de la Valeurs non textuelles à remplacer champ:

Cliquez sur appliquer et profitez-en !

Résoudre les problèmes de remplacement des couleurs et des images

Je vous laisse avec quelques connaissances durement acquises sur la façon de dépanner lorsque le remplacement de couleur et/ou d’image ne fonctionne pas :

• Les noms d’image ne sont que le nom de fichier. Conservez les images dans le même répertoire que votre modèle. Vous n’avez pas besoin d’utiliser le chemin d’accès complet au fichier. (Cela rendra vos modèles plus portables puisque vous pouvez tarer ou compresser le répertoire et le partager.)
• Noms d’image, valeurs de couleur et noms de variable dans la feuille de calcul ne pas besoin de ” ou ‘ à moins que vous n’ayez besoin d’échapper une virgule (,) dans un champ de texte. Les noms d’image, les valeurs de couleur et les noms de variable nécessitent toujours des guillemets dans le JSON.
• Le caractère # ne précède pas les valeurs de couleur. Cela ne fonctionnera pas si vous l’ajoutez.
• Par défaut, Inkscape vous donne une valeur hexadécimale à 8 chiffres pour les codes de couleur. Les deux derniers correspondent à la valeur alpha de la couleur (ff0000ff pour le rouge vif sans opacité.) Vous devrez supprimer les deux derniers chiffres afin d’utiliser le code hexadécimal à 6 “chiffres” de base pour les valeurs de couleur (qui correspondent aux couleurs RVB) pour supprimer les valeurs d’opacité/alpha du code couleur. Sinon, le remplacement de couleur ne fonctionnera pas.
• Vérifiez que tous les noms de variable dans le JSON sont écrits exactement de la même manière que dans les entrées d’en-tête CSV, sauf avec ” dans le JSON (BackgroundColor1 dans le CSV est “BackgroundColor1” dans le JSON.)
• Utilisez le nom de fichier de l’image par défaut que vous remplacez dans le modèle. Vous n’utilisez pas l’ObjectID ou tout autre identifiant spécifique à Inkscape pour l’image. Aussi, liez l’image au lieu de l’intégrer.