Sujet Précédent Sujet Suivant

Contour blanc sur mes images gif photoshop

Fermé
anselme - 9 avril 2008 à 13:25
 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

13 réponses

Réponse 1 / 13
warlix Messages postés 1201 Date d'inscription mercredi 25 juillet 2007 Statut Contributeur Dernière intervention 21 février 2009 288
9 avril 2008 à 13:28
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..
0
Réponse 2 / 13
warlix Messages postés 1201 Date d'inscription mercredi 25 juillet 2007 Statut Contributeur Dernière intervention 21 février 2009 288
9 avril 2008 à 13:39
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

0
Réponse 3 / 13
gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 331
9 avril 2008 à 13:45
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.
0
anselme
9 avril 2008 à 14:19
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,
0
Réponse 4 / 13
gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 331
9 avril 2008 à 14:25
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
0

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

Posez votre question
Réponse 5 / 13
Anselme
9 avril 2008 à 22:09
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
0
Réponse 6 / 13
gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 331
9 avril 2008 à 23:09
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).
0
Réponse 7 / 13
gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 331
9 avril 2008 à 23:21
Euh, en fait, t'embetes pas a recopier, télécharges le contenu ici :

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

++
0
Réponse 8 / 13
anselme
10 avril 2008 à 00:47
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
0
Réponse 9 / 13
anselme
10 avril 2008 à 21:12
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,
0
Réponse 10 / 13
gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 331
10 avril 2008 à 21:27
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>
0
Réponse 11 / 13
giannicodron
4 sept. 2008 à 10:14
voici une petition pour que microsoft se mette à la page : http://www.petitiononline.com/
Soyez nombreux à la signer.
0
Réponse 12 / 13
elfana
17 sept. 2008 à 02:20
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
0
Réponse 13 / 13
gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 331
9 avril 2008 à 13:34
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.

++
-1

Discussions similaires

Contour d'un texte avec Gimp
Neo_Flint -
bliblou -

13 réponses
Comment faire le symbole coeur vide/coeur blanc
Paria -
2008G.C -

60 réponses
Problème de contour qui me rend folle...
bonobote -
Le queniau -

17 réponses
Insérer un gif animé dansd un PDF.
Ancelord -
Pierrecastor -

4 réponses
Contour dégradé sur Illustrator
Soadmystic -
Teknigraf -

3 réponses