Unidad 9. Imágenes (VII)

9.8. Inkscape. Degradados

Como ves, el relleno de la pestaña o forma un degradado. Un degradado o gradiente es una fusión gradual entre dos o más colores.

Para editar el relleno de un elemento, hacemos doble clic sobre el color de relleno en .

En la ventana Borde y relleno, en la ventana Relleno, selecciona Gradiente lineal.

Al hacerlo, el relleno del elemento ha cambiado, mostrando un degradado de negro a transparente. Además, muestra un control que nos permite regular la dirección de gradiente.

En este caso, lo hemos regulado para que quede en vertical (el de la derecha de las imágenes anteriores).

Para cambiar los colores, pulsamos en Editar, para acceder a la ventana Editor de gradiente.

Cada color del degradado es una parada. Al inicio, solo hay dos paradas, una al principio y otra al final. Podemos añadir paradas en el medio, pulsando en Añadir parada. La nueva parada tomará el color que tiene el degradado en el punto en el que se crea. Las distintas paradas se eligen en el desplegable que hay debajo de la vista previa del degradado.

Vamos a darle colores a las distintas paradas: a la primera, le hemos dado el color 5f4232ff (recuerda, que los dos últimos valores, ff, se refieren a la opacidad). A la segunda, le hemos dado el color bf9a81ff. Los colores, se pueden introducir directamente en la casilla RGBA.

Para desplazar un poco la parte más oscura hacia arriba, añadimos una parada. Observa que el control Desvío está a la mitad. Desplazándolo, podemos acercar la parda a uno u otro extremo, así que lo acercamos un poco a la izquierda (a la parte oscura).

Con esto, hemos conseguido el siguiente relleno:

Lo mismo hemos hecho con el borde, pero de un color claro (f5e4ccff) a uno oscuro (bf9a81ff), también en vertical, y le hemos aumentado un poco el Ancho de borde desde la pestaña Estilo del trazo. Al cambiar el grosor, asegúrate que el ancho no excede los 90 px. Si es así, cámbialo.

Al final, la pestaña nos ha quedado así. La ponemos sobre el mismo color de fondo que utilizamos en la página, para que se vea mejor:

Una vez que tenemos la pestaña, la hemos duplicado dos veces (Ctrl + D) para crear las otras dos que nos hacen falta. A ambas copias, le editaremos el relleno o borde. Antes de editar uno de los degradados debemos duplicarlo pulsando en Duplicar en la ventana relleno y borde.

Si no, al editarlo, verás que cambian todos los elementos que tienen asignado ese degradado.

Seleccionándola, y desde el menú Archivo → Exportar, con el botón Selección pulsado, la hemos guardado en la carpeta imagenes del sitio con el nombre pest_normal.png.