É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.
Pero no sólo es esta la única seña de identidad que les definen.
También poseen otras cualidades que les han convertido en uno de los
campos de trabajo más específicos e importantes de empresas como Visual Sign, que está dedicada tanto a la rotulación como al campo de la comunicación visual.