JPG ou PNG ?

JPG ou PNG ? - Web design - Graphisme

Marsh Posté le 09-06-2005 à 01:36:22    

Bonsoir à tous
Il est tard, mais je suis en pleine création là...et je me posais une question. Je suis en train de découper mon design, mais au moment où j'allais l'enregister je me suis dis: JPG ou PNG? Je pense que le format JPG est mieu, mais je vois de + en + de personne utilisé le format PNG. Est-il plus léger??
Merci :hello:

Reply

Marsh Posté le 09-06-2005 à 01:36:22   

Reply

Marsh Posté le 09-06-2005 à 01:38:31    

Je sais qu'il est tard mais si quelqu'un pouvait me répondre, faut que je finisse :D

Reply

Marsh Posté le 09-06-2005 à 02:15:35    

PNG est un peu moins léger, mais PNG c'est puissant je m'explique :  
 
le PNG conserve la transparence sur couche Alpha, comparé au gif qui ne fait qu'une transparence sur un index de couleur.
ensuite le PNG peut avoir plusieurs calques et meme conserver des données vectorielles
enfin le PNG est libre
 
Le jpg c'est vieux, c'est bien car  ca compresse les images, mais c'est surtout fait pour la photographie et la compression se fait avec un peu de perte
 
et pour le gif, ben ca sert surtout aux animation ou aux petites images qui sont composées de moins de 256 couleurs.
 
Pour le moment si tu as des photos tu peux les mettre en jpg, si tu as des éléments graphiques pour ton site passe les en PNG
 
Mais si tu as de la transparence dans certains éléments, passe les en Gif pour le moment, tu ne peux jouer que sur la transparence d'index alors fait attention.
 
Quand tous les navigateurs, surtout IE, sauront lire les PNG et gérer la transparence de ces derniers, là tu pourras abuser du PNG

Reply

Marsh Posté le 09-06-2005 à 02:16:59    

A la rigueur tu peux essayer de gérer en CSS si tu as certains éléments, de créer 2 images
1 jpg ou Gif avec transparence pour IE  
1 Png pour Firefox
 
et ensuite dans ta CSS tu mets ça a la suite :
 
background-image:url(monimage.PNG); /*Pour FF*/
_background-image:url(monimage.gif); /*Pour IE*/

Reply

Marsh Posté le 09-06-2005 à 02:26:47    

ah daccord je vois, je te remerci.
Mais sinon j'aurai encore une petite question. je compte bien faire la mise en page en CSS, mais jsuis un peu bloqué... Parce qu'en fait c'est un design que je découpe donc en plusieurs morceaux, et donc ensuite je dois les placer un par un avec les css?? Je préfère mettre les images avec le css pour si un jour je veux changer de design.
J'éspère que c'est compréhensible... :whistle:

Reply

Marsh Posté le 09-06-2005 à 02:37:11    

up :bounce:

Reply

Marsh Posté le 09-06-2005 à 02:47:51    

oué ben sache que avec les feuilles de styles ce qui est possibles c'est que n'importe quel élément DIV SPAN P A IMG peut ressembler à n'importe quel autre élément en modifiant ses propriétés via les styles.
 
Pour tes images je voudrai bien voir la "gueule" de ton design en entier histoire que je te donne des conseils sur la manière de le découper.

Reply

Marsh Posté le 09-06-2005 à 03:11:31    

Tiens, alors voilà le design comme il est:
 
 
et voilà comment moi je voulais le découper...je ne sais pas si c'est bon mais enfin j'atten tes suggestions:
 
 
Et en fait, je voulais simplement savoir si pour constituer mon design donc (grace au css et PAS aux XHTML), est-ce qui fallait positionner les images une par une?


Message édité par levystore le 09-06-2005 à 14:42:26
Reply

Marsh Posté le 09-06-2005 à 08:08:28    

ah oui ta decoupe est un peu sans scrupules.
Je pense qu'il faudrait remanier un peu la découpe et tout faire l'intégration en CSS
 
 
PS : Hummmmmmmmmmmm CS, quand tu veux sur une Aim Map mon lapin

Reply

Marsh Posté le 09-06-2005 à 08:17:08    

tu pourrais m'envoyer oui me mettre sur un FTP ton fichier source pour ce desing ??? je m'occupe du reste.
 
