:: kloobik.com : Web Design Entrepot v3.0 ::

Apprendre !
Si vous êtes ici c'est que vous avez envie d'apprendre comment fonctionne Adobe Photoshop. Instrument extremement puissant, il permet de réaliser d'incroyables effets graphiques tout en maitrisant la création via un système de calques très efficace.
A vos tablettes graphiques ;)


Principale ressource du site, nos tutoriels sont le fruit de plusieurs années de travail sur divers éditeurs graphiques. Prioritairement tournés vers Adobe Photoshop, ils vous permettront de découvrir quelques trucs & astuces que vous ne connaissiez peut-être pas .... Les mises à jour sont régulières. L'ékipe Kloobik.com



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 Kloobik.com. Voici ce à quoi nous voulons arriver :




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 :




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 :




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




Passez ensuite à Image Ready en cliquant dans l'icone en bas de la palette Outils




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.




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.


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