このページの本文へ

前へ 1 2 次へ

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

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

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

文● 薮田 織也

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

Tips3 地図を完成させてswf形式で出力する

パスオブジェクトを合成する
パスファインダの形状エリアに追加

パスオブジェクトに変換
画面10 線だった道路が画面のようにパスオブジェクトに変換された。続いて「パスファインダ」パレットの「形状エリアに追加」、「分割・拡張」をクリックすると、道路全体を1つのパスオブジェクトに変換できる。
ぼかし効果
画面11 地図の背景に描いた魚のパスオブジェクトの「塗り」に色をつけ、「効果」→「ぼかし」→「ぼかし(ガウス)」でぼかし効果を与える。道路の「塗り」を白に設定する。
仕上げ
画面12 最上部に新規レイヤーを作成して、目的地やランドマーク、それぞれの文字を作成する。ランドマークは作りすぎないことがポイント。幹線道路がある場合は、道路名を記載しておこう。目的地はお店のロゴマークを使うとベスト。

 「線」で描いた道路の輪郭が、「パスのアウトライン」でパスに変換された。この方法を使わず、「線」に太さを持たせたままでも道路として成り立つ。しかし、途中から太くなる道路を描きたい場合や、複雑な形状の交差点を描くときは、アウトライン化したほうが編集の自由度が高くなるのだ。描く地図の性質によって、それらを使い分けるといいだろう。また、画面10のように、パスオブジェクトを「パスファインダ」で合成する際、Illustrator 10からは元の状態を複合パスとして維持してくれるようになった。つまり、合成後も元のオブジェクトを編集できるわけだ。「分割・拡張」をクリックすると、Illustrator 9以前と同じように1つのパスオブジェクトに変換してくれる。後から編集しなおす必要がある場合は、「分割・拡張」しないようにしよう。

 地図の背景、ランドマークとなる図形や文字が入力できたら地図の完成だ。後は、swf形式に出力してIllustratorを閉じ、GoLiveを起動しよう。



データ書き出し Flash形式での保存 HTMLファイル完成
画面13 描いた地図をIllustratorの形式で一旦保存したら、次にswf形式で保存するために「ファイル」→「データ書き出し」をクリックする。画面14 「ファイルの種類」で「Macromedia Flash」を選んで、「保存」をクリック。「形式オプション」では「書き出し形式」で「AIファイルをSWFファイルに変換」を選び、「HTMLを生成」にチェックを付けて「OK」をクリック。画面15 画面14で指定したフォルダにHTMLファイルと、swfファイルの2つが作成される。HTMLファイルを開いて、地図画像が表示されるかを確認しておこう。

Tips4 GoLiveでHTMLを編集しよう

ドラッグ&ドロップで簡単編集
面倒な設定は必要なし

GoLive swf形式
画面16 GoLiveを起動して既存のHTMLを開いておく。次に画面15で作った地図のHTMLを開いて、swf形式の画像を選択し、コピーする。画面17 既存のHTML上にswf地図画像をペーストする。他のオブジェクトとのバランスを考え、地図画像のサイズを変更する。swf形式の画像は、拡大縮小しても画質が劣化しない。

 Illustratorでswfを出力する際、画面14で「HTMLを生成」にチェックを付けておけば、swf形式のファイルを正しく表示する設定が記述されたHTMLファイルが自動的に生成される。(画面15)このHTMLファイルをGoLiveで読み込んで、表示されたswfオブジェクトを既存のHTMLファイル、例えば店舗の紹介がされているHTMLファイルにドラッグ&ドロップするだけで、簡単にswfオブジェクトを移植できる。(画面16)移植した後は、他のオブジェクトとのバランスを考えて、swfオブジェクトのサイズをマウスで調整してやればいい(画面17)。

 swf形式に変換した地図は、Webブラウザ上でも拡大縮小ができる。画面18、19のように、Webブラウザで表示された地図を右クリックして「拡大」を選ぶと、外枠はオブジェクトのサイズまでだが、その中で地図が何段階かに拡大できる。拡大された地図は、マウスでドラッグすることも可能だ。限られた領域内で全体と詳細を見比べる必要のある地図のような画像にとって、swf形式はうってつけなのである。

