Añade una buena imagen de fondo al título de tu Blog – PHD

La creación de una imagen de fondo vistosa para el título de nuestro Blog puede no sólo darle un toque de personalidad a la plantilla proporcionada por Blogger sino además servirnos de reclamo para nuestros usuarios.

Existen herramientas de Google que podemos aprovechar para darle a la imagen el aspecto que deseamos y emplearla como fondo de nuestro título.

El apartado visual de nuestro Blog es la primera impresión que todo usuario se lleva de nuestro pequeño rincón en Internet. Realzar el título con una buena imagen de fondo hace que el usuario no sólo se lleve una buena sensación visual, además puede vincular esa imagen al título mentalmente (casi como si fuera un logo), haciendo que luego lo recuerde con mayor facilidad.

Si no te has atrevido por desconocimiento a hacerlo o quieres simplemente mejorar el aspecto visual de tu Blog resaltando el título, este artículo te interesa.

Buscamos mejorar la presentación del blog realzando el título con una imagen de fondo que le de personalidad:

En la primera imagen lo vemos sin imagen de fondo y en la segunda con una imagen que lo hace resaltar.

Paso a Paso:

1) En primer lugar debemos conocer el tamaño del "marco" donde va nuestro título para introducirle la imagen. Es importante este paso porque dependiendo de lo que mida en píxeles (cada "cuadrito" que compone la imagen) la imagen, en pasos posteriores deberemos editarla para adptarla de manera que quede "encajada" en el cuadro.

Para realizar la "medición" en píxeles del ancho y alto del "marco" de la imagen, abrid vuestro blog en Internet Explorer o Chorme (en Mozilla lo que voy a explicar requiere tener instalado "Firebug"). Una vez se muestre la pantalla principal pulsad F12 y se os abrirá el editor de desarrollo que Explorer o Chrome incorporan de serie:

- En Explorer en el menú superior pulsa la opción "Buscar" y después "seleccionar elemento con un clic". Si es con Chorme pulsad la "lupa".

- Acto seguido dirigid el cursor del ratón a la zona de título y procurad seleccionar el "marco" completo que engloba la imagen, observaréis que está en "div id="header-inner". Apuntaros los valores que veis en "Height" (alto) y "Width" (ancho) que determinarán el tamaño final que tendrá que tener la imagen que pondremos de fondo del título.

Se aprecia en el código los textos width (ancho) y height (alto) del marco seleccionado de nuestro blog.

En mi caso, el tamaño del marco (del div id="header-inner") es de 920 de ancho por 157 de largo. Es muy posible que en la mayor parte de plantillas de Blogger sea muy parecido o igual.

2) Ahora que ya sabemos dónde vamos a meter la imagen, debemos buscar y elegir la que vamos a emplear de fondo para el título de nuestro Blog. Tratad de que los colores de la misma encajen con los utilizados en la plantilla del blog o que, si resaltan especialmente, no destaquen produciendo estridencias con el contenido. Aquí lo que cuenta es el gusto personal de cada uno. Contar, si es posible, con más de una opinión para esto puede ofrecer un mejor resultado final.

Esta es la imagen que decidí utiliza como fondo para mi título, de ella sobre todo me interesaba la parte en la que se veían las nubes y el sol, que es la parte que entraría después en los 920x157 píxeles que mide el marco de mi título. Esto de todas maneras es totalmente opcional, podéis buscar la imagen que queráis y hasta incluso meter en ella más espacio, es un tema meramente estético.

3) Una vez contamos con la imagen la subimos a Google+ de la siguiente manera: en tu escritorio Google+ fíjate en los iconos a modo de menú que te aparecen a la izquierda: "Inicio", "Perfil", "Explora" y "Fotos". Si pasas el ratón por encima de "fotos" sin hacer clic te saldrá la opción de "Añadir Fotos".

Te saldrá una pantalla donde puedes poner el "Nombre del Álbum" y a continuación pulsar el botón "Seleccionar fotos de tu ordenador", donde al pulsarla, podrás subir la imagen que vas a utilizar para tu título del lugar del disco duro donde la bajaste en el paso inicial.

4) Una vez ha subido la imagen, la verás en una ventana "pequeña" a modo Preview, si pasas por encima de la Previsualización, se te dibujarán unos pequeños iconos dentro de la misma donde el que tiene forma de lápiz te abrirá el Editor de Imágenes.

5) Antiguamente [Piknic] http://www.picnik.com/ era una potente WEB especializada en la edición de imágenes que finalmente adquirió Google. El editor que se te abre tras realizar el paso 3 es Piknic. Desde aquí vamos a configurar la imagen para que adquiera los valores de altura y anchura que obtuvimos con las mediciones del paso 1.

Tenemos dos opciones:

- Recortar: puedes extraer de la imagen la porción que te interese para poner de fondo de título. El color del título en contraste con la imagen de fondo debe ser el apropiado para que no se vea difuminado o invisibilizado por los colores de la foto que queramos utilizar.

Estamos recortando el trozo que queremos. Ponemos a la izquierda el tamaño del marco que medimos en el punto 1), en mi caso era 920x157, siempre manteniendo la escala de la foto para que no se deforme.

- Cambiar Tamaño:Reducir directamente el tamaño de la imagen que deseamos utilizar de fondo del marco del título. El problema aquí es ser capaces de conseguir respetar la relación de aspecto de la imagen de origen para que no quede "estirada" o "deformada" cuando la situemos en el marco de fondo del título.

Estamos poniendo que el tamaño de largo sea 920 tal y como medimos en el punto 1). El problema es que si queremos mantener la proporción para que no se deforme la imagen, automáticamente estará en 517. Aquí cada uno tiene que ver si le compensa o debe recortarla.

En ambos casos hay que poner el ancho y alto que medimos en el paso 1) para que la imagen objetivo se reduzca a esas medidas. Así pues, debemos conseguir que el tamaño de la imagen de fondo concuerde con el marco o Div que alberga al título.

Una forma de obtener imágenes que luego no es necesario recortar y que fácilmente se enmarcan en tamaños más pequeños, es buscar en Google Images poniendo "banner" y el concepto de la imagen que queremos de fondo. Aquí es creatividad pura, incluso puedes hacerte tú mismo la imagen, retocarla con Photoshop, dibujarla y escanearla... todo es posible, la única clave es pensar que luego debe quedar proporcionada dentro de lo medido en el paso 1).

6) Una vez retocada la imagen que queremos manejar nos vamos a Blogger para colocarla en nuestro Blog. Dentro del menú de la izquierda nos vamos a la opción "Diseño".

7) Nos dirigimos al gadget de Título (suele llamarse "Cabecera" y colocamos la imagen retocada con la que hemos trabajado buscando con seleccionar archivo. Poned la opción "Detrás del título y la descripción" para que acompañe de fondo al texto de cabecera o título.