poblème de gestion de fond de page web

[ascorbik]

bonjour,
J'ai des soucis de crénelage dans la création de mes pages web :
Je travaille ma page avec fireworks, j'exporte ensuite dans dreamweaver
Je veux un fond dégradé gris (pas possible de définir en fond dans fireworks sans passer par un dessin dégradé)

1er essai : fond image (dégradé) dans fireworks avec mes objets par dessus. après export c bon mais impossible de programmer un redimensionnement auto de la page car c limité à la taille de départ de mon fond d'écran.

2eme essai : ma page fireworks sans fond (fond transparent) avec mes objets. après export je définis un fond de page en jpeg que je fais répéter pour ajuster la page à différentes tailles. le pb : j'ai une apparition de crénelage plus ou moins important suivant mes objets. j'ai tout essayé mais impossible d'éviter ce crénelage même si mes objets st en jpeg qualité supérieure avant export. je pense que le pb est le fond transparent avant export.
Si je remplace l'image créée après export par le fichier png de l'image : plus de crénelage mais ça bave...
Si vous avez une idée merci je bloque depuis une semaine la dessus

 

[ascorbik]

pour résumer le problème se pose si ma page fireworks (.png) à un fond transparent. Si j'ai un fond pas de souci mais après je ne peux plus faire redimensionner ma page sauf si quelqu'un connait un code pour faire compléter mes bords avec le fond de fireworks ???

 

[jeanba3000]

Qu'entends-tu par « crénelage » ? Est-ce une pixélisation désagréable de tes images qui seraient affichées à une taille différente de leur dimension réelle ? Est-ce des franges sur les contours irréguliers lissés de tes images en gif transparent qui ne correspondraient pas à ton arrière-plan ?

Le mieux serait de ne te servir de Fireworks que pour designer ta page graphiquement, découper et exporter ce qui doit servir sous forme d'image (titraille, boutons, éléments avec des typos particulières, photos, graphismes divers...). Le reste, c'est à dire le développement de la page et l'intégration de ces images et du texte est à faire dans Dreamweaver. La génération de page html dans Fireworks est vraiment un piètre pis-aller qui pose plus de problèmes qu'il n'en résoud.

Ensuite, il faut savoir choisir le format d'export de chaque image : jpeg plutôt pour les images « photographiques » ou avec pas mal d'effets sans trop d'aplats qui rendraient mal en gif, et sans transparence ni animation, avec une palette en millions de couleurs ; gif pour les images « graphiques » fixes ou animées, avec des couleurs plutôt en aplat, des formes régulières, les textes (titraille, boutons) qui rendront plus net qu'en jpeg, et qui nécessiteraient des transparences, avec une palette limitée à 256 couleurs.

Il faut aussi savoir comment fonctionne la transparence d'un gif, on définit une ou des couleurs de la palette comme étant transparentes, et ce de manière binaire : visible ou invisible. Cela a une influence sur le lissage de certaines formes qui se fait de la couleur de la forme vers la couleur d'arrière plan. Un fond transparent sera géré comme un fond blanc, donc le lissage donnera une frange blanchâtre qui ne fonctionnera pas si on rajoute un background sombre après coup. En pratique, il faut générer la transparence à partir de la couleur ou du motif qui sera effectivement en arrière-plan.

 

[ascorbik]

Je vois que tu t'y connais
si tu veux visualiser le probleme, va sur ascorbik.club.fr j'ai ma page index : on voit le pb sur mon logo en bas de page mais il est présent sur mes autres pages sur des cadres avec hombre.
D'après ce que tu expliques, je crois comprendre que : parce que mon fond est gris il faudrait que je crée une transparence d'après ce gris, ai je bien compris ? si oui comment faire ?

 

[ascorbik]