見る人が楽しめる地図を描こう
デフォルメを楽しむ

拡大コマンド 拡大表示
画面18 地図を張り込んだHTMLをアップしてWebブラウザで表示する。地図の上で右クリックしてコンテキストメニューから「拡大」を選んでみよう。画面19 地図が拡大表示され、マウスでドラッグできるはずだ。小さくでよく見えない部分も、拡大することで確認できる。swf形式だとこんな便利な使い方もできる。

 Illustratorは、精密な図形を描くことが得意なソフトだが、より独創的で印象的な図形を描くことも得意だ。画面20のような思いっきりデフォルメされた地図も、線にさまざまな効果を与えることのできる「アートブラシ」という機能を使えば、ペンツールで線をひいていくだけで、いとも簡単に描くことができるのだ。あとは、どんな風に地図をデフォルメするかを楽しんでもらいたい。ただし、見る人が楽しみながらも、目的地まできちんとたどり着けるようなデフォルメを心がける必要があるだろう。

ブラシパレット
画面20 Illustratorのブラシ機能を使えば、「ブラシ」パレットでブラシサンプルを選び、「ペンツール」で道路を描くだけで、手書き風の地図を簡単に描くこともできる。

次回予告

 次回からは、FlashやQuickTime MovieといったWeb向けアニメーションを作成できるツール「Adobe LiveMotion」などを利用してのWeb作成・画像編集テクニックを紹介する。

仕事に役立つグラフィックス用語

─その2─
■ [Alt]+[PrtSc]
[Alt]、[PrtSc]ともにキーボードにあるキーの種類。[PrtSc]は[Print Screen]や[PrtScn]とも表記される。[PrtSc]を押すと、現在ディスプレイに表示されているものすべてが1枚のビットマップ画像としてクリップボードにコピーされる。[Alt]キーを押しながら[PrtSc]を押すと、現在アクティブ状態のウィンドウだけがクリップボードにコピーされる。
■ クリップボード
複数のアプリケーションがデータを交換するために利用するメモリ領域のこと。コピー&ペーストは、クリップボードを使うことで実現する。1度クリップボードにコピーされたデータは、再度異なるデータがクリップボードにコピーされるまで残っているので、ペーストは何度でも行える。
■ ぼかし(ガウス)
ぼかしフィルタの一種。選択範囲を指定した量だけぼかすことができる。IllustratorやPhotoshopでいうガウスとは、「ピクセルに加重平均を適用するときに生成されるベルの形をした曲線」。通常の「ぼかし」フィルタに比べて、ぼかし度合いを数値で設定できるものだと思えばいいだろう。
■ デフォルメ
フランス語のdeformerが語源。造形美術などで、対象の形を意識的に変形させることをいう。ここでは、目的のために余計なものを省いたり、形を単純化することでわかりやすいものにすることを指す。
■ アウトライン
いわゆる輪郭のこと。Illustratorで描く線には本来太さという概念はないが、それに線幅という属性を持たせると太さを持つことができる。線幅を持った線をアウトライン化すると、線の太さを輪郭としてパスオブジェクトに変換できる。
■ 不透明度
不透明度とは、オブジェクトを上下に重ねた場合、上のオブジェクトにおいて下のオブジェクトが透ける度合いを示す。不透明度100%は透明度0%。不透明度0%は透明度100%のことだ。
■ パスファインダ
Illustratorにおいて、複数のパスをどのように結合するか、あらかじめ結合方法が登録されたボタンを集めたパレットをパスファインダパレットという。

記事制作協力

宮澤篤司氏 http://www.a2shi.tv/

SantaCroche http://www.santacroche.co.jp/
Adobe Illustrator 10 日本語版の主なスペック
製品名 Adobe Illustrator 10 日本語版
OS Windows 98/Me/2000/XP
CPU PentiumII以上
メモリ 128MB以上
HDD 180MB以上

前へ 1 2 次へ

カテゴリートップへ

注目ニュース

ASCII倶楽部

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

ピックアップ

ASCII.jp RSS2.0 配信中

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