Crear un logo para 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 que visites la entrada 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

    Por ejemplo...

    Como podemos elegir la tem谩tica del logo que queremos crear, vamos a crear un logo para un gimnasio.

    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 entrada 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, es recomendable 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.

    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 entrada y compartirla en tus redes sociales. De esta manera me animas a continuar trabajando en este proyecto y ayudas a otras personas que desean aprender.

    (11 votos, promedio: 5 de 5)

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

    驴Me invitas un caf茅?

    Todo el contenido que puedes encontrar en este sitio web es gratis y siempre lo ser谩 pero, mantenerlo, requiere de muchos caf茅s y muuuuchas horas . Si te gusta mi trabajo y te est谩 ayudando, considera invitarme un caf茅 para apoyarme y apoyar este proyecto. 隆Te invito 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
    Search
    Generic filters

    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@cursowordpress.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.

    Tratamiento de datos personales

    • Responsable: MARIA ANTONIETA BEAUTY CONCEPT, S.L.
    • Finalidad: Moderar y responder comentarios de usuarios.
    • Derechos: Podr谩s ejercer tus derechos de acceso, rectificaci贸n, limitaci贸n y suprimir los datos en legal@cursowordpress.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.