Crear un Banner Publicitario con Gimp 2.6

Éste es el banner que vamos a crear:

Empezaremos por crear un nuevo documento en blanco con las medidas de 468x60 pixels, un tamaño considerado estándar para los banners en Internet (no me preguntéis por qué). Para ello abrimos TheGIMP, y vamos al menú Archivo --> Nuevo (o pulsamos Ctrl+N). De la lista de plantillas seleccionamos Web banner common 468x60, y pulsamos Aceptar.

Haciendo doble click en el selector del color de primer plano accederemos a la paleta de colores para cambiar el negro por un tono azul cuyo valor hexadecimal puede ser (por ejemplo) #4e6ddf.

De esta manera tendremos un color de primer plano azul, y un color de segundo plano blanco. Ahora dibujaremos un degradado de azul a blanco que vaya desde la parte izquierda de la imagen hasta la derecha. Para ello seleccionaremos la herramienta Rellenar con un degradado de colores o Mezcla (blend). Podemos seleccionarla mediante el ratón desde la propia paleta de herramientas, a través del menú Herramientas --> Herramientas de pintura --> Mezcla (Blend), o simplemente pulsando la letra L de nuestro teclado. En las Opciones de herramienta elegiremos forma lineal, y un degradado de Frente a fondo.

Y en nuestra imagen de 468x60 pixels que hasta ahora permanecía en blanco trazamos una línea de izquierda a derecha. Pinchamos en la parte izquierda de la imagen con el botón izquierdo del ratón, arrastramos el ratón hacia la derecha sobrepasando los límites de la propia imagen, y soltamos el botón. Buscamos un resultado similar a éste:

El siguiente paso será dibujar las esferas de distintos tamaños que se verán en el fondo del banner. Tenemos al menos dos modos de hacerlo: de manera automatizada, o manualmente. Ambos sistemas son igualmente sencillos y eficaces, así que explicaremos los dos.
En el menú Exts que se encuentra en la parte superior del menú de herramientas (accesible mediante teclado pulsando Alt+X) podremos acceder a ScriptFu --> Misc --> Esfera, donde podremos dibujar una esfera fácilmente.

