円形トリミング

なぜ丸いアバターは切れて見えてしまうのか

気に入った写真をアップロードすると、サイトがそれを円の中に表示します。突然、頭の上が切れていたり、フレームが奇妙な角度で肩を切っていたりします。写真は何も悪くありません——問題は、ほぼすべてのプロフィール画像の枠が、正方形の画像の上に描かれた円だということです。アプリは長方形のファイルを取り、正方形の窓の中央に置き、そして円形のマスクの外側をすべて隠します。写真の大事にしていた部分がど真ん中になかったら、円はそれを切り落とします。切り取りが起こるのは見えません——ただ結果が渡され、なぜ変に見えるのか首をかしげるだけです。

直し方は、アップロードする前に自分で切り抜くことです。そうすれば、渡す円がすでに最終的な形になっているからです。このツールがするのはまさにそれです。任意の画像を取り、真円、角の半径を調整できる角丸正方形、または普通の正方形に切り抜き、PNGとして書き出します。プラットフォームの当て推量を信じる代わりに、フレームの中に何が入るかを正確に見られます。

透明PNGこそが要点

透明な背景で書き出すと、円の外側の角は白ではなく空になります。これは聞こえる以上に重要です。透明な円形PNGを暗いプロフィールページ、色付きのカード、チャットの吹き出しに落とすと、きれいに上に乗ります——丸い縁の後ろから白い正方形が覗くことはありません。むしろ不透明な背景が欲しいなら、代わりに白の上に書き出せますが、切り抜いたアバターが貼るどこにでも馴染んで見えるのは透明のおかげです。背景を焼き込んだ正方形のJPEGにはそれができません——角は常に見えてしまいます。

角丸正方形のオプションはもう一つのよくあるケースをカバーします——完全な円ではなくやわらかい角を求めるアプリアイコン、カード、UIのサムネイル。半径をわずかな角丸からほぼ円形までスライドさせ、ちょうど良く見えるところで止めてください。普通の正方形は、マスクなしのきれいで中央揃えの切り抜きだけが必要なときのためにあります。

中央揃えの仕組み——そして助けにならない場合

このツールは中央切り抜きをします。まず画像の中央から取れる最大の正方形を取り、次にその正方形の上に形をフル解像度でマスクします——プレビューに縮小して戻すことがないので、書き出しの縁は鮮明なままです。正方形が中央から切られるので、被写体がすでにおおよそ中央にあるときに美しく働きます。これは大半の胸から上の写真と大半のロゴに当てはまります。

助けにならないケースについては、自分に正直になってください。切り抜きをドラッグするハンドルも、構図を左右にずらす方法もありません。広い集合写真の隅にあなたの顔があるなら、中央切り抜きはあなたではなくフレームの真ん中をつかみます。きれいな答えは、まず写真を被写体まで切り詰め——どんな基本的な切り抜きツールでも——それからその引き締めた画像をここに持ってきて丸くすることです。一度に一枚でもあります——これは一括処理ツールではありません。単一のアバターにはまさにちょうど良い速さで、50枚にはかなりのクリックです。

マシンを一切離れない

すべてがブラウザで動きます。画像はあなた自身の端末上でデコードされ、正方形にされ、マスクされ、PNGにエンコードされます——何もアップロードされず、アカウントもなく、サーバーが写真を見ることは決してありません。ページを一度読み込めば、オフラインでアバターを作り続けられます。しばしば自分の顔の個人的な写真であるプロフィール画像にとって、それは見知らぬサーバーに渡すか、完全に自分の手元に留めるかの違いです。