Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Graphisme > Photoshop > Réaliser un design SteamErsatz > Lecture du tutoriel

Réaliser un design SteamErsatz

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Avatar
 Auteur : El Konkonbré M@squed
Note : 17 / 20 (34 votes)
Visualisations : 56 383

Plus d'informations Plus d'informations
Bon : voici ce que vous allez essayer de réaliser :

Image utilisateur

Ce tutoriel a été réalisé avec Photoshop 8.0.1 et ImageReady.

Pour la réalisation du design et la découpe, cela ne devrait pas être très compliqué.



Sommaire du chapitre :
Icône du chapitre

Réalisation du design

- Ouvrez un nouveau fichier de 300 x 300, avec un arrière-plan blanc.
Sauvegardez votre document sous le nom de skn.psd.

- Si les règles ne sont pas apparentes, activez-les : Affichage -> Règles (CTRL + R).

L'unité des règles devraient être en pixels, mais si ce n'est pas le cas, faites : Édition -> Préférences -> Unités et règles.
Pour la partie Unités :
Règles : pixels.
Et cliquez sur Ok.

Vous allez vous aider de repères pour créer votre interface.

- Pour ce faire, cliquez dans la règle du haut et tout en maintenant la touche enfoncée, descendez dans le document et placez le repère à environ 1 cm du haut.

- Faites de même pour la gauche et placez le repère à environ 1 cm de la gauche.
Image utilisateur

L'intersection de ces 2 repères sera le coin haut gauche de l'interface.

- Maintenant, il faut que le point "0" de la règle du haut et de celle de gauche coïncide avec nos repères.

- Vous allez activer le magnétisme, cela vous aidera pas mal : Affichages -> Magnétisme (Maj + CTRL + :).

Ensuite avec la souris, cliquez dans le petit carré en haut à gauche où se rejoignent les 2 règles, celle du haut et celle de gauche (voir carré vert) ; tout en restant cliqué, amenez votre souris (voir flèche verte) à l'intersection de vos 2 repères (voir points rouges).

Et voilà, vous devriez avoir ça :
Image utilisateur

Nous allons faire une interface, qui va faire 200 x 200 pixels.
Vous pouvez bien évidemment prendre les cotes que vous souhaitez.
Le mieux est quand même de prendre des cotes justes : évitez celles du genre 161 x 209 pixels, par exemple.
Ceci uniquement dans le but de ne pas trop se prendre la tête dans des calculs compliqués.
Mais si vous préférez prendre des dimensions complexes, c'est vous qui voyez.

Nous allons donc placer 2 autres repères à 200 pixels de notre point 0, pour l'horizontale et la verticale.
Procédez comme vous l'avez fait tout à l'heure.
Pour plus de précision, vous pouvez zoomer à 200 %.
Ceci à l'aide de la fenêtre Navigateur se trouvant en haut à droite.
Si celle-ci n'est pas apparente, faites : Fenêtre -> Navigateur.

Vous devriez obtenir ça :
Image utilisateur

Bon, voilà : les choses sérieuses commencent.

- Créez un nouveau calque en appuyant sur le bouton "Nouveau calque" (voir cadre rouge).
Double-cliquez sur le texte : Calque 1 (voir cadre vert).
Et renommez le calque : Base.
Image utilisateur

- Ensuite, dans la barre d'outils, sélectionnez : "Outil Rectangle arrondi" (voir cadre vert).
Image utilisateur

- Et comme paramètre de cet outil (les paramètres se trouvent sous le menu Fichier - Édition etc.), choisissez :
Pixels de remplissage
Outil Rectangle arrondi
Rayon 10 px
Et décochez Lissé.
Image utilisateur

- Vous allez définir la couleur de votre interface :
Donc dans la barre d'outils, cliquez sur :
"Définir la couleur de 1er plan" (voir encadré vert), et choisissez : #3F463A (vert foncé).
Image utilisateur

Assurez-vous que vous êtes bien sur le calque Base (doit être en bleu).
Placez votre souris au plus près de l'intersection des repères à 0 px, cliquez, restez appuyé et
descendez dans le coin bas droit jusqu'à l'intersection des repères à 200 px.
Vous devriez voir ici tout l'intérêt du magnétisme.
La sélection de votre outil est attirée automatiquement sur les repères que vous avez créés.
Vous devriez avoir ceci :
Image utilisateur
SAUVEGARDEZ votre travail.

Maintenant, nous allons faire l'intérieur : l'entête (partie haute de l'interface) et le contenant (partie basse de l'interface).

