Interface Etoile Rouge : menu en liste.

travail avec PSP

Ce tuto est fait avec PSP10 par Danyelle. mais il est largement inspiré par l'interface Missing You de Caro pour le montage dans Dreamweaver.

Nous allons essayer de faire une interface sans utiliser de graphisme extérieur. Seulement PSP et les formes prédéfinies. Mon travail Ici . Chez moi, la critique a été sévère, je devrais appeler cette interface, la Soviétique ! Bon, je l'accepte ! Mais je dirais plutôt l' Etoile Rouge et si je change la couleur de l' étoile.... hihihi !

 

1 - Fichier/Nouveau :

 

2 - Les couleurs :Choisissez une couleur claire et une couleur foncée. Mettez la couleur foncée en avant-plan.
J'ai choisi pour la claire #B7E5E4 et pour la foncée #4ABEBB .
Faites un dégradé de premier-plan linéaire:

3 - Le fond de l'interface.-
Ajoutez un Nouveau Calque, l'appeler fond. Versez le dégradé avec l'outil Pot de Peinture .

4 - Ajoutez un Nouveau Calque.l'appeler deco_fond.Prenez l'outil Stylo avec :connecter les segments, afficher les noeuds et créer sur vecteur, cochés .

Fermez la couleur foncée d'avant-plan et placez trois noeuds en triangle:

