¿Cómo aplicar un degradado transparente a lo largo de cada segmento de una curva?

Digamos que tengo una curva blanca en fondo negro:

ingrese la descripción de la imagen aquí

La curva tiene algunos puntos que la cortan en segmentos separados. Desde el punto A de la línea cuya opacidad es del 100 %, la transparencia aumenta gradualmente y luego disminuye hasta que cuando llega al punto B, la opacidad vuelve a ser del 100 %. El punto medio del segmento, por lo tanto, será el más desvanecido. Cuanto más largo es el segmento, más atenuador es el punto medio. Esto se repetirá para otros segmentos.

La idea es que cuando un péndulo se balancea en la oscuridad, en los extremos es visualmente más claro, y su punto de equilibrio es el más desvanecido, y la trayectoria va gradualmente de clara a desvanecida. Uso Inkscape, pero las respuestas para otras herramientas son bienvenidas, porque supongo que la terminología es la misma.

@Joonas proporciona un ejemplo, excepto que el control deslizante apunta a los puntos de opacidad del 100%, no a 0. Y no sé cómo agregar más puntos de degradado como ese.

¿Cómo puedo hacer este efecto en una curva?


Pregunta también en Reddit .

No estoy seguro de entenderlo. ¿Quieres un degradado que siga el camino? Eso es lo que pienso después de leer el primer párrafo después de la imagen. Leer el segundo párrafo solo me confunde. ¿Quieres fingir un efecto fotográfico de larga exposición en Inkscape?
Sí, quiero un degradado que siga el camino, pero los puntos que marque siempre deben ser los más blancos. La larga exposición creará este efecto, ¿es así?
¿Quieres decir que siempre deben coincidir con lo que sea que esté detrás de ellos o algo así? Si haces los puntos blancos, nada en el fondo puede ser más blanco que eso...
sí, deberían coincidir con lo que hay detrás de ellos
No creo que eso sea posible, incluso con guiones. Aunque podría estar equivocado... Realmente nunca he usado Inkscape. — Sin embargo, no entiendo muy bien por qué... ¿Quieres mover la raya y ver qué posición se ve mejor o usar la raya encima de muchas otras imágenes o fondos? ¿O puedes hacer animaciones en Inkscape? — Además, hacer el efecto de larga exposición en una aplicación vectorial probablemente no sea la mejor idea. Gimp sería mejor para la manipulación de fotos (o Photoshop). — Hablando en términos generales, tomar una foto de larga exposición te daría el mejor efecto.
No existe tal característica en SVG, podría hacer la curva a partir de múltiples segmentos como, por ejemplo, 200 o más y obtener el mismo efecto.
@Joonas ¿Tal vez moviendo la racha para ver qué es lo mejor? Solo quiero tener una imagen estática e Inkscape no puede hacer animaciones. El segundo párrafo es solo para ilustrar mi punto; si es tan confuso lo eliminaré.
@joojaa SVG no puede hacer esto? ¿Pero por qué no? De todos modos, ¿cómo hacer que la curva salga de múltiples segmentos? Y puedo cambiarme a Gimp
La combinación de... el trazo que tienes allí, el deseo de que los puntos del degradado coincidan con el fondo, los enlaces a publicaciones que hablan sobre el efecto de exposición prolongada y el uso de Inkscape es lo que me desconcierta. Es difícil encontrar la conexión entre estas cosas. Tal vez ayudaría si pudieras mostrar una imagen de ejemplo de lo que quieres hacer y nos olvidamos de la aplicación y todo lo demás...
porque la norma no tiene instrucciones para hacerlo. ¿Cómo se hacen los segmentos? Los dibuja uno por uno (o corta la ruta original) ya sea a mano o por guión.
@joojaa Ya veo. Pero, ¿cómo puedo hacer que el degradado se desvanezca en cada segmento?
@Joonas no, no. Intentemoslo de nuevo. La línea tiene transparencia degradada. Desde el punto A cuya opacidad es del 100%, la transparencia aumenta gradualmente y luego disminuye para que cuando llegue al punto B, la opacidad vuelva a ser del 100%. Esto se repetirá para otros segmentos.
Ah, ya veo... Así que quieres crear un degradado que siga un camino. Entonces algo como esto , ¿no? — Busqué en Google muy rápido y parece que no es posible en Inkscape, pero quién sabe. Hice esto en Illustrator. Tiene un simple alternar en la configuración de gradiente: Apply gradient along stroke.
Pues si y no. Puede hacer que cada segmento sea un degradado lineal. O simplemente no haga gradientes si tiene 200 segmentos, pierde significado.
No sé si esto tiene algún valor para ti, pero agregué algo a mi imagen anterior. Dibujé líneas que van desde el control deslizante de degradado desde cada punto de opacidad 0 hasta donde aterrizan en el camino. otra imagen
@Joonas si! Exactamente así. Es solo que quiero que el control deslizante apunte a 100 puntos de opacidad, no a 0. Pero sí lo es. Gracias. ¿Inkscape en general carece de características que Illustrator?
bueno, en general, Inkscape tiene más características. Es solo que está limitado por ser un editor de svg y su interfaz de usuario. Entonces, al final, Illustrator es más relevante en su conjunto de características. En cualquier caso, ambos programas tienen características un poco arbitrarias.

