apprendre rapidement a utiliser adobe photoshop par la pratique. devenez web-designer ! tutorial photoshop, exercice, formation, webdesign, skins, textures, infographie, pixel.


 ACCUEIL   PORTFOLIO   LOGICIELS   TUTORIELS   DOSSIERS 

Traducteur Photoshop

Ce traducteur automatique vous permet d'obtenir une traduction en direct des outils, menus, commandes et fonctions photoshop en français depuis un tutorial en anglais.
url :
traduire
voir un exemple : original - traduit

Interfaces
Webdesigns
Typographie
Textures
Effets
Retouches
Pixel-art
Divers
HTML/DHTML/Javascript
un site de A a Z (4)
10 étapes
un site de A a Z (3)
13 étapes
Fade Hyperliens
javascript
Scrollbar couleur
pour IE 6.0 ou plus
Table HTML
7 étapes
Decoupe
8 étapes
Annonces Google

un site de A a Z (3)

3eme tutorial de la série "un site de A a Z" qui vous propose de suivre la conception d'un webdesign de site de A et Z, c'est a dire de la réalisation graphique a l'intégration HTML. Ce 3eme tutorial traite du découpage du webdesign et de l'intégration HTML.

Identification Abonné :

Votre Email :
Votre Mot de Passe :
Se souvenir de moi
login

Français :
Anglais :
Shortcut PC :
Shortcut Mac :
Menu :
francais
english



Afficher les commandes photoshop en français

Afficher les commandes photoshop en anglais

Afficher la version imprimable du tutorial


Etape 1

Commencer par créer un répertoire pour accueillir les fichiers html et images de votre site internet.
 
Ouvrir le fichier « webdesign.psd ».
 
Pour démarrer le découpage du webdesign, dans la fenêtre de calques, rendre invisible tout les calques sauf ceux formant le fond.
 
Avec l’outil Rectangle de sélection , sélectionner un carré de 100x100 pixels n’importe ou dans l'image de fond, Recadrer le document et Enregistrer sous le nom « background.gif » le fichier au format gif dans un sous répertoire « images ».

 
Une fois le fichier sauvegardé, Fermer le document sans sauvegarder les modifications.


Etape 2

Re Ouvrir le fichier « webdesign.psd ».
 
Pour créer les fichiers de découpages du cadre de contenu, dans la fenêtre de calques, rendre invisible tous les calques sauf ceux formant le fond et le cadre de contenu comme dans l’exemple ci-dessus. Rendre également invisible les boutons de navigation qui feront l’objet d’un traitement spécifique plus loin dans le tutorial.
 
Toujours dans la fenêtre de calque, touche Ctrl du clavier enfoncée, cliquer sur le calque contenant le grand rectangle de contenu (le 1er en partant du bas de la liste de calque avec les styles de calque Ombre portée et Biseautage et estampage appliqués) afin d’en créer la sélection.
 
Dilater la sélection de 3 pixels afin d’inclure a celle-ci l’ombre portée du rectangle de contenu.

 
Aplatir l'image et Recadrer ensuite le document.

 
Créer un nouveau calque , dans la fenêtre de calque, passez le en opacité 30%, sélectionner une couleur bleu comme couleur de premier plan et Remplir la sélection avec la couleur de premier plan .


Etape 3

Avec l’outil Rectangle de sélection , sélectionner un rectangle du haut du document jusqu’a 2 ou 3 pixels en dessous du bas du rectangle de menu comme dans l’exemple ci-dessus.
 
Sélectionner une couleur rouge comme couleur de premier plan et Remplir la sélection en rouge.


Etape 4

Toujours avec l’outil Rectangle de sélection , sélectionner un rectangle au dessus du logo de la même hauteur que le rectangle rouge rempli précédemment.
 
Sélectionner une couleur verte comme couleur de premier plan et Remplir la sélection en vert.
 
Sélectionner ensuite un rectangle au dessus de la zone droite du rectangle de menu englobant l’ombre interne de celui-ci et le Remplir en vert.


Etape 5

Zoomer sur la zone a droite du logo avec l’outil Loupe afin de réaliser une sélection au pixel prêt.
 
Avec l’outil Rectangle de sélection , sélectionner un rectangle à gauche rectangle vert du logo de la même hauteur que celui-ci et choisir la largeur en prenant soit de bien repérer que les traits inclinés sont coupés a la même hauteur à gauche et à droite du rectangle de sélection.
 
Sélectionner une couleur violette comme couleur de premier plan et Remplir la sélection en violet puis dé-zoomer : sélectionner l’outil Loupe , clique sur le bouton droit de la sourie sur le document, sélectionner l’option Taille réelle des pixels .


