Home>Graphisme>Lightwave>

Menu


0.) Présentation.
Etude sur la réalisation d'un menu html. Modélisation (dont recherche) = environ 2 à 3 heures.
1.) Items de base
Le menu comporte juste 3 liens : Accueil / Blog / Graphisme. La police est du Comic Sans MS 400 (Scale=1m, Corner=Sharp).

3 items pour le menu (vue de dessus).
m1_1_texte.jpg

Le curseur est placé sur l'origine (0,0) pour être certain d'avoir les textes alignés plus tard. Encadrer le mot (Box sans épaisseur) pour faire un gabarit. Dans un premier temps ce gabarit était retourné (fonction flip) pour ne pas apparaître au rendu, finalement l'effet est plus intéressant si on lui fait tenir lieu de fond.

Item n°1 (détail).
m1_2_texte.jpg

2.) Arranger les items.

Faire un calque pour chaque item, les gabarits peuvent êtres dans un même calque supplémentaire.

3.) Loupe

Dessiner une sphère (Ball) aux dimentions du gabarit (en noir, i.e. en calque de fond, le texte).

Création de la loupe (vue de dessus).
m1_3_sphere.jpg (vue de dessus).

Les sphères auront la même épaisseur, ici 1.2m ; sélectionnerla partie basse et l'applatir (Set Value = Ctrl-V). Ajuster la hauteur de l'ensemble (en calque de fond, le texte).

Modification de la sphère (back vue).
m1_4_sphere2.jpg (vue arrière)

Les sphères sont dans des calques séparés. Leur appliquer une texture glassOut, les duppliquer individuellement retourner la copie et lui appliquer une texture glassIn.

4.) Scène.

Intégrer les objets à une nouvelle scène.

Créer un spot à la verticale de chaque objet et le baisser pour qu'il l'éclaire tout juste (traits pointillés mauves). Avoir des hauteurs différentes suppose que l'atténuation en fonction de la hauteur n'est pas activée. La lumière principale de type directionnelle est conservée.

Placer la caméra très haut à 90 degrés, jouer sur le zoom pour optimiser la zone de rendu (traits pointillés jaunes)

Positionnement des éléments.
m1_5_eclairage.jpg (layout)

Placer les spots sera plus facile si on passe en Light Vue.

Vue selon le spot séléctionné.
m1_6_eclairageDetail.jpg

 

5.) Rendu type.

Caméra : width/height=800x200, antialiasing=low,
Render option : Ray Trace Reflection + Ray Trace Refraction

Rendu final (RayTrace Optimisation sur 7)
R0.jpg

Le texte est très peu visible ! L'idée est qu'en rapprochant le texte des loupes il deviendra plus net. On peut baisser l'indice de réfraction de 1.6 (presets Glass_Outside et Glass_Inside) à 1.2 mais le résultat final me plait bien :

5.) Rendus et montage rollover.

Je me suis servi de Gimp pour faire l'Image Map. Toute l'image est modifiée par ce procédé selon la zone survolée par la souris.

Montage du rollover

5.) A suivre...
- pb= l'image derrière la loupe de gauche ("Accueil") change -> bouger la loupe au lieu du texte ?
- todo : etapes (gifs annimés)
- todo : images séparées plutôt qu'image map ? (serait plus convenable dans le cas gifs animés)
- rendu : appliquer un fresnel ?