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.

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

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:

Contenido de fondo como Transparente para tu logo

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 hubiéramos 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.

Así queda tu logo transparente en Bluekea.

Ejemplo de logotipo transparente en web de fotografía en bluekea.

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 Técnica digital en fotografía. Guarda el enlace permanente.

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