PSD, PNG ou autre...

Reply

Marsh Posté le 09-06-2005 à 08:17:08   

Reply

Marsh Posté le 09-06-2005 à 09:02:14    

Voila comment je vois ton site :  
 
http://gatsu.ftp.free.fr/Modele/CSSite/Maquette.html
 
J'ai tout positionné en CSS et tu n'as que 3 images.
Suffit de regarde le répertoire
http://gatsu.ftp.free.fr/Modele/CSSite/Images
 
La découpe c'est pas dur, j'ai découpé tout le haut en un seul et meme bloc et je l'ai foutu en background.
 
Ensuite j'ai découpé un petit bout de la bordure de gauche, et un autre bout de la bordure de droite.
et eux je les ai mis dans des DIV positionnés en absolute sur la gauche et la droite sur toute la hauteur
 
PS: Je retravaille sur la mise en page j'ai merdé un truc en CSS
 
J'ai mis des DIV pour representer le Bandeau et le menu
et des bordure à ces deux là pour que tu vois bien la différence.
 
Mais il me faudrait le design original. JE pense que ton menu devrai être plus grand (je parle de la barre bleu un peu transparente.
 
Donc ce qu'il te faut faire pour ce bloc de bandeau :  
Enlever le texte en haut : Bienvenue sur Amiti
Enlever le texte juste en dessous : CS.AMITI.TEAM.WEBSITE
Enlever les textes exemple du menu
agrandir le menu en hauteur, je le trouve un peu illisible si on doit metre du texte. met plutôt 10px (comme sur mon schéma).
 
Edit:
Enlève aussi les trucs pour le Match
ensuite reexporte ton bandeau.
JE serai ravi de t'aider à comprendre comment j'ai fait ça.
 
Ps: Ya 2 ans j'étais un ultra Tablator et j'aurai pensé presque comme toi, alors qu'il ne faut même pas se casser la tête. Je pense que la manière que je l'ai fait là, c'est la meilleure solution.


Message édité par gatsusat le 09-06-2005 à 09:08:04
Reply

Marsh Posté le 09-06-2005 à 13:44:47    

Salut gatsusat (pardon jme sui couché tard :D )
Jte remerci de m'aider comme tu fais. Mais je ne comprend pas pourquoi tu veu que j'enlève le bienvenue sur Amiti et la phrase d'en dessou? Elle fait parti du design...comme c'est une police spéciale, il faut que je la mette en image pour qu'elle s'affiche pareil pour les autres. Par contre si j'avais autant découper c'était pour que les images ne soient pas trop grosses, pour qu'elles ne soient pas longues à chargées.
 
Mais sinon je vois très bien ce que tu veu faire avec les bordures, moi j'aurais voulu mettre la propriété background-repeat comme ça:
 
body
{
 background-repeat: repeat-y  
}

 
ah oui mais mince, il y a une bordure a droite ET a gauche...ça marchera pas donc :(  
 
mais j'aurait aussi voulu mettre un margin:auto pour centré le design, mais je crois que ce n'est pas compatible avec Internet Explorer mais je suis pas sur (et il y en a encore qui sont sous internet explorer :ange: )
 
Sinon aussi, le menu ce n'est pas la barre bleue, la barre bleue c'est juste un ptit repère, le menu situe juste en dessous de "navigation", collé contre la bordure de gauche donc.
 
Donc di moi ce que tu veux que j'enleve, à la limite le texte "derniers matchs" et "prochains matchs" oui je veu bien, mais les autres font parti du design tu comprend?
En tout cas merci :hello:

Reply

Marsh Posté le 09-06-2005 à 14:03:32    

en fait je te demandais juste l'image source histoire ke moi je te mache le boulot.
 
et puis la maquette HTML que je t'ai mis en lien, c'est pour toi, c'est comme ca k'il faudrait ke tu fasses.
 
As tu la maquette graphique complète (objets calques et tout). ca te dirait de me la mettre sur FTP histoire ke je puisse exporter le bandeau proprement.
 
sinon ben :  
Laisse le texte en haut
enleve juste la barre bleue (tu dis que c'est juste un repere) et les trucs de match. ca pourra être utilisé plus tard. Mais on va dire ke ca me ferai plaisir de te faire la mise en page en HTML+CSS proprement.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed