Este primer diseño será más fácil de hacer que untar un pan con mantequilla recién levantado por la mañana, con los ojos llenos de legañas y las manos temblorosas por no haber recibido tu primera dosis de café. Vamos a coger un par de WALLIPEIPARS de Internet, también conocidos como fondos de pantalla, utilizando el buscador de imágenes de Google y vamos a crear un diseño sin retocar ni una sola de ellas. El que quiera aprender a retocar por ordenador, o a hacer modificaciones varias, mucho me temo que se va a tener que esperar al próximo bricoduende, aunque os aconsejo que os leáis primero este, porque en el siguiente no voy a explicar como se utilizan las herramientas que manejamos aquí.

¿Empezamos?

Imaginad que estáis, como yo, sin cagar por culpa de la dinámica de perolas que ha implementado Capcom en su Biohazard 5 sobre la protagonista Sheva Alomar (y sin necesidad de previo pago por la descarga de un DLC ya contenido en el juego), y que le queréis dedicar un homenaje tanto a la chica como al juego. Pues bien, lo primero que debemos de hacer es buscar en San Google Bendito alguna imagen del juego que os guste. En mi caso buscaré específicamente a los dos protagonistas, y algo más general, haciendo uso de los siguientes términos en las búsquedas: Sheva Alomar Wallpaper, Chris Redfield Wallpaper, y Resident Evil 5 Wallpaper.

Tened una cosa clara, personalmente, prefiero pegarme horas, si, HORAS, buscando una buena imagen que me guste que no pasarme otras tantas retocando una imagen que no me termina de gustar. Es por eso que gastarse su buen tiempo buscando imágenes o ideas para utilizar en el diseño de tu blog es muchísimo más importante que cualquier conocimiento que se tenga sobre alguna herramienta de retoque.

De todo el ‘batiburrillo’ de imágenes que han salido me he descargado estas cuatro, teniendo en cuenta sólo las que tenían una resolución mínima igual o superior a 1024x768 píxeles de ancho por alto. Por suerte Google aparte de una miniatura te indica también la resolución o tamaño de la misma. Si utilizáis imágenes con una dimensión inferior posiblemente perdáis calidad al ampliarlas (os recuerdo que nuestro diseño cuenta con una resolución de 1280x1024 píxeles), más que nada porque con GIMP podéis hacer retoques pero no milagros, y no sería la primera vez que alguien utiliza una imagen menor de 640 x 480 medio pixelada o borrosa para usarla en un Skin de fondo.

IMAGEN1

IMAGEN2

IMAGEN3

IMAGEN4

*****************************************

COMO CREAR EN GIMP UN DISEÑO PARA TU BLOG EN MENOS DE DIEZ MINUTOS (y con tiempo para comerse un bocata de por medio)

En este ejemplo de hoy vamos a crear tres imágenes, una para el Skin, otra para las Entradas que será usada también como fondo de los comentarios (mientras que el fondo del bloque lateral será de un color plano o transparente y no estará formado por ninguna imagen), y una para la Cabecera. Para ello, utilizaremos las imágenes 1 y 2 para el fondo del Skin, la 3 para el fondo de la Entrada, y la 4 para la Cabecera. Empezamos abriendo con el programa GIMP PORTABLE el archivo ‘plantilla.xcf’ que creamos en el bricoduende anterior.

*****************************************

PRIMER PASO: CREAR LA IMAGEN DEL SKIN

Una vez abierto el archivo ‘plantilla.xcf’ seleccionamos la capa Lado Der en la Caja de Capas y Deshacer.

- Archivo : Abrir como Capas

Seleccionamos la IMAGEN1 en la ventana Abrir Imagen y vemos como se crea una capa ubicada por encima de la capa Lado Der y por debajo de la capa Centro. Ahora le cambiamos el nombre de esta nueva capa a Chris y la movemos seleccionando la Herramienta Mover de la Caja de Herramientas, que también se puede seleccionar pulsando la tecla M. El cursor cambia a una forma con una mano y una flecha de cuatro direcciones. Pinchamos sobre la imagen y la desplazamos píxel a píxel con los cursores del teclado o de forma más rápida haciendo uso de la tecla Shift (la tecla con la flecha hacía arriba que está encima de la tecla Ctrl o Control) y de los mismos cursores. También podemos desplazar la imagen de forma menos precisa manteniendo pulsando sobre ella el botón izquierdo del ratón y manejando este último.

Ejemplo de cómo quedaría la imagen una vez importada

Yo he decidido desplazarla a la izquierda hasta que la imagen de Chris quede bien visible ocupando el lateral izquierdo. Al desplazarla nos daremos cuenta de que la capa superior llamada Centro hace que la imagen mantenga su centro oculto. Luego hacemos lo mismo con la IMAGEN2, es decir, fijándonos que la capa Chris está seleccionada abrimos como una capa dicha imagen, la nombramos como Sheva o TiaBuena, y la desplazamos del mismo modo hacía el lado opuesto de la anterior.

