Buena resolución para web, ya lo intenté pero......

emiliano espinosa · #1 (**permalink**) 09/10/2006, 11:31

Hola amigos, acabo de realizar una interface en photoshop, la cual necesito que sea de fondo transparente; la guardé en "Guardar para web" con png-8 y probé con GIF, pero me da un resultado muy feo en las imágenes:

http://demonpage.com.mx/dp2.html

1. Con lo de la transparencia no es problema.
2. Los filos blancos se convierten en "ruido", sin que yo los haya convertido en tal.
3. Las imágenes a las que les cargué "motivo degradado", se pixelean muy feo.

Qué puedo hacer. Gracias.......

AlZuwaga · #2 (**permalink**) 09/10/2006, 11:42

Cuál imagen es?
Esta o esta

Como sea, no se pueden ver si no las publicás en internet ;)

emiliano espinosa · #3 (**permalink**) 09/10/2006, 12:01

Perdón, pensé que si estaba en la red....si está....bueno, si no, es esta:

pero si está en la red: http://demonpage.com.mx/dp2.html

AlZuwaga · #4 (**permalink**) 09/10/2006, 12:24

en cuanto a los filos blancos con ruido, creo que es porque al exportar el gif usaste un color de "mate" blanco. deberías usar uno similar al del color de fondo que tengas (o usar PNG 24 en vez de gif).

los motivo/degradado pixelado... yo los veo bien

EDIT: Las imágenes si están online:
http://demonpage.com.mx/interface1.gif y http://demonpage.com.mx/fondoweb1.jpg
Lo que está mal es tu HTML:

Código:

<html>
<head>
<title>dp</title>
</head>

<body background="C:\Documents and settings\aldo\Mis documentos\Demon Page\Imagen\fondoweb1.jpg">

<center>
<table border="0" cellpadding="0" cellspacing"0">
<td align="center" valign="middle" scrollbar=no><img src="C:\Documents and settings\aldo\Mis documentos\Demon Page\Imagen\interface1.gif"></td>
</table></center>

</body>
</html>

emiliano espinosa · #5 (**permalink**) 09/10/2006, 12:45

Gracias Al Zuwaga, ya corregí mi html; volví a guardar la imagen:

1. En PNG-24 no me da la transparencia de fondo, solo en PNG-8.
2. Efectivamente, al guardar en GIF, si lo hago con "mate" lo más parecido posible al fondo, no se provoca tanto ruido como al principio (en los filos blancos).
3. Y del motivo/degradado, si me gustaría mayor calidad; yo diseñé con 72 dpi's y posteriormente guardé en "Guardar para web", pero tanto en GIF como en PNG-8, me pixelea ese degradado.

En fin, voy a seguir buscando. Muchas gracias.

AlZuwaga · #6 (**permalink**) 09/10/2006, 13:33

Pasa que tanto en png8 como en gif, tenés un límite de 256 colores. Si tu degradado usa, digamos, 350 "gamas" de un mismo color para lograr el efecto, es natural que al guardarlo en esos formatos pierdas información de color. Para estos casos es mejor un jpg o un png24.

Sobre la transparencia....

Cita:

1. En PNG-24 no me da la transparencia de fondo, solo en PNG-8.

El PNG24 si tiene transparencia. Es más, es mejor que la transparencia del 8 y del gif porque es una transparencia alpha (no recuerdo el nombre de la transparencia del gif y png8)
Pasa que seguramente lo estás mirando con internet explorer. Este navegador no reconoce nativamente la transparencia del png24. Hay que colocar un código javascript para ello:

Código:

<script type="text/javascript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
   {
   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;" + imgStyle
		 if (img.align == "right") imgStyle = "float:right;" + imgStyle
		 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle		
		 var strNewHTML = "<span " + imgID + imgClass + imgTitle
		 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
	     + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
		 + "(src=\'" + img.src + "\');\"></span>" 
		 img.outerHTML = strNewHTML
		 i = i-1
	     }
      }
   }
window.attachEvent("onload", correctPNG);
</script>

Probá ver tu página con otro navegador (firefox, por ejemplo) y vas a ver que si hay transparencia (sin siquiera implementar el javascript)

valeria36 · #7 (**permalink**) 20/01/2007, 12:49

Hola, soy nueva en el foro y les doy mis saludos.
Quería saber con respecto al tema de las imagenes con transparencia, si el código se aplica para imágenes png24 exportadas de photoshop e importadas a flash mx e isertado en html. ¿se mantiene la transparencia del fondo cuando se ve en iexplorer?

código que se muestra en el foro:

<script type="text/javascript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
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;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader"
+ "(src=\'" + img.src + "\');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
</script>

Salu2