Petit truc auquel je pense pour mettre un logo ou un picto en aplat de couleur dans Photoshop. En effet, le premier réflexe que l’on a pour teinter un logo dans Photoshop, on pense à le sélectionner et à le remplir de la teinte de son choix.
Ca fonctionne, certes, mais le résultat n’est pas très propre car on récupère des pixels parasites autour de l’image.

Bien entendu, la meilleure solution est d’intervenir dans Illustrator, mais souvent d’une part on n’a pas le fichier source, d’autre part c’est plus long d’ouvrir le fichier dans Illustrator, le modifier, l’enregistrer et le réimporter dans Photoshop.

Pour quelle utilisation avons-nous besoin de passer un logo dans une seule couleur ?
Il s’agit le plus souvent d’encarts ou l’on a besoin de lister des partenaires/fournisseurs/sponsors d’une société. La diversité des logos (tailles, formes, couleurs et typos différentes) est telle qu’il est recommandé de les unifier visuellement pour ne pas polluer la mise en page avec une multitude d’images disparates. C’est justement le rôle des graphistes de veiller à assurer une mise en page homogène.

Voilà ma recette qui garantit une colorisation sans dégradation d’image.
1 – on importe les logos dans le document, ce peut être un picto, un texte, peu importe. Chaque logo génère automatiquement un nouveau calque.

2 – on aplatit tous les calques

3 – dans la fenêtre de calque on choisit l’effet « incrustation couleur ».

4 – on détermine la couleur et on applique l’effet.

Ca parait évident, mais quand je vois dans la presse ou sur la toile le nombre de logos abîmés, je me dis que ce n’est pas du luxe !

En temps que graphiste professionnel, je me dois de toujours travailler avec les dernières versions de logiciels et suivre ainsi l’évolution de leurs avancées techniques. Bien souvent, les bonnes surprises sont au rendez-vous : les développeurs pallient aux défauts des versions précédentes et apportent des évolutions de niveaux différents. Parfois les modifications apportées sont légères et on râle d’avoir investit dans une nouvelle version pour peu de technologie en plus, en revanche bien souvent ce sont des révolutions majeures.

Parmi les évolutions les plus significatives, notons l’apparition des calques dans Photoshop 5, la vectorisation dynmaique d’Illustrator CS3, ou une nouvelle manière de concevoir l’espace de travail dès les premières mises à jour d’InDesign.

En revanche, allons savoir pourquoi, les développeurs ont la facheuse tendance, régulièrement, de déplacer, de compliquer l’accès, voire de supprimer carrément des fonctions très utiles lors d’un changement de version. Dans ces cas là, on ne comprend vraiment pas certains choix des éditeurs.

Bref, tout cela m’amène juste à cette petite option de Photoshop CS qui a disparu par la suite (en tous cas je ne l’ai plus jamais retrouvée), il s’agit de l’édition de planches-contact.
Le principe est le suivant : indiquer à Photoshop un dossier à sélectionner, sous-dossiers compris, et de lui demander de faire une planche de vignettes légendées avec les noms de fichiers.

Pour moi il s’agit d’une fonction fondamentale, que j’utilise à titre pro et perso. Que ce soit pour organiser des recherches iconographiques de photos achetées sur le web, des lots de photos produits de clients ou mes photos de week end, je ne peux me passer de cette fonction.

D’une part, la possibilité d’édition de planche-contact a disparue depuis Photoshop CS, mais de plus il faut la dénicher ! Le chemin d’accès est « fichier -> automatisation -> planche-contact2″.

En faisant des recherches régulières d’images sur internet, j’apprécie de pouvoir avoir des images de bonne qualité afin de pouvoir zoomer ou m’en servir comme modèles de dessin.
Par contre, je doute que bien souvent ce choix du webmaster de mettre en aussi grand format des images soit un parti pris, c’est bien plus souvent un webmaster qui ne sait pas comment optimiser ses images pour internet.
La forte progression des abonnés au haut débit ne doit pas occulter le fait qu’il est important d’avoir des sites conçus intelligement en terme de rapidité.

