Contour blanc sur mes images gif photoshop

anselme -
elfana - 17 sept. 2008 à 02:20

Bonjour à tous,

Je viens vous poser une question qui me pose seriesueemnt probleme.

J'ai un logo que j'ai fait sous illustrator et lorsque je veux le sauvegarder en gif sous photoshop , j'ai des contours blancs qui sont pas tres beau.

Pourtant lorsque je le met en png mon image est nikel , le probleme du png est que le transparent ne marche pas sur IE 5 et IE6...

Auriez votre petite idée sur la question ,

bien à vous,

Anselme

Afficher la suite

A voir également:

Contour photo png
Google photo - Télécharger - Albums photo
Photo filtre 7 gratuit - Télécharger - Retouche d'image
Google maps photo maison - Guide
Partage photo - Guide
Google traduction photo - Guide

13 réponses

Réponse 1 / 13

warlix Messages postés 1201 Date d'inscription Statut Contributeur Dernière intervention 288

salut

Non il n existe pas de solution miracle

De plus ie5 n existe presque plus , en gros 1 à 2 % des postes
IE6 est en voie de disparition il ne dois concerné que 10 15 % et encore .....

Le pb du gift c est que ca réduit énormément la ql de l image donc..

Réponse 2 / 13

warlix Messages postés 1201 Date d'inscription Statut Contributeur Dernière intervention 288

Non grizzly , le soucis viens de la pixelisation du gift qui laisse un bord (1 pixel) blanc autour

pour les 30 % je veux bien le croire , moi sur les 4 sites en ligne un quota d un an donne 13% pour ie6
donc je veux bien au niveau mondial ou autre .. :p
mais ie6 est amené à disparaitre
la mise à jour de ie7 est quasi auto et obligatoire

Réponse 3 / 13

gryzzly Messages postés 4608 Date d'inscription Statut Contributeur Dernière intervention 1 335

Pas d'accord :

1) gif, ca dépend sous quelle qualité tu travailles. J'arrive a faire des gifs qui passent très bien sur un background noir.
2) La mise à jour n'est pas obligatoire. Elle est conseillée. Pour X raisons, il ya des machines ou ce n'est pas possible. wi98, win 2000, certains XP.

anselme

Bonjour,

merci pour vos reponses.

Oui pmon pourcentage d'utilisateur sous IE 6 est relativement important et je nepeux pas les laisser tomber.

Je ne comprends pas pourquoi mes gifs sont degeu, pourant je pars d'une bonne qualité , vectorisé sous illustrator...

Si quelqu'un a la solution miracle.

Bien à vous,

Réponse 4 / 13

gryzzly Messages postés 4608 Date d'inscription Statut Contributeur Dernière intervention 1 335

Dépose le fichier source .ai et le gif qq part pour qu'on puisse voir ça de plus prêt.
Si j'ai le temps je regarde ça dans l'am ou ce soir... et si je m'endors pas trop tôt :-D

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 13

Anselme

Merci pour ta proposition j'ai mis le

logo sur le lien suivan:

Logo AI:
http://www.clipoos.com/public/Logo_fond_blanc_slogan.ai

http://www.clipoos.com/public/Logo_fond_blanc_slogan.gif

Merci par avance,

Anselme

Réponse 6 / 13

gryzzly Messages postés 4608 Date d'inscription Statut Contributeur Dernière intervention 1 335

Perso je n'ai pas de solution dans ce cas précis. Les courbures sont trop nombreuses et il manque de couleurs (normal puisque ton logo est blanc uni) pour que le gif, qui ne gère qu'UN SEUL NIVEAU de transparence puisse réaliser des "courbes" propres.

Les seules solution dans ton cas, à mon avis (je suis pas illustrateur ni designer pro) :

1) mettre un fond à ton image, le même que celui de ta page, dans ce cas, tu auras un résultat correct. dans ce cas, plus la peine de se trimballer du gif, tu peux passer en jpg, moins lourd que le gif

2) et puis en fait je sais pas pourquoi on se prend la tête avec un mauvais rendu du gif, puisque les hacks .png pour ie existent ;o)
J'aurais dû commencer par là dès le début de la discussion. J'avais la tête ailleurs quand j'étais au taf ...

Explications du fix :

1) lorsque tu insères une image png, tu mets une classe à l'élément :

<div class="pngfix" >
<!-- ici un div "vide" qui contiendra l'image en background -->
</div>

tu appelles le fix pour IE6 et inf :

<!--[if lte IE 6]> 
<link rel="stylesheet" type="text/css" media="screen" href="fixIE.css" />
<![endif]-->

dans ton css fixIE.css:

