En
este trabajo, que está basado en el tutorial "Crystal
Ball Effect" de Craig
Marshall , vamos a tratar de explicar como hemos utilizado
el programa GIMP, de manipulación de imágenes,
para construir botones redondos u ovalados. Damos por hecho
que ya se han tenido los primeros contactos con el programa
GIMP.
1. Creamos una nueva imagen de, por ejemplo, 400x400 pixeles,
seleccionando "RGB" para el tipo de imagen y "Transparente"
para el tipo de relleno.
2. Dibujamos un círculo usando la herramienta selección
elíptica con la opción "relación
de aspecto fija (la anchura y altura de igual valor, sin importar
cual). Para facilitar la construcción del círculo
podemos hacer uso de las guías, colocando una vertical
a 50 pixeles del origen izquierdo y dos horizontales, a 50
y 350 pixeles del origen superior, respectivamente (las guías
pueden mostrarse, si no se vieran, pulsando Mayús+Ctrl+T
y se arrastran colocando el cursor sobre ellas y moviendo
el ratón en la dirección deseada). Con la herramienta
elipse seleccionada, colocamos el cursor en el punto de cruce
de la guía vertical con la guía horizontal superior
y lo arrastramos sin soltar el botón izquierdo del
ratón, siguiendo la guía vertical hasta llegar
al punto de cruce con la guía horizontal inferior.
Fig 1.
3. Manteniendo la selección hecha, creamos una nueva
capa transparente y la denominamos "anillo". Seleccionamos
la herramienta degradado (gradiente) con las opciones de frente
a fondo y forma radial. Ponemos dos variantes de un mismo
color (por ejemplo (921818) para el frente y (f28787) para
el fondo) y con la herramienta degradado seleccionada pasamos
el cursor desde el centro del cuadrante izquierdo superior
del círculo activado hasta su extremo inferior, pasando
por el centro. Seguimos manteniendo la selección circular.
Fig 2.
4. Con el menú Seleccionar > Encoger, encogemos
en 10 pixeles la selección y seguidamente pulsamos
Ctrl.+k para borrar la selección. Obtenemos así
una corona circular. Fig 3.
5. Con el menú Seleccionar > Crecer, aumentamos
en 3 pixeles la selección. Creamos una nueva capa transparente
y la denominamos "círculo". Seleccionamos
la herramienta degradado (gradiente) con las opciones de frente
a fondo y forma radial. Ponemos dos variantes de un mismo
color (por ejemplo (0000ff) para el frente y (03f8ef) para
el fondo) y con la herramienta degradado seleccionada pasamos
el cursor desde el centro de la imagen hasta su extremo inferior.
Fig 4.
6. Creamos una nueva capa transparente, la denominamos "sombra"
y la colocamos entre las capas anillo y círculo. Ponemos
una guía horizontal y otra vertical que se crucen en
el centro del círculo. Elegimos la herramienta "elipse"
seleccionando difuminar bordes con un radio de valor de 30
y poniendo selección de aspecto fija. Mantenemos pulsada
la tecla Ctrl.
Colocamos el cursor sobre la guía horizontal a unos
20 pixeles a la derecha del centro de la figura y, con el
botón derecho pulsado, lo arrastramos hasta llegar
a unos 20 pixeles del borde izquierdo del círculo,
momento en el que soltamos la tecla Ctrl y el botón
del ratón. Nos deberá haber quedado una selección
semejante a la figura de la Luna en fase creciente. Fig 5.
7. Con la capa "sombra" activada, seleccionamos
la herramienta relleno con color de frente puesta a negro
(000000) y llenamos la selección. A continuación,
ponemos la opacidad de la capa "sombra" a 50.
8. Seleccionamos la capa "círculo" y ejecutamos
el menú Capa > Transparencia > Alfa a selección.
La selección vuelve a tener de nuevo forma circular.
Seleccionamos otra vez la capa "sombra".
9. Elegimos de nuevo la herramienta elipse, como en el paso
6, pero esta vez tomando radio de 100 para los bordes difuminados.
Colocamos el cursor sobre la guía vertical en el punto
250 de la regla vertical y manteniendo pulsada la tecla Ctrl
lo arrastramos hasta aproximadamente el punto 100 y soltamos.
Rellenamos la selección con color negro y volvemos
a repetir el paso 8. Fig 6
10. Creamos una capa transparente que denominaremos"resalte"
y la llevamos a la parte superior de la pila de capas. Colocamos
dos guías verticales en las posiciones 100 y 300 y
otras dos horizontales a 10 pixeles del centro y del borde
superior interno del anillo, respectivamente. Fig 7.
Con la herramienta selección elíptica en modo
selección libre trazamos una elipse llevando el cursor
desde el extremo superior izquierdo hasta el extremo inferior
derecho. Ponemos el color de frente a blanco, seleccionamos
la herramienta degradado (gradiente) con las opciones de frente
a transparente y forma radial y cubrimos la elipse pasando
el cursor desde su punto superior a su punto inferior. Cambiamos
la transparencia de esta capa al 80%. Quitamos las guías.Fig
8.
11. Seleccionamos la capa "anillo" y añadimos
bisel sin mantener la capa de relieve, trabajando sin copia
y poniendo grosor 1. (podemos añadir bisel ejecutando
el menú Script-Fu > Decor > Añadir bisel)
12. Seleccionamos la capa "círculo" y añadimos
bisel manteniendo la capa de relieve, trabajando sin copia
y poniendo grosor a 30.
13. Seleccionamos la capa "anillo" y añadimos
sombra base poniendo desplazamiento x = 4, desplazamiento
y = 4, radio de desenfoque = 10 y dejando el resto de los
parámetros por defecto. (Podemos añadir sombra
base ejecutando el menú Scrip-Fu > Shadow > Sombra
base). Renombramos la capa resultante a "sombra anillo".
Fig 9.
14. Para obtener un botón ovalado, ejecutamos el menú
imagen > Escalar Imagen dejando la misma anchura y poniendo
la altura a la mitad. Para conseguir esto deberemos pulsar,
antes de modificar las dimensiones, el icono con la imagen
de una cadena situado a la derecha de los campos que marcan
las escalas de x e y.
15. Finalmente, para poder presentar la imagen obtenida en
cualquier otra aplicación distinta de GIMP, deberemos
guardar una copia del fichero con una extensión compatible.
Suele ser habitual usar las extensiones gif y jpg. Si tomamos
la segunda de ellas, deberemos tener en cuenta que el formato
jpg no admite fondos transparentes por lo que deberemos considerar
esta condición para adecuar el botón diseñado
al entorno en el que lo vayamos a colocar.
 |
 |
|
|
fig 1
fig 2
fig 3
fig 4
fig 5
fig 6
fig 7
fig 8
fig 9
|
|
