rutas bezier con gimp

Curvas Bézier 🎨


Las curvas Bézier son el pilar de las aplicaciones de imagen vectorial y usadas en casi todas las aplicaciones de diseño, edición de imagen o vídeo, para crear formas y máscaras de cualquier tipo.

No voy a entrar en detalles técnicos, sólo voy a explicar cómo funcionan. Su funcionamiento es común a todas las aplicaciones, lo que cambia es el modo de edición en cada aplicación. Por modo de edición me refiero a la manera de trabajar con estos puntos o curvas Bézier. Cada aplicación tiene su manera de trabajar con ellos.

Para explicar cómo funcionan voy a usar Gimp, pero me centraré únicamente en que se comprenda cómo funcionan los trazos Bézier. Puesto que si sabemos usarlos en Gimp, sabremos usarlos en cualquier aplicación (sólo deberemos aprender de qué manera se ha dispuesto para trabajar con estas curvas).

No voy a explicar la herramienta de curvas en Gimp, porque ya lo hice en el tutorial en el que hable sobre como modificar las rutas para personalizar textos, por lo que si no sabemos desenvolvernos con esta herramienta en Gimp, no es mala idea mirar el apartado en el que explico ésta. O el propio manual de ayuda de Gimp. A continuación pongo los links a dicho tutorial para aprender el manejo de la herramienta y ampliar los conocimientos.

5.2. Rutas (Apartado sobre la herramienta)
5. Rutas (Apartado sobre el uso de las rutas)
5.1. Creación de rutas
5.2. Propiedades de las rutas
5.3. Rutas y selecciones
5.4. Transformación de las rutas
5.5. Trazar una ruta
5.6. Rutas y texto
5.7. Rutas y archivos SVG

Para ver cómo funciona el diseño a base de curvas Bézier lo que voy a hacer es calcar unas letras.

Trazos rectos

No tienen ningún misterio. Por ejemplo voy a calcar una «A» mayúscula. Lo único que tengo que hacer es poner un punto en cada esquina.

01.png

Muy sencillo y ya tenemos nuestra «A» trazada.

02.png

Trazos curvos

Pero ¿y si nos dicen que tracemos una «O»?. Pues muy sencillo, para ello usaremos 4 puntos para el trazo exterior y otros 4 para el interior. En principio tienen que ser suficientes. Dispuestos del siguiente modo. Me he apoyado en las guías para mantener la simetría y facilitar el trazado.

03.png

Como podemos apreciar, porque sabemos que esto va a ser una «O» y tenemos la referencia de fondo, pero si solo viéramos los trazos de la unión de los puntos Bézier, difícilmente sabríamos de qué se trata, más allá de una especie de romboide.

04.png

Pero gracias a la posibilidad de curvar los trazos podremos calcar la letra. Los trazos se curvan desde unos tiradores que salen desde los puntos, se suelen llamar tiradores, tangentes de curvatura o modificadores. En Gimp, para sacar estos tiradores de curvatura, lo hacemos manteniendo pulsada la tecla Control (Ctrl) y tirando con el ratón desde el punto. Si sale la opuesta, la dejamos un poco fuera y sacamos la otra.

gif01.gif

Como vemos, si hacemos una buena rejilla, las fuentes son fáciles de calcar. Incluso Gimp, cuando de letras se trata, lo hace de manera automática (como vimos en otro tutorial) pero ahora estamos aprendiendo cómo funcionan las curvas Bézier.

05.png

Combinación de trazos rectos con curvos

Para este ejemplo trazaremos la letra «P». Para facilitar el trabajo van muy bien las guías como referencia. No sólo en las fuentes, sino en cualquier trazado que hagamos. En la siguiente imagen vemos cómo he colocado las guías para facilitar el trazado.

06.png

Ahora inserto los puntos necesarios; en curvas Bézier, menos es más: cuanto con menos puntos realicemos un trazado, más limpio será éste. Vemos en la siguiente imagen la disposición de los puntos.

07.pngA continuación el orden de inserción. Pero este es indiferente. Lo que realmente quiero que se vea es que parece que sacando los tiradores a tan solo dos puntos (el 3 y el 10) voy a conseguir calcar la letra. 08.png

Y efectivamente así ha sido.

09

Si se observa esta última letra, se ve que hay un punto en los inicios de las curvas, los 2, 4 y en la interior los 9 y 11. Esto facilita mucho el trazado. Veamos si puedo obtener un buen resultado eliminando estos puntos.

gif02.gif

Vemos que hay que jugar un poquito más, pero también se puede conseguir un resultado óptimo.

Calcar fuentes de ordenador es muy sencillo, porque están construidas con curvas Bézier. Las hay muy elaboradas (que llevaría mucho más trabajo hacer el calco a base de curvas) pero, para el tema de las fuentes, hay aplicaciones dedicadas con posibilidades y herramientas que Gimp, por ejemplo, no ofrece.

