Hacer una imagen png transparente [Resuelto]

**ferll** · 07/10/2007, 17:42

buenas!!

Tengo un problemilla al subir imágenes a mi futura web. Pretendo subir un dibujo tratado con photoshop y de fondo transparente por lo q lo grabo con extensión .gif. El problema está en q cuando lo inserto en dreamweaver la imagen pierde muchísima calidad, los colores se ven fatal y demás (he aumentado la resolución y tp hay mejoras).

He probado a poner en photoshop la opción CMYK color, sin embargo si activo esa opción no me deja grabarlo como gif, así q lo he tenido q dejar como rgb.

Si lo grabo como jpg al inserta me sale el fondo blanco cosa q no quiero. Si elijo alguna de las otras extensiones de pothoshop al abrirlo en la web no me muestra la imagen :S

No sé q más probar :( alguien me puede ayudar?

**Jahier** · 07/10/2007, 18:09

Hola, asi es cuando lo guardas en formato GIF pierde calidad, solo es recomendable para imagenes que no tienen gran variedad de colores y detalles.
Con respecto a tu pregunta, para insertar una imagen con fondo transparente y que no pierda fidelidad debes guardarla en formato PNG, este formato es mucho mas pesado que el el formato jpg de alta calidad, por ejemplo una imagen jpg de 5 kb en formato PNG pesa 23 kb, pero es el único formato que conozco con el cual tu imagen no perderá calidad y tendrá un fondo transparente.

Salu2

**ferll** · 07/10/2007, 18:28

okk lo he probado y me ha surgido un nuevo problema :S mi gozo en un pozo jeje

lo inserto en dreamweaver y parece q todo va bien, se mantienen los colores, la calidad y la transparencia del fondo; sin embargo al ver la vista previa en el navegador la imagen no llega a ser transparente del todo. xq en el programa sí y en la web "final" no?

**Jahier** · 07/10/2007, 18:41

... recién lo estaba probando y me pasa solo con internet explorer pero con fire fox se ve perfecto,son cosa de navegadores , me parece que vas a tener que buscar otra alternativa para lograr un fondo transparente, yo ni bien tenga una te la paso.

**Jahier** · 07/10/2007, 19:49

El explorer siempre haciendo la vida dificil...., pero no descartes el archivo PNG mira ya encontré la solución :D :

1º - Copia el siguiente codigo en un editor de texto, por ejemplo yo lo hice en el blog de notas:

Código:

function PNG_loader() {
   for(var i=0; i<document.images.length; i++) {
      var img = document.images[i];
      var imgName = img.src.toUpperCase();
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG") {
         var imgID = (img.id) ? "id='" + img.id + "' " : "";
         var imgClass = (img.className) ? "class='" + img.className + "' " : "";
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
         var imgStyle = "display:inline-block;" + img.style.cssText;
         if (img.align == "left") imgStyle += "float:left;";
         if (img.align == "right") imgStyle += "float:right;";
         if (img.parentElement.href) imgStyle += "cursor:hand;";
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
            + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>";
         img.outerHTML = strNewHTML;
         i--;
      }
   }
}
window.attachEvent("onload", PNG_loader);

2º - Guardalo con el nombre png.js , en la carpeta principal de tu sitio o sea donde tienes el index

3º - Copia el siquiente código donde quieras insertar la imagen PNG:

Código:

<!--[if gte IE 5.5000]>
<script type="text/javascript" src="./png.js"></script>
<![endif]-->

....y ahora a continuación del codigo insertas la imagen. Si lo haces correctamente la imagen PNG con fondo transparente se verá sin ese molesto fondo gris.

Existen varios scripts para solucionar el problema, pero este me pareció el mas sencillo y claro.

**ferll** · 07/10/2007, 20:30

muchíiiisimas gracias!! ahora sí q sale como quería :D:D

**Jahier** · 08/10/2007, 17:57

...me alegra que te haya sido útil

. Sugiero mover este post a la sección de scripts o photoshop, puede que ahí sirva para mas gente interesada. Solo es una sugerencia

**jorgens** · 09/10/2007, 09:09

Muy bueno Jahier

**Salmarina** · 13/04/2008, 20:22

bueno si no me equivoco, con la nueva versión de explorer (la 7) ya no sale ese fondito gris en los PNG. Además como la actualizacion a explorer 7 es gratuita pues supongo que pronto se reducirá el numero de internautas con la version vieja.

por cierto, para los usuarios de Photoshop, existe un plugin que permite reducir el tamaño de los PNG que suelen ser bastante pesados, y además soluciona el problema de que no se vea transparente en explorer 6 en inferior, os dejo el link:
http://www.fnordware.com/superpng/#download
a la derecha meteis un nombre, un email, y le dais a Download (no marqueis la casilla si no quereis que os manden publi).

luego cogeis el archivo para photoshop, y le meteis en la carpeta de plugins, en Formatos de Archivo.

ale espero que sirva el aporte

**RogexdarK** · 14/04/2008, 00:19

Se pero no funciona en versiones superiores a la 7..

**Salmarina** · 14/04/2008, 20:32

cual no funciona en versiones superiores a la 7?

**neroxyr** · 07/08/2008, 21:57

Salamarina, este script esta hecho para exploradores windows con version iguales y menores a la 7 xq tenia wue ser este navegador tan complicado xq en opera o firefox no se presenta esre problema, espero contestar tu duda.

:?
gracias por el aporte ese fondo gris me esta volviendo loco, me sirvio mucho. ahora tengo unos inconvenientes cuando quiero usar rollover image (como son dos imagenes) pongo ese codigo pequeño asimismo antes de la imagen pero se me queda estatico, es decir, que cuando paso el mouse se queda la imagen original, nunca se cambia a la imagen rollover.

Quisiera que las imagenes del rollover no se bloqueen, gracias