[PICTURAE] Décembre 2020


#1

On dit bonjour à Picturae, pas de dépôt, pas d’url personnelle, juste un lien pour l’instant pour des tests : https://don.partipirate.org/image_generator.html

Vous avez tous rêvé de faire des image comme ça :

unknown

Le principe de Picturae est d’avoir une méthode “unifiée” de conception d’image de propagande. C’est là que Picturae rentre en jeu.

Vous pouvez y définir texte, sous texte, jouer avec les couleurs et logo du PP en intégrant l’image que vous souhaitez.

Aujourd’hui l’outil arrive à fonctionner en standalone (en théorie juste de l’html et du js). Si vous avez des idées d’amélioration je suis preneur.


#2

image


#3

A rajouter :

  • Un champ pour la licence de l’image pour respecter le droit d’auteur

#4

Les tailles de visuels :

Twitter

  • Photo de couverture : 1500 x 500 pixels – JPG, GIF ou PNG – Taille max 5 Mo
  • Photo de profil : 200 x 200 pixels minimum jusqu’à 400 x 400 pixels – JPG, GIF ou PNG – taille max 2Mo.
  • Visuel pour le partage d’une image : entre 440 x 220 pixels et 1024 x 512 pixels – JPG, GIF ou PNG
  • Visuel pour le partage d’un lien : 520 x 254 pixels
  • S’affiche en cercle de 132 px de diamètre

Facebook

  • Image de couverture pour un profil (en rond) : 851 x 315 pixels
  • Photo de profil : 180 x 180 pixels, mais s’affichera au format 160 x 160 pixels sur un ordinateur et au format 140 x 140 pixels sur un smartphone
  • Image de couverture pour une fan page : 820 x 312 pixels
  • Photo de profil d’une fan page : 180 x 180 pixels
  • Image de couverture pour un groupe Facebook : 820 x 428 pixels
  • Image de couverture pour un événement : 500 x 262 pixels
  • Image seule dans un post : 1200 x 630 pixels
  • Image dans un lien : 1200 x 627 pixels – minimum 600 x 315 pixels

Instagram

  • Photo de profil : 150 x 150 pixels au minimum
  • Image carrée : 1080 x 1080 pixels, mais apparaîtra en 293 x 293 pixels dans le fil d’actualité
  • Image verticale : 1080 x 1350 pixels, mais apparaîtra en 293 x 293 pixels dans le fil d’actualité
  • Image horizontale : 1080 x 566 pixels, mais apparaîtra en 293 x 293 pixels dans le fil d’actualité
  • Image/vidéo pour les stories : 750 x 1334 pixels

LinkedIn

  • Image de couverture du profil : 1584 x 396 pixels mais ne seront visibles que 1350 x 220 pixels – JPG, GIF ou PNG – 8 Mo max.
  • Photo de profil : 400 x 400 pixels au minimum – JPG, GIF ou PNG – 8 Mo max.
  • Image de couverture d’une page Linkedin : 1584 x 396 pixels mais ne seront visibles que 1350 x 220 pixels – JPG, GIF ou PNG – 2 Mb max. Linkedin conseille une taille maximum de 1128 x 191.
  • Photo de profil d’une page Linkedin : 130 x 130 pixels au minimum.
  • Image seule dans un post : 520 x 320 pixels, mais les dimensions 600 x 315 pixels semblent plus adaptées – 2 Mo max.
  • Image d’un lien : 520 x 272 pixels

Youtube

  • Photo de profil de la chaîne : 800 x 800 px, affichée en 98 x 98 px – JPG, PNG, GIF ou BMP
  • Image de couverture de la chaine Youtube : 2560 x 1440 pixels
  • Image de couverture de la chaine Youtube pour tablette : 1855 x 424 pixels
  • Image de couverture de la chaine Youtube pour mobile : 1556 x 423 pixels
  • Image d’aperçu d’une vidéo : 1280 x 720 px, la vidéo doit avoir un ratio de 16:9

Twitch

  • Photo de profil : 800 x 800 px minimum – JPG, PNG ou GIF
  • Bannière du profil : 1200 x 480 px – JPG, PNG ou GIF – 10 Mo max
  • Image miniature d’une vidéo : 1280 x 720 px
  • Bannière du lecteur vidéo : 1920 x 1080 px – JPG, PNG ou GIF – 10 Mo max

Source : https://graphiste.com/blog/tailles-visuels-reseaux-sociaux


#5

Et voilà :

image%20(10)


#6

image%20(11)

Rajout du mode noir, filet plus fin :wink:


#7

Bienvenue à Picturae \o/

J’ai deux petites questions toutefois :


#8

Vraiment excellent !

Je m’interroge juste tout haut (avec la naïveté du jeune pirate débutant) sur les usages et les limites de ces outils : comme j’ai accès à cette publication, est-ce à dire que tous les adhérents pirates peuvent publier avec ce magnifique visuel… à l’aspect quasi-officiel ?

Le risque étant que n’importe quel pirate puisse publier n’importe quoi, n’importe quand, n’importe où, n’importe comment… avec un vernis d’officialité plus ou moins voulu.

Comment distinguer un visuel qui exprime l’opinion du parti, d’un visuel qui exprime la position particulière d’un pirate ? Est-il possible de contrôler ce qui est fait avec cet outil ?

Je me doute bien que les mêmes questions se posent de manière générale avec d’autres médias (présence du drapeau pirate sur les réseaux ou en manif, …). Mais cet outil est tellement attrayant et simple d’utilisation, que la question me semblait intéressante, au moins pour connaitre les réflexions à ce sujet…


#9

Comme indiqué, c’est encore en test/rodage, donc j’ai fait avec ce que j’avais sous la main.

Un peu comme au dessus, il me fallait une url de base pour poser le truc sans avoir embêté tout le monde et ne pas avoir à faire du travail inutile.


#10

Derniers ajouts :

  • Gestion de la taille du logo
  • Gestion d’un cadrage
  • Gestion de la taille de la police
  • Mise en place des tailles d’image indiquées par @Florie
  • Alignement du texte

#11

Bonjour,

Ce message est un petit rappel. Je prends le temps aujourd’hui, à la lecture de certains messages ici et ailleurs, de rappeler les informations de base pour qu’on puisse travailler correctement ensemble. N’y voyez donc aucune agressivité, je viens de passer une heure à l’écrire alors que je suis très fatiguée (je couve un truc, pas votre faute), et j’aimerais que vous le lisiez avec toute la bienveillance que je m’applique à y mettre compte tenu des circonstances.

Ce travail présenté ici par Farlistener fait partie des projets du Conseil des Relations Publiques. Cela fait un moment que nous avions projeté de disposer de notre propre générateur d’illustrations, la tâche a longtemps été indiquée dans notre liste de tâches.

La semaine dernière, après des mois de recherche, j’ai enfin retrouvé le générateur développé par le Parti Pirate Allemand en 2019 pendant les européennes et Farli travaille aujourd’hui et depuis quelques jours, à la demande du CRP, et parce qu’il sait à quel point cet outil peut être pratique pour le CRP et l’équipe communication, à une adaptation française sur mesure.

L’outil original est ici : https://ppic.stoppe-gp.de/fr/

Nos communications officielles sont publiées sur nos outils officiels. Tout ce qui ne l’est pas ne peut être considéré comme officiel.

Ceci étant dit, je ne pense pas faire la promotion de cet outil sur notre site Internet ou les réseaux sociaux du PP afin d’éviter que ce que tu crains ne se produise trop souvent, et même sans cet outil, il y aura toujours un risque que des communications qui sembleraient officielles soient réalisées avec notre charte graphique puisque notre charte graphique est publique.

Je pense qu’on peut décemment envisager que tout ce qui n’est pas validé par le PP est facilement condamnable, et que si des personnes se permettent de détourner notre charte graphique pour nous faire dire des choses que nous n’avons pas dites, soit nous les ignorons (comme on fait la plupart du temps, pour éviter d’y prêter du crédit ou d’y donner de l’importance) soit nous publions un démenti.

Les Pirates font confiance, on peut partir du principe qu’il y a une forme de respect des couleurs partisanes. Il y aura toujours un risque de toute façon, avec ou sans cet outil, donc pour moi cette question n’a pas vraiment de sens.
Si on voulait absolument se protéger de ce genre de pratiques, alors on devrait supprimer nos logos et notre charte graphique de notre Wiki, et compte-tenu de ce que nous défendons, ça n’aurait là encore pas vraiment de sens.

Non, et il est également impossible de contrôler quoi que ce soit en la matière, n’importe qui n’importe quand peut nous faire dire n’importe quoi avec ou sans cet outil.
L’avantage de cet outil est qu’il nous permettra au moins à nous de dire des choses en notre nom proprement.
J’aimerais par ailleurs qu’il nous permette également de déployer des templates dédiés pour certaines occasions, ou pour certains usages le nécessitant en interne.


Le Parti Pirate dispose d’une charte graphique qui prévoit les logos qui sont actuellement indiqués sur l’outil (dont le logo partipirate.fr), la police Ubuntu ainsi que les couleurs noir, blanc et violet.

La charte graphique est indiquée dans le Règlement Intérieur du Parti Pirate, Article 424, et l’alinéa 4 prévoit le logo “partipirate.fr” et non “partipirate.org”.