pour info mon logo en gif n'est pas agrandit, j'ai essayé en jpeg de haute qualité c le même problème, je pense que c du à l'exportation en html avec un fond transparent. J'ai essayé de remplacer cette image dans dreamweaver par celle d'origine : ça marche mais pour mes autre pages c la galère car j'ai beaucoup de cadres qui bavent (crenelage) et je ne sais pas créer ces choses dans dreamweaver

 

[jeanba3000]

C'est bien un problème de lissage. Tu as du mettre un fond transparent derrière ton logo (tu vois apparaître le damier gris/blanc de transparence dans Fireworks) et le lissage s'est fait vers le blanc. Pour qu'il se fasse bien, il faut que tu mettes ton fond gris dégradé derrière ton logo, et quand tu exportes l'image découpée de ton logo en gif transparent, tu coches dans Fireworks les couleurs de ton arrière-plan pour les rendre transparentes, ainsi le lissage se fera vers les bonnes valeurs de gris et ça devrait bien rendre.

 

[ascorbik]

oui en effet j'ai un fond transparent derrière mon logo.
ok je comprends ce que tu veux dire mais comment faire pour rendre mon fond gris transparent au moment de l'export ? quelle option cocher car j'ai essayé pas mal de choses
car une fois que c''est exporté avec le fond gris c'est mort, les découpes sont grises.
Merci pour tes conseils avisés

 

[jeanba3000]

Dans la fenêtre d'aperçu d'export, tu as à gauche la palette gif qui s'affiche, et sous elle des pipettes. La seconde te permet d'ajouter des couleurs à la transparence, c'est à dire de rendre certaines couleurs transparentes. C'est là que tu rends ton fond gris dégradé transparent en ajoutant toutes ses nuances de gris, il ne devrait te rester que les couleurs de ton logo et celles du lissage vers le gris.

 

[apenspel]

Si c'est pour afficher un logo sur fond gris, autant ne pas mettre de transparence, mais directement un fond du même gris, non ?

 

[ascorbik]

oui je sais qu'avec un fond gris uniforme ce serait plus facile mais je tiens à garder mon fond dégradé. C'est là la difficulté car pas possible dans fireworks de définir une fond dégradé, je dois créer un calque et qui dit calque dit impossible d'adapter ce calque ensuite aux dimensions d'un navigateur.... donc je créé du html avec export sous fond transparent et je fais dupliquer via un CSS une image de 1 pixel de large gris dégradé pour faire le fond

 

[jeanba3000]

Ceci dit, vu le site et le dégradé en question, sur la première page en tout cas, il n'y a que peu de nuances de gris qui s'affichent au niveau du logo, donc tu pourrais très bien placer ce bout de dégradé ou même un aplat du gris moyen à cet endroit là et rendre ce fond transparent avec le bon lissage.

Fireworks est le plus puissant logiciel d'optimisation d'images web, mais faut apprendre à bien s'en servir et d'une manière générale apprendre comment on traite les images dans une page html, ça ne s'improvise pas.

 

[ascorbik]

je suis allé voir ton site jeanba, je le trouve soigné et esthétique...
Je ne peux malheureusement pas essayer d'appliquer tes conseils car je ne suis pas chez moi ce we et pas de fireworks sous la main... rrrr!
dès dimanche soir je bosse et j'ai hate de comprendre un peu mieux tout cela même si parfois c'est décourageant !
j'arrete donc mes questions pour l'instant mais je pourrais peut être te redemander qq trucs si je bloque...???
sur ce merci pour les conseils et à plus peut être

 

[ascorbik]

Finalement, pour solution j'ai trouvé :
Création page web sur Fireworks avec un fond dégradé (arrière plan), au moment de l'exportation j'ai fais gaffe à conserver le max de qualité (jpeg) de façon à me servir du fichier jpeg de départ (arrière plan dans fireworks) pou la dupliquer dans le navigateur à l'aide d'une ligne de commande dans une feuille de style CSS)
Jeanba, j'ai essayé avec les transparences mais avec un fond dégradé c la galère, impossible de définir tous les gris et après ça merdait quand même après exportation mais merci pour tes conseils.