- Nous allons faire des bordures de 10 pixels partout, même pour la séparation entête - contenant.

- Nous allons donc placer des repères en conséquence.
En zoomant à 300 % ou plus, vous devriez pouvoir placer vos repères au micron près :D .

Voilà ce que vous obtiendrez.
Pour la bande du milieu, placez-la à peu près au centre : cela n'a pas trop d'importance.
Image utilisateur
SAUVEGARDEZ votre travail.

Nous allons créer l'entête.

- Créez un nouveau calque, que vous allez appeler "Entête 5A6A50" (son nom + la couleur, ça peut servir ;) ).
Vous avez déjà fait cette opération tout à l'heure.

- Vous allez définir la couleur de l'entête :
Donc dans la barre d'outils, cliquez sur :
"Définir la couleur de 1er plan", et choisissez : #5A6A50 (vert moyen).
Assurez-vous que le magnétisme est toujours actif (normalement, oui :) ).

- Ensuite, dans la barre d'outils, sélectionnez : "Outil Rectangle arrondi".

Presque les mêmes réglages que tout à l'heure :
Et comme paramètre de cet outil, choisissez :
Pixels de remplissage
Outil Rectangle arrondi
Rayon 10 px
Et recochez Lissé <--------- ATTENTION : ce réglage a changé.
Cela permettra de limiter un peu l'aliasing au niveau des arrondis.

- Ensuite, faites comme sur la capture d'écran.
Allez un peu en dessous des 2 repères du centre (comme indiqué sur la capture).
Image utilisateur
SAUVEGARDEZ votre travail.

Étant donné que vous ne voulez pas (si, si, j'vous jure, vous n'en voulez pas... Si, j'ai dit... Oh, c'est moi que ch'uis l'chef et c'est moi que j'décide :pirate: ) des arrondis dans la partie du bas de l'entête, vous allez couper tout ça.

- Dans la barre d'outils, sélectionnez "Outil rectangle de sélection".
Le magnétisme doit toujours être actif.
Tracez une sélection comme sur la capture d'écran.
Le but étant d'encadrer la partie hachurée que nous allons supprimer :
Image utilisateur
Ensuite, assurez-vous de bien être sur le calque "Entête 5A6A50", et appuyez sur la touche "Suppr" (ou "Del") de votre clavier.

- Appuyez sur CTRL + D pour annuler la sélection.

Et voici ce que vous devez avoir :
Image utilisateur

L'entête étant faîte, nous allons nous occuper du contenant (= la partie du bas :) ).

- Créez un nouveau calque que vous allez appeler "Contenant 686A65" (son nom + la couleur).

- Vous allez définir la couleur du contenant :
Donc dans la barre d'outils, cliquez sur :
"Définir la couleur de 1er plan", et choisissez : #686A65 (noir-gris).
Assurez-vous que le magnétisme est toujours actif (normalement, oui :) ).

- Ensuite, dans la barre d'outils, sélectionnez : "Outil Rectangle arrondi".

Presque les mêmes réglages que tout à l'heure :
Et comme paramètre de cet outil, choisissez :
Pixels de remplissage
Outil Rectangle arrondi
Rayon 5 px <--------- ATTENTION : ce réglage a changé.
Et cochez "Lissé".

Ensuite, faites comme sur la capture d'écran :
Image utilisateur

Allez : maintenant, on va donner un petit effet de style à notre contenant.

- Double-cliquez sur la partie droite du calque "Contenant 686A65" (dans la partie sans texte), pour faire apparaître
la fenêtre "Style de calque".
- Autre technique pour faire apparaître cette fenêtre : faites un clic droit sur le calque "Contenant 686A65", et choisissez "Options de fusion...".

- Appliquez les réglages ci-dessous.
Pour la partie "Éléments -> Taille", c'est 8 pixels (j'y suis allé un peu fort avec le vert et on a du mal à voir :honte: ) :
Image utilisateur

SAUVEGARDEZ votre travail.

Et voilà : terminé :) :D ;) .

Voilà ce que vous devez normalement avoir :
Image utilisateur

Bon : ok, ce n'est pas trop jojo :( et en plus, rien à voir avec ce qui était promis :colere2: .

Mais on s'en fiche de la tronche que cela peut avoir à ce stade, because à la découpe, :pirate: en récupérant des petits morceaux par-ci, par là, on aura le résultat escompté :) .

Maintenant, enregistrez votre merveilleux travail sous le nom de skn_retaille.psd (ou le nom que vous souhaitez).

