Web制作のティップスまとめ。たまにはコラムも

【Illustrator】いっつも忘れる角丸の解除方法

【Illustrator】いっつも忘れる角丸の解除方法

当サイトのリンクには広告が含まれています。

Adobe Illustratorで、「コーナーウィジェット」や「スタイライズ」が使われていない場合の、角丸・正円の解除方法を毎回忘れるので、いい加減に備忘録として書き留めておく事にしました。

結論から言うと、「グリッドに分割(旧:段落設定)」から角丸を解除します。

「オブジェクト」>「パス」>「グリッドに分割(旧:段落設定)」

現場では、こんな時によく遭遇

ウェブサイトをコーディングする際、ai形式で支給されたデザインデータに角丸や正円でクリッピングされている画像が含まれることがあります。

Illustratorのクリッピングマスク機能で、正円にマスクされた画像イメージ
昔は透過pngで切り取ったが、今ならobject-fitがある

これらの画像は、コーディングではobject-fitを使用して実装するので、画像のラウンド部分はあらかじめ解除してから切り出します。

ところがデザイナーの制作手法や支給されたaiデータのバージョンが古い場合、角丸が「コーナーウィジェット」や「スタイライズ」設定から解除できない(というか、そもそも設定されていない)場合があり、そんな時は下記の手順で角丸を解除します。

角丸の解除手順

以下の手順で、画像オブジェクトのマスク及び、角丸設定を解除した後、再度クリッピング処理を行い、画像を切り出します。

  1. 対象のオブジェクト(画像)を選択 > 右クリック > 「クリッピングマスクを解除
  2. 角丸を解除したいパスを選んだ状態で、上部のメニューバーから「オブジェクト」>「パス」>「グリッドに分割(旧:段落設定)」をクリック

  3. 「行」段数:1 「列」段数:1 に設定し、OKをクリック

  4. 角丸が解除されるので、再度クリッピングマスクを適用(パスとオブジェクトを選択 > 右クリック > 「クリッピングマスクを作成」)

以上、Illustratorの角丸の解除方法でした。

昨今はXDやFigmaばかり触っていて、イラレの操作を忘れがちでしたが、今回メモったので今後は大丈夫です。

ちなみに「グリッドに分割」は、CS時代には「段落設定」という名前でした。この名前で覚えていたので、さらに忘れやすくなっていました。言い訳ですが。

  1. メモルカ
  2. Web制作
  3. 【Illustrator】いっつも忘れる角丸の解除方法
上に戻る