画像を円に切り抜くのは1ステップで済みそうに聞こえます。落とし穴は角です。円は四角の中にあり、その外の4つの角は何かにならなければなりません。それが白になれば、円は白い箱を抱え、白でない何かの上に置いた瞬間に現れます。それが透明になれば、円はどんな背景の上にもきれいに浮きます。その違いは、まったくファイル形式次第です。

なぜPNGでなければならないのか

画像を透明背景の円に切り抜く(PNG) — visual 1
なぜPNGでなければならないのか

JPEGは透過を保存できません。JPEGのすべてのピクセルは不透明なので、「円形」のJPEGは実際には角を白(か何かの色)で埋めた四角です。合った背景に対してだけ丸く見え、暗いページや色付きのカードでは破綻します。

PNGはアルファチャンネルに対応します。各ピクセルは完全に見える、完全に見えない、あるいはその中間のどれにもなれます。それが、円の外の角を本当に空にできる理由です。ですから透明背景の円形切り抜きは常にPNGです。ツールがJPEGを渡して透明と呼んだら、そんなことはありえません。その形式が許さないのです。

作り方

画像を透明背景の円に切り抜く(PNG) — visual 2
作り方

画像を放り込み、円の形を選び、透明背景で書き出します。内部では画像の中央から最大の正方形を取り、フル解像度でそこに円をマスクするので、書き出す縁は小さなプレビューから拡大されるのではなく鮮明なままです。角は透明で出てきて、PNGはどんな背景にも載せる準備が整っています。

完全な円に限られません。半径を調整できる角丸の四角は、やわらかな角を望むアプリのアイコンやカードのサムネイルをまかない、素の四角はマスクなしのきれいな中心切り抜きをくれます。3つとも同じように書き出され、形の外に落ちるどの部分にも透過が入ります。

縁の品質についての一点

知っておく価値のあること。マスクは縮小したプレビューではなく、画像のフル解像度で適用されます。それが円の縁をギザギザやぼやけではなく鮮明に保ちます。どこかで円を切り抜いて縁が階段状になっているのに気づいたことがあるなら、たいてい小さなプレビューをマスクして拡大した結果です。フルサイズで行えばそれを避けられます。

正直な限界

切り抜きは中心です。画像の中央の正方形を取り、フレームを動かすハンドルはありません。被写体がすでに中央にあるとき理想的で、そうでないとぎこちなくなります。欲しい部分が片側に寄っているなら、まず基本的な切り抜きツールで画像をそこまで切り詰め、その結果を円に切り抜きましょう。一度に1枚も処理するので、50枚の一括ではなく、きれいな1回の切り抜きのために作られています。

端末に留まります

すべてがブラウザ内で動きます。画像はローカルでデコードされ、正方形にされ、マスクされ、PNGにエンコードされます。何もアップロードされず、アカウントもなく、どのサーバーもファイルを受け取りません。ページを一度読み込めばオフラインで動きます。画像を選び、円に切り抜き、透明PNGで書き出せば、どこに置いてもきれいに収まります。