16.png

Por ejemplo, una tipografía como la anterior, en Gimp llevaría mucho trabajo realizar sus trazos con las herramientas que nos ofrece, este tipo de trazados ya son más del campo de aplicaciones vectoriales tipo Inkscape. Simplemente porque en aplicaciones vectoriales que se precien, hay controladores para definir el diferente grosor del trazo a lo largo de la curva. Y esto es precisamente lo que llevaría un poco más de trabajo realizar en Gimp. En Gimp los trazos y rellenos son uniformes.

Recortar con curvas Bézier

Es uno de los múltiples usos de este tipo de curvas: las máscaras de recorte. El uso para máscara de recorte sí que entra dentro del campo de trabajo de Gimp.

Veamos un ejemplo con un primer plano corto de perfil.

Nariz.jpg

Para facilitarme el trabajo, primero voy a realizar un entramado a base de guías. Esto de las guías es opcional, y es solo una referencia, con la práctica en muchas ocasiones ni se usan.

10.png

Ahora inserto los puntos que creo necesarios para este recorte. Y elimino las guías, estas son muy útiles en figuras simétricas, pero en este caso el trazado es libre, simplemente han sido una referencia para insertar los puntos.

11.png

Como se observa:

  • los límites
  • cambios de dirección
  • esquinas
  • centros de curvaturas

éstos son los sitios ideales para insertar los puntos. En este caso, al ser una máscara para recortar el fondo, la cierro abarcando éste.

Y a continuación voy sacando las tangentes de curvatura para ajustar el recorte. Detalle de los dos primeros puntos de arriba:

12.png

En el siguiente gif vemos cómo hay que ir jugando con los puntos para seguir el contorno a recortar. Al principio requiere un poco de paciencia. Pero la técnica es ir jugando con los dos puntos del tramo a seguir, hasta conseguir el perfilado correcto.

gif03.gif

Al ampliar, si vemos que algún punto no está en el sitio adecuado, por su puesto que podemos variar su posición. Todo vale para conseguir el correcto perfilado. Podemos mover, añadir o quitar puntos si se precisa. Todo esto en Gimp es posible, y en el citado anterior tutorial sobre esta herramienta detallo cómo funciona.

Y vemos que con unos pocos puntos conseguimos un buen perfilado de este perfil.

13.png

En esto de los puntos o curvas Bézier, sí que podemos aplicar lo de que «la práctica hace al maestro». Esto que he explicado es una base para entender cómo funcionan y, sobre todo, para ver que para hacer un buen recorte a veces no es necesario usar muchos puntos, sino los justos. Como decía un maestro de diseño que tuve: «si con tres ya lo sacas, no uses cuatro».

Tras seleccionar a partir de la ruta (que es como llama Gimp a las curvas Bézier en español) podemos borrar el fondo de la imagen para poner ahí otro fondo.

15.png

Y como podemos ver que las curvas son una muy buena herramienta para hacer recortes.

14

Conclusión

El uso de las curvas Bézier es muy extenso y variado. Espero que a las personas, para las cuales era un poco un misterio esto de las curvas Bézier, hayan comprendido como funcionan.

Recalcar que su funcionamiento es igual en todo tipo de aplicaciones, pero no su modo de trabajar con ellas. En este sentido, cada aplicación tiene su manera personalizada de insertar y editar estos puntos.

Y tú…

  • ¿Sabías utilizar correctamente las curvas de Bézier?
  • ¿Qué usos sueles darles?
  • ¿Te ha gustado el artículo?
  • ¿Tienes algún truco o recomendación para los más novatos?

 

4 comentarios en “Curvas Bézier 🎨

  1. ¡Aplauso generoso! ¡Vaya forma de explicar las curvas de Bezier!. Esta bien explicado y bien ilustrado, se nota que le dedicaron tiempo a este artículo. Excelente trabajo y voy a repasarlo, porque para ser sincero, no uso mucho esta herramienta.

    Le gusta a 1 persona

    1. Sí que ha hecho un gran trabajo Rafa.

      Personalmente (aunque sigue faltándome algo más de práctica) me ha resultado muy útil e ilustrativo la forma de explicarlo.

      No me cansaré de darle las gracias a Rafa por mucho que él le quite importancia a lo que hace. El tiempo (y cariño en el trabajo) que nos regala, no tiene precio 👍

      Le gusta a 1 persona

      1. Jolín, me van a saltar las lágrimas de la emoción con tantos elogios. Solo pongo mi granito de arena sobre lo que es mi profesión. Si sé algo de informática, es gracias a blogs como el tuyo.
        Saludos y un fuerte abrazo.

        Me gusta

Deja una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.