Effets logos comme pour réseaux sociaux

J’aimerais pouvoir utiliser un plugin qui propose une interface simple pour créer une image « à la réseaux sociaux » à partir du ou des logos d’un article, de son titre et éventuellement de son soustitre, en superposant et appliquant des effets.

Avec une UI un peu comme canva qui semble une référence https://www.canva.com/fr_fr/creer/images-reseaux-sociaux
mais en plus simple.

Pour donner une image avec texte comme celles qu’on voit sur les réseaux sociaux, qui peut s’obtenir par composition des filtres SPIP et donc pour laquelle il manquerait juste des enchaînements de filtres prédéfinis ET/OU une interface graphique de composition et paramétrages des filtres déjà connus (ce dont un créateur de squelette spip peut se passer).

Mais également potentiellement pour créer des logos d’articles avec effets graphiques « avancés » comme par exemple sur https://www.vakita.fr (juste un exemple, ya plein de possibilités), ce pour quoi il faut de nouveaux filtres.
Et de nouvelles librairies pour la détection de contours, de surfaces et de formes, ce qui pourrait constituer un plugin indépendant déjà.
Auriez vous des conseils pour ces librairies ?

Et au final, avec automatisation possible une fois l’algorithme de composition défini. C’est à dire que l’édition aboutit à la définition d’un enchaînement qu’il est possible d’enregistrer pour le réutiliser sous la forme d’un filtre ensuite. Ou au moins : dont on peut récupérer les paramètres pour l’appliquer sous la forme d’un filtre.
Et éventuellement, cet algo se base sur des caractéristiques détectées dans l’image.

Quelqu’un a t il connaissance d’un tel plugin ou idée d’autres manières de faire ?

Ou bien quelqu’un serait intéressé pour co-développer ou co-financer un tel dev ?

1 « J'aime »

Hello @JLuc, je suis à la bourre sur plein de réponses sur le forum, mais j’ai dernièrement travaillé sur ce sujet. en tout cas une petite partie de ce sujet.

Mais pour avoir un UX rapide où l’on peut voir immédiatement ce que l’on fait, je me suis détourné des filtres SPIP / PHP pour travailler les visuels dans un canva html, je pense que ton salut se trouve peut-être là ?

Ton projet global sur le sujet m’intéresse, si t’es partant, on peut en parler de vive voix à partir de jeudi ?

Bonne journée,

Pierre-Jean

Ça donne faim en tout cas !

Exemple de rendu très basique sur instagram :

@Pierre_Jean ç’a l’air sympa ce que tu as fait.
Si ça y est pas déjà, il faudrait donc ajouter la possibilité d’insérer une forme et couleur choisies (un fond) à une position choisie, et l’incrustation d’un texte sur cette forme.
En passant par le navigateur et js je vois moins bien l’automatisation mais doit yavoir moyen de simplifier en proposant des presets.
Genre « contraste 110% + forme (rectangle) en bas sur (25%) de la hauteur, de couleur (une couleur dominante de l’image) + texte (en couleur complémentaire) de taille (calcul en fonction de la longueur du texte) »

Mais pour créer ces logos je veux automatiser au maximum et je préfèrerais qu’il ne faille pas rentrer dans un outil de retouche d’image. J’aimerais au plus devoir choisir parmi 3 variantes proposées des positionnements du texte, avec éventuellement 3 variantes de couleurs des textes dans chacun des cas.

Pour plus de variations (je ne veux pas dire « de créativité » !) dans l’adaptation texte+image, il serait possible d’appeler une IA aussi.

Salut @JLuc , le sujet m’intéresse aussi !

As tu envisagé de passer par un fichier svg ? Ça permet de décrire des gabarits de « composition » composée d’images bitmap, formes vectorielles, masques, filtres (flou, contraste, ombre portée, ou personnalisés…), modes de fusion…

Au niveau rendu, coté client, le rendu est fait par le navigateur et peut si besoin être récupéré en bitmap via un canvas, puis téléchargé ou envoyé au serveur. Coté serveur, si c’est pour produire des images automatiquement comme on peut le faire avec les filtres de Spip, il y a des librairies de rendu de svg en php mais il faut voir quelles fonctionnalités sont bien supportées. [Edit : coté serveur, gd ou convert peuvent être plus efficaces qu’une librairie php]

Ah c’est une option encore. Comme un SVG c’est du texte, on peut avoir un squelette SPIP qui génère un .svg en fonction des options passées en argument. Si le format SVG recèle des complexités et des aberrations contrintuitives et mal documentées, il faut espérer qu’elles ne concernent pas les cas simples de construction.

