[Tuto Photoshop] Création d'une interface web

Bonjour

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.

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 zone

• 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 à harger !" 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 :

Code:

[font=Verdana, Arial, Helvetica, sans-serif][size=9] <img>
                  src="image_4.gif" width="500" height="30">
                  [/size][/font]

par :

Code:

[font=Verdana, Arial, Helvetica, sans-serif][size=9]
                  width="500" height="30"> [/size][/font]

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

Amusez-vous bien avec ça .

Admin