Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 15 de 15

Tema: Hacer una imagen png transparente [Resuelto]

  1. #1
    Me va gustando esto... Habitante
    Fecha de Ingreso
    05 oct, 07
    Mensajes
    108
    Poder de Reputación
    10

    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?

  2. #2
    Me va gustando esto... Habitante
    Fecha de Ingreso
    30 jul, 07
    Ubicación
    Argentina
    Mensajes
    125
    Poder de Reputación
    10
    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

  3. #3
    Me va gustando esto... Habitante
    Fecha de Ingreso
    05 oct, 07
    Mensajes
    108
    Poder de Reputación
    10
    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?

  4. #4
    Me va gustando esto... Habitante
    Fecha de Ingreso
    30 jul, 07
    Ubicación
    Argentina
    Mensajes
    125
    Poder de Reputación
    10
    ... 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.

  5. #5
    Me va gustando esto... Habitante
    Fecha de Ingreso
    30 jul, 07
    Ubicación
    Argentina
    Mensajes
    125
    Poder de Reputación
    10
    El explorer siempre haciendo la vida dificil...., pero no descartes el archivo PNG mira ya encontré la solución :D :

    - 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);


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

    - 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.

  6. #6
    Me va gustando esto... Habitante
    Fecha de Ingreso
    05 oct, 07
    Mensajes
    108
    Poder de Reputación
    10
    muchíiiisimas gracias!! ahora sí q sale como quería :D:D

  7. #7
    Me va gustando esto... Habitante
    Fecha de Ingreso
    30 jul, 07
    Ubicación
    Argentina
    Mensajes
    125
    Poder de Reputación
    10
    ...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

  8. #8
    Administrador CCTW Webmaster de CCTWHabitante
    Fecha de Ingreso
    10 ago, 05
    Ubicación
    Cartagena, España
    Mensajes
    3,721
    Poder de Reputación
    10
    Muy bueno Jahier

  9. #9
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    24 mar, 07
    Ubicación
    España
    Mensajes
    641
    Poder de Reputación
    14
    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

  10. #10
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    29 feb, 08
    Ubicación
    Lima-Perú
    Mensajes
    935
    Poder de Reputación
    13
    Se pero no funciona en versiones superiores a la 7..

  11. #11
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    24 mar, 07
    Ubicación
    España
    Mensajes
    641
    Poder de Reputación
    14
    cual no funciona en versiones superiores a la 7?

  12. #12
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    07 ago, 08
    Mensajes
    1
    Poder de Reputación
    0

    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

  13. #13
    Me va gustando esto... Habitante
    Fecha de Ingreso
    12 abr, 09
    Mensajes
    126
    Poder de Reputación
    8

    CODIGO

    mUy bueno jahier....MUY BUENO!!!

  14. #14
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    12 abr, 11
    Mensajes
    1
    Poder de Reputación
    0
    Jahier gracias me sirvio pero tengo una duda para el I8 e I9 es lo mismo?? igual gracias me salvaste!!!

  15. #15
    Recien Llegado! Habitante
    Fecha de Ingreso
    29 sep, 11
    Mensajes
    28
    Poder de Reputación
    4
    wenazo el script Jahier gracias
    Soy un novato que estoy aprendiendo a montones!
    Visita http://www.carlolinks.comocreartuweb.es

Temas Similares

  1. Que codigo se utiliza para hacer una imagen transparente
    Por methodman008 en el foro Todo sobre Estilos CSS
    Respuestas: 2
    Último Mensaje: 09/07/2010, 17:18
  2. imagen transparente
    Por Racing Club en el foro Foro General
    Respuestas: 9
    Último Mensaje: 27/01/2010, 19:59

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •