09 septiembre 2011

Cómo Crear tu Propia Cabecera con Estilo + 10 Ejemplos de Cabeceras muy Vistosas e Ilustradas

Esta entrada te sera útil, si quieres crear una cabecera ilustrada, es decir, que utilice elementos gráficos como imágenes, vectores, o ilustraciones.

Cuando queremos personalizar nuestro blog, sin tener que tocar ningún código de la plantilla, o casi ninguno, la opción perfecta, fácil, y de resultados espectaculares, es: crear una imagen para la cabecera.

Crear o hacer una imagen para la cabecera, no es algo muy difícil, el principal elemento que necesitamos es la "imaginación o creatividad", y yo sé que tú la tienes. También, manejar un programa de edición de imágenes como Photoshop en cualquiera de sus versiones, aunque también sirven Paint.Net, Gimp, u otro similar; tiempo, paciencia, y seguir un plan, mismo que hoy te voy a compartir. ¿Lista (o)?, entonces, veamos de que se trata:


Paso 1: La Planeación del diseño

Punto Clave 1: El Concepto
Para empezar, deberás pensar en que es lo qué quieres trasmitir,  ¿qué va a proyectar tu blog? Para ello tomarás en cuenta el tema de tu blog, y qué matiz o sentido le vas a dar a dicho contenido.

Esto servirá para poder crear una cabecera que comunique la esencia o identidad de tu blog.

Un punto a favor, es que el título del blog y el tema del blog trabajen juntos. En adición a la imagen de la cabecera y las demás partes de la plantilla, de hecho, el título es parte del concepto en sí de tu blog.

Esta es una parte difícil y sencilla a la vez. Fácil, cuando se tiene bien definido que quieres proyectar, y difícil cuando tu blog aún no tiene identidad, pero no te preocupes, sólo hay que buscarla o crearla, ¿en qué piensas?

Punto Clave 2: El estilo
Dicho de una manera simple, es el look que tendrá mi cabecera.
Por ejemplo, si quiero que luzca con aspecto antiguo: estilo vintage o antiguo, si quiero que luzca moderno, grunge, retro, etc.

Para inspirarte, puedes ver algunos ejemplos de páginas web con estilo "Vintage retro".
30 ejemplos de páginas web con estilo grunge.

Viendo ésos diseño podrás identificar las características propias de cada uno de esos estilos.

Ésto servirá a la hora de eligir los elementos gráficos, tipo de fuentes y colores.

Punto Clave 3: Los colores
Esta es otra parte importante, cuando empezamos a crear nuestra imagen para la cabecera, y lo que deberías preguntarte es: ¿qué colores voy a usar y que hagan armonía con el color de fondo del blog que ya uso?, o  ¿qué colores le dan a mi blog una apariencia vintage?

Si vas a hacer un cambio total incluyendo el fondo del blog, entonces tienes que pensar en una buena integración de esas partes o secciones de tu blog, de tal manera que todo armonice.

Hay muchos sitios en la red que te permiten crear paletas de colores ricas y que armonicen como:
En el último sitio que te menciono, puedes explorar entre millones de paletas ya existentes y seleccionar alguna.

Para conocer la influencia de los colores en la emociones de las personas y cómo usarlos en el diseño web, te recomiendo echarle un vistazo a esta entrada que incluye una infografía con la psicología del color, en donde de forma breve y concisa, se explican esos detalles.


Punto 4: Los elementos gráficos y texturas, entre otros 
Por otro lado, necesitas buscar los elementos gráficos y texturas etc., es decir todas aquellas imágenes que tienen forma, color y/o textura y entre ellos puedes usar:
Puedes escoger varios, y guardarlos todos en una carpeta de tu computadora, para que luego puedas probarlos en el programa que vayas a usar.

Tip: Si eres buen dibujante y tienes tiempo, considera crear tus propios gráficos, los escaneas para luego crear tus propios vectores, o pinceles. Eso le daría un toque único a tu blog.