.pngfix 
{
background-image: url('ton.png');
height:; /* hauteur en pixels de l'image */
width:; /*largeur en pixels de l'image */
behavior: url('iepngfix.htc');
}

dans le même dossier que ton css, tu crées un fichier iepngfix.htc dans lequel tu copies ce code :

<public:component>
<public:attach event="onpropertychange" onevent="doFix()" />

<script type="text/javascript">

// IE5.5+ PNG Alpha Fix v1.0RC4
// (c) 2004-2005 Angus Turnbull https://www.twinhelix.com/

// This is licensed under the CC-GNU LGPL, version 2.1 or later.
// For details, see: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html


// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == 'undefined') var blankImg = 'blank.gif';


var f = 'DXImageTransform.Microsoft.AlphaImageLoader';

function filt(s, m)
{
 if (filters[f])
 {
  filters[f].enabled = s ? true : false;
  if (s) with (filters[f]) { src = s; sizingMethod = m }
 }
 else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
}

function doFix()
{
 // Assume IE7 is OK.
 if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
  (event && !/(background|src)/.test(event.propertyName))) return;

 var bgImg = currentStyle.backgroundImage || style.backgroundImage;

 if (tagName == 'IMG')
 {
  if ((/\.png$/i).test(src))
  {
   if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
    style.width = offsetWidth + 'px';
   filt(src, 'scale');
   src = blankImg;
  }
  else if (src.indexOf(blankImg) < 0) filt();
 }
 else if (bgImg && bgImg != 'none')
 {
  if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
  {
   var s = RegExp.$1;
   if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
    style.width = offsetWidth + 'px';
   style.backgroundImage = 'none';
   filt(s, 'crop');
   // IE link fix.
   for (var n = 0; n < childNodes.length; n++)
    if (childNodes[n].style) childNodes[n].style.position = 'relative';
  }
  else filt();
 }
}

doFix();

</script>
</public:component>

et tu rajoutes un gif transparent de 1x1 pixels dans le même dossier que css et htc et tu l'appelles blank.gif

Et voilà ! Png transparent sous IE6 ;o)

Tu peux voir le résultat ici : http://pandoo.org/
le header est un png : http://pandoo.org/banniere-pandoo.org.png
normalement il est transparent sous IE6 (une fois intégré au site).

Réponse 7 / 13

gryzzly Messages postés 4608 Date d'inscription Statut Contributeur Dernière intervention 1 335

Euh, en fait, t'embetes pas a recopier, télécharges le contenu ici :

http://www.twinhelix.com/css/iepngfix/iepngfix.zip

++

Réponse 8 / 13

anselme

Salut grizzly,

Merci poour ta réponse.

Je connaissais les hacks png, j'avais essayé a une autre epoque, mais sans vraiment trop de succés, mais je pense que je vais m'y atteler plus serieusement cette fois ci vu que apparement je n'ai pas le choix.

LMerci de t'etr penché sur le cas en tout cas?

Bonne soirée,

Je vous tiendrais au courant,

Anselme

Réponse 9 / 13

anselme

Question stupide : mais comment je fais du coup pour ceux qui 'nont pas IE 6 car du coup la j'enleve mon logo normale pour mettre le div avec le hack IE 6 ...

Mais pour tout les autres il ne voient plus le logo...

Bien à vous,

Réponse 10 / 13

gryzzly Messages postés 4608 Date d'inscription Statut Contributeur Dernière intervention 1 335

Ben pour les autres, tu prévois une autre feuille de style ;-)

dans le fixIE tu ne mets que le fix et/ou tu rajoutes les propriétés spécifiques a IE6 et inférieurs.

<html>
    <head>

        <link rel="stylesheet" type="text/css" media="screen" href="CSS_POUR_TOUS_LES_NAVIG_SAUF_IE6_ET_INF.css" />

        <!--[if lte IE 6]>  
        <link rel="stylesheet" type="text/css" media="screen" href="fixIE.css" />
        <![endif]-->

    </head>
<body>
</body>
</html>

Réponse 11 / 13

giannicodron

voici une petition pour que microsoft se mette à la page : http://www.petitiononline.com/
Soyez nombreux à la signer.

Réponse 12 / 13

elfana

Ca date peut être un peu, j'espère que ça peut quand même aider par la suite :

http://www.cym.fr/Optimisation_image_gif.html

Réponse 13 / 13

gryzzly Messages postés 4608 Date d'inscription Statut Contributeur Dernière intervention 1 335

IE6 : 30 % c'est bcp trop pour considérer qu'il est à l'abandon.

Gif --> il faut lui mettre un fond transparent et non pas un fond blanc.

++

Discussions similaires

Transformer une image pour n'avoir que le contour

Dissocier les photos de ma galerie sur Google Photos

Votre réponse

Discussions similaires