Processus de création des visuels iconographiques de France.tv

Camille Lannel-Lamotte
francetelevisions-design
4 min readJan 12, 2018
Exemple de visuels réalisés avec ce processus

Notre mission

Suite à la fusion des sites France Télévisions vers la plateforme unique france.tv, nous avons décidé de retravailler les visuels afin d’apporter une touche qualitative à l’ensemble du produit.

Nos outils

L’équation d’une mission icono réussie :)

Dans l’ordre chronologique, les outils utilisés sont :
Trello, la plateforme en ligne Phototele.com et/ou Google images, Adobe Photoshop, TinyPNG ou ImageOptim et Dropbox.

Vocabulaire

Un lot est une liste de programmes qui nécessite un travail graphique. Un lot est composé généralement de 20/25 programmes.

Procédure étape par étape

1. Trello

Trello est organisé de façon à pouvoir suivre l’avancée du traitement des lots en temps réel. Le tableau est divisé en minimum 6 colonnes :

Liste des colonnes présentes dans le tableau Trello

Dans la colonne “Lots prêts pour dispatch” des cartes nommées “LOT X” (X étant 1,2,3 etc...) sont ajoutées.

Dans la description des cartes : on trouve une liste de programmes triés par priorité de traitement. Une demande correspond à une ligne. La nomenclature de chaque demande est la suivante :

NuméroDuLot / Priorité / NomProgramme / ChaîneDeDiffusion

Numéro du lot : Numéro du lot dans lequel le programme est à traiter.
Exemple : L1

Priorité : 1 étant le plus urgent et 5 le moins urgent. Les programmes sans numéro de priorité sont à traiter seulement après tous les programmes priorisés
Exemple : 2

NomProgramme : Nom complet du programme.
Exemple : Les Minikeums

ChaîneDeDiffusion : Chaîne de diffusion du programme/de la vidéo.
Exemple : F4

Exemple de nomenclature : L1 1 Minikeums F4

Exemple de carte d’un lot

Dans la carte d’un lot, la liste de programme en description est transformée en plusieurs cartes.

Le graphiste déplace alors la carte dans sa colonne. Il se l’attribue et ajoute une étiquette “En cours de réalisation”.

2. Phototélé

Écran d’accueil de la plateforme Phototélé une fois l’utilisateur connecté
Exemple de panier constitué pour le programme “Just married”

Le graphiste se rend ensuite sur le site www.phototele.com, bibliothèque iconographique de France.tv. Il sélectionne les éléments qu’il veut utiliser pour illustrer le programme en créant un panier et en exportant ainsi toutes les images en même temps. Il télécharge alors un fichier archive.

⚠️ Dans le cas où aucune source n’est trouvées sur Phototele, le graphiste déplace la carte du programme de sa colonne à la colonne “Quarantaine”, ajoute l’étiquette “En attente de visuel/logo/infos” et signale à la personne en charge de l’iconographie quels éléments sont manquants, à l’aide d’un @. ⚠️

3. En local

Afin de proposer une homogénéité dans l’organisation du dossier Livrable sur Dropbox, il es préférable d’organiser les éléments dans un dossier par programme. Dans ce dossier, on trouve à la racine les exports PNG. Et dans deux dossiers séparés, on trouve respectivement les PSD travaillés et les sources utilisées.

Un dossier bien rangé !

Une fois les éléments réalisés, le dossier est alors déposé sur la Dropbox.

Pour tout ce qui concerne la façon de produire de bons visuels jusqu’à la manière de nommer les différentes déclinaisons des fichiers, rendez-vous sur l’article de ma consoeur Emilie Garnier 👇

4. TinyPNG/ImageOptim

Une fois les programmes validés par la DA, l’étiquette “Terminé, à valider” est retirée de la carte pour être remplacée par celle nommée “Validé, à compresser”. La carte est alors déplacée de la colonne du Graphiste vers “Carte terminées”.

Afin de compresser les fichiers PNG, il est recommandé d’utiliser TinyPNG, qui est un compresseur de PNG en ligne. En version gratuite, il permet de réduire des lots de 20 fichiers maximum par conversion et dont la taille n’est pas supérieure à 5 Mo pour chacun des fichiers.

Il est aussi possible d’utiliser le logiciel ImageOptim. ImageOptim est un logiciel gratuit et open-source.

Une fois que les fichiers compressés ont été transféré dans le dossier Livrables sur la Dropbox (écrasant ainsi les anciens fichiers PNG), il ne reste plus qu’à retirer l’étiquette “En cours de réalisation” à la carte du programme et ajouter celle nommée “Terminé, en attente de retour”.

Et puis c’est reparti pour un tour ;)

  • Pensez à clapper 50 fois 👏 cet article pour nous encourager à continuer.
  • Pensez à vous abonner à :

--

--