イラレ、回転矢印アイコンの描き方。

いろんな意味に使える。

こんにちは、「ふ」です。
今回はイラレで「回転矢印」をつくってみましょう。

回転矢印のアイコンには、

 ・ページの再読み込み、更新
 ・回転
 ・繰り返し(リピート)
 ・undo/redo（取り消し/やり直し）

〜などの意味を持たせることができます。
一度イラレで原型を作っておけば、色々な場面で使うことができますね。

「回転矢印」といっても、単に「円弧の先に矢印を付けたもの」では終わりません。もちろん、イラレ使いとしてのこだわりも込めたものを作っていきますよ〜 🎵

SVGコーディングブック

著者：ふ

Apple Booksでみる

SVGの学習本を出版しました。
webでベクター画像を扱いたい方、最適のスキルが身に付く本です。

イラレ使いとしてのこだわり。

今回は以下の点にこだわって、回転矢印を作っていきます。

  @1@ 矢先の中心線を、円弧の接線と一致させる
  @2@ 矢印の斜め部分と円弧の切れ目は平行にする
  @3@ 矢先-円弧の間隔と、円弧の線幅を等しくする
  @4@ 先端は元となる円の円周上に配置する

⬆︎はイラレの線設定で矢印を付けたもの。
矢先と円弧のバランスが不恰好です。これは、円弧端部の接線に対して矢先の頂点のみを一致させているためです。

@1@ 矢先の中心線をまるごと、円弧端部の接線上に配置すべきです。

@2@ 矢先の三角の辺と、円弧の切れ目は平行になるようにしましょう。

@3@ そして矢先-円弧の間隔と、円弧の線幅も等しくします。

@4@ 矢先の大きさについて。
頂点が、円弧の外周部分に一致するような大きさにしてみます。これでは矢先が少し小さいかな？とも思いますが、ひとまづこのルールで作っていきます。

手順。

それでは回転矢印を実際に描いていきましょう。
オブジェクトの位置合わせを正確にするために、スマートガイドはONにしておいてください。

正円を１つ描きます。

矢先となる三角形を⬆︎の位置に配置。
これで@1@の「矢先の中心線が、円弧の接線と一致」との条件が満たされます。

三角形を複製して円の左側へ移動→底辺中央を基準に180°回転させます。

すべてのオブジェクトを選択し、「線」パネルで好みの線幅に広げます。
ここでは35pxにしました。

こんどは円オブジェクトのみを選択し、「オブジェクト→パス」からパスをアウトライン化させます。

現在の矢先三角形の線幅をそのまま「@3@矢先-円弧の間隔と、円弧の線幅」として利用します。
このあと矢先である三角形のサイズを調整するのですが、線幅を変えることなく拡大/縮小させたい。「オブジェクト→変形→拡大・縮小」のパネルを開き、「線幅と効果を拡大・縮小」のチェックを外しておきます。

その上で、矢先サイズを調整します。
Command/Ctrl+Yでアウトライン表示にし、矢の先端を外側の円周と一致させます。これで「④ 矢先は元となる円の円周上にある」という条件を満たします。

拡大/縮小の際はShiftキーを押しながら、縦横比をキープしてくださいね。

通常表示に戻しました。矢先オブジェクト２つを選択しましょう。

そして線パネルから「線の位置」を外側に指定。
そのあと、矢先オブジェクトもアウトライン化させます。

再びアウトライン表示に。

シェイプ形成ツールで、必要な部分をつなぎ合わせていきましょう。
不要な部分はOption/Altキーを押しながらクリックして、削除してください。

三角形のアウトラインを使って切り取るので「② 矢先の三角の辺と、円弧の切れ目が平行になる」という条件もクリアできます。

アウトラインを取ることができました。

通常表示に戻して..

好きな角度に回転させましょう。
完成です。