Una de las cosas que más suele llamar la atención de un blog o página web suele ser su cabecera. La imagen de esta, se convierte en una marca, al igual que un logotipo en una tarjeta de visita. Esta cabecera hace que los visitantes asocien determinados productos, servicios o contenidos con la imagen.
Para diseñar una cabecera, hemos de tener en mente una idea de diseño previo, como la imagen o imágenes, textos y contenidos que queremos incluir.
Por sus prestaciones y posibilidades, vamos a utilizar el programa
GIMP, aunque podríamos utilizar otros programas, incluso
PAINT, de
Microsoft.
Antes de empezar, hemos de tener claro principalmente el ancho, pero también el alto de la cabecera que queremos diseñar. Para ello, hemos de ver o ajustar el ancho de nuestro blog a las preferencias personales.
Desde el panel de control de nuestra bitácora, iremos al apartado "Plantilla" y haremos clic en "Personalizar".
Desde "Ajustar ancho", deslizaremos con el ratón el ancho deseado en el apartado "Blog completo" y nos fijaremos en los píxeles que indica a la derecha.
Teniendo claro el ancho que tiene nuestro blog, decidiremos el alto que queremos, por ejemplo unos 250 píxeles (no es recomendable excederse mucho más para no hacer una cabecera demasiado grande u ostentosa, pero se podría hacer).
De este modo, tenemos una idea de que la imagen de nuestra cabecera ha de tener por ejemplo unos 1000*250 pixeles (ancho*alto).
Ahora abrimos el
GIMP e iremos al menú "
Archivo" y haremos clic en "
Crear imagen nueva", donde escribiremos el alto y el ancho deseado y haremos clic en "
Aceptar":
Ya tenemos un fondo, que por defecto es blanco, pero que podemos cambiar por un color utilizando las herramientas pertinentes del cuadro de herramientas que nos aparece en el lateral izquierdo, pero en nuestro caso, para ir un poco más allá, vamos a elegir una imagen de fondo.
Podemos utilizar una imagen de nuestro ordenador o buscar alguna en la red y descargarla. Una vez localizada su ubicación, desde el menú "
Archivo" de
GIMP haremos clic en "
Abrir como capas", eligiendo la imagen que hemos decidido desde su ubicación.
Ahora nos fijamos en el panel derecho del programa y podremos observar que hay dos capas, una llamada "Fondo", que es la que hemos creado al principio para definir el tamaño de la cabecera y otra con el nombre de la imagen que vamos a utilizar de fondo. Seleccionamos esta última haciendo clic sobre ella (1) y ahora hacemos clic en la "Herramienta mover"(2) de la izquierda. Esto ahora nos permitirá mover la capa de imagen haciendo clic con el botón izquierdo del ratón sobre el centro de la pantalla y sin soltarlo, la moveremos arriba o abajo, a izquierda o derecha, según nos interese hasta tener la parte deseada de la imagen encuadrada en nuestra área de cabecera que hemos definido.
Ya tenemos el fondo. Ahora podemos añadir otras capas como imágenes, texto, etc.
Vamos a proceder con la capa de texto con el nombre de nuestro blog.
Para ello, elegimos la herramienta "Texto" (1) del panel de la izquierda y ajustamos el tipo de letra (2), tamaño (3) y color (4) según deseemos:
A continuación, bastará con hacer clic en el lugar de nuestra cabecera donde queramos situar el texto, aunque podremos moverlo después, reeditarlo, o incluso darle inclinación.
En el panel de capas de la derecha, también podemos duplicar la capa haciendo clic sobre ella con el botón derecho del ratón y cambiando el color del texto y desplazándola un milimetro abajo y a la derecha, conseguiremos dar efecto de sombra.
Ahora podemos añadir otros elementos como una descripción con texto, imágenes con transparencia, etc. En el caso de querer añadir otra imagen, hemos de localizarlas y en el menú "Archivo", elegiremos la opción "Abrir como capas".
Podemos desplazar la capa y ajustarle el tamaño según deseemos (panel de herramientas de la izquierda) o incluso cambiar el orden de la capa para superponer unas sobre otras (panel de herramientas de la derecha).
Si deseamos dar transparencia a una de las capas, para que se vea el fondo, la seleccionaremos del panel de la derecha (5) e iremos al menú "Capa" (1) y en el apartado "Transparencia" (2) seleccionaremos "Añadir canal alfa" (3) si está en negro y luego procederemos de igual modo seleccionando "Color a alfa".
Ya tendremos una capa con transparencia. Podemos superponer los elementos que hemos ido añadiendo haciendo clic con el botón izquierdo del ratón sobre la capa correspondiente (5) y sin soltar, arrastrarla arriba o abajo.
Por último nos queda dar efecto a los bordes. Guardamos el proyecto que estamos creando por medio del menú "Archivo", "Guardar" y ahora lo exportamos como imagen, preferiblemente en formato PNG haciendo clic en el menú "Archivo", "Exportar" y haciendo clic en los correspondientes botones de "exportar" que nos aparecerán en las sucesivas ventanas sin necesidad de cambiar nada:
Una vez exportada la imagen, cerramos nuestro proyecto de cabecera, abrimos nuevamente el programa y por medio del menú "Archivo", abrimos la imagen de nuestra cabecera base que hemos exportado. Veremos que nos abre una sola imagen que no presenta capas en el panel de la derecha.
Ahora necesitamos aplanar la imagen para poder proceder a darle los posteriores efectos. Para ello, iremos al menú "Imagen" y haremos clic en "Aplanar imagen":
A continuación, iremos al menú "Filtros" (1) y en "Decorativos" (2) haremos clic sobre "Esquinas redondeadas".
Aplicamos el efecto sin necesidad de cambiar nada más y veremos que por medio de un script el programa nos ha creado una imagen nueva que tiene los bordes redondeados y una ligera sombra, pero sobre un fondo blanco al que le vamos a dar transparencia según el procedimiento que se ha indicado antes.
Volvemos a exportar esta última imagen creada y ya tenemos el diseño de nuestra cabecera concluido.
Ahora sólo quedará subirlo a nuestro blog. Para ello, desde el panel de control de nuestro blog, en el apartado "Diseño" hacemos clic en "Editar" del gadget de la cabecera, subimos la imagen creada, seleccionemos que aparezca "En lugar del título y la descripción" y guardamos todos los cambios:
Ya tendremos nuestro blog con una cabecera propia diseñada por nosotros mismos.
Aquí tenemos algunos ejemplos de cabeceras diseñadas:
Después, alternando entre el modo de "Edición HTML" (1) o el modo de "Formato RTF" podemos acabar de ajustar el widget según nos interese.
De vuelta a Feedburner, en "Comunication preferences" (1) personalizaremos el mensaje de suscripción que recibirán nuestros suscriptores (4), el asunto (3) y la dirección de correo en el que tenemos registrado el Feed o cuenta de Google (2):
A continuación, desde el panel de control de nuestro blog, en el apartado de diseño, añadiremos un nuevo gadget HTML/JAVASCRIPT en el que, en el modo de "Edición HTML", pegaremos el código obtenido.