- On va maintenant virer tous les repères dont on n'a plus besoin, comme sur la capture ci-dessous et on va garder uniquement ceux du contour pour faire une bonne découpe.
Euh !!! :euh: comment est-ce kes kon fait pour supprimer les repères ?
On appuie dessus et on clique sur "Suppr".

Pour supprimer les repères, dans la barre d'outils, cliquez sur "Outil Déplacement (V)" ; ensuite, placez-vous sur le repère désiré, cliquez en restant appuyé et déplacez-le vers sa règle (soit sur la règle en haut, soit à gauche) et relâchez le bouton de la souris : votre repère aura disparu.

Image utilisateur

- Maintenant, on va recadrer notre interface.
Dans la barre d'outils, cliquez sur "Outil recadrage (C)".
Le magnétisme doit toujours être actif.

Et faites comme sur la capture d'écran :
Image utilisateur

En haut à droite, cliquez sur "Valider le recadrage en cours".
Ensuite, allez dans le menu du haut : Image -> Taille de l'image.
Si tout c'est bien passé, vous devriez voir que votre image fait maintenant 200 x 200 pixels.
Oooohhhhh magie!!! :magicien: , c'est la cote que l'on avait choisi au début de l'exercice. :)

- vous virez à présent les 4 derniers repères restants, et vous devriez avoir ça :
Image utilisateur
SAUVEGARDEZ votre travail.

Vous allez préparer le découpage de cette interface.
Oui, mais comment ?
Ben, comme ça, réponds-je (voir parties vertes).

Image utilisateur
Il existe plusieurs techniques pour le découpage.
Je vais vous montrer la plus simple (No prise de tête).

Grâce aux repères, tout se découpera tout seul.
En plus, maintenant vous devez être des chefs pour placer des repères au micron près :lol: .

