Illustratorは地図のような図形を描くのに便利だ。複雑な地図も簡単に作ることが可能だ。作成した地図はFlash形式で出力し、GoLiveでHTMLにはめ込んでみよう。拡大・縮小のできる便利な地図が完成する(月刊アスキー 2002年7月号より再掲)。
Tips1 下絵になる地図をトレースする
地図ソフトのデータをコピーして
Illustratorにリンクさせる
画面1 Adobe GoLiveで作った寿司屋のHTML。ここに掲載する地図をIllustratorで作ってみよう。出力する画像形式はFlashのswf形式だ。ちなみに、寿司屋の店名やロゴマークもIllustratorで描いている。 |
「仕事に使えるグラフィックス入門 第3回」(from 月刊アスキー)。写真をクリックすると当該記事に移動します。 | 「Adobe Illustrator 10 日本語版」レビュー(ASCII24 Reviewオリジナル)。 |
会社や店舗の地図は、企業のサイン、つまり標識や記号の一部だと小生は考えている。つまり、地図もCI(Corporate Identity)の一環だと思う。だから、自分の会社やお店の地図を作るのなら、その企業の特性が一目でわかるものにするべきだろう。というわけで、今回はサインとして優れた地図の描き方を紹介しよう。
例にあげた地図(画面2)は、実在する寿司店のもので、小生が以前に作成した出前用メニューに掲載したものだ。その制作過程を説明しながら、今回はWeb用にFlashのswf形式に出力し、Adobe GoLiveを使ってHTMLを作成してみよう(画面1)。
画面2 Illustratorで描いた寿司屋の地図。バックの魚の絵がボケているのは、Illustrator9以降に搭載されている「効果」の「ぼかし(ガウス)」機能を使っている。 |
せっかくベクトル描画ツールであるIllustratorを使って地図を描くのだから、保存形式はベクタデータのswf形式にするのがおすすめだ。GIFやJPEGは画像の拡大・縮小時にどうしても画質が劣化するが、swf形式にはそれがない。これがベクタデータのいいところだ。地図データをHTMLにレイアウトする際、他のオブジェクトとのバランスを考えて、どのようなサイズにも簡単に変更できる。
実際に画面2の地図を描き始める前に、準備として、まず地図の画像データを用意しなければならない。紙の地図をスキャナでスキャンしてもいいが、地図ソフトを持っているのなら、それからコピーするのもいいだろう。ここではインクリメントPの「MapFan.net」(画面3)を使ってみた。MapFan.netの専用ビューアーを使って地図データを表示したら、キーボードの[Alt]+[PrtSc]キーを押すと、表示されている地図データがクリップボードにコピーされる。次にAdobe Photoshopを起動して「新規」ファイルを開き、[ctrl]+[v]キーを押すとクリップボードにコピーした地図データがペーストされる(画面4)。それに適当な名前を付けて保存すれば、準備は完了だ。
画面3 今回、下絵に使う地図は、インクリメントPのMapFan.netを使った。描きたい地図を表示させ、[Alt]+[PrtSc]キーを押す。これで地図ウィンドウがクリップボードにコピーされる。 |
Tips2 線だけで簡単に道路を描く
はじめは「線」だけで道路を描く
道路全体をデフォルメする
地図を描くときのポイントは、初めから道路の輪郭を描こうとしないことだ。まず、画面6のように道路を「線」で大雑把に描く。また実際の道路のように複雑な「線」にしないこと。道路をどこまで描くかを考えて、デフォルメしながら直線で描くことが大切だ。そして、それがどんな形に見えるかをイメージしてみる。サインとしての地図を描くためには、ここが最も重要なポイントだ。ここでは寿司店の地図を描くわけで、寿司店に関連する何かに見えないかを考える。今回の場合、道路が魚の骨に見えてきたので、地図全体を魚に見立てることにする。ここまでくれば地図は完成したも同然だ。あとは、道路の「線」の太さ(画面8)や長さを調整して、画面9の手順でアウトライン化する。
仕事に役立つグラフィックス用語
─その1─
- ■ Flash、swf形式
- Flashは、Macromediaが開発したWeb用アニメーション作成ソフト。そのデータ形式をswf形式と呼ぶ。Illustratorと同じベクタデータなので、拡大・縮小による画像の劣化がない。swfファイルをWebブラウザで表示するには、Flashプラグインが必要になる。
- ■ Adobe GoLive
- Adobeが販売しているWebオーサリングソフト。ほとんどの操作をオブジェクトアイコンのドラッグ&ドロップだけでできる。グリッドと呼ばれる独自のテーブルを使うことで、ページデザインが容易に行える。
- ■ HTML
- Hyper Text Markup Languageの略。Webページを記述する書式のことだ。この書式で作られたファイルをWebブラウザで読むと、Webページとして表示できる。単語、文章、画像にリンクを持たせ、クリックすることで関連項目を表示できるのが特徴。Adobe GoLiveはHTMLファイルをオブジェクトアイコンのドラッグ&ドロップで作成できる。
- ■ CI(Corporate Identity)
- 企業のアイデンティティ。つまり企業イメージ統合戦略のことをいう。
- ■ ベクトル描画ツール
- ドローソフトのこと。2点間を結ぶ線を使って図形を描くグラフィックソフト。線は直線だけではなく、2つの点に与えられた制御機能によって、滑らかな曲線を描くことができる。この曲線をベジェ曲線と呼ぶ。線を閉じることによってできた面を任意の色で塗りつぶしたり、線そのものに太さや色の属性を持たせることもできる。代表的なドローソフトに、Illustratorがある。
- ■ JPEG
- 静止画像を1/10~1/100に圧縮する技術。または、その技術を使った画像フォーマットのこと。Joint Photographic Coding Experts Groupという団体が制定した。JPEGは写真のようなフルカラーの画像を効率よく圧縮できる画像圧縮方式で、Webページの写真画像によく使われている。
- ■ GIF
- Graphics Interchange Formatの略。256色までのビットマップ画像のフォーマットの一種で、Webページの画像によく使われている。イラストのようなグラデーションの少ない画像を圧縮するのに効果的だ。
- ■ MapFan.net
- MapFan.netは、インターネットに接続されていさえすれば、1年間3200円でいつでもどこでも最新の全国地図が使えるサービスだ。