![\"C\u00f3mo](\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2011\/08\/Captura-de-pantalla-2019-02-12-a-las-10.02.55.jpg\")
<\/figure>\n<\/div>\n\n\nSobre los formatos de imagen y la transparencia<\/h2>\n\n\n\n
Repasemos antes de comenzar los formatos de imagen m\u00e1s habituales y su capacidad de transparencia:<\/p>\n\n\n\n
JPG<\/strong>. El m\u00e1s adecuado para fotograf\u00edas ya que para im\u00e1genes complejas tiene la mejor relaci\u00f3n peso\/calidad.<\/p>\n\n\n\n GIF y PNG de 8 bits<\/strong>. Adecuado para im\u00e1genes 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\u00e1 recortado bruscamente.<\/p>\n\n\n\n PNG de 24 bits<\/strong>. Se podr\u00eda usar para fotograf\u00edas 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.<\/p>\n\n\n\n Creamos una imagen vac\u00eda, de un tama\u00f1o recomendado de unos 600x400px, con los par\u00e1metros que vemos a continuaci\u00f3n. Es importante seleccionar Contenido de fondo<\/em> como Transparente<\/em>:<\/p>\n\n\n Podemos usar la herramienta de texto, dibujar l\u00edneas o crear formas usando la herramienta forma personalizada<\/em>:<\/p>\n\n\n Vamos a usar la exportaci\u00f3n para web de Photoshop usando Archivo \/ Exportar \/ Guardar para web<\/em>. En el di\u00e1logo de exportaci\u00f3n es importante marcar PNG-24<\/strong> y Transparencia<\/strong> en la parte superior derecha.<\/p>\n\n\n En la parte superior derecha vemos el ajuste PNG-24. Si por el contrario hubi\u00e9ramos seleccionado PNG-8, el resultado ser\u00eda este:<\/p>\n\n\n Como vemos aparece un halo blanco en torno al trazado, que no se nota si el fondo es blanco pero s\u00ed con cualquier otro color de fondo.<\/p>\n\n\n\n En estas capturas de pantalla podemos ver el mismo logo en varias web creadas con Bluekea<\/a>, y c\u00f3mo se adapta perfectamente a distintos tonos del fondo.<\/p>\n\n\n Es importante que el logo siempre contraste y sea bien visible, es decir si el fondo es de tonos claros el logo ser\u00e1 oscuro, y viceversa. Si el logo va sobre una foto, es importante que tambi\u00e9n sea visible y que est\u00e9 posicionado en una zona despejada de la imagen.<\/p>\n\n\n\n Normalmente cuando subimos el logo a un dise\u00f1o web, hay un espacio limitado en este dise\u00f1o para ubicarlo. Este espacio suele ser un rect\u00e1ngulo o un cuadrado. Puede ocurrir que tras preparar y subir el logo, lo vemos muy reducido una vez colocado en la web.<\/p>\n\n\n\n El problema suele ser que existe demasiado espacio vac\u00edo dentro de la imagen, alrededor del trazado del logo. As\u00ed, cuando la imagen se inserta en el hueco que hay previsto en la web, este espacio vac\u00edo hace que el propio logo se tenga que encoger para dar cabida a toda la imagen.<\/p>\n\n\n\n Por tanto, una pr\u00e1ctica muy recomendable es recortar la imagen hasta el borde del trazado del logo<\/strong>, sin dejar m\u00e1rgenes alrededor del mismo.<\/p>\n\n\n\n Vamos a ver c\u00f3mo crear un logo de texto con fondo transparente de modo que se funda perfectamente con cualquier fondo para usarlo en una web de fotograf\u00eda o de cualquier otro tipo. Veremos tambi\u00e9n c\u00f3mo recortar la imagen de … Sigue leyendo Creando el logo en Photoshop<\/h2>\n\n\n\n
1. Crear una imagen<\/h3>\n\n\n\n
![\"Contenido](\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2019\/02\/Captura-de-pantalla-2019-02-12-a-las-9.46.03.jpg\")
<\/figure>\n<\/div>\n\n\n2. Trazar el logo<\/h3>\n\n\n\n
![\"Creando](\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2011\/08\/Captura-de-pantalla-2019-02-12-a-las-9.50.04.jpg\")
<\/figure>\n<\/div>\n\n\n3. Guardamos el logo como PNG de 24 bits<\/h3>\n\n\n\n
![\"Exportando](\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2011\/08\/Captura-de-pantalla-2019-02-12-a-las-9.53.46.jpg\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2011\/08\/Captura-de-pantalla-2019-02-12-a-las-9.57.51.jpg\")
<\/figure>\n<\/div>\n\n\nResultado<\/h2>\n\n\n\n
<\/figure>\n<\/div>\n\n![\"Ejemplo](\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2011\/08\/Captura-de-pantalla-2019-02-12-a-las-10.03.45.jpg\")
<\/figure>\n<\/div>\n\n\nUn paso extra. Recortando el logo para aprovechar al m\u00e1ximo el espacio<\/h2>\n\n\n\n
![\"\"](\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2019\/02\/sample-logo.jpg\"){kind=logo}
Este art\u00edculo fue publicado originalmente en agosto de 2011, y ha sido actualizado por \u00faltima vez en septiembre de 2022.<\/h6>\n","protected":false},"excerpt":{"rendered":"