Entwicklungstagebuch / Fluffmark

Fluffmark-Entwicklungsjournal: So wird das Kommentieren von Bildern zum Vergnügen

Wie sich Fluffmark von einer gemeinsamen Anmerkungskomponente zu einer eigenen App entwickelte, mit automatischem Textlayout, Betreffumbruch, einem Textpinsel, animierten Strichen und plattformspezifischen Interaktionen.

Fluffmark
Fluffmark

Woher die Idee kam

Fluffmark hat einen lustigen Ursprung. Ich wollte eine gemeinsame Anmerkungskomponente für alle meine Bild-Apps erstellen. Während ich daran arbeitete, entwickelte ich unerwartet eine Leidenschaft für das Produkt selbst. Ich war begeistert davon, damit Bilder mit Worten zu posten, und hatte den Wunsch, mehr auszudrücken.

Was die App macht

Kommen wir gleich zu den Funktionen.

  1. Erstens handelt es sich um eine Bildanmerkungs-App, die Standbilder, GIFs und Live-Fotos verarbeitet. Es exportiert dasselbe Format, das Sie importiert haben. Anmerkungen zu GIFs und Live-Fotos werden als Überlagerung hinzugefügt, wobei die zugrunde liegende Animation erhalten bleibt.

  2. Zu den Anmerkungstools gehören:

    1. Text hinzufügen

    2. Zeichnen von Linien mit konfigurierbaren Pfeilspitzen an beiden Enden

    3. Freihandzeichnen

    4. Unschärfe

    5. Pixelierung

    6. Rechtecke

    7. Kreise

    8. Bilder einfügen

    9. Zuschneiden oder Erweitern der Leinwand

    10. Abgerundete Ecken

Ich werde mich auf die Funktionen konzentrieren, über die ich am meisten nachgedacht habe.

Text hinzufügen

Meine Freunde Xiaoyun und Xiaoyu haben in WeChat Moments oft Bilder mit direkt darauf geschriebenen Worten gepostet. Da habe ich mich gefragt: Wie schön wäre es, nur die Wörter zu schreiben, ohne den Stil und die Position anzupassen? Also habe ich ein automatisches Textlayout mit ein paar nützlichen Details erstellt:

  1. Vermeiden Sie das Thema automatisch. Suchen Sie eine Stelle für den Text, die nicht mit dem Inhalt des Bildes interferiert.

  2. Farben automatisch anpassen. Verwenden Sie Schlüsselfarben aus dem Bild, um mehrere Textpaletten vorzuschlagen. Normalerweise sieht die Standardeinstellung bereits gut aus.

    Automatische Layout- und Farbanpassung
    Automatische Layout- und Farbanpassung

Über die gewöhnlichen Textsteuerelemente hinaus habe ich einige weitere ungewöhnliche Funktionen hinzugefügt:

  1. Umhüllen Sie das Thema. Ordnen Sie die Wörter entlang der Umrisse des Hauptthemas, normalerweise einer Person, an, um einen umhüllenden Effekt zu erzielen.

    Text, der das Thema umschließt
    Text, der das Thema umschließt
  2. Textpinsel. Stellen Sie sich das wie einen manuellen Betreffumbruch vor, mit mehr Freiheit, Wörter in unerwartete Formen zu zeichnen.

    Textpinsel
    Textpinsel
  3. Adaptiver zweifarbiger Text. Jedes Zeichen wechselt je nach Bild darunter zu Schwarz oder Weiß, wodurch ein stärkerer Kontrast entsteht.

    Adaptiver zweifarbiger Text
    Adaptiver zweifarbiger Text
  4. WeChat-Chat-Blasen. Diese neue Ergänzung stellt den vertrauten, auffälligen Look einer WeChat-Konversation wieder her. Wählen Sie beim ersten Mal Avatar-Bilder für sich selbst und die andere Person aus und verwenden Sie sie beim nächsten Mal wieder.

    WeChat-Chatblasen
    WeChat-Chatblasen

Freihandzeichnen

  1. Kalligraphie-Pinselstriche. Ich habe eine frühere Kalligraphie-Pinsel-Demo in dieses Projekt eingebracht. Fluffmark kann sehr realistische Tintenstriche erzeugen; Selbst ein einfacher handgezeichneter Kreis sieht viel ausdrucksvoller aus als eine gewöhnliche digitale Pinselmarkierung.

    Kalligraphie-Pinselstriche, auch mit abgerundeten Ecken
    Kalligraphie-Pinselstriche, auch mit abgerundeten Ecken
  2. Spielen Sie die Striche ab. Aktivieren Sie beim Bearbeiten eines Live-Fotos die Strichwiedergabe. Im exportierten Live-Foto erscheint Ihre Zeichnung in Bewegung, als würden Sie sie noch einmal schreiben.

    Animierte Strichwiedergabe
    Animierte Strichwiedergabe

Bilder

Beim Einfügen eines Bildes können Sie auch dessen Motiv extrahieren. Das eröffnet allerlei spielerische Collagemöglichkeiten.

Ein Bild einfügen und sein Motiv extrahieren
Ein Bild einfügen und sein Motiv extrahieren

Weitere Details

Ich habe viel Zeit damit verbracht, diese App zu verbessern und verwende sie jeden Tag. Zu den Interaktionsdetails gehören:

  1. Die Benutzeroberfläche wird ausgeblendet, während Sie Werkzeuge auf dem Bild verwenden, sodass Sie das gesamte Bild sehen können.

  2. Das Zeichnen und Zoomen des Bildes beeinträchtigen sich nicht.

  3. Die Symbolleiste wurde mehrfach überarbeitet, damit sie auch auf kleinem Raum gut funktioniert.

  4. Die App ist für iOS, iPadOS und macOS verfügbar. Auf dem Mac habe ich plattformspezifische Verbesserungen vorgenommen, z. B. das Einziehen von Bildern, die Verwendung von Finder-basierten Öffnen- und Speicherdialogen und die Unterstützung von Tastaturkürzeln.

Preis

Dies ist auch das, was ich als mein erstes völlig kostenloses Produkt bezeichne, mit nur optionaler finanzieller Unterstützung. Wenn es Ihnen gefällt, können Sie einmalig 18 RMB oder 18 RMB pro Jahr spenden, um mir dabei zu helfen, bessere und erschwinglichere Produkte herzustellen. Die Entscheidung, keinen Beitrag zu leisten, hat keinerlei Auswirkungen auf die Funktionalität. Ich nenne es scherzhaft den Beginn meines Bettelns im Internet.

Wie bei meinen anderen Apps gibt es nicht viel Händchenhalten. Probieren Sie die Tools aus und erkunden Sie sie. Das Rückgängigmachen und Wiederherstellen ist gut entwickelt, sodass Sie sich beim Experimentieren keine Sorgen machen müssen, dass Ihre Arbeit verloren geht. Ich hoffe, dass Ihnen die Nutzung Spaß macht und Sie sich mehr dazu inspiriert fühlen, sich auszudrücken.