Illustrator|きれいな3Dの棒グラフの作り方チュートリアル

Bar_graph-31-1.jpg

前回の『Illustrator|きれいな3Dの円グラフの作り方チュートリアル』に続くグラフシリーズの第2弾です。

今回はIllustrator(イラストレーター)CS3で、きれいな3Dの棒グラフを作るチュートリアルです。

"棒グラフ"と"目盛" それぞれ別々に『3D・押し出しベベル』効果をかけて、3Dの棒グラフを作ってみました。

 

まずはAIダウンロード(344KB)

【ステップ1】棒グラフを作る

新規ドキュメント作成『基本RGB、サイズ:800px × 600px、方向:横組』

Bar_graph-1.jpg

ツールパレット>グラフツール>棒グラフツール(J)を選択。

Bar_graph-2.jpg

キャンバスをクリック>グラフ『幅:400px、高さ:300px』を選択。

Bar_graph-3.jpg

グラフの数値を入力する欄が出ます。
左上から適当な数値を入力し、下の画像のように右上の完了ボタンをクリックします。

【今回の入力数値】28、92、148、50

Bar_graph-4.jpg

初期設定は、モノクロの棒グラフが作成されます。(レイヤー名:Graphs)

Bar_graph-5.jpg

目盛を作成する時に同じ表を再び使うので、キャンバスの外にコピーを作成します。
(編集>コピー+ペースト)

Bar_graph-6.jpg

キャンバス内の棒グラフを選択>オブジェクト>グループ解除

Bar_graph-7.jpg

下の画像のように警告ダイアログが出ます>OK

Bar_graph-8.jpg

目盛を消去し、棒グラフを見やすいようにグレーの単色で塗りつぶします。(黒:20%)

Bar_graph-9.jpg

効果>3D>押し出しベベルを選択。下の画像のように設定します。

Bar_graph-10.jpg
Bar_graph-11.jpg

オブジェクト>アピアランスを分割

Bar_graph-12.jpg

オブジェクト>グループ解除

Bar_graph-13.jpg

今回、イラストレーターに標準装備のパレットから4色のグラデーションを使います。

ウインドウ>スウォッチライブラリ>グラデーション>スウォッチ(明)

下の画像のように各棒グラフにグラデーションをかけます。

Bar_graph-14.jpg

(注)グラデーションの初期設定の角度は『0°』になっているので、『-90°』に変更し、上から下に濃くなるようにグラデーションを変更します。

Bar_graph-15.jpg
Bar_graph-16.jpg

【ステップ2】棒グラフに光沢をつける

下の図のようにペンツール(P)でパスを描きます。

Bar_graph-17.jpg

棒グラフの向かって前面の内、パスラインのかかっている面を選択し、
パスファインダ>『パスファインダ:分割』を選択。

Bar_graph-18.jpg

分割した面それぞれに、下の画像のように光沢が出るようにグラデーションスライダを調節します。

Bar_graph-19.jpg

下の図のようにペンツール(P)で棒グラフの縁に細いラインを加え、際を引き立てます。
(レイヤー名:Emboss)

Bar_graph-20.jpg

レイヤー"Graphs"の下に新規レイヤー『Shadow』を作り、4つの棒グラフの底辺と同じ面積で四角形を描きます。(黒:45%)

効果>ぼかし>ぼかし(ガウス)『8px』を選択。

Bar_graph-21.jpg
Bar_graph-22.jpg

【ステップ3】キラリと光をつける

楕円形ツールで正円を作成>効果>パスの変形>パンク・膨張『収縮〜 -75% 〜膨張』
(塗り:白)

Bar_graph-23.jpg

棒グラフの面の際にランダムに作成した光を配置します。(レイヤー名:Sparkle)

※光をより自然に表現するため、いくつかの光を選択>コピー + 背面へペースト(⌘B, ctrl+B)>効果>ぼかし>ぼかし(ガウス:4〜6px)を選択。
(光自体の『透明度』をランダムに変更すると、より良くなります)

Bar_graph-24.jpg

【ステップ4】目盛りを作る

レイヤー"Graphs"でバックアップを取ったグラフを再度コピー>オブジェクト>グループ解除>OK

Bar_graph-25.jpg

下画像のように、
目盛以外を消去>一番下のライン1本(実線)、その他のライン5本(点線)を作成。
(レイヤー名:Numbers)

※ラインの太さ【破線:5px】(上から3px→2.5px→2px→1.5px→1px)
※ラインの太さ【実線】(0.5px)
(注)一番下のラインの真ん中に短い縦ラインを入れておきます。(0.5px)

Bar_graph-26.jpg

レイヤー"Numbers"を全選択します。

オブジェクト>グループ(⌘+G, ctrl+G)>効果>3D>押し出し・ベベル
(重要)必ずオブジェクトのグループ化をしてください。

下の画像のように3D効果をかけます。

Bar_graph-27.jpg

棒グラフの中心に目盛の縦ラインが来るよう配置します。

Bar_graph-28.jpg

レイヤー"Graphs"を選択>透明『乗算:50%』

Bar_graph-29.jpg

好きな文字を作成します。
効果>3D>押し出し・ベベルを選択し、下の画像の数値にします。

Bar_graph-30.jpg

変形した文字をグラフの下に配置したら完成です。

Bar_graph-31.jpg

AIダウンロード(344KB)

和訳原文:"Turn a Boring Bar Graph into a 3D Masterpiece - Vectortuts+"

関連記事はこちら

UP↑

トラックバック(2)

このブログ記事を参照しているブログ一覧: Illustrator|きれいな3Dの棒グラフの作り方チュートリアル

このブログ記事に対するトラックバックURL: http://weska.xsrv.jp/mtos/mt-tb.cgi/189

せかいのすが - Suga Of The World - - 日本語マニュアル (2009年5月18日 18:30)

グラフ作成と言えばエクセルが思い浮かびますが、エクセルを持ってない、または開くのが面倒ということもあるかもしれません。というわけで... 続きを読む

コメントする

アーカイブ

2011年10月

            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          

プロフィール

ダイナマイト・ドラマー

名前:ダイナマイト・ドラマー
職業:Webデザイナー
好物:牛のたたきとビール