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″.

Dernièrement j’ai rencontré des soucis vraiment problématiques d’impression à partir de pdf issus de fichiers InDesign. Ces problèmes sont apparus aussi bien en production numérique qu’offset. En effet, après avoir exporté mes fichiers en pdf haute définition à partir d’InDesign (CS4), des zones de surimpression sont apparues.

D’une part lorsque des blocs étaient superposés, d’autre part avec des effets d’ombre portée sur des blocs de couleur.
Avec mon imprimeur nous avons regardé en détail les paramètres d’InDesign, notamment bien sur tout ce qui concerne les options de surimpression, de densité du noir, mais rien à faire, à chaque test d’impression nous étions confronté au même problème. Nous avons lancé la production à partir des fichiers natifs .indd et également à partir des pdf générés.

Finalement, nous avons trouvé une astuce : nous avons exporté des pdf haute définition que nous avons cette fois ouvert dans Photoshop. Avec la pipette nous avons bien relevé les zones problématiques, et nous sommes intervenus dessus à coups de brosse et de tampons avec une valeur correcte de couleur.

Certes, la manipulation est vraiment tirée par les cheveux, mais au final l’impression était impeccable, et c’est bien sûr le résultat qui compte pour tout graphiste qui se respecte !

Que sont les CSS ?

Les Cascading Style Sheets sont une avancée révolutionnaire, qui permettent d’un coup d’un seul pour un graphiste de modifier l’apparence d’un site internet. Tout logiciel de mise en page permet de concevoir et d’appliquer des feuilles de style, et permet ainsi d’automatiser l’ensemble des attributs graphiques d’un texte.

La hiérarchie d’un article

Il est important d’avoir plusieurs niveaux lectures dans un texte, qu’il s’agisse d’un magazine, d’une brochure institutionnel, d’un site ou même d’un blog.
Le contenu proprement dit d’un article est le texte courant. A celà s’ajoute un titre d’appel qui donne au lecteur en quelques mots la synthèse de ce qu’il va lire. C’est la formule minimale : titre + texte courant.

Ensuite, il est important de multiplier les entrées de lecture par des procédés divers et variés. Souvent un nom de rubrique permet d’indiquer à quel domaine fait référence le sujet de l’article.
Avant d’entrer dans le vif du sujet, au chapeau introduit la lecture en quelques lignes. Le lecteur peut ainsi comprendre les tenants et aboutissants de l’article.

Une porte d’entrée est également l’illustration qui aura intérêt à être légendée.
Enfin, pour casser la densité d’un article qui peut s’avérer rébarbatif car très long, des exergues sont les bienvenues. Ce peut-être une citation d’un interlocuteur, une expression mise en avant, par des guillemets ou autre astuce graphique.

Pour résumer les entrées :
Nom de rubrique
Titre
Sous-titre
Chapeau
Légendes de photo
Exergues
Texte courant

Avec tout cet arsenal de « titraille », même si votre sujet n’est pas lu complètement, le lecteur aura saisi d’un coup d’œil le sujet et l’esprit de votre message.

Les feuilles de styles

Pour bien marquer leur différence, le fond et la forme de ces composants de texte ont leur importance, c’est justement ce qui crée une hiérarchie contextuelle.

Un titre sera par défaut l’élément le plus visible, un nom de rubrique sera habituellement mis en retrait de manière discrète, un chapeau en gras italique, une légende en maigre italique, et le texte sans fioriture. Ce ne sont bien sûr que des généralités, après c’est justement au graphiste de jouer. Evidement, le support même ainsi que les sujets traités donnent l’esprit graphique à apporter. Un blog sur un groupe de muisque et un rapport instituionnel n’auront pas les mêmes codes, mais cependant intrinsèquement ils auront malgré tout une hiérarchie de contenu à respecter.

Les feuilles du style pour le web

Il y a évidement beaucoup moins de choix de styles de textes pour le web que pour le print. Il faudra se débrouiller avec un arsenal moindre, mais c’est justement un bon challenge de concevoir une mise en page avec peu de moyens.
Pour commencer, le choix des polices est des plus limités, il faudra se cantonner avec des polices très usuelles.

