Image d'un creux

Chamyky

Membre expert
Club iGen
11 Mars 2005
1 278
39
ehv.monespace.net
Je suis actuellement en train de créer une page Web, et j'aimerais faire en sorte que le titre de la page donne l'impression d'être dans un creux.
Mais d'une façon spéciale : il faut imaginer que le haut de la page également est en relief.
Voici une image de ce à quoi ressemblerait la page si on la regardait de côté (plutôt abstrait tout ça) :
vuedectvm2.png


Le haut de la page serait donc comme incliné vers l'utilisateur. Un simple dégradé donnerait cet effet.
Et le titre serait comme dans une niche, dont le fond serait plat, creusée dans ce haut de page.
J'ai tenté d'obtenir cet effet avec quelques dégradés avec Flash, et voilà ce que ça a donné :

headerflashru2.png


On peut comprendre ce que je veux faire sur cette image, mais le rendu final n'est pas du tout à la hauteur, ça ne donne pas une vraie impression de creux…

Voilà donc où je veux en venir : quelqu'un aurait il une idée de comment dessiner ça ?
 
Ajoute des effets dans ton texte (titre de la page), comme si le haut de la "niche" projetait de l'ombre (lumière venant d'en haut, à 90°), de façon à ce que ton texte soit en partie ombré.
 
Un truc comme ça ?

sanstitre1nn6.jpg


Je me suis basé sur ta description et sur ton schéma de profil
(je ne comprends pas bien ta 2e image)

Ici il y a 3 dégradés en tout :

1 dégradé pour le fond de page (très légèrement plus clair en bas, ça donne du relief)
1 dégradé pour la partie inclinée un plus foncée que le fond (très légèrement plus clair en haut…)
Dessus j'ai placé mon titre
Et encore dessus j'ai placé 1 dégradé transparent (foncé en haut, transparent en bas) à cheval sur le texte.
 
Ajoute des effets dans ton texte (titre de la page), comme si le haut de la "niche" projetait de l'ombre (lumière venant d'en haut, à 90°), de façon à ce que ton texte soit en partie ombré.

Mon texte sera "lumineux", donc ça ne s'applique pas à ce niveau là. Par contre je peux l'utiliser sur le fond même de cette niche.
Et puis, le creux en lui-même doit être travaillé, il y a vraiment quelque chose qui ne va pas.

…Je me suis basé sur ta description et sur ton schéma de profil
(je ne comprends pas bien ta 2e image)…

Oui, je n'ai pas été clair. Voici une nouvelle image qui devrait mieux expliquer ce que je recherche : j'ai appliqué une "texture" de grille sur ma page, pour en faire ressortir le relief.

grilleje8.png


Ce qu'on y voit (en termes de cadrage, je pense surtout aux bords gauche et droit de l'image) est exactement ce que verra l'utilisateur.
Cependant les proportions ne sont pas bien représentées (il y aura autant de marge au-dessus qu'en dessous du titre, celui-ci sera plus en longueur…).

je pense que tu peux trouver ca en cherchant la création de l'effet aqua comme dans os x, et en inversant l'effet de relief pour l'avoir en creux...

exemple ici

ou là

Merci de l'idée. Je vais essayer, mais ça risque à mon avis de donner des effets étranges, et ce que je recherche comme forme n'est pas vraiment très répandu.
 
Mais mais mais ! … C'est un simple rendu d'ombres sur des surfaces planes ça !

Fais quelques recherches sur la perspective des ombres (je vois que tu as déjà des notions de perspective vu ton dernier schéma). C'est du niveau débutant en dessin ça ;)

Le principe en gros :

Si tu décide que la lumière vient d'en haut : plus les surface seront vues de dessous (plus elles se rapprochent de l'horizontalité plus elles seront foncées).

Après il ne reste qu'à placer les ombres portées (c'est le niveau juste au dessus de débutant ;) )
 
Bon, j'ai essayé avec ce que tu m'as dit; voici le résultat.

C'est vrai que c'est beaucoup mieux qu'avant, mais je me demandais si je ne pourrais pas encore améliorer l'impression. Peut-être que je devrais mettre une "texture" à l'image de fond (c'est à dire le dégradé) ? Même légère, elle pourrait aider à percevoir la forme.
Par contre, je voulais une surface très lisse, alors ça me rebute un peu…

Edit : Je viens de rajouter une légère ombre à ma surface inclinée, et ça l'a vraiment mise en valeur ! Décidément, les ombres sont vraiment très influentes.

Edit 2 : Hõlà, tu viens de préciser, merci :) ! Je vais rajouter un dégradé en bas de l'ombre portée.
 
La partie du haut inclinée devrait être beaucoup plus foncée.
Je sais que ce n'est pas flagrant sur mon image (mais c'est toute la magie de la perspective !) : sur mon exemple la partie du haut est 2 fois plus sombre que celle du fond… Mais le cerveau a l'impression que c'est la même matière.

Pareil pour le haut du "cadran" (le plafond du renfoncement) fais le encore plus foncé. Placé où elle est cette zone est très à l'ombre et éclairée par rien du tout. En fait ça sera l'endroit le plus sombre de l'image.

Tu peux résoudre ton problème avec les dégradés et des aplats uniquement : pas besoin de textures.
 
D'accord, je modifie ça tout de suite.

Edit: J'ai essayé d'appliquer ce que tu venais de me dire, mais ça ne me satisfait vraiment pas. Je ne vois pas où j'ai mal fait, mais je trouve que l'effet est beaucoup moins… poli. Que ça ressort beaucoup moins. Ça fait plus terne.
J'ai laissé deux versions en ligne, avant et après.
 
Tu n'y vas pas assez franchement dans les différences de gris.
Oublie l'ombre portée pour le moment et concentre toi sur les 3 principaux tons de gris :

prend 3 gris qui se démarquent bien ! un clair, un moyen, un foncé.
S'il y avait un sol il serait blanc.

sanstitre2ot5.jpg
 
  • J’aime
Réactions: jpmiss
Arf !

C'est mieux mais j'ai pas réussi à faire passer la logique…

Bon.

Le fond du cadran est incliné exactement comme le grand fond global, OK. Ils sont verticaux et face à toi tous les deux… Donc… Donc ils sont éclairés pareils (hors ombre portée) et doivent être sensiblement du même ton. Je t'ai mis "Le même gris" dans mon exemple précédent.

Ben s'il était nécessaire de le prouver… Il faut des années pour faire un graphiste. ;)
 
Ah mince… j'avais bien compris, c'est une erreur à la coloration ça, je devais être fatigué (je sais, c'est l'excuse standard). C'est corrigé !
Ne t'en fait pas hein, tu expliques bien, j'avais compris ! Quand même :D !