Tips3 地図を完成させてswf形式で出力する
パスオブジェクトを合成する
パスファインダの形状エリアに追加
「線」で描いた道路の輪郭が、「パスのアウトライン」でパスに変換された。この方法を使わず、「線」に太さを持たせたままでも道路として成り立つ。しかし、途中から太くなる道路を描きたい場合や、複雑な形状の交差点を描くときは、アウトライン化したほうが編集の自由度が高くなるのだ。描く地図の性質によって、それらを使い分けるといいだろう。また、画面10のように、パスオブジェクトを「パスファインダ」で合成する際、Illustrator 10からは元の状態を複合パスとして維持してくれるようになった。つまり、合成後も元のオブジェクトを編集できるわけだ。「分割・拡張」をクリックすると、Illustrator 9以前と同じように1つのパスオブジェクトに変換してくれる。後から編集しなおす必要がある場合は、「分割・拡張」しないようにしよう。
地図の背景、ランドマークとなる図形や文字が入力できたら地図の完成だ。後は、swf形式に出力してIllustratorを閉じ、GoLiveを起動しよう。
Tips4 GoLiveでHTMLを編集しよう
ドラッグ&ドロップで簡単編集
面倒な設定は必要なし
画面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において、複数のパスをどのように結合するか、あらかじめ結合方法が登録されたボタンを集めたパレットをパスファインダパレットという。
Adobe Illustrator 10 日本語版の主なスペック | |
製品名 | Adobe Illustrator 10 日本語版 |
---|---|
OS | Windows 98/Me/2000/XP |
CPU | PentiumII以上 |
メモリ | 128MB以上 |
HDD | 180MB以上 |