Foros del Web » Creando para Internet » Diseño Gráfico »

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

Estas en el tema de Buena resolución para web, ya lo intenté pero...... en el foro de Diseño Gráfico en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/10/2006, 12:31
 
Fecha de Ingreso: mayo-2006
Mensajes: 212
Antigüedad: 11 años, 7 meses
Puntos: 1
Buena resolución para web, ya lo intenté pero......

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.......
  #2 (permalink)  
Antiguo 09/10/2006, 12:42
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Cuál imagen es?
Esta o esta

Como sea, no se pueden ver si no las publicás en internet ;)
__________________
...___...
  #3 (permalink)  
Antiguo 09/10/2006, 13:01
 
Fecha de Ingreso: mayo-2006
Mensajes: 212
Antigüedad: 11 años, 7 meses
Puntos: 1
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
  #4 (permalink)  
Antiguo 09/10/2006, 13:24
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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>
__________________
...___...
  #5 (permalink)  
Antiguo 09/10/2006, 13:45
 
Fecha de Ingreso: mayo-2006
Mensajes: 212
Antigüedad: 11 años, 7 meses
Puntos: 1
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.
  #6 (permalink)  
Antiguo 09/10/2006, 14:33
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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)
__________________
...___...
  #7 (permalink)  
Antiguo 20/01/2007, 12:49
 
Fecha de Ingreso: enero-2007
Mensajes: 1
Antigüedad: 10 años, 10 meses
Puntos: 0
Pregunta Png24 y flash

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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:47.