開発日誌 / Fluffmark

Fluffmark 開発日誌: 画像の注釈を楽しくする

Fluffmark がどのようにして共有注釈コンポーネントから、自動テキスト レイアウト、主題の折り返し、テキスト ブラシ、アニメーション ストローク、プラットフォーム固有のインタラクションを備えた独自のアプリに成長したか。

フラッフマーク
フラッフマーク

アイデアはどこから来たのか

フラフマークには面白い由来があります。すべての画像アプリ用の共有アノテーション コンポーネントを構築するつもりでした。作っていくうちに、思いがけず製品自体に熱中するようになりました。言葉を添えて写真を投稿することに夢中になり、もっと表現したいと思うようになりました。

アプリの機能

さっそく特徴を見ていきましょう。

  1. まず、静止画、GIF、Live Photosを扱う画像アノテーションアプリです。インポートしたのと同じ種類の形式をエクスポートします。 GIF および Live Photos の注釈はオーバーレイとして追加され、基礎となるアニメーションが維持されます。

  2. 注釈ツールには次のものが含まれます。

    1. テキストの追加

    2. 両端に設定可能な矢印が付いた線の描画

    3. フリーハンド描画

    4. ぼかし

    5. ピクセル化

    6. 長方形

    7. サークル

    8. 画像の挿入

    9. キャンバスのトリミングまたは拡張

    10. 丸い角

私が最も考えた機能に焦点を当てます。

テキストの追加

私の友人のXiaoyunとXiaoyuは、WeChatモーメントに直接文字が書かれた写真をよく投稿しました。そこで疑問に思ったのは、スタイルや位置を調整せずに、文字だけを書くことはどれほど素晴らしいだろうかということです。そこで私は、いくつかの便利な詳細を備えた自動テキスト レイアウトを構築しました。

  1. 自動的に被写体を避けます。 画像の内容を妨げないテキストの場所を見つけてください。

  2. 色を自動的に一致させます。 画像の主要な色を使用して、いくつかのテキスト パレットを提案します。通常、デフォルトですでに適切に見えます。

    自動レイアウトとカラーマッチング
    自動レイアウトとカラーマッチング

通常のテキスト コントロールに加えて、さらにいくつかの珍しい機能を追加しました。

  1. 被写体を包み込みます。 主要な被写体 (通常は人物) の輪郭に沿って単語を配置し、包み込むような効果を生み出します。

    件名を囲むテキストの回り込み
    件名を囲むテキストの回り込み
  2. テキスト ブラシ。 手動で主題をラッピングすると考えて、より自由に単語を予期せぬ形に描くことができます。

    テキストブラシ
    テキストブラシ
  3. アダプティブ ツートーン テキスト。 各文字はその下の画像に応じて黒または白に切り替わり、より強いコントラストが作成されます。

    アダプティブツートーンテキスト
    アダプティブツートーンテキスト
  4. WeChat チャット バブル この最近追加されたものは、WeChat 会話の見慣れた目を引く外観を再現します。初めて自分と相手のアバター画像を選択し、次回はそれを再利用します。

    WeChat のチャットバブル
    WeChat のチャットバブル

フリーハンド描画

  1. カリグラフィーのブラシ ストローク。 以前のカリグラフィー ブラシのデモをこのプロジェクトに導入しました。 Fluffmark は非常にリアルなインク ストロークを生成できます。単純な手描きの円であっても、通常のデジタル ブラシ マークよりもはるかに表現力豊かに見えます。

    カリグラフィーのブラシ ストローク、丸い角も表示
    カリグラフィーのブラシ ストローク、丸い角も表示
  2. ストロークを再生します。 Live Photo を編集するときは、ストロークの再生を有効にします。エクスポートされた Live Photo では、あたかも再び描画しているかのように、描画が動いて表示されます。

    アニメーションによるストロークの再生
    アニメーションによるストロークの再生

画像

画像を挿入するときに、その主題も抽出できます。これにより、あらゆる種類の遊び心のあるコラージュの可能性が広がります。

画像の挿入と主題の抽出
画像の挿入と主題の抽出

その他の詳細

私は長い時間をかけてこのアプリを磨き上げ、毎日使っています。インタラクションの詳細には次のようなものがあります。

  1. 画像上でツールを使用している間はインターフェイスが非表示になるため、全体像を確認できます。

  2. 画像の描画とズームは相互に干渉しません。

  3. ツールバーは、小さなスペースでも適切に機能するように何度も改訂されました。

  4. このアプリは iOS、iPadOS、macOS で利用できます。 Mac では、画像のドラッグ、Finder ベースの開くダイアログと保存ダイアログの使用、キーボード ショートカットのサポートなど、プラットフォーム固有の改善を行いました。

価格

これは、オプションの経済的サポートのみを備えた、私の最初の完全に無料の製品であると私が説明するものでもあります。気に入っていただけましたら、より良い、手頃な価格の製品を作るために、1 回 18 人民元、または年間 18 人民元を寄付していただけます。貢献しないことを選択しても、機能には影響しません。私は冗談でこれをインターネット物乞いの始まりと呼んでいます。

他のアプリと同様に、手を握る必要はあまりありません。ツールを試して探索してください。元に戻すとやり直しがよく機能しているため、実験中に作業内容が失われることを心配する必要はありません。楽しんで使っていただき、より自分を表現するインスピレーションを感じていただければ幸いです。