En faisant comme ça, pour consommer sur place le SVG ça va, mais pour envoyer sur les réseaux sociaux il faut le convertir en JPG et là

Exemples de templates de logos avec fonds et texte ramenés, par kagi pour changer :

Kagi search web+template+banner+with+text+square

Ya de quoi faire

https://www.instagram.com/la_releve_et_la_peste/ donne un exemple de mise en forme simple et lisible, identique pour la plupart des posts. Ce serait une solution de base en un clic, sans aucun paramétrage.

En fait je ne vois pas trop quel est ton but.
Tous les liens que tu donnes sont vers des apps sur lesquelles il faut créer un compte.
Tu ne voudrais pas plutôt publier une galerie d’images qui seraient des exemples de ce vers quoi tu souhaites arriver ?
Peut être même en créant un dépôt sur git.spip.net, et en y ajoutant ces images dans un répertoire ?
On un carnet sur le wiki ?

Le but : proposer un plugin avec un jeu de fonctions et/ou une UI qui permette, aussi simplement que possible genre

  • en 0 clic pour un fonctionnement totalement automatisé
  • ou en 1 clic
  • ou en 2 ou 3 clics pour choisir parmi des pré-paramétrages plus fins,

de créer une image adaptée aux réseaux sociaux /ou/ à publier sur son site, et qui résulte de la combinaison :

  • du logo ou d’un document associé à un article
  • de son titre
  • d’une composition (layout unique ou choisi dans un ensemble prédéfini)
  • d’un choix de couleurs et d’effets pour la composition (idem)
  • éventuellement d’un autre document ou d’un autre texte requis par la composition

« Tous les liens que tu donnes sont vers des apps sur lesquelles il faut créer un compte. »
Tu n’as pas du bien lire. Il y a un seul lien vers une app (canva). Les autres liens vont vers des pages de sites webs qui utilisent de tels effets sur leurs « logos », ou de pages instagram qui en font usage, ou des résultats de recherches qui donnent des exemples immédiatement visibles de ce que cet outil pourrait produire ou de compositions sur lesquelles il pourrait s’appuyer.

Oui, effectivement, j’avais ce fil au cours de l’eau, au rythme des notifications par email (je passe plus de temps sur Thunderbird que sur discuter.spip.net)

N’empêche que : il me semble quand même que tu devrais sélectionner une liste d’exemples d’images qui te paraissent représentatives, pour donner un cadre (même s’il n’est que de départ).
Une sorte de cahier des charges quoi.

Voici une proposition de quelques étapes et éléments de conception :

v1) aucune UI,

juste un filtre appelable dans un squelette, avec un rendu comme sur La releve et la peste qui marche pour toutes les images. Il y a un texte de 1 à 3 lignes, toujours en blanc, avec toujours la même police mais une taille de police qui s’adapte un peu à la longueur du texte. Le fond sous le texte est toujours de la même couleur et transparence, commence plus ou moins au même (y) mais sa taille s’adapte automatiquement au nombre de lignes (1 à 3).

Ça apporte pas grand chose par rapport à ce qu’on peut faire en créant un filtre dans spip, mais déjà ce serait utile.

v2) Ajout d’autres composants :

un petit logo du site à une position fixe, autres arguments du filtre : alignement, un petit soutitre comme fait mediapart ou inversement un gros titre court comme sur telerama avec un plus grand soutitre . Le vocabulaire titre / soutitre / surtitre n’étant pas « stabilisé ».

Ça ajouterait de la finesse.

v3) Un fond de texte de forme, position et fond variable :

  • rectangle à la base (1er exemple donné),
  • absent (2eme exemple) mais je ne sais pas si la qualité de la pré-analyse de l’image sera suffisante pour que les choix automatiques soient toujours satisfaisants pour la lisibilité
  • fantaisie : exemple dans la banque d’image etsy. Les fonds peuvent avoir une forme basique : rectangle, ovale, etc ou complexe ex : freepik etc à concevoir de manière adaptée au positionnement du texte… et à la charte graphique du site.

Ahhhh

v4) Une UI

pour un usage interactif selon disponibilités et besoins ressentis :

  • choisir un parmi plusieurs rendus précalculés proposés, en 1 seule étape.
  • co-construire en choisissant les différents paramètres évoqués ci dessus en 2 ou 3 étapes successives.