Comment protéger ses images ?

Avec le partage à-tout-va des images sur le net, la question de la protection des images et de leur traçabilité passe souvent à la trappe. Si tant est que vous soyez préoccupé par ces questions, je fais le point ici sur les moyens de garantir la propriété, l'authenticité et la provenance d'une image.

Le Watermark : un tatouage numérique sur vos images

La bonne vieille signature en filigrane est toujours aussi efficace. Vous savez, ce sont ces inscriptions que l'on voit appliquées en transparence dans un coin de l'image ou sur toute la surface d'un visuel. Une méthode efficace largement utilisée par les banques d'images en ligne pour éviter toute utilisation d'image qui n'aurait pas été "achetée".

La plupart des logiciels d'édition photo vous propose cette option avant tout partage sur internet. Vous avez également des plateformes en ligne qui peuvent faire le job comme Watermark.ws ou Watermarquee.com, ou encore sous forme d'application à installer comme visualwatermark.com. Soit vous appliquez le marquage sur toute la surface de votre image (bourrin mais efficace), soit vous l'inscrivez dans un coin de celle-ci, une manière plus élégante mais peut-être plus risquée car vous n'empêcherez pas un recadrage de l'image qui puisse faire la nique au marquage.

Empêcher le clic droit "Enregistrer sous..."

Si vous disposez d'un site internet il est possible de rendre un peu plus ardu l'enregistrement de vos images. Avec un éditeur de site web comme Wix, vous pouvez cochez la case "empêcher le clic droit sur les images". Sur Wordpress il existe des plugins qui vous permettront de vous doter d'un telle fonction.

C'est moins évident avec les plateformes de partage telle que Dribbble ou autres réseaux sociaux, où ils n'existent pas forcément de telles options . Si vous avez votre galerie sur Flickr, le clic droit n'est pas autorisé par défaut. Mais si vous exposez publiquement vos images et travaux sur le web, vous vous exposez forcément à ce que d'une manière ou d'une autre (avec une simple capture d'écran par exemple) au fait que les internautes puissent utiliser votre image.

 

Les Métadonnées : la carte d'identité de vos images

Les métadonnées, que l'on identifiera aussi par les données "Exif" d'une photo, contiennent tout un tas d'informations sur vos images. Véritable "passeport" de vos images, elles peuvent recenser (lorsqu'elles sont renseignées bien-sûr) la provenance géographique de celles-ci mais aussi le nom de l'auteur, le modèle d'appareil photo qui a été utilisé, l'adresse d'un site internet, des commentaires de l'auteur ou encore le copyright !

Attention à ne pas les supprimer (si vous voulez les garder) en exportant vos images dans un format web ou en les passant dans la moulinette d'un ImageOptim qui peut potentiellement supprimer les métadonnées en allégeant vos images ! (Dans le cas d'ImageOptim, vous pouvez décocher cette option).

Limiter la résolution des images

