Degradé avec un programme de dessin

Bonsoir

je cherche un tuto pour faire un degradé qui illustrerait mes cadres de menu (image de fond d'un div) a faire avec inskape ou photofiltre ou paint.net3 ?

qulequ'un aurait ca sous le coude car je galère

Merci

Hélly

Bonjour,

Peut être serait-il bien que tu exprime ce que tu souhaite plus clairement, si tu as des exemble, car je ne suis pas sur de comprendre. Tu veux faire des blocs dans ton site, qui possède un cadre et dont le fond est en dégradé, c'est bien çà ?

Concernant Photoshop, tout le monde n'a pas la possibilité de se payer une telle licence, mais il existe des solutions gratuites qui peuvent se substituer sans peine, comme TheGimp pour le plus connu, et d'autres shareware ou freeware, ou version lite de certains grands logiciels.

Mikachu a écrit :
Concernant Photoshop, tout le monde n'a pas la possibilité de se payer une telle licence

Oui mais bientôt sortira une version gratuite et en ligne de photoshop. Elle possèdera des fonctionnalités réduites (mais je pense que le dégardé y sera...)

+1 pour TheGimp

Sinon dans Paint.Net v3.01 tu as une fonction de dégradé... dans la barre d'outils.
À toi de donner la taille qu'il faut à ton image et le tour est joué !

Fauxto!

En fait, c'est un div qui me sert par exemple de menu horizontal auquel je veux affecter ce degradé. Puis, un autre pour le div menu vertical.

J'espere que c'est plus comprehensible.
Sinon, je vais essayer de telecharger paint3 e essayer le degradé. Mais après, comment faut il découpé l'image ?

Hélly

Ah, donc tu veux juste faire une image d'un dégradé qui servira de fond à une <div> ?
Et bien pour la taille, il te suffit de créer ton image en définissant la largeur et la hauteur en pixels que tu veux.

Ben en fait, je sais pas. Je suis vriament pas créatif et nul en graphisme.

Je voudrais juste améliorer ce point pour mon site (le graphisme) et donc, j'ai une bannière, en dessous un div contenant un menu horizontal, un div vertical avec un menu, le corps et le footer.

Je voudrais donc habiller ces div pour un rendu visuel plus joli. on m'a parlé de dégradés qui se répètent en image de fond mais je ne sais pas comment faire.

c'est pour ca que je demandais quelques conseils pour y arriver (desolé mais mon site n'est pa en ligne)

Faudrait que je fasse un impri ecran...

Hélly

Pour plus de légéreté tu peux utiliser une image de la hauteur de ton dégradé mais qui n'aurat qu'un pixel de large et ensuite la faire se repeter avec la propriété repeat:

exemple

background:#F7D807 url(images/degrad_yellow.gif) repeat-x bottom;

repeat-x dans le sens horizontal
repeat-y dans le sens vertical

De cette façon tu peux faire de chouettes design ultras legers

bonsoir,

moi sur mon site j'ai réalisé mes dégradés avec Paint.net, il est génial pas trop puissant encore mais très facile a prendre en main.

http://isis.diboo.net

voilà

matmat a écrit :
Pour plus de légéreté tu peux utiliser une image de la hauteur de ton dégradé mais qui n'aurat qu'un pixel de large et ensuite la faire se repeter avec la propriété repeat:

Enfin j'ai lu quelque part y'a pas longtemps qu'une image d'1px de large ou de haut répétée peut provoquer des ralentissements dans le chargement de la page, et qu'il vaut mieux avoir une image qui fait un peu plus pour éviter de trop lourds calculs. Bon ca reste à vérifier quand même, j'ai fait des tests et je n'ai pas vu vraiment de différence.

matmat a écrit :
Pour plus de légéreté tu peux utiliser une image de la hauteur de ton dégradé mais qui n'aurat qu'un pixel de large

Il n'y a rien de mieux pour faire bien ramer certaines machines! Il vaut mieux choisir un bon compromis poids/nbre. de répétitions nécessaires pour des performances optimales. (par exemple: 10px de large)

Au passage helly, as-tu essayé l'outil dont je parle dans mon post précédent? C'est simple, (relativement) puissant et gratuit...

edit: youps, grillé...
Modifié par Benjamin D.C. (15 Mar 2007 - 19:56)

c'est vrai, j'ai eu une fois des énorme ralentissement (uniquement sur ie) sur la repetition d'une image sur l'element body, image de 5X5. 40X40 est le probléme était résolu.
Sur un petit dégradé je pense qu'il n'y a pas de probléme, par precaution c'est peut-être mieux de mettre 5px au lieu d'un par exemple 30X5 ou 30X10