Ejemplo de cómo quedaría la imagen tras las importaciones y desplazamientos, que es la que finalmente utilizaremos como skin de nuestro blog

Con esto ya tenemos nuestro Skin creado y sólo nos faltaría exportar la imagen, pero primero aseguramos el trabajo que hemos hecho grabando sobre la misma plantilla, cosa que no recomiendo, o mejor aún, grabándolo en un alarde de originalidad y ocurrencia como Resident.xcf. Ahora ya podemos exportar la imagen que vemos en pantalla.

- Archivo : Guardar una copia

Desplegamos la opción Seleccione el tipo de Archivo pulsando con el ratón sobre el símbolo ‘+’, elegimos imagen JPEG, y le damos al botón Guardar. Aparecerá una ventana advirtiéndonos que este tipo de imágenes no trabajan con capas y es necesario ‘aplanar’ la imagen para poder usar este formato, es decir, el programa va a unificar todas las capas VISIBLES en el orden en que aparecen, o lo que es lo mismo, va a crear una imagen JPG exactamente igual a lo que vemos en pantalla, así que le damos al botón de Exportar.

Nos sale la ventana Guardar como JPEG en la cual nos aseguramos de tener activada la opción Mostrar vista previa en la ventana de la imagen, ya que de esta forma se nos abrirá una vista previa de lo que vamos a grabar y nos aseguramos que lo que estamos viendo va a ser exactamente el aspecto final de la misma. Otro dato a tener en cuenta es que el peso de los archivos en Gamefilia no puede superar los 128Kb por lo que deberemos ir aumentado o disminuyendo la barra de Calidad hasta que el tamaño del archivo sea lo más aproximado a dicha cifra pero siempre inferior a esta. En nuestro ejemplo, una calidad de 83 nos asegura un peso de 126,9Kb y una de 84 supera el límite establecido.

Ventana de dialogo para ajustar la calidad y el tamaño de la imagen a guardar

RETAHILAS DEL ABUELO CEBOLLETA o esto son ganas de estirar el moco y lo demás es tontería

Aquí podemos notar la importancia que tiene el dejar la zona central en negro. Si hacemos invisibles las capas Cabecera y Centro pulsando sobre el ojo que aparece a la izquierda de su nombre en la Caja de Capas y Deshacer, y hacemos los mismos pasos, es decir, guardamos una copia en formato JPG, nos daremos cuenta que para conseguir un tamaño aproximado e inferior a 128Kb tenemos que reducir la calidad de la imagen a 62 en vez de los 83 que hemos utilizado. En este caso la diferencia no es muy evidente pero en otras ocasiones esto se nota bastante.

El fichero exportado a JPG con una calidad de 62 debido a la ausencia de una zona central de un mismo y único color

Otra cosa que deberíais tener en cuenta es que hemos usado dos imágenes distintas pero se podría utilizar una en la que justamente lo que queráis mostrar está en los laterales y no en el centro, o una donde lo que queráis enseñar está tan sólo a un lado. En este último caso, duplicando la capa y reflejándola como en un espejo aparecería lo mismo en el otro lado de la pantalla. Es decir, si por ejemplo nos ponemos sobre la capa de Chris y con el botón derecho seleccionamos duplicar capa y hacemos lo siguiente:

- Capa : Transformar : Voltear horizontalmente

Tendremos un fondo mucho menos sensual pero más viril donde predomina el embutido tipo salchichón sobre la fruta tipo melones, aunque para gustos colores.

Imagen llena de testosterona con la capa de Chris clonada y volteada como en un espejo

*****************************************

SEGUNDO PASO: CREAR LA IMAGEN DE FONDO DE LA ENTRADA

Nos ubicamos sobre la capa de Sheva seleccionándola en la Caja de Capas, o sobre la capa Lat Der en caso de que estéis utilizando la plantilla desde cero, y abrimos la IMAGEN3 como una capa, renombrándola después como Entrada. En mi caso me salió una ventana con la pregunta ¿convertir al espacio RBG?, y como esta es una clase más práctica que teórica y paso de explicar el tipo de información que puede llevar incrustado un archivo JPG, le damos al botón de Convertir si os hacen esa preguntita y punto.

Si un desconocido os hace esta pregunta en mitad de la calle, no le mandéis a la mierda, simplemente mandadlo a convertir.

En primer lugar, como vamos a trabajar con la capa Centro y la capa que está por encima de ella, llamada Cabecera, nos molesta, la escondemos momentáneamente haciendo que no sea visible. Para ello pulsamos con el botón izquierdo del ratón sobre el icono del ojo que está a la izquierda de la miniatura de la capa Cabecera en la Caja de Capas y Deshacer.