Article 424-4
Pour former un logo “partipirate.fr”, le “.fr” doit être écrit en police ubuntu, normale, noir ou blanc comme le mot “parti”.

Ici, Farlistener ne fait qu’appliquer la charte actuelle prévue dans notre Règlement Intérieur. Et il a pioché les logos qui sont enregistrés sur le Wiki : https://wiki.partipirate.org/Catégorie:Logo

Il est prévu que ces logos, police et couleurs changent légèrement en début d’année avec notre nouvelle charte graphique.
En effet, le Parti Pirate a voté l’adoption du cahier des charges du “Portail Pirate” en juillet dernier, et dans ce cahier des charges nous avons prévu de changer la charte graphique dans les trois mois qui suivent son adoption. Nous avons pris du retard, mais les travaux sont en cours.


Si ça vous intéresse et que vous souhaitez donner votre avis sur les choix graphiques du PP, les rendez-vous sont prévus tous les mardi à 21h sur Discord.
Les réunions communications ont été organisées sur ma proposition pour permettre à tout le monde de participer aux choix en matière de communication du PP.
C’est notamment pendant ces réunions que nous indiquons nos avis sur les orientations et la stratégie de communication du PP.
Ces réunions font l’objet de compte rendus que je veille à diffuser sur des sujets auxquels vous avez tous accès pour vous permettre de réagir.
Le dernier compte-rendu est ici : https://discourse.partipirate.org/t/cr-reunion-communication-du-15-12-2020/21813
Les prochains seront tous publiés ici : https://discourse.partipirate.org/c/equipes-conseils-secretariat/comptes-rendus

Je fais tout mon possible pour communiquer le mieux possible sur toutes nos décisions et sur les orientations que nous prenons, et pour associer le plus de monde possible à ces décisions afin qu’elles soient les plus collégiales possible et surtout pour inciter tout le monde à participer le plus possible.

Aussi, alors que cela fait l’objet de beaucoup d’échanges et que j’entretiens le plus possible une transparence dans les prises de décision en la matière, je ne comprends pas bien pourquoi je lis ici une question sur la charte graphique du Parti Pirate.

Mais j’en profite pour rappeler que nous avons besoin d’aide en la matière, et que toute aide sera la bienvenue, notamment sur les questions de communication graphique et de webdesign.

Et enfin, j’en profite pour rappeler à nouveau que je ne suis pas du tout graphiste, Farlistener non plus, et que toutes ces questions reposent actuellement beaucoup sur lui et moi alors que ce n’est pas du tout notre rayon.

L’idée de disposer de cet outil c’est aussi le seul moyen que j’ai trouvé pour nous rendre la tâche plus facile, notamment pour les publications sur nos réseaux sociaux que je dois réaliser de plus en plus souvent puisque nous produisons de plus en plus souvent du contenu (tant mieux, mais ça repose un peu trop sur moi là, je vous le dis tout net, si on continue comme ça, le jour où je trouve un taf ça risque de faire un gros vide, et le jour où je tombe malade, comme aujourd’hui, il n’y a personne pour prendre le relai, et moi ça m’inquiète beaucoup).

Je vous rappelle que je suis aussi bénévole que vous et que moi aussi j’ai une vie et autre chose à faire que de m’occuper de la communication du Parti Pirate, que ce n’est pas mon métier dans la vie (je ne suis absolument pas graphiste, ni même dessinatrice, je suis simplement autrice, je sais écrire, pas dessiner), et ce n’est pas du tout mon rôle au PP, et d’ailleurs il y a de la place, beaucoup de place, au sein de l’équipe communication, dont je ne suis pas membre, pour toutes les personnes qui souhaiteraient se charger de ces questions là.

Donc, pour résumer, et encore une fois avec bienveillance et bonne humeur et malgré cette lassitude qui transparait sans doute dans mon message :

  • Si vous avez des remarques sur la forme de l’outil, ce que demande Farlistener, pour rendre cet outil pratique pour l’usage que nous en aurons : c’est le moment de les faire.
  • Si vous avez des remarques sur la charte graphique ou nos choix en matière de communication : Tous les mardis à 21h.
  • Si vous souhaitez participer à la réalisation de travaux graphiques qui nous éviteraient d’avoir à recourir à ce genre d’outils, il y a de la place au sein de l’équipe communication : Postulez.

Le message initial de Farlistener disait :

Cela concernait l’outil, pas notre charte graphique ni notre stratégie de communication globale.


#12

Petite dernière fonctionnalité : le bouton auto à côté de la gestion de la taille de la police. Appuyer dessus permet un ajustement automatique de la taille de la police pour que le texte puisse prendre le maximum de place dans la zone de texte.

