Una portada bonita para tu blog

5/2/15

Buenos días a todos!

Hoy voy a dejaros un tutorial a petición de algunas de vosotras para enseñaros como he diseñado yo esta página para presentar mi estudio, el lugar donde creo, imagino y diseño todas mis ilustraciones.



Antes de empezar con nada, yo tenía muy claro que el estilo iba a seguir la combinación de colores del blog y la shop, ya que creo que todo debe quedar acorde.
Mi paleta de colores tiene como base principal el color blanco, que le da luminosidad e intensidad al fondo, para así dejar como protagonistas a los dos colores que forman mi marca, el rosa pálido y el gris suave (así los describo yo).

Empecé creando un blog, así que me fui a blogger (esto ya sabéis todas como va), blog nuevo, y le puse como nombre immacreativastudio. Escogí una plantilla simple y sencilla porque en mi presentación solo habría:

- Una cabecera (donde he puesto la imagen de mi logo)
- Un gadget HTML debajo de la cabecera, donde he ubicado la imagen mapeada (ya os hablaré más adelante de mapear),  o lo que es lo mismo...que lleva a todos los links de mis dominios (el blog, la shop, el portfolio, mi servicio de diseño y mi email).
- Otro gadget con la suscripción a los posts para que no os perdáis nada, y otro con los enlaces a mis redes sociales.
- Y para finalizar la pantalla, una barra donde os doy la bienvenida.
Aquí podréis ver el resultado.

Y aquí es donde os explico como preparé la imagen y la mapeé (añadirle todos los links).

Yo me decidí por buscar fotos bonitas que pudiese descargar gratuitamente, con paletas de colores que combinasen con mi marca (esto lleva días, porque te gustan tantas que es difícil elegir, así que tener paciencia!), una vez las tuve, creé la composición basándome en el ancho de mi blog (algo importantísimo para que después la imagen no os quede ni muy grande ni muy pequeña, ni desfasada).
Diseñé a mi muñequita para incluirla en la foto de la shop, busqué una tipografía divertida, preparé todos los titulares, y cuando me gustó el resultado (todo esto, lo hice con el programa de PowerPoint), lo seleccioné para que fuese una sola imagen y lo guardé en mi ordenador como una imagen en formato PNG.

Y ahora es cuando os presento al programa que nos va a mapear nuestra imagen, para que podamos ubicar en cada sección, el link que nos lleve a la página que representa.

El programa se llama Image Maps, y esta es su pantalla principal, donde deberéis subir vuestra imagen, pero tener muy en cuenta que la debéis alojar en algún sitio web, porque este programa elimina las imágenes cada 24h. Yo utilizo TinyPic, por si no sabéis donde.


Insertáis la URL de la imagen y le dais al botón Browse for File, este os abrirá la pantalla de vuestro ordenador para buscar la imagen ubicada en él también (en formato PNG), y una vez encontrada volvéis a clickar y os llevará a la pantalla donde saldrá vuestra imagen, cerráis una pestañita de información que sale, y ahora vamos a mapearla.


Yo solo os hago una demostración de un trocito, pero esta operación debe realizarse con cada link o trozo mapeado que queráis insertar.
Cómo veis he elegido la opción Create Rect, una vez hecho esto se abrirá una pestaña donde podremos ubicar ese rectángulo moviéndolo con el cursor, donde queramos que se quede el link de enlace, yo lo puse encima del título de cada apartado de mi imagen (shop, blog, portfolio, diseño y email).


Y en la pestaña Options, puse el link directo a la página que lleva cada uno de los apartados.


Después, en la pestaña Events, marcáis la opción blank, esto hará que cuando la persona pulse en el link, este se abra en otra ventana y así no abandonen la página de Inicio. Guardáis (Save) y así vais haciendo sucesivamente todos los links que queráis incorporar en la imagen.


Vereis que cuando guardáis aparece un cuadro rojo, ese es el lugar identificativo del mapa que hemos creado, tiene unas coordenadas concretas que llevan a la dirección incluida en él.
Ya añadidas todas las páginas con sus respectivos links a la imagen, solo nos queda insertar en el blog, para ello volvemos a clickar encima con el segundo botón y se nos abrirá otra vez la pestaña, esta vez le damos a Get Code.