Como podéis observar la capa Centro que tiene el tamaño exacto de cómo debería ser la imagen utilizada para el fondo de las Entradas oculta totalmente la imagen que acabamos de importar en forma de capa. Lo que vamos a hacer es cambiarle su opacidad o transparencia de forma que deje ver en parte la capa que tiene debajo, que es la que queremos como fondo de las Entradas. Para ello, en la Caja de Capas y Deshacer seleccionamos la capa Centro y en la misma caja desplazamos la barra de opacidad hacía la izquierda hasta que se pueda distinguir la imagen de la capa que tiene debajo y que es la que acabamos de importar bajo el nombre de Entrada.

La idea es crear un fondo o imagen para las Entradas oscuro aprovechando que el color de la capa Centro es negro. Si prefiriésemos utilizar una imagen de fondo de Entradas más clara seleccionaríamos la capa Centro y haríamos lo siguiente para rellenarla de color blanco:

- Editar : Rellenar con el color de fondo

En cualquier caso, modificamos el valor de la opacidad de la capa Centro de 100 a 80, desplazando la barra de Opacidad hacía la izquierda.

Imagen del fichero con la nueva opacidad aplicada

Sin embargo, una vez corregida la opacidad nos daremos cuenta de que la ubicación de la capa Entrada no es la más idónea ya que a la izquierda de la capa Centro aparecen las letras Evil entrecortadas. Para solucionar esto seleccionamos la capa Entrada y pulsamos la tecla M para activar la Herramienta de desplazamiento, pinchamos sobre la imagen con el botón izquierdo del ratón, y luego con los cursores del teclado movemos dicha capa hacía la izquierda hasta que estas letras desaparezcan de la zona central. Os pongo aquí como quedaría el fondo de las Entradas con ambas tonalidades, una clara y otra oscura.

Imagen del fichero con la opacidad aplicada a la capa Centro rellena de negro y la capa Entrada desplazada a la izquierda

Imagen del fichero con la opacidad aplicada a la capa Centro rellena de blanco y la capa Entrada desplazada a la izquierda

Para exportar la imagen que vamos a utilizar de fondo para las entradas, es decir, para exportar tan sólo la zona central de la imagen, pulsamos el botón derecho del ratón sobre la capa Centro en la Caja de Capas y Deshacer y seleccionamos Alfa a Selección. Con esto habremos seleccionado la capa. A continuación hacemos lo siguiente:

- Editar : Copia Visible

- Editar : Pegar Como : Imagen Nueva

Ahora guardamos la imagen en formato JPEG cuidándonos de que ocupe menos de 128Kb y ya tenemos nuestro nuevo fondo para las Entradas.

Imagen final para el fondo de las Entradas

MAS RETAHILAS DEL ABUELO CEBOLLETA o como perder aún más el tiempo de lo que ya lo estás haciendo

Una tercera opción es no crear una imagen para las Entradas y dejarlas configuradas sin color de fondo, es decir, dejarlas transparentes y que dejen ver el Skin de fondo en su plenitud. En esos casos si que queda bien no dejar en negro la zona central del Skin, pero si oscurecer o aclarar esa zona para que se puedan leer el texto de las entradas, para ello modificamos la opacidad de la capa Centro de la forma que ya hemos visto y exportamos la imagen como hemos hecho al final del PRIMER PASO.

Ejemplo de Skin con la opacidad aplicada a la capa Centro y con la capa Entrada NO VISIBLE

*****************************************

TERCER PASO: CREAR LA IMAGEN DE FONDO DE LA CABECERA

Nos posicionamos sobre la capa de Centro seleccionándola en la Caja de Capas y abrimos la IMAGEN4 como una capa, renombrándola después a Título, y nos aseguramos de que la capa Cabecera esté visible, es decir, que aparezca el icono del ojo a la izquierda del nombre de la capa en la Caja de Capas. De no estarlo pulsamos el botón izquierdo del ratón en el cuadrado donde debería estar el ojo para que este aparezca y hacerla visible.

Vamos a utilizar la capa Cabecera para ayudarnos a encuadrar bien la nueva capa a la que hemos llamado Titulo. Para ello seleccionamos la capa Cabecera, la rellenamos con el color de fondo, y le damos una opacidad de 50 como hemos aprendido a hacer en el paso anterior. Como podemos ver, la capa Titulo no encaja perfectamente en la transparencia creada con la capa Cabecera.

Ejemplo de cómo quedaría el diseño con la imagen importada

