| Ver tema anterior :: Ver tema siguiente |
| Autor |
Mensaje |
ferll
Habitante
Registrado: 06 Oct 2007
Mensajes: 108
|
 Publicado: Dom Oct 07, 2007 6:42 pm Asunto: Hacer una imagen png transparente [Resuelto] |
 |
|
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? |
|
| Volver arriba |
|
 |
Jahier
Habitante
Registrado: 30 Jul 2007
Mensajes: 125
Ubicación: Argentina
|
| Publicado: Dom Oct 07, 2007 7:09 pm Asunto: |
|
|
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 
_________________
Mi web: www.elpatiocriollo.com.ar
Mi vicio: www.jauriarabiosa.110mb.com |
|
| Volver arriba |
|
|
ferll
Habitante
Registrado: 06 Oct 2007
Mensajes: 108
|
| Publicado: Dom Oct 07, 2007 7:28 pm Asunto: |
|
|
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? |
|
| Volver arriba |
|
|
Jahier
Habitante
Registrado: 30 Jul 2007
Mensajes: 125
Ubicación: Argentina
|
| Publicado: Dom Oct 07, 2007 7:41 pm Asunto: |
|
|
... 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.
_________________
Mi web: www.elpatiocriollo.com.ar
Mi vicio: www.jauriarabiosa.110mb.com |
|
| Volver arriba |
|
|
Jahier
Habitante
Registrado: 30 Jul 2007
Mensajes: 125
Ubicación: Argentina
|
| Publicado: Dom Oct 07, 2007 8:49 pm Asunto: |
|
|
El explorer siempre haciendo la vida dificil...., pero no descartes el archivo PNG mira ya encontré la solución  :
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.
_________________
Mi web: www.elpatiocriollo.com.ar
Mi vicio: www.jauriarabiosa.110mb.com |
|
| Volver arriba |
|
|
ferll
Habitante
Registrado: 06 Oct 2007
Mensajes: 108
|
| Publicado: Dom Oct 07, 2007 9:30 pm Asunto: |
|
|
| muchíiiisimas gracias!! ahora sí q sale como quería |
|
| Volver arriba |
|
|
Jahier
Habitante
Registrado: 30 Jul 2007
Mensajes: 125
Ubicación: Argentina
|
| Publicado: Lun Oct 08, 2007 6:57 pm Asunto: |
|
|
...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
_________________
Mi web: www.elpatiocriollo.com.ar
Mi vicio: www.jauriarabiosa.110mb.com |
|
| Volver arriba |
|
|
jorgens
Webmaster de CCTW
Registrado: 11 Ago 2005
Mensajes: 3713
Ubicación: Cartagena, España
|
| Publicado: Mar Oct 09, 2007 10:09 am Asunto: |
|
|
Muy bueno Jahier
_________________
 |
|
| Volver arriba |
|
|
Salmarina
Habitante
Registrado: 24 Mar 2007
Mensajes: 626
Ubicación: España
|
| Publicado: Dom Abr 13, 2008 9:22 pm Asunto: |
|
|
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
_________________
UniversoJuegos.es la web de los juegos online
Directorio de Foros |
|
| Volver arriba |
|
|
RogexdarK
Habitante
Registrado: 01 Mar 2008
Mensajes: 934
Ubicación: Lima-Perú
|
| Publicado: Lun Abr 14, 2008 1:19 am Asunto: |
|
|
Se pero no funciona en versiones superiores a la 7..
_________________
Mi web
[ |
|
| Volver arriba |
|
|
Salmarina
Habitante
Registrado: 24 Mar 2007
Mensajes: 626
Ubicación: España
|
|
| Volver arriba |
|
|
neroxyr
Pasaba por aquí...
Registrado: 07 Ago 2008
Mensajes: 1
|
| Publicado: Jue Ago 07, 2008 10:57 pm Asunto: se bloquea la imagen |
|
|
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 |
|
| Volver arriba |
|
|
rtr
Habitante
Registrado: 12 Abr 2009
Mensajes: 126
|
| Publicado: Jue Jul 30, 2009 1:28 pm Asunto: CODIGO |
|
|
| mUy bueno jahier....MUY BUENO!!! |
|
| Volver arriba |
|
|
|
Buscar
Regístrate
Tu Perfil
Tus Mensajes Privados
Login
