画像の角を丸くする — アイコンやカードに
画像の四隅を丸く切り抜きます。丸めの強さは画像の短辺に対する割合で指定でき、50%にすると円になります。透過PNGとして書き出すので、どんな背景にも置けます。
プロフィール写真、資料に貼る画像、アプリの紹介カード。四角い画像の角を少し丸めるだけで、印象がやわらかくなります。CSSで丸めれば済む場面も多いのですが、画像そのものを丸くしておく必要があることもあります。
資料やスライドに貼る場合、メールの本文に埋め込む場合、CSSが使えない場所ではこちらが必要です。
割合で指定する理由
丸めの強さを画素数で決めると、画像の大きさが変わるたびに調整が必要になります。200pxの画像にちょうどよい20pxの丸めは、2000pxの画像ではほとんど分かりません。
このツールは短辺に対する割合で指定します。何倍の大きさで書き出しても、見た目の丸みは同じです。50%にすると短辺の半分が半径になり、正方形なら円になります。
CSSの border-radius も同じ考え方でパーセント指定ができます。ウェブで使う場合は、同じ割合を指定すれば見た目が揃います。
透過で書き出します
角を丸めると、切り落とした部分は透明になります。だからPNGで書き出します。JPGには透明がないため、丸めた角が白や黒で塗られてしまいます。
背景色を指定して塗りつぶすこともできます。貼り付ける先の背景色が決まっているなら、あらかじめ同じ色で塗っておくとふちが自然になります。
アプリのアイコンを作る場合は、自分で丸めないでください。iOSもAndroidもOS側で丸めるので、二重に丸まって縁が濁ります。
使いどころ
- •プロフィール写真を円形に。50%を選ぶと正方形の画像が円になります。
- •資料に貼る画面写真の角を少し丸めて、硬い印象をやわらげる。
- •カード型のレイアウトに画像を並べるとき、角の丸みを揃える。
- •画像はどこにも送信されません。処理はすべてブラウザの中で行われます。
よくある質問
円にするにはどうすればよいですか？
正方形の画像を用意して、丸めを50%にしてください。長方形のままだと楕円ではなく、角の丸い長方形になります。
JPGで保存できますか？
できますが、透明な角が塗りつぶされます。透過が必要ならPNGを選んでください。
アプリのアイコンにも使えますか？
おすすめしません。iOSとAndroidはOS側で丸めるため、あらかじめ丸めると二重になります。
画像はアップロードされますか？
されません。処理はすべてブラウザの中で行われます。