Crear un banner sencillo

ste es el banner que vamos a crear:

Empezaremos por crear un nuevo documento en blanco con las medidas de 468 x 60 pxeles, un tamao considerado estndar para los banners en Internet. Vamos al men Archivo - Nuevo. En el apartado Tamaos Preestablecidos selecciona Banner 468 x 60, y pulsamos Aceptar. Haciendo doble clic en el selector del color de primer plano accederemos a la paleta de colores para por un tono azul cuyo valor hexadecimal puede ser #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. Podemos seleccionarla mediante el ratn desde la propia paleta de herramientas, a travs del men Herramientas Herramientas de pintura - Mezcla. En las Opciones de herramienta elegiremos forma lineal, y un degradado de Frente a fondo.

Y en nuestra imagen de 468x60 pxeles que hasta ahora permaneca en blanco trazamos una lnea de izquierda a derecha. Pinchamos en la parte izquierda de la imagen con el botn izquierdo del ratn, arrastramos el ratn hacia la derecha sobrepasando los lmites de la propia imagen, y soltamos el botn. Buscamos un resultado similar a ste: 1

El siguiente paso ser dibujar las esferas de distintos tamaos que se vern 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 fcilmente.

Elige el tamao 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 dimetro 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 ms probable es que al eliminar el fondo de la esfera queden algunos pixels rebeldes por los 2

que no merece la pena preocuparse, ya que ni se van a notar. Primero elegimos la herramienta de seleccin de regiones contiguas (tambin conocida como varita mgica) bien del men de herramientas mediante el ratn, bien a travs del men Herramientas --> herramientas de seleccin --> seleccin 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. Despus 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 seleccin, y lo que s estaba seleccionado (el fondo) se quede fuera. Cortamos la esfera a travs del men Editar --> Cortar (o pulsando las teclas Ctrl+X), seleccionamos la imagen en la que habamos dibujado un degradado, y pulsamos Ctrl+V (o Editar --> Pegar). Aunque hayamos pegado la esfera en la imagen, an no la hemos anclado, es decir, no la hemos asociado a ninguna capa en concreto (para abrir el Dilogo de capas pulsa Ctrl+L, o accede al men Dilogos --> Capas). Nos interesa que la esfera se encuentre en una capa independiente para poderla mover y manipular con comodidad, as que justo despus de haber pegado la esfera, antes de hacer nada ms, accederemos al men Capa --> Capa nueva.

ste era el modo automtico, pero existe otro modo de dibujar una esfera similar. Para ello crearemos un nuevo archivo a travs 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 elpticas de nuestra paleta de herramientas (o a travs del men Herramientas), y sobre el fondo transparente trazaremos una seleccin circular del tamao que queramos que sea nuestra esfera. Si queremos asegurarnos de que la seleccin ser perfectamente circular, en las opciones de herramienta elegiremos una proporcin fija, fijando la misma cifra para el alto y para el ancho. Restauraremos los colores de frente y fondo a negro y blanco, despus seleccionaremos la herramienta de Degradados (la misma que hemos usado ms arriba), y en las Opciones de herramienta seleccionaremos Forma --> Radial y marcaremos la casilla Invertido. Una vez hechos estos ajustes, dibujaremos en la seleccin esfrica que acabamos de realizar un degradado de la misma manera que lo hicimos antes, pero en esta ocasin moviendo el ratn 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 iluminacin 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 tamaos, 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 podra ser suficiente para usarlo como fondo, pero con la excusa de darle un pequeo toque de estilo vamos a aprender a crear nuestros propios patrones para luego usarlos como relleno. Creamos un nuevo archivo a travs de Archivo --> Nuevo (o Ctrl+N) al que daremos un tamao de tan slo 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 Ampliacin --> 16:1 (1600%). Ojo, de esta manera estamos viendo la imagen (que de momento est vaca) de mayor tamao, pero no la hemos modificado, la vemos grande slo para poder trabajar ms cmodamente, pero en realidad sigue siendo de 8x8 pixels. Simplemente, los pixels se ven ms grandes. Asegrate de que el color del primer plano sea el negro, y elige la herramienta Pintar pxeles de bordes duros (tambin conocida como lpiz) seleccionndola de la paleta de herramientas, accediendo al men Herramientas, o simplemente pulsando la tecla N. Necesitamos que esta herramienta dibuje trazos finsimos, trazos de solamente 1 pixel de grosor. Para eso accedemos a Dilogos --> Brochas (o pulsamos Mayscula+Ctrl+B), y elegimos la brocha ms pequea 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 propsito es totalmente irrelevante.

Y ahora viene lo realmente interesante. Pulsa Archivo --> Guardar, en el dilogo para guardar la imagen despliega el men Seleccione el tipo de archivo (por extensin) , y de la lista elige Patrn 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 versin del Gimp es la 2.2, y mi nombre de usuario es dandebian, este directorio se encuentra en /home/dandebian/.gimp2.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 tendrs que pinchar con el botn derecho del ratn, 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 tamaos. Accedemos al dilogo de capas pulsando Ctrl+L, seleccionamos con el ratn la capa situada arriba del todo (una de las esferas), y pulsamos el botn Capa nueva de la parte inferior izquierda del dilogo. Nos aseguramos de que tenga fondo transparente, y pulsamos Aceptar. Ahora seleccionamos la herramienta Rellenar con un color o patrn seleccionandola de la paleta de herramientas, a travs del men Herramientas, o pulsando Mayscula+B. En las Opciones de herramienta seleccionamos como tipo de rellno relleno con patrn, y en el men desplegable de los patrones disponibles elegimos el patrn Cruz que acabamos de crear. Una vez hecho esto, pinchamos en nuestra imagen, y veremos lo siguiente: 5

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 ms apropiado que la herramienta Aadir texto a la imagen que podremos seleccionar, como siempre, en la paleta de herramientas, a travs 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 dilogo para que introduzcamos el texto:

Aparte de introducir ah el texto, tendremos que establecer las caractersticas del mismo en las Opciones de herramienta: 6

De manera que obtenemos lo siguiente:

No buscamos un texto tan plano, pero ste es un buen primer paso. Ahora accederemos al Dilogo de capas pulsando Ctrl+L, y seleccionando la capa de texto que acabamos de crear, crearemos dos copias ms de dicha capa pulsando el botn Duplicar capa. De esta manera podremos trabajar en cada una de ellas independientemente. Adems para poder trabajar con cada una sin que el resto sea una molestia, en el Dilogo 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 debera 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 continuacin 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. 7

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 habamos 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 patrn 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 patrn, del men desplegable elegiremos el patrn Maple Leaves (en ingls hojas de arce; este patrn 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 patrn pinchando en ellas una a una.

Habamos dicho que no nos interesaba el color verde del patrn 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/Saturacin , donde estableceremos los valores tono -40, Luminosidad 100, Saturacin 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 diseo tiene ms de experimentacin que de imitacin, voy a dejar que lo averigis por vuestra cuenta. Y por si os atascis, os dejo el archivo XCF para que podis seguirlo paso a paso y hagis todas las modificaciones que os apetezca.