Punto Clave 5: Las fuentes
Fuentes bonitas y legibles que combinen crearán una buena integración del diseño. Puedes incluir algunas de diseñador en algunos textos que vayas a incluir, o en el título y la descripción, si es que lo vas a incluir en la imagen.

Tip: Instala varias fuentes que te gusten, para luego probarlas sobre la imagen en el editor.

En Google Web Fonts, puedes encontrar una gran variedad de fuentes.

Otros sitios con fuentes gratis son:

Punto Clave 6: Las medidas
Necesitas saber el ancho del blog completo del blog, ya que es el punto de referencia para empezar a trabajar en el editor de imágenes.

En las nuevas plantillas de Blogger, eso lo puedes saber yendo al Diseñador de plantillas y tomando nota de la medida en pixeles, que viene en ancho del blog completo.

Simplemente vas a Plantilla > Personalizar > Ajustar Ancho. Toma nota del ancho del Blog completo. En la siguiente imagen puedes apreciar que el blog tienen un ancho de 960 pixeles. Esa es el ancho máximo que tiene que tener tu cabecera.


Con respecto a la altura, puedes usar la que desees, sin ningún problema. Lo más importante es trabajar tomando en cuenta el ancho.

Nota: Nunca utilices una imagen más grande que el ancho del blog completo. Ésto le agregará carga al blog. También al no utilizar la opción de "Reducir hasta ajustar", ésta se desbordaré hacia la derecha creando un efecto antiestético, y le dará a tu blog un aspecto poco profesional y descuidado.

Para ciertos estilos, en donde la imagen es más grande que el ancho del blog completo, una buena opción es colocar la imagen como fondo de la plantilla (ver ejemplos 4,8,y 10).

Paso 2: Ponte en Acción
Perfecto, si ya tienes todo lo anterior, lo que sigue es ponerse en acción en el editor de tu preferencia, por ejemplo photoshop, Gimp, o Paint.Net.

Echa  a volar tu imaginación, ponte jugar con todos tus elementos gráficos, texturas y pinceles, sé creativo, y tómate tu tiempo, que las cosas con prisa nunca salen bien (mmm, bueno, hay algunas excepciones) .

Paso 3: Poner la cabecera en el blog
Una vez que hayas hecho la imagen de la cabecera, tendrás que subirla a tu blog, y para ello, puedes seguir estos pasos y recomendaciones. Tienes que estar abierto a cambiar detalles que no pudieran armonizar.


Otros Tips y Recomendaciones:
  • Nunca copies el diseño de una cabecera existente, sé creativo, y una vez que tengas todos los elementos gráficos y demás,  juega con ellos en el editor, verás que puedes obtener resultados únicos y muy originales
  • Si no te sientes inspirada (o), no te forces a crear la cabecera en ese momento, mejor, sal de casa, ponte en contacto con la naturaleza, lee un libro, o una revista,  la inspiración llegará cuando tenga que llegar.
  • Una vez creada la cabecera optimiza el archivo de imagen, para que sea más ligero y no afecte tanto el rendimiento de tu blog.

Ejemplos de Headers con estilo

ejemplo header creativo



2.Fran Fernandez

ejemplo header creativo


3.Noel Nieto

ejemplo header creativo


4.Belzebu de saia

ejemplo header creativo


5.Pienternet

ejemplo header creativo

6. Kitschen Sink

ejemplo header creativo


7.Childrens Day

ejemplo header creativo


8. Media Efects

ejemplo header creativo


9. Kid 81 Blog

ejemplo header creativo

10. dquinn.net

ejemplo header creativo


Conclusiones:

La cabecera, como primer elemento visible en un blog o página web, puede causar un impacto visual enorme, por ello es conveniente crear una cabecera agradable, y mejor aún, que sea capaz de proyectar la esencia o el concepto de la página.

Crear una imagen en la cabecera que proyecte la esencia de nuestro blog, en un logro importante, aunque el hecho de no tenerla y usar un logotipo en su lugar, o un diseño minimalista que no utilice ilustraciones en esa sección, no quiere decir que sea malo, o peor, es simplemente cuestión de estilos y preferencias.

¿Listo (a) para empezar a crear tu propia cabecera?

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.