Ensuite concernant les tailles de textes, la précision est beaucoup moins fine que pour le papier : taille des caractères, approches et interlignes ne sont pas très flexibles.
On peut donc jouer avec une ou deux familles de caractères, des solutions classiques de regular, gras ou italique et des gammes de couleurs.

Les CSS

Les CSS consiste donc à déterminer des emplois types de style en fonction d’une utilisation donnée, nous retrouvons les titres, rubriques, chapeaux, légendes et textes courants, ainsi que les liens.

Le but est de créer un fichier CSS, qui permet d’attribuer très précisément à tous ces composants de textes les styles désirés. Plus que les textes, il est possible de définir le fond de couleur des pages du site.

Personnellement je trouve le système vraiment facile et agréable à l’utilisation, d’autant que le CSS peut être interne à la page (auquel cas il n’est appliquée qu’à celle-ci), ou extérieur et dans ce cas de figure les performances sont prodigieuses.

En effet, il est possible sur l’intégralité d’un site de modifier instantanément tous les attributs. D’un coup la couleur de tous les titres, la taille des noms de rubriques, l’aspect des légendes et le graphisme des liens changent sur l’intégralité des pages.

Force est de constater que la plupart des blogs sont conçus en CSS, ainsi il est courant de voir chez les hébergeurs de blogs des thèmes entiers de skins complètement personnalisables. Dès que l’on choisit un thème graphique, l’ensemble du blog change ainsi immédiatement de look de manière automatique.

Comment créer les CSS

Chaque élément de texte correspond à un code source spécifique. Il suffit donc d’indiquer précisément pour chacun de ces éléments quelle est la police, la taille, la couleur et le style (gras, italique…) désiré.

Pour ce faire il vous faut un éditeur CSS, ou alors connaître le développement et entrer directement en mode source les codes des attributs.

Tous ces éléments sont listés dans votre fichier CSS (qui a pour extension .css), et il suffit de faire une liaison entre votre page (ou votre site entier) avec ce fichier css pour appliquer partout les feuilles de styles.

Un exemple concret est ce blog sur lequel vous surfez. A la base j’ai essayé un hébergeur de blogs, puis comprenant les grandes lignes du procédé, j’ai appris à mettre en application les feuilles de styles pour gérer la mise en page de manière entièrement automatisée.

Qu’est-ce qu’une vectorisation ?

C’est l’action de transformer du texte en image afin d’en figer l’aspect, et ainsi de pouvoir d’une part le transformer dans un logiciel de type Illustrator ou Inkscape, et d’autre part de s’assurer que la police d’écriture sera fidèle quelle que soit l’utilisation du fichier (impression, envoi à un destinataire qui n’aurait pas les fontes d’origine).

Dans quel cas peut-il être utile de vectoriser un pdf ?

Par deux fois j’ai été confronté à deux problèmes distincts que j’ai pu résoudre en vectorisant des pdf.

Caractères étrangers

En intervenant sur des maquettes avec des caractères étrangers (polonais et tchèques), je voulais ouvrir mes documents dans Illustrator pour apporter des modifications d’accents, mais systématiquement la typo sautait et j’avais des carrés blancs à la place de ces fameux caractères. Comme je voulais faire des grands formats, je voulais absolument rester en vectoriel.

Transformations incontrôlables des textes

Le deuxième cas de figure était un document xPress exporté en pdf. Il avait ce gros souci qui était que dès que j’en réduisais la taille pour l’envoyer à mes clients, changeait complètement l’approche des lettres et la césure des mots. Impossible de l’envoyer au client avec de telles transformations que je ne pouvais contrôler ! Là encore, la seule solution à mes yeux était la vectorisation du pdf.

Comment procéder à la vectorisation

Que ce soit pour pallier ces problèmes de typos étrangères ou geler ces problèmes d’approches et de césures, la solution seule solution à mes yeux était de vectoriser les pdf directement dans Adobe Acrobat.
J’ai vraiment cherché longtemps et ai trouvé le remède. La fonction est bien dissimulée et franchement pas évidente à trouver, néanmoins elle existe bel et bien.

