Lección 06

¿Cómo crear y subir un logo en WordPress?

Un logo es una imagen que suele ir alojada en la cabecera de un sitio web. Está compuesto tanto por símbolos, texto o una combinación de los dos. Es importante que sea sencillo, fácil de reproducir y de recordar.

Por lo general, cuando se diseña un logo, es recomendable definir un color base (o principal) y un color secundario que serán los que se utilicen para el desarrollo del sitio web.

La idea es que el logo contenga, al menos, el color principal que se utilizará en el sitio web o una combinación entre el color principal y el secundario.

Como el logo, por lo general suele ser una imagen, te recomiendo visites la lección imágenes en WordPress (si aún no lo has hecho) donde encontrarás información actualizada para optimizar correctamente una imagen antes de subirla a WordPress.

Índice del contenido
    Add a header to begin generating the table of contents

    1. Características de un logo en WordPress

    Muchas personas suelen crear un logo al azar y subirlo a su sitio web. Luego se dan cuenta que el logo no se ve, se ve pixelado, queda demasiado grande o no encaja bien en la cabecera. En fin, el logo no ha sido optimizado para subirlo al sitio web.

    Normalmente esto sucede por falta de conocimientos. Antes de subir un logo a un sitio web es necesario tener en cuenta algunos parámetros para conseguir un excelente resultado

    1.1 Formato de la imagen

    Lo recomendable es que el logo tenga formato PNG (extensión .png) de manera que se pueda diseñar con fondo transparente.

    Además de esta extensión, existen otras extensiones con las que se suelen crear logos aunque no todas suelen ofrecer buenos resultados:

    • JPG: no ofrece la posibilidad de fondo transparente por lo que no sería una buena opción.
    • GIF: se utiliza comúnmente para animaciones. No se recomienda su uso para logos ya que no ofrecen una buena resolución.
    • SVG: es un buen formato para un logo pero muchos temas no son compatibles con esta extensión.

    En resumen, cuando crees un logo para tu sitio web, asegúrate que tenga formato PNG con fondo transparente.

    1.2 Orientación del logo

    La orientación del logo suele estar definida por la arquitectura del tema. Por lo general los logos se diseñan en formato horizontal para que se adapte a la cabecera del sitio web que se suele ubicar en la cabecera del tema.

    Sin embargo, hay temas que ofrecen la opción de configurar la cabecera en el lateral de la pantalla. En este caso es más recomendable utilizar un logo en formato vertical.

    Por último existen logos simétricos (ancho y alto iguales) que pueden ser utilizados tanto en formato horizontal como en formato vertical.

    Varios formatos de cabecera en un tema
    Varios formatos de cabecera en un tema

    En la imagen anterior puedes apreciar diferentes configuraciones de cabecera que ofrecen algunos temas (por lo general los temas PREMIUM).

    Dependiendo de la opción que elijamos para nuestro sitio web, diseñaremos el logo para que se adapte a la configuración de la cabecera.

    • Logo en formato vertical: para las opciones 1, 2, 5, 7 y 8.
    • Logo en formato horizontal: para las opciones 3, 4 y 6.
    • Logo simétrico: cualquiera de las opciones.

    Si contratas el diseño de un logo, por lo general, el profesional suele diseñar el logo en varios formatos. De esta manera puedes cambiar el logo según la configuración que elijas en el tema.

    En la siguiente imagen puedes observar el diseño de un logo tanto en formato horizontal como en formato vertical.

    Logo en formato horizontal y vertical
    Logo en formato horizontal y vertical

    1.3 Tamaño del logo

    El tamaño de un logo viene dado por sus dimensiones. Un logo con 1000px de ancho y 300px de alto ofrece una buena resolución pero no es un tamaño adecuado para subirlo a un sitio web.

    Cuando contratas el diseño de un logo, generalmente el diseñador te entrega varias versiones, en varios formatos y con una resolución muy alta.

    Suelen tener grandes medidas (3500px de ancho y 1800px de alto, por ejemplo) de manera que se pueda utilizar también para imprenta: diseño de banners publicitarios, camisetas y tarjetas entre otros.

    Actualmente, la mayoría de temas modernos, suelen ofrecer opciones para adaptar el logo al espacio de su cabecera e incluso para diferentes tipos de dispositivos: PC, tableta y móvil, sin importar las dimensiones. Astra es uno de ellos.

    Anuncio publicitario

    2. ¿Dónde crear un logo para mi sitio web?

    Para crear un logo, para tu sitio web, tienes 3 opciones:

    Existe una plataforma llamada Logaster. Es una plataforma donde puedes crear logos de cualquier tipo, tamaño, diseño y color para tu sitio web.

    Aunque puede que el resultado final no sea tan profesional como te gustaría, es una buena elección para crear un logo y comenzar con tu proyecto.

    Para crear un logo en Logaster, sigue los siguientes pasos:

    1. Accede a Logaster, escribe el nombre de tu marca y haz clic en el botón INICIAR LA CREACIÓN DE LA MARCA.
    Creando un logo en Logaster
    Creando un logo en Logaster

    Si has seguido el curso desde el inicio, podrás recordar que en la primera lección, hablamos del proyecto: desarrollar el sitio web de un Gimnasio.

    Vamos a crear un logo en base a esta temática.

    1. La plataforma creará varias opciones aleatorias de logos. En la barra superior podrás cambiar el nombre de tu marca, la temática del logo y la combinación de colores que Logaster te propone. Modifícalas a tu gusto y haz clic en el botón CREAR.
    Personalización del logo en Logaster
    Personalización del logo en Logaster
    1. Una vez haya elegido el logo que más te guste, haz clic en el botón PREVISUALIZAR Y DESCARGAR.
    2. Se abrirá una ventana donde te indicará las posibles combinaciones que puedes hacer con el logo que has elegido. Si estás satisfech@ con el diseño, haz clic en el botón DESCARGAR.
    Aplicaciones del logo en Logaster
    Aplicaciones del logo en Logaster
    1. En la siguiente pantalla necesitarás registrarte en la plataforma para poder continuar con la descarga del logo. Una vez te hayas registrado, inicia sesión.
    2. A continuación verás varias combinaciones de diseño y color del logo para que elijas, la que más te guste, para tu sitio web.
    Selección del logo en Logaster
    Selección del logo en Logaster
    1. Como puedes observar, Logaster sólo ofrece la opción de descargar un formato del logo de forma gratuita. Para el resto de combinaciones deberás pagar.
    2. Haz clic en la opción gratuita. Se abrirá una ventana donde te ofrece las diferentes opciones de descarga. Haz clic en Tamaño pequeño PNG para descargar el logo.
    Descarga del logo en Logaster
    Descarga del logo en Logaster

    Para este ejemplo, el logo que hemos descargado tiene formato PNG, 327px de ancho y 147px de alto. Tanto el formato como el tamaño están bien para subirlo al sitio web.

    Pero hay un problema, tiene fondo blanco. El fondo transparente es más recomendable para un logo ya que te da libertad con el diseño si el fondo de la cabecera es de otro color.

    Existe un programa gratuito llamado GIMP que es muy parecido a Photoshop. Con este programa podrás quitar el fondo blanco de la imagen y guardarla con fondo transparente.

    En este tutorial tienes una guía para que aprendas a quitar el fondo de una imagen con GIMP.

    Al quitar el fondo blanco, el logo adopta las medidas: 275px de ancho y 75px de alto, lo cual sigue siendo un buen tamaño para subirlo a nuestro sitio web.

    Siguiendo estos sencillos pasos, en los que no tardarás más de 5 minutos, puedes crear un logo para tu sitio web totalmente gratis y con una calidad bastante óptima.

    3. ¿Cómo subir un logo a mi sitio web?

    Una vez hayas descargado el logo, aplica las técnicas SEO que recomiendo en la lección imágenes en WordPress (la que te recomendé leer al inicio de esta lección). Básicamente sería renombrar y optimizar la imagen.

    Por lo general recomiendo renombrar una imagen coincidiendo con el titulo de la página o entrada donde se vaya a subir. En el caso del logo, puedes renombrarlo como logo.png ya que será una imagen genérica que estará en todo el sitio web.

    Inicia sesión en WordPress y dirígete al apartado Apariencia >> Personalizar >> Cabecera >> Identidad del sitio.

    En la lección, personalizar Astra, veremos todas las opciones de personalización que ofrece este tema.

    1. Haz clic en Seleccionar El logotipo.
    2. Sube el logo a WordPress y haz clic en el botón Seleccionar.
    3. Se abrirá una ventana para recortar la imagen. Haz clic en el botón No recortar.
    4. Como puedes observar, se ha subido el logo pero sigue apareciendo el título del sitio en formato texto. Desactiva la casilla Mostrar título del sitio. Verás como ahora solo aparece el logo.
    5. Si el logo es muy grande, en la opción Ancho del logo, puedes variar el tamaño del logo para que se adapte a la cabecera.
    Subiendo el logo al sitio web
    Subiendo el logo al sitio web
    1. Haz clic en Publicar para guardar los cambios.
    2. Abre tu sitio web en el navegador para que puedas apreciar los cambios.
    Vista previa del sitio web con el logo
    Vista previa del sitio web con el logo

    El logo, en versión PC, se ha subido y configurado correctamente en nuestro sitio web. Pero, ¿qué pasa con la versión móvil?

    En la parte inferior izquierda de la pantalla, hay 3 iconos de visualización: PC, tablet y móvil. Mediante cada uno de estos íconos, podrás configurar las opciones para cada versión de tu sitio web.

    Versiones RESPONSIVE del personalizador del tema
    Versiones RESPONSIVE del personalizador del tema

    Haz clic en cada una de ellas para que puedas observar como se verá tu sitio web en cada dispositivo.

    Para este ejemplo, el logo, en la versión móvil, se ve muy grande. En la opción Ancho del logo, se puede apreciar como ha cambiado el ícono de PC por el ícono del móvil.

    Esto significa que el tema se adapta a cada una de las opciones para ser configuradas independientemente en versiones responsivas.

    Vista del logo original en versión móvil
    Vista del logo original en versión móvil
    1. Varía el tamaño del logo, en la opción Ancho del logo, hasta que adopte un tamaño adecuado para la vista en versión móvil.
    2. Haz clic en Publicar para guardar los cambios.
    Vista del logo adaptado a la versión móvil
    Vista del logo adaptado a la versión móvil

    Siguiendo estos sencillos pasos hemos subido un logo a WordPress. El logo tiene el tamaño ideal y se encuentra optimizado para todas las versiones del sitio web.

    Anuncio publicitario

    4. Conclusión

    Con esta información podrás ir avanzando en el diseño de tu sitio web. Aún quedan más pasos para lograr tener un sitio web completamente funcional y optimizado para el SEO.

    Ten paciencia que poco a poco irás teniendo más práctica y, cuando finalices el curso, obtendrás excelentes resultados.

    ¿Te ha gustado?

    Te estaría muy agradecido si pudieras valorar esta lección y compartirla en las redes sociales. De esta manera me animas a continuar trabajando en este curso de WordPress y ayudas a otras personas que desean aprender.

    (8 votos, promedio: 5 de 5)

    Share on facebook
    Facebook
    Share on twitter
    Twitter
    Share on linkedin
    LinkedIn
    Share on telegram
    Telegram
    Share on whatsapp
    WhatsApp
    Share on email
    Email

    Este curso es gratis y siempre lo será pero, mantenerlo, requiere de mucho tiempo y esfuerzo. Si te gusta el curso y te ha ayudado, considera invitarme un café haciendo un pequeño donativo a este proyecto que he creado con el para ti y muchas personas que desean aprender. Las donaciones me ayudan a seguir trabajando en este fantástico curso gratuito. ¿Me invitas un café?.

    Suscríbete y aprende WordPress desde cero.

    No me gusta el SPAM y se que a ti tampoco. Sólo recibirás información útil sobre WordPress.

    Al enviar, confirmas que has leído y aceptas la política de privacidad. Conoce nuestro compromiso con tu privacidad.

    Comparte tu experiencia

    Deja un comentario si tienes alguna duda o cuéntanos cómo ha sido tu experiencia.

    guest
    0 Comentarios
    Inline Feedbacks
    Ver todos los comentarios
    0
    ¿Dejas un comentario? Gracias!x
    ()
    x
    Ir arriba
    Elementor

    ¿Quieres saber cómo ganar un dominio .COM, un hosting y una licencia de Elementor PRO por 1 año?

    Tratamiento de datos personales

    • Responsable: MARIA ANTONIETA BEAUTY CONCEPT, S.L.
    • Finalidad: Suscribirte a la lista de correos electrónicos.
    • Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en legal@gianoliveira.com, así como el derecho a presentar una reclamación ante una autoridad de control.
    • Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal.
    • Información adicional: En mi política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal incluida información sobre acceso, conservación, rectificación, eliminación, seguridad y otros temas.