Partant du principe que vous ne pourrez jamais complètement protéger vos images à moins de les couvrir de watermark (au détriment de la lisibilité nous l'avons vu), vous pouvez tout de même contenir les fuites d'images en limitant leurs tailles au strict nécessaire.

C'est une pratique de bon sens à laquelle il faut de toute façon se plier lorsque vous cherchez à optimiser un site web; alléger les images permet non seulement de gagner en vitesse de chargement (c'est même le paramètre N°1 qui "pèse" dans le temps de chargement d'une page), mais cela peut aussi être un moyen de limiter les dégâts en cas de "vol" d'image. En effet, abaisser la résolution (dimensions) et la définition (densité de pixels) d'une image limitera d'autant l'utilisation que l'on pourra en faire. Impossible d'obtenir une affiche 2m x 1m de qualité correcte avec une image de départ de 300 x 100 px. Le rendu serait plus que dégueulasse. Même d'un point de vue artistique. Une astuce toute bête, évidente même, mais qu'il convient de rappeler ici dans le thème.

De l’écologie dans le web ?

Et oui, l'écologie est partout et même dans le web on peut faire des efforts pour diminuer notre impact négatif sur notre environnement. Voici quelques pistes que j'ai recensé pour développer mieux.

Un site léger et optimisé pour moins de consommation

Outre de favoriser le référencement de votre site sur les moteurs de recherche, un temps de chargement rapide de celui-ci participe aussi à diminuer son empreinte énergétique. Car qui dit site léger qui se charge vite dit aussi moins de ressources mobilisées ! Au final ce sont des serveurs qui travaillent (et consomment) moins, et des batteries de smartphone qui vous disent merci !

Aussi, si vous ne le faites pas pour Google, faites-le pour la planète !

Un Dark mode pour les écrans (et les yeux)

En quoi un mode sombre peut-il participer à l'économie des ressources ? Grande tendance qui tend à se généraliser pour les sites web et les interfaces logicielles, le "mode sombre" a d'abord été pensé pour soulager les rétines de nos petits yeux fragiles accros aux écrans, surtout quand vient la nuit. C'est pour cela que l'on entend aussi parler de "night mode" pour désigner cet correspondance assombrie d'un affichage.

Mais l'autre intérêt que l'on peut relever d'une telle option et de permettre d'abaisser la consommation de certains écrans ; ceux basés sur une technologie AMOLED ou OLED.

Pourquoi ? Parce qu'avec ces types d'écrans c'est le rétro-éclairage qui est mis à contribution pour restituer des pixels sombres. Reconnus pour leur taux de contraste élevé et la profondeur du noir qu'ils affichent, les écrans Amoled (fabriqués pas Samsung) et Oled (par LG) "éteignent" les pixels lorsque ceux-ci doivent afficher du noir. On comprend alors comment un mode sombre, qui joue de nuances de gris foncé et de noir, peut contribuer à prolonger la durée de vie des batteries et ainsi retarder le prochain rechargement de celles-ci.

Bémol : ceci ne concerne pas tous les écrans mais uniquement ceux qui régulent dynamiquement leur rétro-éclairage. Cela représente tout de même la majorité des écrans de smartphones et tablettes aujourd'hui.

C'est une petite contribution, mais une contribution quand même !

Des typos "trouées"

Des typographies avec des trous dedans ? C'est quoi cette bizarrerie ? Ça ne parait pas commun et pourtant cela fait déjà pas mal de temps que ça existe dans le milieu de l'imprimerie. Invisibles à l’œil nu, de minuscules trous sont faits dans chaque lettre d'une phrase. Pourquoi ? Pour économiser des gouttelettes d'encre au tirage ! Ca parait bénin, mais les lettres ainsi "évidées" en partie peuvent faire économiser 5 à 10% d'encre à chaque impression. Quand il s'agit de tirer en grande quantité des magazines ou des journaux, on comprend bien l'intérêt d'utiliser des typos "trouées".

Dans le domaine du web il n'y a à priori aucun intérêt à faire appel à de telle pratique... sauf lorsque l'on prévoit un mode spécial pour l'impression d'une page web sur papier ! Eh oui, il est possible de créer littéralement une version spéciale de sa page web prévue pour l'impression, et comprenant alors l'utilisation de typos "gruyères".

Cependant, observer une telle optimisation de page web pour le mode impression est rarissime. Je pense personnellement qu'il doit y avoir moins de 0,5% des sites web du monde entier qui ont été développés à ce niveau de finition. Et encore, je suis généreux...

Mais c'est possible ! Et quand on est animer de velléités écologiste, tout est bon à prendre qui serve la cause.

Guide de style – l’identité de votre entreprise et de ses produits.

Petite définition : il s'agit d'un recueil contenant tous les éléments constituants de la personnalité d'une marque. Il permet de définir une charte graphique et des directives quant à l'utilisation de tel ou tel élément graphique. Il est en somme la notice technique et le gardien de tout ce qui touche à l'identité visuelle d'une entreprise et de ses produits.

Pourquoi créer un tel guide ?

Les intérêts sont multiples: aider tous les membres d'une équipe (et les partenaires) à identifier et utiliser les divers éléments graphiques qui composent l'esthétique d'une marque, mais aussi aider les clients à bien identifier celle-ci. Un guide de style permet de gagner du temps dans l'élaboration d'un projet et permet de faire respecter une identité graphique précise lors d'une communication.

Un guide de style porte bien son nom; il permet de faire respecter l'identité visuelle d'une marque et de ses produits. Et c'est une vraie base de données en interne (Design System) !

Composer son guide de style

Que va-t-on trouver à l'intérieur de ce fameux "guide" ? L'essentiel d'abord : le nom de votre marque (ou de vos marques si vous voulez les regrouper dans un seul guide), les logos relatifs à celle-ci et leur utilisation (on ne peut pas se permettre de faire n'importe quoi avec le logo d'une marque, il faut la respecter !), mais aussi les typographies utilisées et le référencement des couleurs employées.

 

Vous pouvez enrichir votre guide avec des exemples de mises en pages typiques et récurrentes (comme des en-têtes de documents ou des signatures mails), ou encore un listing des divers éléments graphiques que l'on retrouve ça et là dans vos supports de communication (design de boutons, icônes, personnage(s)-mascotte(s), illustrations diverses,...)

 

Ce n'est pas tout ! Un guide de style est aussi l'occasion de parler de l'historique d'une marque et de son "état d'esprit" général. Par exemple, chez Process Management Technology nous faisons une petite introduction en parlant de la vision "positive" que nous avons du développement des technologies et du parti-pris graphique qui en découle et qui affecte tous les produits de la société.

Pensez au support papier comme au web !

 

Synthèse

Pour résumer, on trouve dans un guide de style :

  • Le nom complet de la marque
  • Le(s) logo(s) et déclinaisons (version minimale, monochrome, etc...)
  • Les couleurs utilisées (avec leur code hex et/ou RGBA)
  • Les typographies employées (avec les variations de tailles et de graisses)
  • Les éléments graphiques récurrents (symboles, mascotte,...)
  • Les autres éléments graphiques (illustrations, icônes, boutons, ponctuations,...)
  • Des exemples de mise en page à suivre
  • Des détails sur le "mood" d'une marque et éventuellement son histoire

Pour chacune de ces sections vous pouvez apporter plus ou moins de détails, mais sachez que plus vous êtes précis et plus votre guide de style peut s'imposer comme un référent qui peut faire jurisprudence si vous constatez une mauvaise utilisation de votre logo, par exemple, sur le support visuel d'un partenaire ou lors d'un partage sur les réseaux sociaux.

L'autre intérêt du guide de style, nous l'avons vu, est d'attester à tout un chacun du sérieux d'une marque et de son projet en en cernant tous les aspects visuels (voire même spirituel).

Enfin, le guide de style est surtout utile en interne comme base commune de référence pour tout ce qui touche au visuel. On s'en servira alors comme d'une véritable base de données !

Si ce n'était pas déjà le cas, vous êtes maintenant convaincu de l'utilité de créer votre guide de style. Je vous donne en exemple celui que j'ai réalisé pour les solutions Optimiser comme, à mon humble avis, bonne base de travail ! 🙂

 

Vous êtes unique, votre marque aussi ! Dites-le avec un guide !

Les outils (gratuits) pour trouver les bonnes couleurs

Que vous soyez un(e) Chef(fe) de projet qui souhaite indiquer à son Designer une couleur de laquelle partir pour la création d'un logo ou d'une charte graphique par exemple, ou bien que vous soyez vous-même Designer comme moi, vous apprécierez d'avoir un moyen rapide de trouver LA couleur que vous recherchez. Bonne nouvelle : internet regorge d'outils variés dédiés à cela. Voici une sélection d'outils que j'utilise personnellement :

Picular - le Google de la couleur

capture d'écran picular

 

Un moteur de recherche qui vous propose pêle-mêle tout un tas de variantes de la couleur recherchée (tapez simplement "bleu" ou "rouge" par exemple dans le champ de recherche). Efficace lorsque vous n'avez pas une idée précise de la teinte de couleur que vous recherchez ! On ne peut qu'apprécier la simplicité de l'outil. Essayez ici => https://picular.co

Random Color - pour choisir une couleur au hasard

image rosace random color

 

Joliment présenté sous forme d'une fleur, cet outil vous permet de générer de manière aléatoire une couleur et ses déclinaisons. Intéressant si vous voulez trouver une couleur à laquelle vous n'auriez peut-être pas pensé ! Petite astuce : si vous connaissez déjà le code Hex de votre couleur, vous pouvez l'inscrire dans l'url du site (vous voyez ? Après "colors"), taper sur Entrée et ainsi visualiser les 14 nuances de votre couleur. A tester ici => https://hexcolor.co/random-colors#e9a8b0

Eva Design System - pour les déclinaisons en nuances

capture d'écran eva design

 

Un outil en ligne très pratique qui me permet d'avoir rapidement les déclinaisons plus foncées et plus claires de ma couleur de départ. J'apprécie le mode "nuit" (en haut à droite) qui me permet de voir comment la couleur "réagit" sur un fond sombre ainsi que la fonction d'exportation qui me génère une image jpeg de ma palette (comme une capture d'écran en somme). Le site => https://colors.eva.design

