Facebook Twitter RSS Reset

fondo transparente, png y transparencias para dummies (tuto)

Hola taringueros.

He decidido hacer algunos post con pequeños tutoriales que aunque parecen sencillos, muchas veces son temas que a diario usamos de forma incorrecta, o no usamos por falta de conocimiento. Esta vez hablaremos sobre transparencias e imágenes PNG que conservan esas transparencias.

¿QUÉ ES UNA IMAGEN PNG?

Según Wikipedia PNG son siglas que significan “Gráficos de Red Portátiles”, una de las principales características de este formato de imagen es que conserva muchos datos importantes que otros formatos como el JPG comprime. En mis palabras y para mi, PNG significa: un formato de imagen que conserva las transparencias. Y si, hay otros formatos que también conservan las transparencias, pero en relación a calidad, peso y facilidad, el más flexible es nuestro querido PNG.

PERO, ¿ PARA QUÉ QUIERO UNA IMAGEN .PNG?

La respuesta se las daré con esta pequeña imagen (vale aclarar que todas las imágenes usadas en este post son de mi autoría o pantallasos de mi pc):

fondo transparente, png y transparencias para dummies (tuto)

Como podemos notar, muchas veces nos pasa lo de nuestra anterior imagen, donde nos queda un remarco blanco que al ser usado en fondos de otros colores resalta incluso mas que la imagen que queremos mostrar. Podríamos decir que la mayoría de veces el valor que aporta una imagen PNG es puramente estético, pero en muchos otros casos también puede tener cualidades funcionales para proyectos que lo ameritan.

PNG ES MUCHO MAS QUE SOLO AUSENCIAS.

Si, este formato de imagen nos aporta otro gran valor añadido mas allá de ayudarnos a prescindir de un fondo, también nos permite manejar transparencias a diferentes niveles. De nuevo lo explicaré con una imagen:

fondo transparente, png y transparencias para dummies (tuto)

Podemos ver en la anterior gráfica dos montajes. Supongamos que cada circulo es una imagen independiente que se ha montado una encima de otra, sin embargo a cada circulo se le ha asignado un valor de transparencia diferente: 1. 50% de opacidad, 2. 40% de opacidad , 3. 60% de opacidad, 4. 70% de opacidad, 5. 60% de opacidad y el circulo 6 sin opacidad.

Si cada circulo se guardara en un formato común como JPG, el resultado sería el de la izquierda, círculos superpuestos que no respetan su nivel de transparencia. Sin embargo si cada circulo se guardara en formato PNG y se montaran uno encima del otro, podemos ver una hermosa composición donde los colores se mezclan en sus intersecciones ya que respeta sus transparencias, como podemos ver al lado derecho.

USOS MÁS COMUNES DE ESTE TIPO DE IMÁGENES.

Muchas veces los usos más comunes como lo mencionábamos antes son estéticos. Por ejemplo:

¿queremos que nuestra presentación de power point se vea mucho mas profesional y agradable? PNG

¿Quieres poder usar un fondo que no sea blanco en ese trabajo de la universidad sin que se vea un horrible remarco blanco en el escudo de la universidad? PNG

¿Quieres que tus post se vea muchos mas agradables y profesionales (respecto a lo que para un taringuero signifique ser profesional)? PNG

fondo transparente, png y transparencias para dummies (tuto)

vs

fondo transparente, png y transparencias para dummies (tuto)

¿CÓMO OBTENER IMÁGENES PNG?

Existen dos formas para obtener imágenes PNG sin fondo, o con fondos transparentes:

1. BUSCALAS EN GOOGLE.

Podemos usar el buscador avanzado de imágenes de google accediendo a este link:

Nos encontraremos con esto:

fondo transparente, png y transparencias para dummies (tuto)

Como podemos ver solo será necesario escribir la palabra de lo que buscaremos y marcar la casilla que dice “transparente”, luego le damos a buscar:

fondo transparente, png y transparencias para dummies (tuto)

Una forma de estar seguros que la imagen que descargaremos es PNG , es fijarnos como lo rodea un fondo en cuadros grises y blancos, esta es la representación universal de que no existe color alguno rodeando el objeto o detrás de el. Click derecho y descargar imagen, revisar que su extensión al guardarse sea PNG:

fondo transparente, png y transparencias para dummies (tuto)

2. QUITALES TÚ EL FONDO.

Si no encuentras la imagen que deseas en PNG la puedes convertir y quitar el fondo, para ello necesitaremos de photoshop:

fondo transparente, png y transparencias para dummies (tuto)

Abrimos nuestra imagen en photoshop y ubicamos la herramienta “Magic wand tool” una especie de varita mágica:

fondo transparente, png y transparencias para dummies (tuto)

Una vez elegida hacemos click con ella sobre el fondo blanco que rodea la imagen, quedará así:

fondo transparente, png y transparencias para dummies (tuto)

Luego seleccionamos la herramienta “Background eraser tool” o borrador de fondo y procedemos a borrar todo el contenido blanco.

fondo transparente, png y transparencias para dummies (tuto)

Podemos notar que lo haremos sin preocupación de borrar la zona que compone la imagen central ya que no está seleccionada. Quedaría algo así:

fondo transparente, png y transparencias para dummies (tuto)

Si, nuestro fondo de cuadros grises y blancos que mencionamos antes. Luego solo queda guardar la imagen como PNG y listo:

fondo transparente, png y transparencias para dummies (tuto)

Valga aclarar que este proceso es el más sencillo y aplica solo para imágenes donde el fondo sea un color solido y continuo, cuando se le quiere quitar fondos más complejos se necesita el uso de herramientas igual de complejas en Photoshop, si este post tiene buena acogida realizaré uno explicando ese proceso mas complejo.

fondo transparente, png y transparencias para dummies (tuto)

Gracias por visitar mi post, sería un gran incentivo recibir puntos, seguidores y favoritos que premien la labor. Les invito también a visitar mis anteriores aportes:

fondo transparente, png y transparencias para dummies (tuto)

fondo transparente, png y transparencias para dummies (tuto)

No comments yet.

Leave a Comment