Respuestas (3)

El formato SVG no es compatible con un degradado a lo largo de una ruta, y tampoco Inkscape, pero puede obtener algo similar con un degradado de malla*, utilizando la herramienta Crear y editar mallas.

Por ejemplo, aquí hay una ruta trazada, convertida en contornos usando Ruta > Trazar a ruta , luego se aplicó un degradado de malla con 5 filas y columnas, y luego se editó la malla.

ingrese la descripción de la imagen aquí

*Nota: los degradados de malla de Inkscape no son compatibles actualmente con los navegadores, por lo que no se mostrarán en un SVG visto en un navegador. Sin embargo, eso puede cambiar con el tiempo. Sin embargo, aún sería posible exportar el trabajo terminado como una imagen rasterizada, como PNG. Además, los degradados de malla son compatibles con los archivos PDF.

Editar:

Después de ver lo que hizo en Illustrator, hay otra manera de lograrlo en Inkscape, de modo que se represente correctamente en un SVG en un navegador web.

El efecto es sencillo. Coloque algunos círculos rellenos de degradado radial a lo largo de una ruta y agrúpelos. Agrupa el fondo negro y el trazo blanco para hacer una máscara. Lleve la máscara a la parte superior de la pila y aplíquela a los objetos degradados agrupados. Colócalo sobre otro fondo negro.

ingrese la descripción de la imagen aquí

¿Por qué SVG no admite gradiente? Pensé que el formato es para algo computable?
@Ooker SVG admite degradados, pero solo degradados como relleno, no como un degradado a lo largo de una ruta/trazo. Nunca se ha implementado. Y la función de degradado de malla aún no ha llegado a los navegadores web, pero eso podría cambiar en el futuro.
pero ¿por qué Illustrator puede hacer esto?
@Ooker porque Illustrator apunta a PDF y PDF puede hacer esto. Una vez que SVG admita bien las mallas de degradado, puede solicitar esta función en Inkscape. Como dije, si piensa en alguna característica que no sea su punto de vista, todo es aleatorio, a menos que comprenda cuál es el objetivo de representación subyacente al que se dirigen las aplicaciones.
@joojaa Ya veo. Pero, ¿cuál es la razón específica por la que SVG no puede admitir el gradiente de ruta?
@Ooker: debe preguntar a quienes están involucrados en el desarrollo del formato SVG por qué nunca implementaron un degradado a lo largo de una ruta en los estándares SVG. Realmente no podemos responder a esto. Sospecho que no hay ninguna razón realmente, simplemente no se ha hecho.
¿Conoce algún recurso para que un novato como yo obtenga rápidamente una visión general de los formatos, estándares, objetivos, etc.?
@Ooker: por cierto, Illustrator puede hacer degradados a lo largo de una ruta, sin embargo, no funcionará cuando lo envíe como un SVG de Illustrator, simplemente rasterizará el degradado, lo que no es realmente una solución al problema.
Los estándares SVG de @Ooker son competencia del W3C
@Ooker: después de ver su intento en Illustrator, hay otra forma de hacerlo en Inkscape, y para que realmente funcione en un SVG. Ver mi edición de mi respuesta.
@Ooker, el conjunto de cosas que serían agradables es infinitamente grande. Incluso Illustrator no admitía degradados en los trazos antes de la versión CC. Lo que los diseñadores de estándares tienen en mente es un gran conjunto de soluciones de propósito general en las que se pueden analizar los problemas más difíciles. El problema de SVG es que no sirve de nada agregar características si nadie las está implementando. Se ha sugerido que la malla de degradado ahora está esperando que suficientes proveedores de navegadores la implementen. Hasta que no sirve de mucho. En esa nota, desea apuntar a PDF ya que está haciendo publicaciones y SVG no funciona tan bien para imprimir
@BillyKerr si es posible, ¿puede proporcionar un tutorial detallado sobre cómo aplicar la malla? Lo he desbloqueado , pero todavía no puedo dar el primer paso en tu publicación.
@Ooker Hay tutoriales para usar el degradado de malla en línea. Solo busca. Luego, si aún tiene problemas, puede hacer otra pregunta aquí en GDSE

