Published on

Générer des images de titre automatiquement pour vos présentations

Authors
  • Name
    Anthony Rabine

Beaucoup de sites offrent des éditeurs de texte avancé pour décrire vos projets : Steam, Itch.io, financements participatifs ou de type "pourboire" (Patreon, Tipeee). Or, l'éditeur proposé est souvent un peu aride. Une belle présentation permet de sortir du lot et souvent le seul moyen de peaufiner votre page est d'utiliser des images. Pour les titres, voici une solution.

Mise en situation ​

Vous possédez un site de financement ou une page décrivant votre jeu vidéo. Ajouter de jolis titres permettra de proposer une jolie description de votre service. La solution manuelle est d'éditer chaque titre via votre logiciel de dessin favoris.

Exemple ici avec une page de finacement participatif sur Ulule :

image

Notre solution, à base de script bien entendu car on est développeur,

On commence par le fond ​

Nous allons par commencer à dessiner notre fond de titre sans écriture.

Dans notre exemple, on va préparer un rectangle avec un joli fond et une déco :

image

Pour ma part, j'utilise le logiciel Inkscape et le format vectoriel SVG ; vous pouvez ainsi exporter en PNG haute résolution, généralement les sites redimentionneront pleine largeur parfaitement bien.

Le script ​

Nous allons faire appel à deux utilitaires :

  • Python, parce que c'est portable et toujours mieux que du script Bash à la syntaxe pas terrible
  • Convert, l'utilitaire à tout faire fournit par ImageMagick

Si vous êtes sous Debian je pense qu'un apt install imagemagick devrait tout installer.

Maintenant, le script en lui-même :

python
import os
import unicodedata
import re

def slugify(value, allow_unicode=False):
    """
    Taken from https://github.com/django/django/blob/master/django/utils/text.py
    Convert to ASCII if 'allow_unicode' is False. Convert spaces or repeated
    dashes to single dashes. Remove characters that aren't alphanumerics,
    underscores, or hyphens. Convert to lowercase. Also strip leading and
    trailing whitespace, dashes, and underscores.
    """
    value = str(value)
    if allow_unicode:
        value = unicodedata.normalize('NFKC', value)
    else:
        value = unicodedata.normalize('NFKD', value).encode('ascii', 'ignore').decode('ascii')
    value = re.sub(r'[^\w\s-]', '', value.lower())
    return re.sub(r'[-\s]+', '_', value).strip('-_')

titles=["Projets logiciels", "Projets électroniques", "Projets écrits", "Pourquoi Tipeee ?", "Liens"]

for title in titles:
    print(title)
    cleaned_title = slugify(title, False)
    print(cleaned_title)
    os.system("convert -font 'QARVIC' -fill black  -pointsize 50 -draw \"text 120, 85 '" + title + "'\" background.png title_" + cleaned_title +".png")

La variable "titles" est un tableau contenant vos titres à générer, dans toutes vos langues par exemple.

Le script Python fait appel à l'utilitaire "convert" qui colle un texte à une certaine position (X, Y), avec une police de caractères et une taille.

La fonction slugify permet de normaliser une chaîne de caractères pour pondre un nom de fichier compatible avec les systèmes de fichiers.

L'option -fill black permet d'écrire dans la couleur que vous voulez (un texte blanc sur fond foncé rend pas mal).

Dernière astuce : attention au nom de la police de caractères, ce n'est pas forcément intuitif.

Pour connaître le nom exact, casse comprise, exécutez la commande suivante :

shell
 anthony~> identify -list font | grep -i Qarvic
  Font: QARVIC
    family: QARVIC
    glyphs: /home/anthony/.fonts/q/QARVIC.ttf
  Font: QARVIC-Grunge
    family: QARVIC Grunge
    glyphs: /home/anthony/.fonts/q/QARVIC_Grunge.ttf
  Font: QARVIC-icon
    family: QARVIC icon
    glyphs: /home/anthony/.fonts/q/QARVICicon.ttf

Ici par exemple il trouve trois font "Qarvic" mais attention aux majuscules !

Voici le résultat :

image