Une fois votre document ouvert dans Acrobat, il faut aller dans « options avancées » -> « Impression » -> « Aperçu de l’aplatissement »

Une fenêtre s’ouvre alors, il suffit de cocher la case « vectoriser tout le texte » puis de cliquer sur « Appliquer » pour valider, le tour est joué !

Qu’est-ce qu’un AscreeN ?
C’est un fichier image au format jpg, qui n’est autre que la représentation visuelle de votre site sous la forme d’une vignette.
De manière très générale, il s’agit dans la majorité des cas de la capture d’écran de la page d’accueil. Cependant, ça peut être l’image que vous désirez (votre logo, un avatar…).

Quelle est l’utilité de l’AscreeN ?
Cette vignette permet d’avoir une représentation illustrée de votre site dans des pages de liens. Effectivement, et cela est surtout valable dans les annuaires de référencement, il existe des milliers de pages qui ont chacune des dizaines de liens sur différents sites. Si vous pouvez illustrer la description de votre site web avec une vignette, celle-ci incitera l’internaute à cliquer.

Comment faire une AscreeN ?
Le format est très standard : que vous fassiez une capture d’écran ou que vous créiez un visuel de toutes pièces, le format reste invariablement le jpg et la taille de 120×90 px.
Le nom du fichier sera obligatoirement ascreen.jpg, de manière à ce qu’elle soit détectée automatiquement par les annuaires.
Il est à noter que souvent ces sites ont des générateurs d’AscreeN, ce qui peut convenir pour certains, en revanche d’autres voudront avoir la maîtrise de la représentation graphique de leur site.

Où enregistrer mon AscreeN ?
Il faut la déposer sur votre serveur au premier niveau pour qu’elle soit prise en compte par l’annuaire.

Qu’est-ce que la Wonder Wheel (roue magique) de Google ?
Il s’agit d’un nouvel outil proposé aux webmasters, qui leur permet de trouver des synonymes aux mots-clefs proposés lors des requêtes.
Plus que des synonymes, ce sont des mots-clefs en rapport avec le contenu sémantique de vos requêtes.

Où trouver la Wonder Wheel ?
La Wonder Wheel de Google est une option proposée par le moteur de recherche depuis juin 2009.
Pour y accéder il faut afficher les options (en haut à gauche) et cliquer naturellement sur « Roue Magique ».

Quels sont les intérêts de cet outil ?
On peut considérer que ce peut être une aide pour élargir les recherches, cependant il serait réducteur de s’arrêter là.
A mon sens, il s’agit essentiellement d’une formidable aide aux webmasters qui veulent optimiser le référencement de leur site et qui sont en manque d’inspiration, pour les inspirer en mots-clefs relatifs au contenu de leur site.

Ainsi, Google leur offre sur un plateau  un arsenal de mots ou d’expressions auxquels ils ne pensent pas forcément, qu’ils peuvent intégrer aux différentes étapes de leur référencement (titres, mots-clefs, descriptions, campagnes AdWords…)

Qu’est-ce qu’une favicon ?
Il s’agit de l’icône miniature qui s’affiche à gauche de votre URL dans votre navigateur. Elle donne du style à votre site et lui donne une meilleure visibilité quand l’internaute a plusieurs onglets ouverts.

La favicon peut-être fixe ou animée, attention toutefois à ne pas lasser l’utilisateur avec un petit picto qui clignote en permanence, sauf si votre site a vocation d’être promotionnel.

Comment faire une favicon ?
Les formats de fichiers acceptés sont les .ico,  .gif et le .png.
L’ico est le format standard pour la favicon, mais le gif permet l’animation, le png la transparence.
La taille de la favicon doit être de 16×16 ou de 32×32 px et le mode colorimétrique de 256 couleurs.

Comment intégrer la favicon sur mon site ?
Une fois l’icône réalisée, il faut
- l’uploader sur votre serveur à la racine de votre site
- entre une ligne de code sur la première page de votre site

Au choix :
<LINK REL= »SHORTCUT ICON » href= »favicon.ico »>

ou

<LINK REL= »SHORTCUT ICON » href= »http://www.votre-site-internet.com/favicon.ico »>