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.

marca de pelusa
marca de pelusa

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.

  1. 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.

  2. Las herramientas de anotación incluyen:

    1. Agregar texto

    2. Dibujar líneas, con puntas de flecha configurables en cada extremo.

    3. dibujo a mano alzada

    4. Desenfoque

    5. Pixelación

    6. Rectángulos

    7. circulos

    8. Insertar imágenes

    9. Recortar o ampliar el lienzo

    10. 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:

  1. Evita el tema automáticamente. Encuentra un lugar para el texto que no interfiera con el tema de la imagen.

  2. 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
    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:

  1. 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
    Texto que rodea el tema
  2. 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
    Pincel de texto
  3. 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
    Texto adaptativo de dos tonos
  4. 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
    Burbujas de chat de WeChat

dibujo a mano alzada

  1. 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
    Trazos de pincel de caligrafía, con esquinas redondeadas también mostradas
  2. 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
    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.

Insertar una imagen y extraer su tema
Insertar una imagen y extraer su tema

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:

  1. La interfaz se oculta mientras usas herramientas en la imagen, para que puedas ver la imagen completa.

  2. Dibujar y hacer zoom en la imagen no interfieren entre sí.

  3. La barra de herramientas ha pasado por muchas revisiones para que un espacio pequeño funcione bien.

  4. 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.