Diario de desarrollo / Fluffmark
Diario de desarrollo de Fluffmark: hacer que la anotación de imágenes sea un placer
Cómo Fluffmark pasó de ser un componente de anotación compartido a su propia aplicación, con diseño de texto automático, ajuste de tema, pincel de texto, trazos animados e interacciones específicas de la plataforma.

De donde vino la idea
Fluffmark tiene un origen divertido. Tenía la intención de crear un componente de anotación compartido para todas mis aplicaciones de imágenes. Mientras trabajaba en él, inesperadamente me apasioné por el producto en sí. Me enamoré de usarlo para publicar imágenes con palabras y descubrí que quería expresar más.
Qué hace la aplicación
Permítanme ir directamente a las características.
En primer lugar, es una aplicación de anotación de imágenes que maneja imágenes fijas, GIF y Live Photos. Exporta el mismo tipo de formato que importó. Las anotaciones en GIF y Live Photos se agregan como una superposición, preservando la animación subyacente.
Las herramientas de anotación incluyen:
Agregar texto
Dibujar líneas, con puntas de flecha configurables en cada extremo.
dibujo a mano alzada
Desenfoque
Pixelación
Rectángulos
circulos
Insertar imágenes
Recortar o ampliar el lienzo
Esquinas redondeadas
Me centraré en las funciones en las que he pensado más.
Agregar texto
Mis amigos Xiaoyun y Xiaoyu a menudo publicaban fotografías con palabras escritas directamente en WeChat Moments. Eso me hizo preguntarme: ¿qué bonito sería escribir simplemente las palabras, sin ajustar el estilo y la posición? Así que construí un diseño de texto automático, con algunos detalles útiles:
Evita el tema automáticamente. Encuentra un lugar para el texto que no interfiera con el tema de la imagen.
Haga coincidir colores automáticamente. Utilice colores clave de la imagen para sugerir varias paletas de texto. Por lo general, el valor predeterminado ya se ve bien.

Diseño automático y combinación de colores
Más allá de los controles de texto ordinarios, agregué varias características más inusuales:
Envuelve al sujeto. Organice las palabras a lo largo del contorno del sujeto principal, generalmente una persona, para crear un efecto envolvente.

Texto que rodea el tema Pincel de texto. Piense en ello como un ajuste manual de temas, con más libertad para dibujar palabras en formas inesperadas.

Pincel de texto Texto adaptable de dos tonos. Cada carácter cambia a blanco o negro según la imagen que se encuentra debajo, lo que crea un contraste más fuerte.

Texto adaptativo de dos tonos Burbujas de chat de WeChat. Esta reciente incorporación recrea el aspecto familiar y llamativo de una conversación de WeChat. Elija imágenes de avatar para usted y la otra persona la primera vez, luego reutilícelas la próxima vez.

Burbujas de chat de WeChat
dibujo a mano alzada
Pinceladas de caligrafía. Traje una demostración anterior de pincel de caligrafía a este proyecto. Fluffmark puede producir trazos de tinta muy realistas; Incluso un simple círculo dibujado a mano parece mucho más expresivo que una simple marca de pincel digital.

Trazos de pincel de caligrafía, con esquinas redondeadas también mostradas Reproduce los trazos. Al editar una Live Photo, habilita la reproducción de trazos. En la Live Photo exportada, su dibujo aparece en movimiento, como si lo estuviera escribiendo nuevamente.

Reproducción de trazos animados
Imágenes
Al insertar una imagen, también puedes extraer su tema. Esto abre todo tipo de posibilidades de collage lúdico.

Otros detalles
He pasado mucho tiempo puliendo esta aplicación y la uso todos los días. Algunos de los detalles de la interacción incluyen:
La interfaz se oculta mientras usas herramientas en la imagen, para que puedas ver la imagen completa.
Dibujar y hacer zoom en la imagen no interfieren entre sí.
La barra de herramientas ha pasado por muchas revisiones para que un espacio pequeño funcione bien.
La aplicación está disponible en iOS, iPadOS y macOS. En Mac, realicé mejoras específicas de la plataforma, como arrastrar imágenes, usar cuadros de diálogo para abrir y guardar basados en Finder y admitir atajos de teclado.
Precio
Esto es también lo que describo como mi primer producto completamente gratuito, con sólo soporte financiero opcional. Si lo disfrutas, puedes contribuir con 18 RMB una vez o 18 RMB por año para ayudarme a crear productos mejores y asequibles. Elegir no contribuir no afecta ninguna funcionalidad. En broma lo llamo el comienzo de mi mendicidad en Internet.
Al igual que con mis otras aplicaciones, no hay mucha ayuda. Pruebe las herramientas y explore. Deshacer y rehacer están bien desarrollados, por lo que no necesita preocuparse por perder su trabajo mientras experimenta. Espero que disfrutes usándolo y te sientas más inspirado para expresarte.