Imágenes con fondo transparente en Photoshop CS5

Publicado por asktutorial.

Como hacer imágenes con fondo transparente en Photoshop CS5Para los que inician en el mundo de la Web y no se conforman con descargar su plantilla prediseñada pues quieren dar su toque personal al diseño, uno de los temas con los que primero se enfrentan es con la inclusión de imágenes. Es desagradable que ese ícono que tanto nos gusta aparezca dentro de un cuadrado de color solido que nos obliga a encontrar un fondo de relleno que se ajuste. Pues sepa Ud. que el fondo transparente existe, si bien no hay color transparente como color de pixel hay formatos de imagen que almacenan información que indica a los navegadores que determinadas áreas no muestran color y entonces dejan ver el que se encuentra detrás dando la idea de transparencia; esto es a modo de explicación sencilla. Pues tomemos ese icono que deseamos incluir y carguémoslo en nuestro siempre oportuno Photoshop CS5.

Vamos a transformar el fondo de la imagen en una capa común pues los fondos no permiten la transparencia, para ello seleccionamos [Capa -> Nueva -> Capa a partir de fondo…], con esto ya podemos eliminar el relleno que tanto nos molesta. Algunas herramientas hacen esto automáticamente pero dejo para la experimentación el descubrimiento de estas.

Ahora vamos a seleccionar la herramienta que nos permita eliminar el fondo, seleccionamos para este caso el [Borrador mágico] para ello damos clic derecho sobre la herramienta [Borrador] y se desplegará el listado de borradores que tenemos.

Vamos a calibrar el borrador mágico para que nos elimine el fondo de la manera correcta, para ello vamos a probar varios valores del parámetro tolerancia para este caso el valor de 32 será suficiente, la tolerancia se refiere a cuanto debe eliminar en la proximidad de tono respecto al seleccionado al primer clic sobre la imagen.

Ahora probaremos el valor seleccionado sobre la imagen y lo cambiaremos hasta haber eliminado completamente el indeseado fondo. Es recomendable poner una capa detrás pintada con color que contraste con la imagen para poder ver mejor el resultado, en este caso he puesto el color negro. No obstante se puede hacer con el fondo cuadriculado que por defecto asigna el Photoshop a las trasparencias. Eliminamos el negro si lo pusimos para que la imagen nos quede libre del relleno indeseado.

 

Ahora vamos a guardar el trabajo con formato que sea compatible con la información de transparencia para ello vamos a [Archivo -> Guardar como] y entonces elegimos el formato que más nos convenga. Tenemos dos buenas variantes para emplearlas en la web, el formato GIF (Compuserve GIF) que solo permite hasta 256 colores y el formato PNG (portable network graphics) que no presenta esta limitante. Para este caso elegimos la gif por respeto a su antigüedad y porque realmente no necesitamos tantos colores, además está soportada en todos los navegadores.

Ya podemos colocar la imagen en el lugar que nos plazca sin preocuparnos por lo que quede detrás pues se verá perfectamente a través del área transparente.

7 Respuestas »

  1. ¡Estupendo! Me ha servido de mucho, muchísimas gracias. Muy bien explicado.

  2. muchisimas gracdias, si me sirvio muchisimo este utorialñ!!!!!!!!!!!!!

  3. no consigo dejar el fondo transparente, se me queda blanco a ver que me puedes decir.

Dejar un comentario

Tenga en cuenta: la moderación de comentarios está habilitada y puede retrasar su comentario. No hay necesidad de volver a enviar su comentario.

¡SUSCRÍBETE GRATIS!

Nosotros

AskTutorial nace en Junio del 2010 en la ciudad de Chicago, IL con el fin de crear Tutoriales Educativos en Español dirigidos a la comunidad de habla hispana en Estados Unidos y alrededor del mundo. Gracias a la excelente respuesta del publico que diariamente ve nuestros videos nos hemos extendido a no solo crear video tutoriales, si no tambien ofrecemos información relevante de acuerdo a sus preguntas.

Archivos / Mes

¡Suscribete GRATIS!

Sigueme en cualquiera de mis Redes Sociales para acceder al contenido de este sitio!