Cómo crear en Photoshop un logo transparente para tu web

Vamos a ver cómo crear un logo de texto con fondo transparente de modo que se funda perfectamente con cualquier fondo para usarlo en una web de fotografía o de cualquier otro tipo.

Sobre los formatos de imagen y la transparencia

Repasemos antes de comenzar los formatos de imagen más habituales y su capacidad de transparencia:

JPG. El más adecuado para fotografías ya que para imágenes complejas tiene la mejor relación peso/calidad.

GIF y PNG de 8 bits. Adecuado para imágenes sencillas y de colores planos como dibujos y logotipos. Admite transparencia pero solamente de un color, es decir, podemos hacer el fondo de una imagen transparente pero el borde aparecerá recortado bruscamente.

PNG de 24 bits. Se podría usar para fotografías de modo similar a TIFF, pero en nuestro caso nos interesa porque tiene capacidad de transparencia en un amplio rango, es decir, un punto de la imagen puede ser totalmente transparente, totalmente opaco o parcialmente transparente. Esto se traduce en bordes suavizados sobre el fondo.

Creando el logo en Photoshop

 1. Crear una imagen

Creamos una imagen vacía, por ejemplo de 600x400px, con los parámetros que vemos a continuación. Es importante seleccionar Contenido de fondo como Transparente:

2. Trazar el logo

Podemos usar la herramienta de texto, dibujar líneas o crear formas usando la herramienta forma personalizada:

Creando un logo transparente para web

3. Guardamos el logo como PNG de 24 bits

Vamos a usar la exportación para web de Photoshop usando Archivo / Exportar / Guardar para web. En el diálogo de exportación es importante marcar PNG-24 y Transparencia en la parte superior derecha.

Exportando un fichero de imagen PNG de fondo transparente

En la parte superior derecha vemos el ajuste PNG-24. Si por el contrario hubieramos seleccionado PNG-8, el resultado sería este:

Como vemos aparece un halo blanco en torno al trazado, que no se nota si el fondo es blanco pero sí con cualquier otro color de fondo.

Resultado

En estas capturas de pantalla podemos ver el mismo logo en varias web creadas con Bluekea, y cómo se adapta perfectamente a distintos tonos del fondo.

Es importante que el logo siempre contraste y sea bien visible, es decir si el fondo es de tonos claros el logo será oscuro, y viceversa. Si el logo va sobre una foto, es importante que también sea visible y que esté posicionado en una zona despejada de la imagen.

Este artículo fue publicado originalmente en agosto de 2011, y ha sido actualizado por última vez en febrero de 2019.

Bluekea son webs creativas para fotógrafos y artistas creativos. pruébalo gratis

Esta entrada fue publicada en Diseño de web. Guarda el enlace permanente.

5 respuestas a Cómo crear en Photoshop un logo transparente para tu web

  1. muchas gracias, me hacia falta para el logo de una web

  2. Edgar dijo:

    muchas gracias..! me sirvió enormemente tu tutorial…

  3. Muy buen tutorial. Es bastante fácil pero si no conoces los conceptos básicos de nada sirve. Un saludo y gracias.

  4. cooper dijo:

    muy bien!! claro breve y conciso .llevaba un buen rato con la cabeza hinchada de leer ….
    gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Time limit is exhausted. Please reload CAPTCHA.



Necesitamos registrar tu nombre y correo electrónico para responderte en caso necesario, y para controlar y prevenir el abuso en los comentarios. Conservaremos tus datos durante el tiempo que este artículo permanezca publicado, salvo que nos solicites lo contrario. Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal.

Tienes derecho a consultar, rectificar o eliminar tus datos personales cuando ya no sean necesarios, contactando con nosotros en info@bluekea.com. El responsable del tratamiento es Jesus Rodríguez Martinez.

Los datos proporcionados aquí son gestionados por Bluekea y estarán ubicados en servidores de Amazon Web Services, INC (AWS) fuera de la UE, pero que cuenta con certificado en el Escudo de Privacidad UE-EE.UU que garantiza unos niveles de seguridad adecuados.

Puedes ampliar esta información en nuestra Política de privacidad pulsando el enlace junto a la casilla de correspondiente.