地図の制作
企業やお店のホームページにはなくてはならない重要な物の一つが地図です。
Google Mapを使ってURLを貼り付ける方法などもありますが、ホームページの見え方に合わせて地図をデザインすることでイメージの統一に繋がります。
地図の見せ方は、いくつかのパターンがあります。
地元の方なら分かる近隣を示す地図。それより広範囲なエリアを含めた広域地図。そして、それら2つを組み合わせた地図。
観光地案内などイラストを多用した楽しいイラストマップなどもありますね。
ここでは、新宿から都庁までの中域タイプの地図の制作を解説をします。
画面のキャプチャ
Google Mapを開いて周辺図を検索します。
ここでは、都庁を中心にしますので「東京都新宿区西新宿２丁目８ 東京都庁」と検索してみます。
http://maps.google.co.jp/maps?hl=ja&ie=UTF-8&tab=wl
地図の制作
Alt+Print Screenで画面をキャプチャします。
Windowsの場合、画面のキャプチャ（スクリーンショット）には、2つの方法があります。
| 画面全体 | Print Screen |
| 現在のアクティブなウィンドウのみ | Alt+Print Screen |
下絵の保存
Photoshopを起動し、ファイルから新規をクリックします。
「プリセット」が「クリップボード」になっている事を確認し、OKをクリックします。
[編集メニュー]より、[ペースト]をクリックします。
先ほどコピーしたウィンドウ画像がペーストされます。
切り抜きツールを選択し、「幅」「高さ」「解像度」の項目が空欄になっている事を確認します。
数値が記入されている場合は、クリアボタンをクリックして削除します。
切り抜きツールで地図が表示されている部分だけを選択し、○ボタンをクリックします。
この画像は下絵として使うだけなので神経質になる必要は有りません。
先ほど選択した大きさで切り抜かれました。
ファイルより別名で保存を選択し、任意の場所に任意の名前で保存します。
下絵の配置
「シンボルマーク（アイコン）の制作」で行ったようにIllustratorを起動し、先ほどPhotoshopで保存したファイルを選択し、下絵として配置します。
下絵のトレース
「シンボルマーク（アイコン）の制作」で行ったようにIllustratorで、新規レイヤーの作成を行い、そこに駅や必要な道や線路をトレースします。
線にアウトラインを付ける
次に、すべての道を選択ツールで選択します。
今回は、道の端を丸形先端に設定します。線ウィンドウの丸形先端アイコンをクリックします。
表示されていない場合は右端のタブをクリックし、「オプションを表示」をクリックします。ついでに、道の色（線）も変更します。
線で書かれた道を線で囲まれた面（塗り）に変換するため、オブジェクトのパスのパスのアウトラインをクリックします。
こうすることで、道にもアウトラインを付ける事ができるようになります。
道を合体させるために、パスファインダウィンドウで形状エリアに追加アイコンをクリックします。
そのあと、拡張アイコンをクリックします。
パスファインダウィンドウが表示されていない場合は、ウィンドウよりパスファインダをクリックします。
線に黒色を設定し、アウトラインを作成します。
線にパターンを付ける
線路は白と黒のストライプなので、専用の模様を作成します。
長方形ツールを選択します。
隣り合った同じ大きさの長方形を作成します。作業は、分かりやすいようにズームしています。
それぞれの塗りは黒と白で、線は黒に設定します。
2つを同時に選択し、ブラシウィンドウにドラッグ＆ドロップします。
ブラシウィンドウが表示されていない場合は、ウィンドウのブラシを選択します。
新規ブラシというウィンドウが表示されますので、パターンブラシにチェックを入れOKをクリックします。
パターンブラシオプションというウィンドウが表示されるので、何も変更せずにOKをクリックします。
ブラシウィンドウに、線路のような画像が追加されました。
次に、すべての線路を選択ツールで選択します。
ブラシウィンドウに追加された線路のような画像をクリックして、線にパターン適用します。見た目にも線路っぽい画像が作られました。
オブジェクトの削除
下絵を一時的に非表示にしてみます。不要なオブジェクトがあるので選択して削除しましょう。
選択ツールで選択して、Deleteで削除します。
地図を仕上げる
「シンボルマーク（アイコン）の制作」で行ったようにオブジェクトの重なり順や色の変更などを繰り返して仕上げます。
これで、「地図の制作」は終了です。
