デザインちーむテクニック効率化デザインIllustratorこんにちは。デザインチームのジョルノです。第5部の主人公からいただいてます。イタリアンギャングスター!格好いいのでオススメです。今回はジョルノらしく「無駄」のないデータ作成において活躍する、アピアランスを使った可変の「線路」と「矢印」の作成方法についてお伝えしたいと思います。線路はIllustratorで地図を描く際によく使用します。JRと私鉄の線路はこんな感じで描かれてますよね。シンプルですから、単純な直線であれば普通に描いても簡単です。線を描いて、その上に白い長方形を乗せていったり、短い垂直線を加えていったり。今思うと、なんて不便なデータ作りをしていたんだ!と思いますが、使い始めたばかりの頃は私もやってました。この描き方では、線路をもう少し伸ばしたい、カーブさせたい、といった変化をつける時が大変です。いうか、カーブへの変化なんて無理です!(可能かもしれないけど、掘り下げたくないです。いい方法があるんだから)そこで今回もアピアランスで解決しましょう。JR線から描きたい線路の形のパスを書きます。今回は線幅を4mmで設定します。(その時の地図サイズに合わせて下さい)次にアピアランスパネルで「新規線を追加」をクリック。先程の黒い線の上に白い線を配置し、線幅を2mmに設定。最後に線パネルを開いて、「破線」にチェック。線分はバランスを見て決めてもらってかまいませんが、今回は6mmに設定。あとは、いつも通り「グラフィックスタイル」に登録してデザインの引き出しに追加。続いて私鉄です描きたい線路の形のパスを書きます。私鉄は中心線が細いので今回は線幅を1mmで設定します。(これもその時の地図サイズに合わせて下さい)次にアピアランスパネルで「新規線を追加」をクリック。先程の黒い線の上でも下でもいいので、黒い線を配置し、線幅を4mmに設定。線パネルを開いて、「破線」にチェック。「グラフィックスタイル」に登録も忘れずに。線路に続いて、矢印も可変で作成しておくと応用が利いていいですよ。長方形と三角形をパスファインダー結合させて矢印をつくってもいいんですが、それだと伸ばしたり拡大縮小はできても、曲線にするには、効果>ワープ>円弧とかやっても、先端部分も曲がってしまいます。そこでまた登場するのがアピアランス。直線でも曲線でもOKです。アピアランスの線パネルを開いて、「矢印」のプルダウンからお好みの矢印をセレクト。あとは「倍率」で矢の部分、「線幅」で線の部分を調整して形を整えたら出来上がり。アンカーポイントやハンドルを調整すれば後からの変形でどんな曲線の矢印でも対応可能!以上、可変パーツの作り方でした。線路も矢印もよく使うパーツなので、きっと誰かの役にたてるはず。デザイナーメンズファッションの販売・企画デザイン・ECサイト運営を経てGoNextへ入社。仲間達と切磋琢磨でデザインを追求していきたいと思っています。ファッションが好きで、バスケ・サーフィン・ランニングなど運動が趣味。自己啓発系の本なども読みます。あとマンガが好きです。スマホサイト制作にかかせないbackground-sizeについて5簡単作成!オリジナルのイラストなどのデザインQRコードを作ってみた。HTML5を動かしてみる!2015.06.19あなたはどう見える?色順応を体感してみよう!2014.06.19なにかと使える「Ruby」、インストール方法。~国道1号を歩いてみた~2015.01.30Web制作者がススめる、Huluで見るべき動画10選!2017.09.06有給休暇の過ごし方が分からない。