Elige el tamaño del radio de la esfera en pixels (recuerda que el radio es la distancia desde el centro hasta el borde de la esfera; por lo tanto el diámetro de la esfera -el ancho- será el doble del radio), desmarca la casilla sombra, elige como color de fondo el mismo tono de azul que hemos utilizado para el degradado (#4e6ddf), el blanco (#ffffff) como color de la esfera, y pulsa Aceptar.

En realidad no necesitamos el fondo de color azul en la esfera, así que lo vamos a desechar. Hemos elegido como color de fondo el mismo que en el gradiente simplemente para que las imperfecciones en el recorte no se noten, ya que lo más probable es que al eliminar el fondo de la esfera queden algunos pixels rebeldes por los que no merece la pena preocuparse, ya que ni se van a notar. Primero elegimos la herramienta de selección de regiones contiguas (también conocida como varita mágica) bien del menú de herramientas mediante el ratón, bien a través del menú Herramientas --> herramientas de selección --> selección difusa (Z), bien pulsando directamente la letra Z de nuestro teclado. En las opciones de herramienta elegimos un umbral de aproximadamente 15 (para seleccionar los distintos tonos de azul), y pulsamos en el fondo azul de nuestra esfera. Después vamos al menú Seleccionar --> Invertir (o pulsamos Ctrl+I), de manera que lo que no estaba seleccionado (la esfera) pase a formar parte de la selección, y lo que sí estaba seleccionado (el fondo) se quede fuera. Cortamos la esfera a través del menú Editar --> Cortar (o pulsando las teclas Ctrl+X), seleccionamos la imagen en la que habíamos dibujado un degradado, y pulsamos Ctrl+V (o Editar --> Pegar).

Aunque hayamos pegado la esfera en la imagen, aún no la hemos anclado, es decir, no la hemos asociado a ninguna capa en concreto (para abrir el Diálogo de capas pulsa Ctrl+L, o accede al menú Diálogos --> Capas). Nos interesa que la esfera se encuentre en una capa independiente para poderla mover y manipular con comodidad, así que justo después de haber pegado la esfera, antes de hacer nada más, accederemos al menú Capa --> Capa nueva.

Éste era el modo automático, pero existe otro modo de dibujar una esfera similar. Para ello crearemos un nuevo archivo a través de Archivo --> Nuevo (o Ctrl+N), le daremos un ancho de (por ejemplo) 200x200 pixels, y desplegando las Opciones avanzadas, elegiremos Rellenar con --> Transparencia. Escogeremos la herramienta Seleccionar regiones elípticas de nuestra paleta de herramientas (o a través del menú Herramientas), y sobre el fondo transparente trazaremos una selección circular del tamaño que queramos que sea nuestra esfera. Si queremos asegurarnos de que la selección será perfectamente circular, en las opciones de herramienta elegiremos una proporción fija, fijando la misma cifra para el alto y para el ancho. Restauraremos los colores de frente y fondo a negro y blanco, después seleccionaremos la herramienta de Degradados (la misma que hemos usado más arriba), y en las Opciones de herramienta seleccionaremos Forma --> Radial y marcaremos la casilla Invertido. Una vez hechos estos ajustes, dibujaremos en la selección esférica que acabamos de realizar un degradado de la misma manera que lo hicimos antes, pero en esta ocasión moviendo el ratón desde un punto situado en la parte superior derecha del interior de la esfera (sin llegar a ser el borde de la misma) hacia el extremo inferior izquierdo de la misma. Dependiendo de la longitud del desplazamiento a la hora de dibujar el degradado, el efecto de iluminación sobre la esfera será diferente, con lo cual de esta manera tenemos un mayor control sobre el resultado.

Dado que hemos aprendido dos maneras distintas de crear esferas, vamos a practicar un rato dibujando varias de distintos tamaños, y pegando cada una en una capa distinta. Yo he dibujado un total de 10 esferas y las he dispuesto de la siguiente manera:

Esto podría ser suficiente para usarlo como fondo, pero con la excusa de darle un pequeño toque de estilo vamos a aprender a crear nuestros propios patrones para luego usarlos como relleno. Creamos un nuevo archivo a través de Archivo --> Nuevo (o Ctrl+N) al que daremos un tamaño de tan sólo 8x8 pixels, y en Opciones avanzadas nos aseguraremos de que tenga fondo transparente.
La imagen es tan diminuta que apenas se ve, creo que no vamos a poder trabajar así. Abre el menú Ver, y elige Ampliación --> 16:1 (1600%). Ojo, de esta manera estamos viendo la imagen (que de momento está vacía) de mayor tamaño, pero no la hemos modificado, la vemos grande sólo para poder trabajar más cómodamente, pero en realidad sigue siendo de 8x8 pixels. Simplemente, los pixels se ven más grandes. Asegúrate de que el color del primer plano sea el negro, y elige la herramienta Pintar píxeles de bordes duros (también conocida como lápiz) seleccionándola de la paleta de herramientas, accediendo al menú Herramientas, o simplemente pulsando la tecla N. Necesitamos que esta herramienta dibuje trazos finísimos, trazos de solamente 1 pixel de grosor. Para eso accedemos a Diálogos --> Brochas (o pulsamos Mayúscula+Ctrl+B), y elegimos la brocha más pequeña de todas, la que tiene unas dimesiones de 1x1 pixels.

Y con esta brocha trazamos una cruz de 1 pixel de grosor que atraviese de extremo a extremo nuestra imagen de 8x8 pixels. No te preocupes por que la cruz quede centrada, para nuestro propósito es totalmente irrelevante.

Y ahora viene lo realmente interesante. Pulsa Archivo --> Guardar, en el diálogo para guardar la imagen despliega el menú Seleccione el tipo de archivo (por extensión), y de la lista elige Patrón Gimp (pat). Ahora despliega el menú Buscar otras carpetas, y localiza el directorio en el que se guardan tus patrones personalizados. En mi caso, como mi sistema operativo es GNU/Linux, mi versión del Gimp es la 2.2, y mi nombre de usuario es dandebian, este directorio se encuentra en /home/dandebian/.gimp-2.2/patterns. Ojo, el directorio .gimp-2.2 es un directorio oculto (en GNU/Linux los archivos y directorios cuyo nombre empieza por un punto son archivos y directorios ocultos), así que para poder verlo tendrás que pinchar con el botón derecho del ratón, y elegir Mostrar archivos ocultos. Una vez localizado el directorio guarda ahí la cruz que acabamos de dibujar con el nombre (por ejemplo) cruz.pat.
Ahora volvemos a nuestra imagen con fondo azul degradado y varias esferas de distintos tamaños. Accedemos al diálogo de capas pulsando Ctrl+L, seleccionamos con el ratón la capa situada arriba del todo (una de las esferas), y pulsamos el botón Capa nueva de la parte inferior izquierda del diálogo. Nos aseguramos de que tenga fondo transparente, y pulsamos Aceptar. Ahora seleccionamos la herramienta Rellenar con un color o patrón seleccionandola de la paleta de herramientas, a través del menú Herramientas, o pulsando Mayúscula+B. En las Opciones de herramienta seleccionamos como tipo de rellno relleno con patrón, y en el menú desplegable de los patrones disponibles elegimos el patrón Cruz que acabamos de crear. Una vez hecho esto, pinchamos en nuestra imagen, y veremos lo siguiente:

No nos interesa que la rejilla sea tan marcada, nos interesa que se vea atenuada, así que en el menú de capas reduciremos la Opacidad de la capa que contiene la rejilla, por ejemplo, al 20%.

Comprueba la diferencia:

Una vez que tenemos el fondo listo, vamos a proceder a dibujar el texto. Para ello nada más apropiado que la herramienta Añadir texto a la imagen que podremos seleccionar, como siempre, en la paleta de herramientas, a través del menú Herramientas, o simplemente pulsando la letra T. Una vez seleccionada la herramienta, pinchamos sobre nuestra imagen, y se nos abrirá el siguiente cuadro de diálogo para que introduzcamos el texto:

Aparte de introducir ahí el texto, tendremos que establecer las características del mismo en las Opciones de herramienta:

De manera que obtenemos lo siguiente:

No buscamos un texto tan plano, pero éste es un buen primer paso. Ahora accederemos al Diálogo de capas pulsando Ctrl+L, y seleccionando la capa de texto que acabamos de crear, crearemos dos copias más de dicha capa pulsando el botón Duplicar capa. De esta manera podremos trabajar en cada una de ellas independientemente. Además para poder trabajar con cada una sin que el resto sea una molestia, en el Diálogo de capas podremos hacer temporalmente invisibles dos capas de texto mientras trabajamos con la tercera simplemente pulsando en la imagen de un ojo que aparece a la izquierda de la miniatura de la capa. Para hacer nuevamente visible la capa bastará con volver a pulsar donde debería estar el ojo.

La capa del medio vamos a dejarla tal y como está, y vamos a empezar a hacer cambios en la capa de texto de abajo del todo. Empezamos por seleccionar dicha capa y hacer invisibles las otras dos capas de texto, y a continuación vamos a Filtros --> Desenfoque [Blur] --> Desenfoque Gaussiano [Blur], y elegimos un radio de desenfoque de (por ejemplo) 10 pixels. Esto desenfocará el texto de esta capa, de manera que hará de sombra de las capas superiores.

Hemos terminado con esta capa, así que de momento la haremos invisible, y pasaremos a la capa de texto de arriba del todo, ya que habíamos dicho que la del medio no la íbamos a tocar. Y empezaremos por darle colorido. Para ello utilizaremos la herramienta Rellenar con un color o patrón que encontraremos en el menú Herramientas bajo el nombre de Relleno, y podremos seleccionar desde el teclado pulsando Ctrl+B. En las Opciones de herramienta marcaremos Relleno con patrón, del menú desplegable elegiremos el patrón Maple Leaves (en inglés hojas de arce; este patrón verde no queda especialmente bien en el banner que estamos creando, pero luego lo retocaremos para que tenga un mejor aspecto), y nos aseguraremos de que la casilla Rellenar áreas transparentes se encuentre desmarcada.

Y ahora rellenaremos todas las letras de la capa superior con este patrón pinchando en ellas una a una.

Habíamos dicho que no nos interesaba el color verde del patrón utilizado, así que vamos a proceder a cambiar el color del mismo. Existen distintos modos de modificar los colores de una imagen, y nosotros en este caso nos decataremos por Herramientas --> Herramientas de color --> Tono/Saturación, donde estableceremos los valores tono -40, Luminosidad 100, Saturación 100.

Lo que nos dará como resultado el siguiente colorido:

Para el siguiente paso tomamos la herramienta Mover capas y selecciones que encontraremos en el menú Herramientas con el nombre Mover (o pulsando la letra M de nuestro teclado), y pinchando en el texto que acabamos de colorear, arrastraremos la capa dos o tres pixels hacia arriba y hacia la derecha. Si ahora hacemos visibles todas las capas y guardamos la imagen con formato PNG (Archivo --> Guardar como, y cuando se te pida que exportes la imagen pulsa Exportar), obtendremos el siguiente resultado, que es el que hemos mostrado al comienzo del tutorial:

Bueno, os voy a ser sincero... a decir verdad, esa imagen final tiene una capa adicional que no he explicado. Pero como esto del diseño tiene más de experimentación que de imitación, voy a dejar que lo averigüéis por vuestra cuenta. Y por si os atascáis, os dejo el archivo XCF para que podáis seguirlo paso a paso y hagáis todas las modificaciones que os apetezca.