• WEB

Illustrator(イラストレーター/イラレ)で修正が楽なデータ作成!線路と矢印はアピアランスでカーブ自在

  • ジョルノ
    ジョルノ デザインちーむ
  • このエントリーをはてなブックマークに追加
Illustratorで修正が楽なデータ作成!線路と矢印はアピアランスでカーブ自在

こんにちは。デザインチームのジョルノです。
サムネイルを見てわかる人はわかると思いますが、ジョルノという名前はジョジョの奇妙な冒険 第5部の主人公からいただいてます。

イタリアンギャングスター!格好いいのでオススメです。今回はジョルノらしく「無駄」のないデータ作成において活躍する、アピアランスを使った可変の「線路」と「矢印」の作成方法についてお伝えしたいと思います。

アピアランスって何?という方はコチラの記事をどうぞ

Illustrator(イラストレーター/イラレ)のアピアランスで効率的なデザインを行う方法

伸縮自在で曲線の変化も可能な線路の書き方

線路はIllustratorで地図を描く際によく使用します。JRと私鉄の線路はこんな感じで描かれてますよね。

路線図のイメージ

シンプルですから、単純な直線であれば普通に描いても簡単です。

線を描いて、その上に白い長方形を乗せていったり、短い垂直線を加えていったり。。今思うと、なんて不便なデータ作りをしていたんだ!と思いますが、使い始めたばかりの頃は私もやってました。

でもこの描き方では、線路をもう少し伸ばしたい、カーブさせたい、といった変化をつける時が大変です。というか、カーブへの変化なんて無理です!(可能かもしれないけど、掘り下げたくないです。もっといい方法があるんだから)そこで今回もアピアランスで解決しましょう。

まずはJR線から

  1. 描きたい線路の形のパスを書きます。とりあえず今回は線幅を4mmで設定します。(その時の地図サイズに合わせて下さい)
  2. 次にアピアランスパネルで「新規線を追加」をクリック。先程の黒い線の上に白い線を配置し、線幅を2mmに設定。
  3. 最後に線パネルを開いて、「破線」にチェック。線分はバランスを見て決めてもらってかまいませんが、今回は6mmに設定。

JR線操作画面イメージ

以上、簡単な3ステップで描けちゃいましたね、JR線! あとは、いつも通り「グラフィックスタイル」に登録してデザインの引き出しに追加。 1本のパスでできているので、自由自在に変形可能です♪

続いて私鉄です

  1. 描きたい線路の形のパスを書きます。私鉄は中心線が細いので今回は線幅を1mmで設定します。(これもその時の地図サイズに合わせて下さい)
  2. 次にアピアランスパネルで「新規線を追加」をクリック。先程の黒い線の上でも下でもいいので、黒い線を配置し、線幅を4mmに設定。
  3. 線パネルを開いて、「破線」にチェック。線分は1mm、間隔を4mmに設定すれば、はい完成!(この辺の数値もバランスみて好きにして下さい)

私鉄操作画面イメージ

こちらももちろん可変で好きなだけ伸ばせるし、カーブもOK! 「グラフィックスタイル」に登録も忘れずに。

矢印も曲線が自由自在

線路に続いて、矢印も可変で作成しておくと応用が利いていいですよ。

長方形と三角形をパスファインダー結合させて矢印をつくってもいいんですが、それだと伸ばしたり拡大縮小はできても、曲線にするには、効果>ワープ>円弧とかやっても、先端部分も曲がってしまいます。

パスファインダーで矢印を曲げたイメージ

そこでまた登場するのがアピアランス。

  1. まず線を描きます。直線でも曲線でもOKです。
  2. アピアランスの線パネルを開いて、「矢印」のプルダウンからお好みの矢印をセレクト。
  3. あとは「倍率」で矢の部分、「線幅」で線の部分を調整して形を整えたら出来上がり。

矢印を曲げる操作画面

アンカーポイントやハンドルを調整すれば後からの変形でどんな曲線の矢印でも対応可能!

以上、可変パーツの作り方でした。線路も矢印もよく使うパーツなので、きっと誰かの役にたてるはず。

Thanks for your time☻

このエントリーをはてなブックマークに追加

ジョルノが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