このページの本文へ

前へ 1 2 次へ

仕事に使えるグラフィックス入門

仕事に使えるグラフィックス入門

2003年02月22日 01時49分更新

文● 薮田 織也

  • この記事をはてなブックマークに追加
  • 本文印刷

仕事に使えるグラフィックス入門

Illustratorは地図のような図形を描くのに便利だ。複雑な地図も簡単に作ることが可能だ。作成した地図はFlash形式で出力し、GoLiveでHTMLにはめ込んでみよう。拡大・縮小のできる便利な地図が完成する(月刊アスキー 2002年7月号より再掲)。

Tips1 下絵になる地図をトレースする

地図ソフトのデータをコピーして
Illustratorにリンクさせる

サンプルHTML
画面1 Adobe GoLiveで作った寿司屋のHTML。ここに掲載する地図をIllustratorで作ってみよう。出力する画像形式はFlashのswf形式だ。ちなみに、寿司屋の店名やロゴマークもIllustratorで描いている。
仕事に使えるグラフィックス入門 Adobe Illustrator 10 日本語版
「仕事に使えるグラフィックス入門 第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の手順でアウトライン化する。

Photoshopにペースト Illustratorで読み込み
画面4 Photoshopを起動して、「ファイル」→「新規」をクリック。クリップボードにコピーされた画像のサイズが自動的に指定されているので、そのまま「OK」ボタンをクリック。[ctrl]+[v]キーでペーストする。名前を付けて保存しておく。画面5 Illustratorを起動して新規ファイルを開き、画面4で保存したファイルを「ファイル」→「配置」でリンクとして読み込む。地図画像を描きたい方向に回転させ、不透明度を50%程度に下げておく。
ペンツール 魚の骨
画面6 地図をリンクしたレイヤーの上に新規レイヤーを作り、そこに「ペンツール」で道路を描く。正確な道路ではなく、ある程度デフォルメして描くとよい。その際、道路がどんな形に見えるかイメージする。画面7 道路が魚の骨に見えてきたので、地図の背景になる魚の形を「ペンツール」で描く。その形に合わせるように、道路の線の長さや角度を調整する。
線種の変更 アウトライン
画面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円でいつでもどこでも最新の全国地図が使えるサービスだ。

前へ 1 2 次へ

カテゴリートップへ

注目ニュース

ASCII倶楽部

プレミアムPC試用レポート

ピックアップ

ASCII.jp RSS2.0 配信中

ASCII.jpメール デジタルMac/iPodマガジン