por fin lo hago:

  1. Apariencia de la curva: Relleno: ninguno, Opacidad: 100%. Seleccione el color del trazo y haga clic en degradado.

  2. Haga clic en la parte inferior del control deslizante de degradado para agregar más paradas de color. Las paradas pares tienen 100% de opacidad, las impares 0%. Deslice todos los puntos medios lo más cerca posible de las paradas del 100 %.

  3. Para hacer que la opacidad disminuya más rápido, entre dos puntos 100 agregue dos puntos 0, luego empuje cada punto 0 lo más cerca posible de un extremo.

El resultado:


Ver más: Degradados en Illustrator

Creo que debe esperar 48 horas y luego puede marcar su propia respuesta como la correcta. Aunque es posible que desee agregar illustratoretiquetas, ya que cambió a Illustrator.
Gracias. Lo que me sorprende es que solo tengo 3 paradas de opacidad completa, pero hay 5 en total. ¿Sabes por qué?
De todos modos, estás haciendo trampa, es una buena respuesta, pero has cambiado el alcance. Sería mucho más feliz si tomara el alcance de sus preguntas originales y comenzara esta pregunta con ningún pero el ilustrador puede hacer esto. Porque ahora invalida el esfuerzo de Billy Kerr. En cualquier caso, es posible que desee presentarnos el problema completo que está tratando de resolver. De esa manera, podríamos explicarle cómo debe abordar su problema.
Ooker puede tener dos curvas una encima de la otra.
@joojaa pero dije al principio que acepto cualquier software? De todos modos, no es que no quisiera presentar el problema completo, es que prácticamente no conocía ningún término para llamarlo correctamente.
@Ooker bueno, para ser honesto, realmente quieres usar algo como mathematica, psTricks o algo así...
@joojaa pero les falta el enfoque en la estética
@Ooker no mathematica tiene gráficos predeterminados muy atractivos, que son mucho mejores que los que hacen la mayoría de los diseñadores gráficos porque tendrían que hacer mucho trabajo manual
@joojaa pero ¿puede permitir el control del mouse en los gráficos?
@Ooker Sí, aunque depende mucho de lo que quieras controlar. Generalmente es más flexible en la mayoría de las cosas, pero menos útil en otras.
@joojaa He preguntado en Mathematica. Sería genial si pudieras echarle un vistazo: ¿Cómo hacer una transparencia degradada a lo largo de una curva?

  • Coloca la imagen
  • Agregue un rectángulo negro de fondo detrás de la imagen
  • Seleccionando la imagen > Desde el Panel de Transparencia > Crear Máscara
  • Panel de transparencia > haga clic en el campo de máscara para activarlo
  • Haz un círculo > rellénalo con un degradado radial de blanco a negro
  • Selecciona el círculo y presionando Altpara duplicar, muévelo
  • Cuando esté listo> Panel de transparencia > haga clic en el área de edición (el cuadrado izquierdo)

MÁSCARA DE IA


Copiado descaradamente de la respuesta de Danielillo de ¿Cómo hacer múltiples agujeros de adelanto?

¿Cómo aplicar un degradado transparente a lo largo de cada segmento de una curva?
RespuestasAquíPolítica de privacidad1y, 0v