Les plans de travail sous Illustrator

Les plans de travail sous Illustrator

Les plans de travail sous Illustrator permet de créer des documents sur plusieurs pages ou encore de créer des maquettes de site Web pour différentes tailles d’écrans.

Introduction

Les plans de travail sous Illustrator peuvent être comparables à des pages dans un document papier.
Il est possible d’en créer autant que l’on veut (peut) car plus il y a de plan de travail et plus Illustrator consomme de mémoire RAM.

Créer des plans de travail sous Illustrator

Lors de la création d’un nouveau document le Nombre de plans de travail est fixé à 1 mais il peut être changé par le nombre désiré. Les quatre boutons de droite servent principalement pour les documents voués à être imprimés et indique l’ordre des pages.
Après la création du document il est encore possible d’ajouter et même supprimer des plans de travails à l’aide de la palette Plans de travail (voir menu Fenêtre -> Plans de travail). Cliquez sur le bouton Nouveau plan de travail (le bouton en forme de page corné). Un nouveau plan de travail reprenant les même dimensions que le précèdent apparait à droite.

Modifier un plan de travail sous Illustrator

Dans la palette d’outils, cliquez sur le bouton Plans de travail (Maj + O). Cliquez sur le plan de travail à modifier, puis utilisez les poignets (les carrés blancs dans les coins et les côtés) en faisant des glissés/déplacés avec votre souris.

Supprimer un plan de travail sous Illustrator

Depuis le menu Plans de travail, sélectionnez le plan de travail à supprimer, puis cliquez sur le bouton Supprimer le plan de travail (en forme de corbeille).
Depuis l’outil Plans de travail (Maj + O), une petite croix noire apparait à chaque coin supérieur droit. Cliquez dessus pour supprimer votre plan de travail.

Exporter un document inDesign en HTML

Exporter un document inDesign en HTML-1

Exporter un document inDesing en HTML est une fonction peu connue car beaucoup d’utilisateurs se sont heurtés à la question suivante : mais pourquoi il n’y a que des balises <p> dans mon fichier HTML ?

 1. Le formatage du texte

Tout le secret réside dans le formatage du texte. En effet, par défaut, inDesign formate tout le texte comme du paragraphe. C’est pour cette raison qu’à l’export il y est cette multitude de balises <p></p>.

Dans l’exemple ci-dessous, se trouvent deux titres. L’objectif est de formater le premier en tant que titre de niveau 1 et le second en un titre de niveau 2 avec une class nommée « toto » :

Titre de niveau 1

Titre de niveau 2

Sélectionnez le titre de niveau 1, puis allez dans Fenêtre -> Style -> styles de paragraphe (ou F11) pour faire apparaitre la palette ci-dessous.

Exporter un document inDesign en HTML Par défaut, elle ne contient que le style paragraphe standard. Cliquez sur le bouton Créer un nouveau style (à droite du bouton corbeille). Un nouveau style appelé Style de paragraphe 1 est créé. Faite un double-clique dessus.

Dans la boîte de dialogue Option de style de paragraphe, rendez-vous à présent dans l’onglet Exportation du balisage (le dernier de la liste), puis renommez le style. Dans cet exemple ça sera H1.

Dans le menu déroulant Balise sélectionnez h1. Cliquer sur OK pour valider.

Sélectionnez à présent le titre de niveau 2, puis créer lui un nouveau style. Dans le menu déroulant Balise sélectionnez h2 et dans le champ Class tapez toto. Cliquer sur OK pour valider.

2. L’export pour le Web

Allez dans le menu Fichier -> Exporter… et dans le menu déroulant Type, sélectionnez HTML. Cliquer sur Enregistrer pour valider.

Une nouvelle boite de dialogue appelé Option d’exportation XHTML propose une série de paramètres. Dans notre exemple, il faut juste s’assurer que dans l’onglet Avancé soit bien coché CSS incorporé, sans cela, inDesign se contente d’exporter notre document avec les balises H1 et H2 sans prendre en considération la mise en forme telle que la couleur et la taille du texte ainsi que les class.

Nota : si des images figures dans votre document et qu’elles doivent être elles aussi exportées dans le fichier HTML, allez dans l’onglet Image et changez la résolution qui doit être de 150ppp à 75ppp. Pour le Web 75ppp est amplement suffisant.

Changer l’opacité d’une image grâce aux CSS.

transparence cssIl faut d’abord prévoir des images au format et j’ai totalement pack sachant qu’ensuite on pourra appliquer la propriété CSS opacity pour ajuster la transparence directement sur ces mêmes images. Ainsi plus besoin de prévoir différentes images format PSG en fonction des pages il suffira d’appliquer une règle CSS pour pouvoir changer l’opacité d’une image.

Ce qu’on fait avant tout c’est gagner du temps. Car au-delà de bien de temps on peut en plus faire varier le degré de transparence de façon extrêmement précises en jouant sur les états : hover, : focus, :active sans avoir à créer un bon nombre d’images, ce qui allège évidemment la page, et permet donc de gagner en chargement, en vitesse et donc en référencement de cette page. On sait que le référencement d’un page Google se fait sur ce critère et que l’optimisation du temps de chargement des images et primordiale.

Ainsi, il suffira d’appliquer l’image de base et avec les différents applicatifs ajustés avec opacity, le gain de temps est évident.

La condition pour que cela se voit, c’est évidement de travailler sur une image en png, car une image en jpeg, verra l’application de la règle CSS sur l’ensemble de l’image alors que le png n’aura pas de fond. Ce balisage fonctionne également pour le format gif.

Un conseil rapide cependant, préférer une exportation de votre image en png 24, la qualité en sera bien meilleure.

Google impose les formes simples et discrètes dans la PAO, au service du SEO.

Google pose les règles sur l’importance graphique d’un site Web.

Jusque là, Google suivait la mode et n’imposait rien en matière de graphisme. On pouvait d’ailleurs trouver Google un peu en retard sur les bases qu’étaient les couleurs pastelles, les formes estompées etc…
C’est l’annonce de Google Now qui pose de nouvelles bases puisque pour la première fois on voit une réelle modification dans le style de Google en amont du projet.

Rappelons nous de ce qu’était Google il y a moins de deux ans : Les mêmes couleurs vives, des formes rondes avec des dégradés intégrés, et surtout une bonne vieille police soutenu par des liens hypertextes en bleu pétrole criant.

Bref, Google était à la pointe de la techno mais posait la question graphique en deuxième position, loin derrière le code. Une qualité exigée pour le fond et la construction qui désormais est également là pour la forme et on voit même que le célèbre moteur de recherche fait des emplettes et propose une qualité incroyable dans le graphisme exploité sur les téléphones portables et les tablettes graphiques.

Google sait et comprend que le graphisme d’un site web est étroitement lié à son efficacité et au sérieux de son propriétaire.
En contrôlant le poids des images de pages web et la construction des sites, Google indique d’ailleurs qu’à défaut de pouvoir contrôler la qualité graphique, il y a des règles de base à respecter.

Le design doit donc être travaillé dans les plus grandes finesses et Photoshop reste la solution pour cela. Si les contours de certaines formes et la mise en place d’effets peut être fait par le Css, il faudra encore compter sur Photoshop pour assurer la base de la création, qui répond aux besoins de l’utilisateur d’un site web. C’est donc par Photoshop que l’on optimisera son taux de rebond, au service in fine, des positions sur Google.