Vamos a HTML Code y copiamos el código que nos da el programa para pegarlo en un gadget del blog.


Y ahora si que ya podemos ir a:
Diseño
Añadir gadget HTML y copiar el código, tal que así!


Ya tenéis vuestra portada, ahora solo queda ubicarla como página de Inicio, Página principal o Home, en vuestro blog.
Y esto es tan fácil como ir a:
Diseño
Páginas
Enlace externo (se os abrirá una ventana), ponéis el nombre de la página, como os he dicho antes (página principal, inicio, home) y insertar el link, y evidentemente...desmarcar la página que utilizabais antes.
Yo, como esta página la tengo en la barra de arriba, está insertada en el código HTML de la barra, lo digo por si tenéis una barra también!


Y eso es todo amigos, jajaja!!!!!.Espero que el tutorial os sirva de ayuda para crearos portadas bonitas para vuestro blog.
Para dudas, sugerencias o cualquier comentario...estoy aquí.

¿Os gustan los blogs con portadas?
¿O preferís que el inicio siempre sea diferente?
 
 
Nos vemos la próxima semana, feliz finde!
 
♥♥ Immacreativa

28 comentarios:

  1. ¡Hola Inma! Qué interesante y qué bien explicado. Lo que entonces, si quieres cambiar una de las imágenes que forman el inicio, ¿tienes que volver a hacer todo el proceso no? Porque aunque parezcan varias imágenes en realidad es una si lo he entendido bien.
    Mi web la tengo con wordpress pero supongo que se podrá hacer igual. Igual pruebo a ver y así si algún día quiero cambiar la estética ya sé por donde tirar. Gracias por el tutorial!

    ResponderEliminar
    Respuestas
    1. Hola Bea, muchas gracias a ti por estar aquí!
      Si, lo has entendido bien, cada uno de mis apartados (blog, shop, portfolio, diseño y email) son imágenes distintas que con el programa Power Point se vuelven una sola imagen, las seleccionas todas y las agrupas en una (ventana Formato-Agrupar).
      No he trabajado nunca con wordpress, pero si tienes la opción de Añadir gadgets HTML, digo yo que también podrás hacerlo. Sobretodo, antes de probar nada haz copias de seguridad, y si tienes dudas...mándame un correo a immacreativa@gmail.com por si puedo echarte una mano.
      Besos y feliz finde!

      Eliminar
  2. Guauuuu!!! Me encanta cómo te ha quedado y me gustaría, al menos, intentar hacer una portada la mitad de chula para mi blog, así que voy a guardar este post muy bien guardadito para hacerlo en cuanto pueda.
    Mil gracias por compartirlo. Sé que vas a tener más de una alumna por aquí ¡seguro!
    Un beso,

    Manuela.

    ResponderEliminar
    Respuestas
    1. Muchas gracias Manuela!
      Si te atreves con ello enséñame el resultado, y si tienes dudas...ya sabes, puedes encontrarme en immacreativa@gmail.com.
      Un beso

      Eliminar
  3. Primero, en cuanto a diseño del blog, coincido contigo ya que el mío también tiene el fondo blanco, pero yo tengo 3 colores de base. En cuanto al diseño de portada, llevo tiempo intentando buscar algo para añadir las redes sociales y el buscador dentro de la imagen de portada y creo que este tutorial me va venir bien. Ahora sólo tengo que pensar en el diseño, esto me cuesta más ya que no soy experta en ello.
    Muchíiiiiisimas gracias por el tutorial. Me lo guardo cerquita. Bss.

    ResponderEliminar
    Respuestas
    1. Hola Elisabet!,
      En cuanto al diseño, tómatelo con calma y busca cosas que se relacionen con la temática de tu blog, los colores, lo que quieres transmitir y que representa para ti tu trabajo. Es lo más importante antes de empezar a diseñar.
      Sobre los tres colores...no pasa nada, pero cuanto más siempre te resultará más complicado, por eso yo recomiendo que el total sean tres colores, y el blanco, ya es uno de ellos.
      Besos y bienvenida!

      Eliminar
  4. Muy interesante, me guardo la entrada para verla mas detenidamente.
    Gracias

    ResponderEliminar
    Respuestas
    1. Muchas gracias, espero que te sea de utilidad.
      De nada

      Eliminar
  5. La portada te quedó súper chula. La muñequita preciosa...A mi las muñequitas me encantan pero tengo poca paciencia para ahcerlas (y conocimientos de diseño y artísticos 0)..Aún así hago mis pinitos con el Photoshop jajajajaja.
    Muy buen tuto, me lo apunto ;)
    XOXO

    ResponderEliminar
    Respuestas
    1. Eres una auténtica preciosidad, me adula tanto comentario bonito, miles de gracias!!!!!!
      Besos

      Eliminar
  6. Una chulada de tuto. Lo he mirado en diagonal pero promete! Me ha encantado así que andaré por aquí chafardeando dentro de un ratito.

    Bsos y 1000 gracias! (o 1.000.000... o... ;o))

    ResponderEliminar
    Respuestas
    1. De eso nada, millones de gracias a todas vosotras, no seria nada sin todos y a cada uno de vuestros comentarios que me ayudan a seguir.
      Besis

      Eliminar
  7. Es tal y como yo pensaba, Imma :)
    Muchas gracias por compartirlo!

    ResponderEliminar
  8. Super interesante, ya estoy a ponerlo en practica en cuento tenga un huequecito...muchas gracias por compartir estos tutoriales.

    Un besico!!

    ResponderEliminar
    Respuestas
    1. Muchas de nadas Roinmar, encantada de serviros de ayudita.
      Besis

      Eliminar
  9. Ya conocia el images map y me parece una idea genial portada asi. Lo unico que yo no tengo ni photoshop ni powerpoint. Casi todo lo hago con pickmonkey y canva. Un besito y muchas gracias por el tutorial.

    ResponderEliminar
    Respuestas
    1. Ana Maria, creo que la combinación de fotos para una portada también podrías hacerla con Pickmonkey, pruébalo!
      Besos

      Eliminar
  10. Waaaalaaaa!!! No sabía que se podía hacer eso!! Me has abierto un mundo nuevo!! Muchas gracias por enseñarnos esto!! Es suuuuper útil!!

    Un besoooote enorme guapa!!

    ResponderEliminar
    Respuestas
    1. Lo de un mundo nuevo me viene genial, me ha encantadoooooooooooo!
      Un besote enorme y gracias por todo

      Eliminar
  11. Preciosa tu portada, me parece perfecta para tener organizados tus blogs o secciones principales. Felicidades por el trabajo!! Y ahora una preguntilla: alguna recomendación de web de imágenes de uso libre? Un besito!

    ResponderEliminar
    Respuestas
    1. Hola Rosana, muchas gracias...pues mira...como recomendación de páginas hay muchas, pero te pongo alguna aquí: UNSPLASH y PIXABAY son mis favoritas.
      Un besito

      Eliminar
  12. Inma, muchísimas gracias!!! Todos los que estamos un poco "pegados" en estos temas te lo agradecemos de corazón... Tu ayuda es importantísima para nosotros. : ))

    Muchos besos guapa!!

    ResponderEliminar
    Respuestas
    1. De verdad de la buena, ahora voy a decir una frase muy pegadiza..."Me llenáis de orgullo y satisfacción con vuestros comentarios"!!!!!!!
      Millones de gracias, besitos

      Eliminar
  13. Mega tutorial!!! Esto hay que guardarlo "como oro en paño", que dicen las viejecitas... Qué pedazo de profesional hija...me sorprendes cada día...cuánto sabes amiga!! ^ ^Feliz finde!!

    ResponderEliminar
    Respuestas
    1. No tanto, no tanto! jajaja...solo intento aprender y os enseño lo mejor que se lo que he aprendido.
      Un beso enorme y feliz finde!

      Eliminar
  14. Me encanta!!! Y me has dado un monto de ideas como al resto!
    Muchas gracias por el tuto y estuve mirando el blog y me encanta!
    Besotes
    Las cosinas de aisha

    ResponderEliminar
  15. Se me olvidaba!! Como haces para que las imágenes en la shop vayan cambiando? Ese efecto me encanta !

    Y debería registrar la marca? Lo tengo solo con safe creative y ando perdida en eso... Ahora mismo me suscribo!
    Besotes

    ResponderEliminar

Tus comentarios son la parte de mi trabajo que más me ayuda a continuar, nunca dejes de hacerlo, sin ti, no seria lo mismo!