Etape 6

Toujours avec l’outil Rectangle de sélection , sélectionner l’une après l’autre, les zones droite, centrale et gauche du rectangle bleu sous la zone de menu comme dans l’exemple ci-dessus et Remplir chaque sélection en magenta.


Etape 7

Créer un nouveau calque .
 
Dans la fenêtre de calques, passer l’opacité du nouveau calque a 30%
 
Sélectionner une couleur cyan comme couleur de premier plan .
 
Avec, encore et toujours, l’outil Rectangle de sélection , sélectionner l’un après l’autre, 2 rectangle de toute la largeur du rectangle de contenu au centre (une 50ene de pixels de haut) et en bas (6 pixels de haut) de celui-ci et Remplir chaque sélection en cyan.

 
Dans la fenêtre de calques, lier les 2 derniers calques créer et Fusionner les calques liés .


Etape 8

Choisir maintenant l’outil Baguette Magique , Tolérance : 0, lissé décoché, pixel contigus coché.
 
Dans le menu Image , Dupliquer le document 9 fois.
 
Sélectionner dans chaque duplication de document l’une des zones indiqués dans l’exemple ci-dessus en cliquant avec la baguette magique dans les rectangles de couleur correspondant a la zones a sélectionner.
 
Dans chaque duplication, Recadrer le document et, dans la fenêtre de calques, rendre invisible le calque contenant les rectangles de couleur. Enregistrer au format gif sous le nom inscrit dans l’exemple ci-dessus chaque duplication du document dans le répertoire « images » créer au début du tutorial.


Etape 9

Les 1ers découpages terminés, passons a l’intégration HTML proprement dite.
 
Ouvrir le blocnote de Windows ou créer un nouveau document html avec votre éditeur html habituelle.
 
Nous allons réaliser l’intégration sous forme de tableaux html, il y a 3 fonctions principales dans la créer d’une table html :
<table>
pour créer une table,
<tr>
pour ajouter une ligne a une table,
<td>
pour ajouter une colonne dans une ligne d’une table.
 
L’intégration de ce webdesign nécessite la création de 2 tables : la table « menu » et la table « contenu » représentée respectivement en vert et magenta dans la schémas ci-dessus.


Etape 10

Commençons par la table « menu »…
 
La table « menu » doit posséder une seule ligne découper en 3 colonnes. Le code html pour structurer cette table sera donc :
<table>
ouverture de la table
    <tr>
créer une ligne
        <td>
créer une 1ere colonne dans la ligne
       </td>
fermer la colonne
        <td>
créer une 2eme colonne dans la ligne
        </td>
fermer la colonne
        <td>
créer une 3eme colonne dans la ligne
        </td>
fermer la colonne
    </tr>
fermer la ligne
</table>
fermer la table

 
Définissons ensuite les propriétés de chaque éléments de la table :

 
La table :
La table doit être centrée verticalement sur la page :
align="center"
La largeur de la table doit etre de 760 pixels :
width="760"
La table ne doit pas avoir de bordure :
border="0"
La table ne doit pas avoir marge externe :
cellspacing="0"
La table ne doit pas avoir marge interne :
cellpadding="0"

Ce qui nous donne la 1ere ligne html suivante :
<table align="center" width="760" border="0" cellspacing="0" cellpadding="0" >

 

 
La ligne :
La ligne n’a aucune propriétés spéciales donc la 2eme ligne html reste :
<tr>

 

 
La 1ere colonne :
La 1ere colonne doit contenir l’image « menulogo.gif » dans le répertoire « images ».

 
On ajoute donc entre les commandes d’ouverture et de fermeture de colonne la commande d’affichage d’image html :
<td>
<img src="images/menulogo.gif" ><br>
</td>

 

 
La 2eme colonne :
Elle doit avoir l’image «menuback.gif » qui se répète en fond :
background="images/menuback.gif"
Elle doit prendre tout le reste de largeur de la table :
width="100%"
Les boutons de navigation seront aligné a droite :
align="right"

Ce qui nous donne le code html suivant :
<td  background="images/menuback.gif" width="100%" align="right" >
</td>

 

 
La 3eme colonne :
La 3eme colonne doit contenir l’image « menudroite.gif » dans le répertoire « images »

 
On ajoute donc entre les commandes d’ouverture et de fermeture de colonne la commande d’affichage d’image html :
<td>
<img src="images/menudroite.gif" ><br>
</td>

 
On obtient donc pour la table “menu” le code html suivant :