- En regardant la capture ci-dessus, voici comment placer les repères :
Image utilisateur
Vous pouvez prendre les cotes que vous voulez ; mais ici, ce qui est le plus important, c'est que pour toutes les images se trouvant sur une même ligne, la cote de hauteur soit la même.
Attention : le repère 4 horizontal (c'est-à-dire la 4ème ligne horizontale en partant du haut) doit être à 1 px au-dessus de la partie verte foncée.


- Une fois que tous vos repères sont mis en place, il y a quelques dernières petites choses à faire, mais qui ont toute leur importance.

- Désactiver l'arrière-plan blanc.
Pourquoi ?
Ben... pour avoir la transparence au niveau des coins.

- Sortir une image bidon, pour que les réglages soient effectifs dans ImageReady (transparence, compression, détourage etc.).

Sortez cette image bidon.
Faites : Fichier -> Enregistrer pour le web.
Mettez les réglages ci-dessous :
Image utilisateur
- Puis validez.

- Voilà : maintenant, dans la barre d'outils, cliquez sur "Modifier dans ImageReady", ou Maj + CTRL +M (voir encadré vert).
Image utilisateur

La découpe

Tout en appuyant sur ce bouton, rien ne vous empêche de crier : "Transfert, Auto-Largue, Goldorak Gooooooo !!!!!"
Ça y est, vous devriez être dans ImageReady (en tout cas, moi, j'y suis ;) ).

- Donc là, le découpage va se faire suivant les repères.
Étant donné qu'il y a 5 images par ligne et 9 lignes, faites le calcul.

Bon : vu que j'ai dit que ce tuto serait facile et que seulement 2 neurones et demi devaient être nécessaires, je vais faire ce calcul pour vous (qu'est-ce que je suis sympa... :p ).
Vous aurez donc 45 images au total.

Prêts à découper ?
Prévoyez quand même un bon 1/4 d'heure devant vous pour découper l'interface.

Dans le menu du haut, allez dans : Tranches -> Créer des tranches d'après les repères.
Ça y est : votre interface est découpée.
...J'espère que vous avez mis moins d'1/4 d'heure :D .
Voilà ce que vous devez avoir :
Image utilisateur

Comme vous n'avez besoin que de 15 images et que vous en avez donc 45, pour éviter d'y perdre vos p'tits, vous allez renommer toutes les images dont vous aurez besoin.
Les autres gardant un nom par défaut, du genre
skn_retaille_x (x étant le n° de l'image), il vous sera plus facile de retrouver vos images utiles.

- Regardez à droite, la fenêtre : "Contenu web".
Si elle n'est pas apparente, activez-la : Fenêtre -> Contenu web.

Et vous voyez vos 45 images apparaître, avec les noms :
skn_retaille_01, skn_retaille_02, skn_retaille_03, etc.

- Cliquez par exemple sur "skn_retaille_01" et dans votre espace de travail, vous voyez un cadre apparaître dans le coin haut gauche.
Et pareil pour toutes les images sur lesquelles vous cliquerez.
Le but de la manoeuvre consiste maintenant à retrouver les images qui vous intéressent (et que vous garderez), à leur donner un nom propre et surtout explicite à chacune.

- Cette fois, je vais vous aider et vous dire les images que vous devrez renommer :
(ne marquez pas ce qui est entre parenthèses, c'est juste pour vous donner la signification de HG, etc.)


- Une fois ceci fait, dans le menu du haut, cliquez sur : Fichier -> Enregistrer une copie optimisée sous.
Laissez-vous guider et voilà : vous avez maintenant vos 45 images sur votre ordinateur.

Reste plus qu'à faire le tri et ne récupérer que les 15 qui vous intéressent.

Maintenant, regardez bien cette capture :
Image utilisateur

Vous constaterez que je n'ai pas appelé mes images au hasard.

Là, elles sont classées par ordre alphabétique et on a :
Bref, lorsque vous passerez au codage HTML, ce sera plus facile de s'y retrouver ;) .

Ben justement, puisqu'on parle du codage HTML, si vous vous en occupiez :o ?

Mise en forme HTML

Étant un ancien adepte de Dreamweaver (Hare Krishna :lol: ), j'ai gardé cette bonne vieille habitude de mes bons vieux tableaux :lol: .
Tout s'affiche correctement dans tous les navigateurs.
Des plus pourris aux meilleurs :p .

Mais suite aux différentes critiques dans les commentaires
"Bouh!!! les tableaux... pô bien :colere2: !",
j'ai donc refait cette 3ème partie.

Voici donc une technique que vous préférerez certainement.
Je vous ferais bien croire que le code est de moi :p , mais rendons à César ce qui lui appartient.

Merci donc à lift, qui a fait le gros du travail pour le code (voir son commentaire).
Ainsi qu'à Bogoris, qui m'a démontré que l'on pouvait faire un design assez complexe tout en utilisant des div.
Lift s'est inspiré de son tuto.

Je n'ai plus eu qu'à mettre le nom de mes images, rendre le tout compatible xHtml 1.0 Strict (ça, c'est pour la frime :lol: ), et à rectifier une petite bricole dans la class .milieu, pour que cela s'affiche correctement dans FireFox, IE6, Netscape 7.02, Opera et Konqueror (désolé, mais je n'ai pas d'autres navigateurs :lol: ).

Passons au code :
Code : HTML
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
 
<head>
<title>Design SteamErsatz</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.cadre
     {
     /* Largeur de l'interface que vous voulez mettre en % ou px, par exemple */
     width : 600px;
     }
 
/* ********** Les 3 images du haut du design ********** */
.haut_1
      {
      background : url("images/skn_coin_HG.gif") bottom left no-repeat;
      padding-left : 20px;
      }
 
.haut_2
      {
      background : url("images/skn_coin_HD.gif") bottom right no-repeat;
      padding-right : 20px;
      }
 
.haut
    {
    background : url("images/skn_coin_HM.gif") bottom center repeat-x;
    width : 100%;
    padding-top : 20px;
    /* On met un padding-top ou un padding-bottom dans la balise "la plus imbriquée", celle qui est le plus à l'intérieur, comme ça les autres div qui contiennent celle-ci seront redimensionnées automatiquement, et on verra les cadres
    Notez que dans une version antérieure de ce tutoriel, j'utilisais l'attribut height, mais je me suis rendu compte que ça créait des problèmes, notamment sous Internet Explorer, je ne sais pas pourquoi :-S  */
    }
 
 
/* ********** La partie Entête ********** */
.contenu_1_H
           {
           background : url("images/skn_vert_ent_G.gif") left repeat-y;
           padding-left : 20px;
           /* Pour que toute la place disponible soit utilisée (sinon il y a des bugs, si on met un titre h1 à l'intérieur, par exemple), n'allez pas me demander pourquoi  */
           }
 
.contenu_2_H
           {
           background : url("images/skn_vert_ent_D.gif") right repeat-y;
           padding-right : 20px;
           height : auto;
           }
 
.contenu_H
         {
         width : 100%;
         background : url("images/skn_Back_ent.gif");
         background-color : #5A6A50;  /* Si le serveur déconne et n'affiche pas l'image de background, on met une couleur à la place */
         font-family : Verdana, Arial, Helvetica, sans-serif; /* Nom de la police utilisée */
         font-size : 12px; /* Taille de la police */
         color : #C4B550; /* Couleur de la police */
         }
 
 
/* ********** Les 3 images du milieu séparant l'entête et le contenant ********** */
.milieu_1
        {
        background : url("images/skn_milieu_EC_G.gif") bottom left no-repeat;
        padding-left : 20px;
        }
 
.milieu_2
        {
        background : url("images/skn_milieu_EC_D.gif") bottom right no-repeat;
        padding-right : 20px;
        }
 
.milieu
      {
      background : url("images/skn_milieu_EC_M.gif") bottom center repeat-x;
      width : 100%;
      height : 20px; /* Pour voir le fond */
      }
 
 
/* ********** La partie contenant ********** */
.contenu_1_B
           {
           background : url("images/skn_vert_cont_G.gif") left repeat-y;
           padding-left : 20px;
           height : auto;
           }
 
.contenu_2_B
           {
           background : url("images/skn_vert_cont_D.gif") right repeat-y;
           padding-right : 20px;
           height : auto;
}
 
.contenu_B
         {
         width : 100%;
         background : url("images/skn_Back_cont.gif");
         background-color : #686A65;  /* Si le serveur déconne et n'affiche pas l'image de background, on met une couleur à la place */
         font-family : Verdana, Arial, Helvetica, sans-serif; /* Nom de la police utilisée */
         font-size : 12px; /* Taille de la police */
         color : #FFFFFF; /* Couleur de la police */
         }
 
 
/* ********** les 3 images du bas du design ********** */
.bas_1
     {
     background : url("images/skn_coin_BG.gif") top left no-repeat;
     padding-left : 20px;
     }
 
.bas_2
     {
     background : url("images/skn_coin_BD.gif") top right no-repeat;
     padding-right : 20px;
     }
 
.bas
   {
   background : url("images/skn_coin_BM.gif") top center repeat-x;
   width : 100%;
   padding-top : 20px;
   }
</style>
</head>
 
<body>
<div class="cadre">
<!-- Les 3 images du haut du design -->
        <div class="haut_1">
                <div class="haut_2">
                        <div class="haut">
                        </div>
                </div>
        </div>
       
<!-- La partie entête -->
        <div class="contenu_1_H">
                <div class="contenu_2_H">
                        <div class="contenu_H">
<!-- Ici le texte de l'entête -->
Post&eacute; le : 24/11/2005 &agrave; 19:35, par : El Konkonbr&eacute; Masqued<br />
Pays : France - Note : 10/10
 
                        </div>
                </div>
        </div>
       
<!-- Les 3 images du milieu séparant l'entête et le contenant -->
        <div class="milieu_1">
                <div class="milieu_2">
                        <div class="milieu">
                        </div>
                </div>
        </div>
 
<!-- La partie contenant -->
        <div class="contenu_1_B">
                <div class="contenu_2_B">
                        <div class="contenu_B">
<!-- Ici le texte du contenant -->
Bon : voici le design que vous allez cr&eacute;er.<br />
Il peut servir pour un livre d'or.<br /><br />
Mais il peut aussi servir pour un menu.
 
                        </div>
                </div>
        </div>
 
<!-- Les 3 images du bas du design -->
        <div class="bas_1">
                <div class="bas_2">
                        <div class="bas">
                        </div>
                </div>
        </div>
 
</div>
</body>
</html>
Vous verrez ici le résultat final de ce tuto.
Vous pouvez télécharger les sources de ce tuto (13 ko en .zip), et les utiliser comme bon vous semble.

Voilà ce que vous pouvez obtenir, en utilisant les mêmes images :
Image utilisateur

D'autres exemples


Vous pouvez aller ici et cliquer sur "SteamErsatz" dans le menu "Thèmes à gauche".
Et un autre exemple ici, sur un livre d'or en pleine bidouille.

J'espère que ce tuto vous aura été utile.

Le mot de la fin sera "fin".

Merci à Ptipilou des zCorrecteurs pour la correction des fautes de ce tuto.
Retour en haut Retour en haut


Créé : le 25/11/2005 à 01:39:19
Modifié : le 22/08/2008 à 16:09:04
Avancement : 100%
Licence : Copie non autorisée

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | Fil RSS | XHTML 1.0 | CSS 2.0
Édité par Simple IT SARL : Nous contacter | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 288 Zéros connectés | Requêtes SQL 9 requêtes | Temps de génération de la page : Total (SQL) 0.0311s (0.0205s)