Quel est l’intérêt d’optimiser ses images ?
Il y en a plusieurs, et les intérêts sont valables aussi bien pour les webmasters que pour les internautes.
Pour le webmaster : de grandes images mettent plus de temps à apparaître sur une page html, et l’on sait bien que l’internaute déteste attendre. S’il doit patienter pour voir des photos ou des dessins, il ira vite voir ailleurs.
D’autre part, le risque pour le détenteur du site est de se voir piller ses visuels par des internautes peu scrupuleux (et il y en a bien plus qu’on ne l’imagine).
Pour l’internaute, un site affichant des images optimisées est très satisfaisant : les images s’affichent instantanément et il ne perd pas de temps à surfer sur le site.

Egalement, le nombres de personnes consultant internet de plus en plus régulièrement sur des Smartphones est en hausse continue (iPhone, Blackberry & co), ces petites merveilles n’ont pas forcément de grands écrans pour apprécier de grands visuels, et leurs débits n’égalent pas encore ceux de l’ADSL.

Comment préparer les images pour le web
La première étape est de connaître la taille à laquelle le visuel doit s’afficher. S’agit-il d’une grande photo, d’une vignette, d’un picto ? La photo va-t-elle venir sur un fond de couleur, y a-t-il de la transparence à prendre en considération ?

La taille de l’image
D’une manière générale, une grande image va être lourde à charger, il vaut donc mieux calmer les ambitions et favoriser des images de taille raisonnable. D’une part les internautes n’ont pas forcément tous des écrans gigantesques (quoi que l’on constate une évolution du taux d’équipement de moniteurs qui va dans ce sens), d’autre part de grandes images sont inconfortables à visualiser si l’on n’a pas un minimum de recul par rapport à son écran.

Le mode colorimétrique
Contrairement à l’impression qui doit être en mode CMJN (Cyan Magenta Jaune Noir), les images dédiées à l’affichage sur moniteur doivent être en mode RVB (Rouge Vert Bleu), que ce soit pour le web, les CD Rom, la TV, etc…

La résolution
Les 3 résolutions moyennes constatées sont 304 dpi – 180 dpi et 72 dpi. Les deux premières sont optimisées pour l’impression, mais pour un affichage sur écran, il faut passer les visuels en 72 dpi. Ainsi le poids sera nettement plus léger et amplement suffisant pour un affichage de qualité.

Pour les chanceux dont les graphistes professionnels qui sont équipés de Photoshop, une option permet encore de gagner énormément de poids pour les images. La fonction est on ne peut plus claire : « enregistrer les images pour le web ». Différents modes de compression sont proposés « gif, jpg et png », avec beaucoup de paramètres qui permettent de gagner du poids.
Attention, il est important de garder en tête que bien souvent « gain de poids » = « dégradation de l’image ». Des choix sont donc à prendre en compte : des visuels d’importance moindre peuvent être allégés drastiquement et être un peu altérés en termes de qualité, en revanche il serait dommage de sacrifier la qualité d’un beau visuel au détriment de l’optimisation.

Les types de formats (gif, jpg, png)
Ce sont les 3 formats standards d’enregistrements de visuels, chacun correspond à des besoins spécifiques pour le net.
.gif utilisé essentiellement pour des images ayant peu de dégradés, surtout des aplats de couleurs (parfait pour des logos ou des pictos). Le gif prend en considération la transparence, et surtout l’animation (les gifs animés).

.jpg permet de réduire très fortement le poids d’une image de type photographique. Les nuances sont bien conservées si on reste dans des taux de compression raisonnables.

.png est similaire au gif, à savoir le traitement optimal de la transparence, en revanche on ne peut pas faire d’animations dans ce fichier.