このツールが役立つ場合
角の形状を一貫させる必要があるアバター、カード、サムネイル、UIアセット。
局所処理の仕組み
ブラウザはキャンバスを選択したボーダー幅だけ拡張し、ボーダーを選択した色で塗り、角丸長方形の外側マスクを適用し、PNGを書き出します。
使い方
- ソースを準備する: 角の形状を一貫させる必要があるアバター、カード、サムネイル、UIアセット。
- ローカルで処理する: ブラウザはキャンバスを選択したボーダー幅だけ拡張し、ボーダーを選択した色で塗り、角丸長方形の外側マスクを適用し、PNGを書き出します。
- ダウンロードして確認する: 対照的な背景で角を確認し、4つの縁すべてを200％で点検し、寸法を確認し、対象のUIスケールをテストします。
重要な制限事項
このルートはPNGのみを書き出します。大きな外側半径は角のピクセルを削除し、マスクはベクターアンチエイリアスではなくハードピクセルエッジを使用し、メタデータは削除されます。
ダウンロードした結果を確認する
対照的な背景で角を確認し、4つの縁すべてを200％で点検し、寸法を確認し、対象のUIスケールをテストします。
私設設計
あなたのファイルはこのブラウザに残ります。ツールはソースや出力をサーバーにアップロードしません。
質問と回答
このツールはいつ役立ちますか？
角の形状を一貫させる必要があるアバター、カード、サムネイル、UIアセット。
ブラウザは実際に何をしますか？
ブラウザはキャンバスを選択したボーダー幅だけ拡張し、ボーダーを選択した色で塗り、角丸長方形の外側マスクを適用し、PNGを書き出します。
理解しておくべき制限は何ですか？
このルートはPNGのみを書き出します。大きな外側半径は角のピクセルを削除し、マスクはベクターアンチエイリアスではなくハードピクセルエッジを使用し、メタデータは削除されます。
結果をどのように確認すべきですか？
対照的な背景で角を確認し、4つの縁すべてを200％で点検し、寸法を確認し、対象のUIスケールをテストします。