Découper
une interface avec IR
Pour créer une interface ou un "template"
web, il faut déjà créer l'interface sous
la forme d'une image, comme une "printscreen" d'un
site existant.
|
|
Pour
cela, nous partirons du principe que vous avez déjà
réfléchi à votre interface, et que
l'image complete est finalisée. Pour mieux comprendre,
nous allons faire cet exercice avec l'interface de la version
1.0 de Kloobik.com. |
Voici
exactement ce à quoi nous voulons arriver :....
Première étape
L'image de fond est réalisée à part. Elle
est ensuite intégrée dans la page html. Pour faire
fonctionner l'interface, il va falloir "découper"
l'images en tranches. Première étape : > poser
des repères pour découper l'image en zones
- commencer
par > Affichage > règles
- ensuite
> Affichage Nouveau repère
- Indiquez
l'emplacement où doit se trouver le repère (vous
pourrez les bouger ensuite ne vous inquiétez pas ....
)
- répétez
l'opération autant de fois que vous avez besoin de
repères
Astuce:
vous pouvez poser des repères sans passer par le menu
Affichage. Pour cela, utilisez l'outil "Déplacement"
(V) et aller dans la barre de règles sur un des bords
de la fenetre. Faites un cliquer/glisser : un nouveau reprère
apparait .... Les repères une fois posée doivent
donner à peu près comme l'image ci-dessous :
Deuxième étape
Une fois les repères posés, n'hésitez pas
à zoomer pour vérifier qu'ils sont bien au bon
endroit : photoshop va "découper" l'image là
où se trouvent les repères.. A cet instant, on
sait que l'interface sera découpée en 9 images
comme ci-dessous :
Troisième étape
Mais ! Les cellules 4, 5 et 6 sont trop grandes et vont etre
lourdes à charger !" Certes. C'est pourquoi, nous
n'avons pas besoin de tout cet espace puisqu'une fois découpée
et le fichier html généré, ces 3 cellules
seront des espaces insécables.... Coupons donc tout ce
qui ne nous interesse pas ...
En bleu : l'espace insécable qui s'agrandira au fur et
à mesure que vous entrerez du texte dans cette partie
(cellule 5). Pour cela, nous indiquerons au code html que les
images des cellules 4, 5 et 6 sont le fond des cellules : le
navigateur les reproduira alors autant de fois que nécessaire
...
Quatrième étape
Passez ensuite à Image Ready en cliquant dans l'icone
en bas de la palette Outils.
Cinquième étape
L'image telle que vous l'avez "repèrée"
apparait dans le fenetre d'Image Ready. Sélectionnez
l'outil Tranche dans la palette des outils (K). Ensuite, allez
dans le menu > Tranches > Créer des tranches à
partir des repères. Image Ready vient de découper
votre image en 9 fichiers images différents
Sixième étape
Reste maintenant à générer le fichier html
pour pouvoir l'utiliser .... Aller dans > Fichiers > Enregistrez
une copie optimisée sous .... Choisissez html et le tour
est joué ..... Vous pouvez fermer Image Ready.
Septième
étape
Voilà, c'est fini ! Il ne vous reste plus qu'à
ouvrir votre éditeur html et remplacer le code des cellules
4, 5 et 6 :
<TD height="xxx" width="xxx"><img
src="image_4.gif" width="500" height="30"></td>
par :
<TD background="image_4.gif"
width="500" height="30"> </td>
de manière à ce que les images des cellules 4,5
et 6 soient un fond de cellule et que le navigateur les reproduise
à l'infini si votre tableau (interface) s'allonge en
hauteur ....
|
