できあがるもの
写真をドロップすると、四隅が透明な丸いPNGが返ってきます。設定項目はありません。画像の中央に収まるいちばん大きな正方形を取り、そこから円を切り抜いて、円の外側をすべて完全に透明にします。縁はアンチエイリアスで滑らかになるので、ギザギザになりません。
出力サイズは写真の短い辺と同じです。4032 × 3024のスマホ写真なら3024 × 3024のPNGに、1080 × 1920のスクリーンショットなら1080 × 1080になります。ファイル名は元の名前に-circleが付きます。
被写体が中央にないとき
円は常に中央に配置されるため、集合写真の端にいる人の顔や、隅にあるロゴは切れてしまいます。解決法はひと手間だけです。
- 写真を画像を切り抜きで開き、1:1を選びます。
- 顔や対象が真ん中に来て、まわりに少し余裕があるように正方形を動かし、ダウンロードします。
- その正方形をここにドロップします。すでに正方形なので、円は選択範囲の4辺すべてに接します。囲んだ範囲がそのまま結果になります。
余白は残しておきましょう。正方形の四隅にあるものは円の外になって消えます。胸から上のアイコンなら、あごと髪のてっぺんが枠の内側に十分収まるようにします。
そもそも丸いファイルが必要?
SNS、メッセージアプリ、チームチャットの多くは、正方形のプロフィール画像を受け取り、自動で円形に表示します。こうしたサービスには正方形をアップロードするほうが無難です。透明な円の上にサービス側のマスクがかかると、縁に細いノイズが出ることがあります。正方形はプロフィール画像(400 × 400)や1024 × 1024で作れます。
本当に丸いPNGが役立つのは、レイアウトを自分で決められる場面です。
- メールの署名や文書
- スライドやプレゼン資料
- Webサイトのチーム紹介・会社概要ページ
- ステッカー、バッジ、丸いロゴ
- 円形マスク機能のないデザインツールでのサムネイル
透明が効く場面、効かない場面
四隅が透明なので、結果は必ずPNGです。JPGは透明を保存できません。PNGをJPGに変換すると四隅は白になります。白いページなら問題ありませんが、色のある背景では円のまわりに白い四角が見えてしまいます。
アプリによっては透明画像を黒やグレーの背景でプレビューするため、ギャラリーやチャットのプレビューでは四隅が暗く見えることがあります。ファイル自体は透明のままです。確認したいときはページに置いてみてください。
仕上がりをよくするコツ
- ある程度大きな写真から始める。 アイコンは小さく表示されますが、高精細な画面でくっきり見せるには最低でも400〜500 pxは欲しいところです。丸いPNGは短辺をまるごと保つので、あとから画像リサイズで縮小できます。
- ファイルを軽くする。 大きな透過PNGは数MBになることもあります。アップロード前に、実際に必要なサイズまで縮小しましょう。
- ごちゃついた背景を差し替える。 写真を背景を削除に通し、そこで単色の背景を選んでから、結果を円形に切り抜きます。きれいな色の円の上に人物が乗った、定番のアイコンになります。
- とても大きな画像(約1670万画素超)は切り抜く前に縮小されます。ブラウザがそれより大きなキャンバスを描けないためで、その場合はお知らせが表示されます。
ほかの形やサイズ
特定の比率の長方形なら画像を切り抜きを使ってください。小さな正方形アイコンにはDiscord絵文字(128 × 128)、Webサイト用のアイコンにはファビコン作成が便利です。