Subtilité : la taille du sous texte est d’un rapport 3:4 avec la taille du texte et le trait séparateur est d’une épaisseur de rapport 1:12 avec la taille de la police arrondie au supérieur.

Attention dans certains cas, l’outil génère des blancs, une investigation est en cours. Si vous expérimentez et que vous arrivez à coup sûr à déterminer la cause du truc, ça m’intéresse.


#13

Bravo pour ce super outil qui peut effectivement faciliter la tâche pour la comm. J’adore. j’en déduis donc que c’est un outil maison. Dommage, J’y aurai eu une utilité pour tout un tas de sujets!


#14

Autre que pour le PP ? Bah tu aspires en théorie cette page (tant que ce n’est pas sur un dépôt), tu transformes en mettant tes paramètres par défaut, et hop là en théorie tu as ce qu’il faut pour ton truc maison :slight_smile:


#15

Oui mais copié sur celui d’une autre maison…


#16

À noter que si vous avez besoin d’un format d’image spécifique qui ne serait pas listé, merci de m’en faire part (genre pour créer des images d’illustration d’une newsletter :wink: )

En train d’arriver aussi, la possibilité de télécharger le profil de votre image (sans les textes, ni l’image de fond), puis plus tard de téléverser ce profil pour un autre texte, une autre image, et garder un style uniforme.


#17

Avant tout, bon rétablissement Florie !
Merci pour ta réponse très complète.

Je souhaite juste préciser que ma question portait bien sur l’outil et pas la charte graphique. Quand j’écrivais “le logo ne devrait pas être .org ?”, je parlais bien du logo utilisé dans l’outil, pas du logo du PP. Je croyais d’ailleurs que le logo officiel du PP était en .org, et que le logo .fr dans l’outil venait du générateur allemand qui ne l’aurait pas actualisé.

J’en profite pour rebondir sur l’invitation à participer aux travaux graphiques. Je ne sais pas quelles sont les attentes du PP sur ce point : je proposerai bien de l’aide mais je ne suis ni graphiste de métier ni de formation. Je bidouille un peu sous gimp et inkscape, c’est tout (voir le même pirate venant du PP tchèque). Je ne me sens pas vraiment légitime pour proposer mon aide pour des travaux graphiques, mais si mes simples compétences vous suffisent, je serai heureux d’apporter un coup de main.


#18

Et donc les dernier update d’hier soir :

  • Vous pouvez sélectionner le mode manuel pour les couleurs
  • Le bouton “sauvegarder profil” permet de sauvegarder le profil de votre image : log, couleur, positionnement… (mais pas les textes), dans un fichier .json
  • Au dessus vous avez “Charger profile” qui vous permet de … charger un profil, précédemment sauvegardé, pour appliquer un style identique

L’application tourne toujours sans base de données ni interpréteur côté serveur


#19

Picturae, mode d’emploi

Parlons peu, parlons techno : HTML, JS, CSS, jquery, bootstrap, html2canvas. Pas de PHP, nodejs ou autre, pas de base de données, non tout est client-side.

Maintenant que cela est évacué, l’outil :

image


Bouton : image

Il permet de télécharger un PNG de votre image.


image

Comme l’indique les textes de bases, ça permet de gérer la première partie (en majuscule) et l’explication dans une police plus petite. C’est aussi ici qu’on choisit la police et sa taille.

Le bouton Auto permet d’ajuster la taille de la police à la zone de texte pour maximiser l’espace utilisée pour celui-ci.


image

Cette zone permet de choisir les dimensions de sortie de l’image, notamment au regard des outils/réseaux sociaux (non la zone n’est pas libre, mais ce n’est pas paint, non plus).
Utile pour faire une série d’image pour différents réseaux sociaux aux bonnes dimensions.


image

Dans cette zone vous pouvez configurer un peu plus le style de votre image avec la gestion d’un setup de couleur, l’opacité du fond sur lequel est écrit le texte, la position de ce dernier.
Vous pouvez aussi fixer la proportion espace de texte par rapport à l’espace totale de votre image ainsi que son positionnement et son alignement.
Le cadrage permet de rajouter des marges autour du texte.

Le bouton Auto rencontré ci-avant est à utiliser en conjonction avec le cadrage, la proportion et la taille de l’image.

Pour finir, l’image de fond vous permet de téléverser sur le navigateur une image qui servira de fond et/ou de propos imagé.

Si vous choisissez de gérer vous-mêmes les couleurs :

image


image

Ici, on gère le logo à afficher en centre-bas de l’image, ainsi que sa taille.


Pour finir :

image

Cette partie vous permet, hors texte, d’enregistrer vos paramètres de couleurs, d’opacité, de logo… dans un fichier json, que vous pouvez, la prochaine fois, téléverser pour remettre les paramètres sauvegardés.


image%20(26)