<table align="center" width="760" border="0" cellspacing="0" cellpadding="0" >
    <tr>
        <td>
            <img src="images/menulogo.gif" ><br>
        </td>
        <td  background="images/menuback.gif" width="100%" align="right" >
        </td>
        <td>
            <img src="images/menudroite.gif" ><br>
        </td>
    </tr>
</table>


Etape 11

Passont a la table « contenu »…
 
La table « contenu » posséder 2 lignes découper en 3 colonnes. Le code html pour structurer cette table sera donc :
<table>
ouverture de la table
    <tr>
créer une ligne
        <td>
créer une 1ere colonne dans la ligne
       </td>
fermer la colonne
        <td>
créer une 2eme colonne dans la ligne
        </td>
fermer la colonne
        <td>
créer une 3eme colonne dans la ligne
        </td>
fermer la colonne
    </tr>
fermer la ligne
    <tr>
créer une ligne
        <td>
créer une 1ere colonne dans la ligne
       </td>
fermer la colonne
        <td>
créer une 2eme colonne dans la ligne
        </td>
fermer la colonne
        <td>
créer une 3eme colonne dans la ligne
        </td>
fermer la colonne
    </tr>
fermer la ligne
</table>
fermer la table

 
Définissons ensuite les propriétés de chaque éléments de la table :

 
La table :
La table « contenu » doit avoir les mêmes propriétés que la table « menu » :
<table align="center" width="760" border="0" cellspacing="0" cellpadding="0" >

 

 
La 1ere ligne :
La 1ere ligne n’a aucune propriétés spéciales :
<tr>

 

 
La 1ere colonne :
Elle doit avoir l’image «contenugauche.gif » qui se répète en fond :
background="images/contenugauche.gif"
l’image «contenugauche.gif » doit etre aligné sur le haut de la colonne
valign="top"
Elle doit contenir l’image «contenugauche.gif »
<td><img src="images/contenugauche.gif" ></td>

 
Ce qui nous donne le code html suivant :
<td background="images/contenugauche.gif" valign="top" >
<img src="images/contenugauche.gif" ><br>
</td>

 

 
La 2eme colonne :
Elle doit avoir l’image «contenuback.gif » qui se répète en fond :
background="images/contenuback.gif"
Elle doit prendre tout le reste de largeur de la table :
width="100%"
Le contenu doit etre aligné sur le haut de la colonne
valign="top"

Ce qui nous donne le code html suivant :
<td  background="images/contenuback.gif" width="100%" valign="top" >
</td>

 

 
La 3eme colonne :
Elle doit avoir l’image «contenudroite.gif » qui se répète en fond :
background="images/contenudroite.gif"
l’image «contenudroite.gif » doit etre aligné sur le haut de la colonne
valign="top"
Elle doit contenir l’image «contenudroite.gif »
<td><img src="images/contenudroite.gif" ></td>

 
Ce qui nous donne le code html suivant :
<td background="images/contenudroite.gif" valign="top" >
<img src="images/contenudroite.gif" ><br>
</td>

 

 
La 2eme ligne :
La 2eme ligne n’a aucune propriétés spéciales :
<tr>

 

 
La 1ere colonne :
Elle doit contenir l’image «basgauche.gif »
<td><img src="images/basgauche.gif" ></td>

 
Ce qui nous donne le code html suivant :
<td>
<img src="images/basgauche.gif" ><br>
</td>

 

 
La 2eme colonne :
Elle doit avoir l’image «bascentre.gif » qui se répète en fond :
background="images/bascentre.gif"

Ce qui nous donne le code html suivant :
<td  background="images/bascentre.gif" >
</td>

 

 
La 3eme colonne :
Elle doit contenir l’image «basdroite.gif »
<td><img src="images/basdroite.gif" ></td>

 
Ce qui nous donne le code html suivant :
<td>
<img src="images/basdroite.gif" ><br>
</td>

 

 

 
On obtient donc pour la table “menu” le code html suivant :

<table align="center" width="760" border="0" cellspacing="0" cellpadding="0" >
    <tr>
        <td background="images/contenugauche.gif" valign="top" >
            <img src="images/contenugauche.gif" ><br>
        </td>
        <td  background="images/contenuback.gif" width="100%" valign="top" >
        
        </td>
        <td background="images/contenudroite.gif" valign="top" >
            <img src="images/contenudroite.gif" ><br>
        </td>
    </tr>
    <tr>
        <td>
            <img src="images/basgauche.gif" ><br>
        </td>
        <td  background="images/bascentre.gif" >
        </td>
        <td>
            <img src="images/basdroite.gif" ><br>
        </td>
    </tr>
</table>


Etape 12

Fermer le document et re-Ouvrir le fichier « webdesign.psd ».
 