Por este motivo vamos a escalar la capa Titulo para que aparezca en la transparencia la parte de la imagen que queramos que se vea como imagen en la cabecera de nuestro blog. Para ello seleccionamos la capa Titulo y luego la Herramienta de Escalado de la Caja de Herramientas o usamos la combinación de teclas Shift+T, que viene a ser lo mismo. Pinchamos con el nuevo cursor que aparece sobre la imagen y vemos como la capa se rodea de un rectángulo de líneas verdes y unos cuadrados en las esquinas y en los laterales de la misma. Además nos ha aparecido una nueva ventana bajo el nombre de redimensionar. Como podéis ver, al escalar una capa GIMP crea una copia y la superpone sobre todas las capas, y es esta nueva capa la que sufre la transformación, la cual no se realizará sobre la capa que hemos querido redimensionar hasta que no pulsemos sobre el botón Escala.

Es muy importante que en la ventana redimensionar pulsemos con el botón izquierdo del ratón sobre la cadena rota que está a la derecha de los píxeles de anchura y altura para que esta aparezca unida. De esta manera, aunque si movemos los cuadrados verdes de los laterales las imagen se escalará de forma distorsionada, cuando utilicemos los cuadrados de las esquinas la imagen si que se escalara guardando la proporción o relación de alto y ancho de origen.

Escalamos la imagen utilizando las esquinas de forma que el ancho de esta quede un poco por fuera del ancho de la transparencia de la capa Cabecera. Si durante el proceso necesitáramos mover la capa que estamos escalando lo podemos hacer manteniendo pulsado el botón izquierdo del ratón sobre el circulo verde interior que aparece en el interior del rectángulo de líneas verdes. Cuando esta tenga las dimensiones que nos apetezca, o en este caso un poco más del ancho de la capa Cabecera, le damos al botón Escala de la ventana redimensionar, y si es necesario desplazamos la capa posteriormente hasta que encuadre bien en la transparencia de la citada capa Cabecera.

Ejemplo de cómo es el proceso de escalar, redimensionar, o cambiar el tamaño de una imagen

Ejemplo de cómo quedaría la imagen importada, y escalada al tamaño de la cabecera de nuestra plantilla

Pues bien, si nos gusta lo que vemos en la transparencia como fondo de imagen para el encabezado del blog, exportamos la imagen de la siguiente manera. Para empezar bajamos la opacidad de la capa Cabecera a 0, y luego con el botón derecho sobre el nombre de la capa Cabecera, en la Caja de Capas, seleccionamos Alfa a selección, de esta manera tendremos creada una selección con las dimensiones adecuadas. Luego le damos a copiar visible y a pegar como imagen nueva, ambas en el menú edición y ya tendremos la imagen de cabecera, la cual grabaremos bajo el nombre que queramos.

ULTIMAS RETAHILAS DEL ABUELO CEBOLLETA o como aprender cosas que a lo mejor después ni las utilizas

Como podéis observar, al quedar Chris y Sheva a la derecha de la Cabecera sería interesante poner el nombre de nuestro blog en la izquierda. Para ello usamos la Herramienta de Texto que se activa pulsando la tecla T, pinchamos en la zona de la imagen donde queremos que se muestre el texto, y escribimos lo que queramos en la ventana Editor de Textos que aparece. Luego pulsamos sobre el botón de Cerrar y se creará una nueva capa con el texto. Si mantenemos la Herramienta de Texto activada y la capa de texto seleccionada, podremos cambiar el texto pinchando sobre su recuadro en la imagen, o modificar su aspecto a través de las opciones de la Caja de Herramientas. En esta última podemos modificar el tipo de letra pulsando sobre el botón de tipografía, el tamaño, y el color pulsando sobre el color que tiene por defecto y escogiendo uno nuevo para darle después al botón de Aceptar. Si encima conseguimos bajarnos y usar una fuente de texto acorde con la temática que estamos utilizando, por ejemplo, descargándonos en este caso la tipografía del juego Resident Evil, ya es que somos la polla directamente.

Ejemplo de cómo poner tipografía o texto a nuestros diseños para que molen un huevo y parte del otro

*****************************************

FINALIZANDO, que es gerundio…

Esta segunda entrada, un poco más práctica pero casi igual de inútil, hemos visto como crear un diseño de blog a partir de varias imágenes que hemos encontrado por Internet. Considero que esto es lo mínimo que debéis de saber hacer para poder hacer un diseño de blog en condiciones. En el siguiente briconsejo os enseñaré, por fin, a hacer un diseño o composición aprovechando las bondades del retoque fotográfico para cambiar totalmente el aspecto de las imágenes que utilicemos, pero dadme mucho tiempo porque yo carezco del mismo y hacer este tipo de tutoriales cuesta lo suyo. Espero que está entrada al menos os haya podido servir de algo de ayuda, por ello os dejo el archivo resident5.xcf con todas las capas creadas para lo modifiquéis a vuestro gusto y os pongáis a experimentar. ¡Nos vemos en el próximo bricoduende!^^