Vous pouvez ajouter des noeuds sur les côtés du triangle pour courber ces côtés :(je n'arrive pas à faire des captures d'écran des pointeurs snifff !
Placez le pointeur sur un côté du triangle qui est un vecteur . Quand le pointeur est bien dessus, il se transforme en une plus grosse flèche noire avec une petite sinusoïde dessous, appuyer en plus sur la touche contrôle du clavier, la petite courbe sous le pointeur se transforme en +ajout, à ce moment cliquer surla ligne vectorielle et un nouveau noeud va s'ajouter. Sans bouger votre souris , faites un clic droit pour afficher, sur ce noeud, un menu contextuel et choisssez un noeud symétrique ou asymétrique selon votre désir.

Vous pouvez déplacer le noeud et aussi en tirant sur les deux vecteurs changer la forme de la ligne droite qui devient une courbe.
En plaçant d'autres noeuds, vous modifierez les formes à votre gré.

Quand vous êtes content de votre tracé, convertissez le calque vectoriel en raster ( clic droit sur le vecto dans la palette des calques. Vous pouvez baisser l'opacité du calque.

Vous pouvez recommencer autant de fois que vous voulez ce procédé et faire votre décor d'arrière-plan pour votre interface .Vous pouvez mettre des couleurs intermédiaires entre les deux couleurs choisies au départ et pourquoi pas, en utiliser d'autres... à vous d'imaginer !
Voici ce que j'ai fait. Ne rigolez pas trop, vous pouvez donc faire mieux !

5 - Le logo .

Ne le faites pas trop haut, car il faudra mettre trois cadres en dessous.(voir mon zoli travail !)

Vous pouvez faire le logo de vos rêves pourvu que vous le fassiez avec PSP et ses formes prédéfinies...

Nouveau calque.
Maintenant, nous allons faire un logo à droite. Et si vous inventiez le vôtre ?Vous pouvez. Si vous ne savez pas quoi faire et que le mien vous plait, alors je vous explique comment j'ai fait :
Avec la couleur foncé en arrière-plan, et rien en avant-plan, dessinez une cercle avec l'outil des formes prédéfinies.Placez-le à droite de votre image.
Sélection/ Sélectionnez tout.
Sélection/Flottante
Sélection/Statique
Sélection/enregistrer sur le canal alpha ( cela peut servir...)

Nommer ce calque logo

Remplir de la couleur foncée

Sélection/Modifier/contracter de 1px, verser le dégradé linéaire du départ(couleur claire en haut)

Mettez le dégradé Halo, avec la couleur claire au milieu.Faites une ellipse moyenne dans la moitié haute du cercle.

Remettez le dégradé linéaire du départ ( claire en haut) , et faites une petite ellipse dans le bas de la seconde moitié du cercle. Convertissez ces ellipses en raster .

Entre les deux ellipses, écrire avec la police de votre choix et une couleur contrastante ( j'ai choisi le rouge en couleur de remplissage, #FF0000 et le vert foncé en couleur de contour ou pas de couleur de contour, au choix), Convertir en raster,
Faire une ombre portée :

puis, en mettant la couleur contrastante en couleur de contour, sans couleur de remplissage, faites une ellipse de 1px pour encadrer le nom . ( pour moi, elle est rouge)

Mettez-vous sur le calque logo, et faire une ombre portée comme celle précédente.

6 - décoration de l'interface.

Il convient de décorer la partie haute gauche en face du logo. Ne dépassez pas la hauteur du logo car, il va falloir mettre les trois tableaux en dessous.

Et bien, maintenant, vous faites le décor que vous voulez avec la couleur contrastante et les couleurs utilisées pour le fond.

7 - les tableaux

Nous utiliserons la méthode des calques exclusivement , il convient de faire le graphisme des cadres à la dimension maximale dont nous aurons besoin. Nous mettrons des calques sur les cadres pour mettre du contenu.

J'ai donc donné la largeur 720px à peu près à une forme de rectangle arrondi, avec un gris #C0C0C0, et un contour de 1 ou 2 px de la couleur la plus foncée du départ.

J'ai fait un second rectangle avec un gris un peu plus foncé,Il devra contenir les boutons des menus et devra avoir une taille minimale de 645px sur 83px de haut ( j'ai 4 boutons dans une colonne et 4 colonnes, c'est à vous de voir pour votre projet .)

Puis un troisième rectangle, plus petit et plus foncé, pour mettre le copyright.

Quand vous aurez fait ces trois cadres , convertissez le calque vectoriel en calque raster , réduire l'opacité du raster à 50 et mettre une ombre portée comme prédédemment.

Il est conseillé d'entregistrer ce travail en PSP dans un dossier on ne sait jamais...

Vous enregistrez dans le dossier de votre site cette interface en JPG mais faites attention de ne pas trop compressé.

8 - les Boutons

Pour les dimensions de mon tableau, les boutons auront la dimension définitive de 160px sur 20px

La base des boutons est le bouton over :

Pour le bouton over de 160px sur 20px remplissez un calque de la couleur foncée du départ.

Ajouter un nouveau calque :
Remplissez-le avec le dégradé noir et blanc, le blanc en haut. Mettre ce calque en mode Ecran. Enregistrez sous le nom btn_over en jpg dans le dossier de votre site.

Dans la palette des calques, diminuez l'opacité du calque du dégradé en noir et blanc à 65, Enregistrez en jpg, sous le nom btn

Faites un cadre de la couleur contrastante, dissymétrique avec le bottom de 2px et les autres côtés de 1px, redimensionnez à 160 sur 20 px , enregistrez en jpg sous le nom rubrique .Merci à Caro qui nous a appris à faire ce genre de bouton dans l'interface Missing you.

9 - la tuile pour le background du body.

Vous faites une tuile pour assortir à cette interface. Comme j'ai fait les cadres avec la couleur grise, j'ai fait cette tuile à partir du gris #C0C0C0; J'ai pris une texture avec un gris plus foncé. la texture est :grille . Elle est dans PSP10. Ren cas où, je vous la donne :Ici

Vous avez maintenant tout ce qu'il faut pour construire l'interface dans Dreamweaver.

Mise en page dans dreamweaver

1 - ouvrir un nouveau document dans dreamweaver. Lui donner un titre et sauvegarder cette page dans le dossier dans lequel vous avez placé les images.

2 - créer une règle CSS pour body :

 

3 - créer une règle pour le wrapper :

4 - mettez vos div en positionnement relatif

5 - placez le code de la scrollbar tout au début du style avec l'astérisque :


SCROLLBAR-FACE-COLOR:#C6C4C5;
SCROLLBAR-HIGHLIGHT-COLOR:#C6C4C5;
SCROLLBAR-SHADOW-COLOR:#C6C4C5;
SCROLLBAR-3DLIGHT-COLOR:#C6C4C5;
SCROLLBAR-ARROW-COLOR:#868283;
SCROLLBAR-TRACK-COLOR:#868283;
SCROLLBAR-DARKSHADOW-COLOR:#C6C4C5;

 

6 - Sur le premier cadre de l'interface,

Insérer un calque avec le menu insertion de Dreamweaver.

Le top et le left du calque peuvent varier selon la position du cadre dans l'interface.
J'ai mis une scrollbar spécifique à la boite.
Quand vous insérez le calque, Il se place dans la CSS avec sa position, ses dimensions, son niveau dans l'empilement. Vous pouvez aller mettre côté Code, les attributs complémentaires :text-align, padding, overflow et les codes pour la scrollbar de la boite de texte : Vous devez avoir tous ces attributs :

position:absolute;
left:41px;
top:334px;
width:658px;
height:212px;
z-index:1;
text-align:center;
padding:10px;
overflow:auto;
SCROLLBAR-FACE-COLOR:#BDDBDB;
SCROLLBAR-HIGHLIGHT-COLOR:#BDDBDB;
SCROLLBAR-SHADOW-COLOR:#BDDBDB;
SCROLLBAR-3DLIGHT-COLOR:#BDDBDB;
SCROLLBAR-ARROW-COLOR:#848484;
SCROLLBAR-TRACK-COLOR:#BDDBDB;
SCROLLBAR-DARKSHADOW-COLOR:#BDDBDB;

En mode Création, vous écrivez votre texte de bienvenue ou tout autre baratin .

7 - sur le petit dernier cadre, ajoutez un calque : Le top et le left du calque peuvent varier selon la position du cadre dans l'interface

position:absolute;
left:47px;
top:771px;
width:668px;
height:24px;
z-index:2;
margin:auto;
color:#FFFFFF;
text-align:center;

Les margin auto placeront le texte pour le copyright bien au centre, horizontalement.
En mode Création, vous écrivez le copyright.

8 - Maintenant nous allons placer les éléments de CSS relatifs au menu dans le cadre du milieu.
Il faut déjà mettre un calque :Le top, le left et les dimensions du calque peuvent varier selon la position du cadre dans l'interface.

position:absolute;
left:59px;
top:619px;
width:645px;
height:83px;
z-index:3;

Dans ce calque insérez un tableau :

nous allons établir la CSS pour ce tableau qui aura pour identifiant : menu que vous écrirez dans le tableau des propriétés comme ID de tableau. Aligner: Centrer..

Etablissons la règle CSS pour l'id : #menu :

Dans Type, mettez 20px pour la hauteur de ligne
Dans arrière-plan, donnez une couleur , j'ai mis #FF0000
Dans boite, donnez la largeur du calque contenant, pour moi, c'est 645px
Dans Bordure, j'ai mis une bordure Solid, d'un pixel de la couleur de l'arrière-plan du tableau

Afin de séparer les cases du menu j'ai mis une bordure aux cellules du tableaux :
Nouvelle règle de CSS: pour #menu td

la règle est :

9 - Dans les cellules de la première ligne , vous allez mettre les rubriques. Pour cela définissez une Nouvelle Règle de CSS . Je vais définir une classe . rub :

en arrière-plan, mettez l'image rubrique.jpg
dans Bloc alignement vertical est mileu
l'alignement du texte est centrer

Cliquez dans chaque cellule de la première ligne pour y mettre la class="rub" avec le panneau des propriétés :

Ecrire dans cette cellule le mot :Rubrique1 .
qui donne ce code :

<td class="rub" >Rubrique1</td>

Refaire ce travail pour chaque cellule de la première ligne.

10 - Maintenant vous vous occupez de définir la règle Css pour les liens :
respectez l'ordre, j'ai perdu une soirée à cause de cette négligence !

Nouvelle règle Css pour : #menu li a .
Dans type : Police :font-family: Verdana, Arial, Helvetica, sans-serif;
décoration : aucune
couleur: #FFFFFF;
Dans bloc : afficher : bloc
Dans boite:hauteur: 20px; remplissage idem pour tous coché; marge bas 3px

Nouvelle règle Css pour : #menu li a :link
dans arrière-plan : btn.jpg
dans bloc : retrait du texte de 10px

Nouvelle règle Css pour : #menu li a :visited
dans arrière-plan : btn.jpg(votre image pour le bouton normal)
dans bloc : retrait du texte de 10px

Nouvelle règle Css pour : #menu li a :hover
dans arrière-plan : btn_over.jpg (votre image pour le bouton over)
dans bloc : retrait du texte de 5px
dans boite : marge gauche de 10px

Une dernière nouvelle règle de style pour la balise ul :
dansboite : remplissage et marge idem pour tous coché, à 0
Dans liste :type:aucune.

Tout est prêt pour mettre les liens :
Dans la 2ème ligne du tableau , la 1ère colonne:Je clique dans la cellule avec la souris pour la sélectionner. Dans le tableau des propriétés, donnez la position du texte des liens :

Cliquez sur le bouton des puces dans le tableau des propriétés,
Ecrivez le premier texte de lien,j'ai mis lien1, espace,
Cliquez sur le bouton des puces dans le tableau des propriétés,
Ecrivez le deuxième texte de lien,j'ai mis lien2, espace,
Cliquez sur le bouton des puces dans le tableau des propriétés,
Ecrivez le troisième texte de lien,j'ai mis lien3.

Revenir sur le lien1, et faire le lien avec une autre page , le décor doit s'installer.
Faire les liens sur les deux autres mots .

Je vous mets le code d'une cellule pour vous montrer ce que vous devez obtenir :

<td align="left" valign="middle">
<ul>
<li><a href="../index.htm" target="_blank" >Lien1</a> <a href="../interf_missingyou5/missingyou.html" target="_blank">Lien2</a> <a href="../index.htm">Lien3</a></li>
</ul></td>

J'espère que je ne vous complique pas trop la vie. Si c'est le cas, posez moi toutes les questions nécessaires pour éclaircir le sujet !

J'espère que vous prendre beaucoup de plaisir à redécouvrir cette façon de faire un menu sans bouton rollover , rien que des CSS.

Tutoriel fait pour Grafixart dans le cadre du grand devoir de fin d'année en juin 2008.

Danyelle