Avec l’outil Rectangle de sélection , sélectionner un rectangle au dessus d’un des boutons de menu, attention de ne pas oublier de sélectionner les ombres et l’espace entre 2 boutons.
 
Dans la fenêtre de calques, rendre invisible les calques contenant les textes des boutons de menu puis Fusionner les calques visibles .
 
Recadrer ensuite le document puis re-afficher les calques contenant les textes.

 
Changer le texte et sauvegarder chaque bouton dans le répertoire « images » avec les noms comme suit : « btn_apropos.gif », « btn_produits.gif », « btn_services.gif », « btn_contact.gif »

 
Pour intégrer les boutons dans notre table html, il suffit d’ajouter dans la colonne adéquate une table supplémentaire contenant les boutons :
...
<td  background="images/menuback.gif" width="100%" align="right" > 
    <table border="0" cellspacing="0" cellpadding="0" >  
        <tr>  
            <td><a href="#" ><img src="images/btn_apropos.gif" border="0" ></a></td>
            <td><a href="#" ><img src="images/btn_produits.gif" border="0" ></a></td>
            <td><a href="#" ><img src="images/btn_services.gif" border="0" ></a></td>
            <td><a href="#" ><img src="images/btn_contact.gif" border="0" ></a></td>
        </tr>  
    </table>
</td>
...


Etape 13

On obtient donc, a ce niveau de l'intégration le code html suivant :
 

<body background="images/background.gif" > 

<table align="center" width="760" border="0" cellspacing="0" cellpadding="0" > 
    <tr> 
        <td> 
            <img src="images/menulogo.gif" ><br> 
        </td> 
        <td  background="images/menuback.gif" width="100%" align="right" > 
    <table border="0" cellspacing="0" cellpadding="0" >  
    <tr>  
    <td><a href="#" ><img src="images/btn_apropos.gif" border="0" ></a></td>
    <td><a href="#" ><img src="images/btn_produits.gif" border="0" ></a></td>
    <td><a href="#" ><img src="images/btn_services.gif" border="0" ></a></td>
    <td><a href="#" ><img src="images/btn_contact.gif" border="0" ></a></td>
</tr>  
     </table>
        </td> 
        <td> 
            <img src="images/menudroite.gif" ><br> 
        </td> 
    </tr> 
</table>

<table align="center" width="760" border="0" cellspacing="0" cellpadding="0" > 
    <tr> 
        <td background="images/contenugauche.gif" valign="top" > 
            <img src="images/contenugauche.gif" ><br> 
        </td> 
        <td  background="images/contenuback.gif" width="100%" valign="top" > 
         
        </td> 
        <td background="images/contenudroite.gif" valign="top" > 
            <img src="images/contenudroite.gif" ><br> 
        </td> 
    </tr> 
    <tr> 
        <td> 
            <img src="images/basgauche.gif" ><br> 
        </td> 
        <td  background="images/bascentre.gif" > 
        </td> 
        <td> 
            <img src="images/basdroite.gif" ><br> 
        </td> 
    </tr> 
</table>

</body>

 
Suite de l'intégration dans le tutorial « un site de A a Z (4) ».

Fichier(s) associé(s) au tutorial
integration html (119 Ko) télécharger
webdesign (835 Ko) télécharger
Commentaires des visiteurs
Ajouter un commentaire
Copyright Jérome Boulinguez 1995/2007
Tous les éléments de ce site sont la propriété de leurs auteurs respectifs.
Toutes reproductions, distributions, commercialisations, copies sous quelques formes que ce soit est strictement interdit sous peine de poursuites.


point de croix .  broderie .  cross stitch .  broderie prenom .  broderie portrait .  pochoir .  pochoir personalisé .  stickers .  scrapbooking .  pochoirs à imprimer .  loisir créatif .  templates .  lifting .  cadeaux personnalisés .  pop art .  warhol .  warhol .  pop art .  affiches .  journal de naissance .  prénom .  étiquettes personnalisées .  parchemin personnalisé .  parchemin .  pagerank .  calendrier .  avatar .  faire-part .  collections .  mariage .  telephone portable .  tableau prénom .  fausse couverture people .  fausse couverture de magazine .  fausse couverture de journal .  calligraphie prenom .  t-shirt personnalisé .  géo-localisation .  fausse affiche .  affiche humour .  marque-pages .  plaque de rue .  roman photo .  cadre photo .  faux papiers .  dés photos .  pêle mêle .  pancarte de porte .  pour les nuls .  carte de membre .  scrapbooking .  acrostiche .  graffiti .  invitation a imprimer .  tapis de souris personnalise .  mug personnalisé .  mug photo .  grille point de croix gratuite .