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 (
♥ 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