Image Color Code Picker - trouver les couleurs à partir d'une image

capture d'écran color picker

 

Très utile car bien souvent il est demandé de retrouver la référence d'une couleur en partant d'un logo ou d'une image, ou encore d'harmoniser une charte graphique avec des visuels. Image Color Picker est un outil 2-en-1 qui va vous permettre de télécharger votre image et d'en extraire toutes les couleurs, soit au clic en pointant sur la zone de l'image qui vous intéresse, soit en laissant faire l'analyse de votre image par le moteur du site qui va vous sortir alors la palette de couleurs dominantes. Top ! https://www.colorcodepicker.com

Design Seed - pour des palettes de couleurs

capture d'écran design feed

 

Ce que je reproche souvent aux sites qui proposent des presets (palettes) de couleurs déjà faits c'est de ne pas donner la bonne proportion de chaque couleur, car toutes les couleurs d'une palette ne s'utilisent pas à quantité égale ! L' avantage de Design Seed est de donner à voir des nuanciers accompagnés d'une image à chaque fois. Mieux qu'à Leroy Merlin ! Cela permet de se rendre compte des bons accords de couleurs et du dosage de celles-ci "en situation". On apprécie le mode de recherche par couleur, par "saison" ou encore par "collection". https://www.design-seeds.com

Adobe Color CC - pour plus de finesse

capture d'écran adobe color cc

 

Plus pointu et plus précis que les autres références citées ici, l'Adobe Color offre différentes approches pour sélectionner THE couleur et permet d'agir sur différents canaux (teinte, luminance, saturation). Comme la majorité des graphistes (je dirais 99,9%) utilise la suite Adobe, c'est certainement le premier outil à utiliser en tant que professionnel, d'autant plus que vous pouvez enregistrer vos couleurs dans votre compte et les retrouver dans chaque logiciel de la marque. https://color.adobe.com/fr/create/color-wheel/

Hexcolor - La boite à outil ultime du coloriste

capture d'écran hexcolor

 

Il fallait bien que je parle de cette plateforme aux multiples outils qui regroupe (entre autre) : un générateur de palette, un Color Picker, le référencement des couleurs Material Design (comprenez les couleurs de Google), et un générateur de dégradé. Toujours utile à avoir sous la main. C'est par ici => https://hexcolor.co