Pensez à laisser un commentaire, une surprise vous attend !

Photoshop nous réserve bien des surprises, vous le savez. Mais celle-là vaut vraiment le détour. Lisez plutôt la suite.

Imaginez le « look » de votre site web et « dessinez-le » avec photoshop. L’emplacement des menus, la bannière « header », l’emplacement du corps du contenu, le pied de page (footer). Importez toutes les images que vous voulez à l’intérieur de votre document Photoshop.

Prévoyez un document qui corresponde à une largeur standard de résolution d’écran. Actuellement, la plupart des écrans du commerce sont configurer pour accepter au minimum une largeur de 1024 pixels. Mais il faut prévoir les espaces de la fenêtre du navigateur ainsi que l’espace pris par l’éventuel ascenseur vertical. Considérez une largeur de 900 pixels comme « raisonnable ».

Votre document est prêt en taille. Vous avez probablement travaillé en 300 dpi, histoire de pouvoir travailler en étant à l’aise dans la précision.

Voici un exemple d’interface web (simple) réalisée avec Photoshop :

Nous avons cette page élément par élément. Nous avons d’abord créer le fond, puis le haut, le bas, le personnage importé et, enfin, les calques de textes.

Vous pouvez dessiner les dégradés, importer les images, écrire vos textes. Photoshop vous permet assez aisément de créer une telle image.

Il ne nous reste plus qu’à transformer cette image en un site web.

Le but étant de créer une page html et un répertoire images contenant toutes les images nécessaires déjà positionnées correctement au niveau de la page html.

Pour cela, nous allons faire appel à 2 outils de Photoshop qui vont nous permettre de “couper” notre image en autant d’éléments individuels que nécessaire à la suite, notamment, il s’agit de maintenir l’espace principal vide en tant qu’élément individuel afin de pouvoir y adjoindre aisément notre contenu (plus tard…)

Il s’agit des 2 outils de tranches.

<avec le premier outil, l’outil Tranche, vous allez “découper” votre images… en tranches. Chaque tranche sera convertie plus tard en une image indépendante.

Evitez donc de faire des découpages au milieu d’images autant que faire se peut.

En effet, il s’agit de déterminer des zones indépendantes dans l’image.

Une fois que c’est fait, vous pouvez encore “retoucher” vos tranches avec l’outil suivant :

L’outil “Sélection de Tranche” qui va vous permettre de sélectionner n’importe quelle tranche et d’en modifier sa taille.

Une fois que vous êtes satisfait de votre découpage de tranches, passons à l’étape suivante.

L’Export en html

Nous voici arrivés à la deuxième et dernière étape. Nous allons passer par le menu “Enregistrer pour le web…”

Là, va s’ouvrir la fenêtre de réglages des optins d’export :

Il ne nous reste plus qu’à cliquer sur le bouton Enregistrer pour finaliser la procédure.

Il y a néanmoins un détail à régler dans la phase suivante d’enregistrement :

Par défaut, vous enregistrez votre document sous format d’image avec les pré-réglages png, jpg ou gif. Il s’agit donc de choisir  la bonne option qui nous permettre de générer le fichier html et le répertoire d’images contenant toutes les tranches transformées en images individuelles :

Choisissez dans Format HTML ET IMAGES et Enregistrez !

Vous obtenez :

Il ne reste plus qu’à éditer votre fichier html avec un éditeur gratuit tel que KOMPOZER :

Si vous désirez en savoir plus et apprendre tout plein de trucs & astuces sur cet extraordinaire logiciel, suivez le lien suivant, je vous offre une mini-formation. C’est GRATUIT :

http://www.coach-internet.biz/toshop/essentials/sq/

Tarik HANNANE
Coach Internet ::: Consultant Formations