フローや流れ図を作るのに必須!Photoshopで完璧な円環チャートを作る方法



久しぶりの投稿です。
デザイナーを雇ってから、自分がデザインすることが減ってしまってこのチュートリアルもしばらく書かないでいたのですが、
全く更新していないこの間にもアクセスは順調に増えておりまして、
月に15000PV以上も見ていただいています。

未だ仕事が多いときなどヘルプでデザインに入ったりしていますので、
そんな中でチュートリアルとして出せそうなものをこれからも出していければと思っています。

円環チャートとは

さて、ここから本題。

ホームページのデザインをしていると、「業務の流れ」とか「契約の流れ」とか
いわゆるフロー図を描くことも多い。
1から10というような、いわゆるスタートがあって終わりがあるような流れ図は並べるだけで簡単だが、
1周回ってさらに繰り返すようなフロー図を描こうとすると意外と難しい。

これをいきなり描いてみてって言うと、
簡単そうに見えてどうアプローチすればいいかわからないだろう。
幾何学的な知識も多少必要になるが、小学生程度の知識で十分。
では、早速やってみよう。

ガイドを作る

この円環チャートの何が難しいかというと、
キレイに図形を整列させることです。
どうやってキレイに円環に配置すればいいか。

まず思いつくのが、ガイド用の図形を使うということ。
円を書いて、その上に配置していけばいい、簡単。

と思うけれど、円を描いてその上に矢印などを配置するのは意外と難しい。
それぞれの間隔を等間隔にどうやって配置すればいいだろう。
マウスで微調整なんかしてたらうまくいかない。

ここでは、チャートのステップの数に合わせて多角形を用意することにする。
つまり、今回のように6ステップある場合は6角形を用意する。

ここで準備としてこの6角形の中央位置を調べてガイドを引いておこう。
中央位置を調べる方法はこちら

6角形に沿って要素を配置する

この6角形と中央位置を使って実際に円環チャートを作っていく。

まず、6角形の1辺を使って次のように要素を配置する。
6角形の角に小さい円を描く。
この円がチャートのステップの1つとなる部分。
小さい円に自動変形機能を使って中心部を表示させて、うまく6角形の角と合わせてやる。

次に同じようにしてその1つ右側の角にも円を配置する。

次に2つの円の真ん中に矢印を配置。
矢印をその辺に置いて、整列を使って調整するといい。

ここで、右側の円を消して、
残った左側の円と矢印をベースに作っていく。

これら2つの要素を選択して複製する。
さらに、複製したこれらを選択した状態で自由変形を行おう。
その時に、回転の中心点を6角形の中心に移動させる。
※回転の中心点とは、自由変形を選択したときに現れる中央にある○のこと。マウスで移動可能。

この状態(回転基準点を6角形の中央に持ってきて)で、
ここから右側に60度回転させる。(マウスで回転させるのではなくて上部の角度の入力で回転させよう)
※なぜ60度かは後ほど

今回転させた要素を複製してさらに回転。
それを繰り返していくと次のようになる。

最後にガイドとしていた6角形を外せばきれいな円環チャートの出来上がり。

ちなみに、回転させる角度は、
360度を角の数で割った数値。
小学校の幾何学の問題。
6回移動して元の位置に戻る(360度回転)ので、
1移動は1回転(360度)の1/6である。

Related Posts Plugin for WordPress, Blogger...

Leave a Reply