地域図を描く − 概要
|
ホームページ作成において場所の説明、アクセス方法説明などで地図を掲載する場合があります。 地図にも広域図、地域図などいろいろありますが、市販の地図、WEB上での地図の使用は著作権の問題もあり簡単に掲載できない場合があります。
この『地域図を描く』ページでは、選択ツール、塗りつぶしツールなどを使用し直線的な地域図(詳細図)を書く操作を説明します。
■ 地域図イメージ ■
![]() |
地域図イメージ |
地域図を描く − 操作方法
1. 白紙ファイルの作成 |
|
![]() 白紙ファイルの作成 |
白紙ファイルを作成します。 『メニューバー』 から 『ファイル』 → 『新規』 → 『白紙ファイル』 を選択します。 白紙ファイルの 『新規』 ダイアログボックスが表示されます。 幅、高さにサイズを指定します。 例では、幅1000px 高さ1000pxにしています。 |
![]() |
|
2. 白紙ファイルの作成 − 背景を塗る |
|
![]() 塗りつぶしツールで背景を塗る |
背景を塗りつぶします。 『ツールボックス 』の 『塗りつぶしツール 』を選択し、 さらに 『描画色を設定』 にて背景を塗りつぶし色を設定します。 色の設定が終了したら、白紙部分にポインターを移動させクリックします。 これで設定した色で背景が変わります。 |
![]() |
|
3. 地域図を描く − 鉄道を描く |
|
![]() 長方形選択ツールで鉄道を描く |
鉄道の線路を描きます。 『長方形選択ツール 』と 『塗りつぶしツール』 にて鉄道の線路を描きます。 |
写真の番号@〜Fは、 説明文の番号に対応します。
まず線路部分を描きます。
@ 『ツールボックス』 から 『長方形選択ツール』 を選択します。
A 『ツールボックス』 から 『描画色を設定』を選択します。
表示された『カラーピッカー』 にて描画色 『黒』を設定します。
描画色設定については、 『 カラー設定 (カラーピッカー) 』 を参照ください。
B 『長方形選択ツール』にて線路部分を範囲選択します。
例では、上から下まで縦長の長方形で範囲選択します。
C 『塗りつぶしツール』にて範囲選択部分を 描画色 『黒』で塗りつぶします。
範囲選択内にポインターを移動しクリックします。これで黒に塗りつぶされます。
次に線路の白の部分描きます。
D 『描画色を設定』 で描画色を 『黒』 から 『白』 に変更します。
描画色設定については、 『 カラー設定 (カラーピッカー) 』 を参照ください。
E 『長方形選択ツール』にて線路の中 『白い』 部分を範囲選択します。
F 『塗りつぶしツール』にて範囲選択部分(線路の白い部分)を 描画色 『白』 で塗りつぶします。
G E〜Fを繰り返します。
![]() |
|
4. 地域図を描く − 駅を描く |
|
![]() 長方形選択ツールで駅を描く |
鉄道の駅を描きます。 『長方形選択ツール』 と 『塗りつぶしツール 』 にて鉄道の駅を描きます。 |
写真の番号@〜Gは、 説明文の番号に対応します。
駅の描き方は、線路部分と同じです。
まず駅部分を 『黒』 で塗つぶします。
@ 『ツールボックス』 から 『長方形選択ツール』 を選択します。
A 『ツールボックス』 から 『描画色を設定』 を選択します。
表示された『カラーピッカー』 にて描画色 『黒』 を設定します。
描画色設定については、 『 カラー設定 (カラーピッカー) 』 を参照ください。
B 『長方形選択ツール』 にて駅部分を範囲選択します。
例では、縦長の長方形で範囲選択します。
C 『塗りつぶしツール』 にて範囲選択部分を 描画色 『黒』 で塗りつぶします。
範囲選択内にポインターを移動しクリックします。これで黒に塗りつぶされます。
次に白の部分描きます。
D 『描画色を設定』 で描画色を 『黒』 から 『白』 に変更します。
描画色設定については、 『 カラー設定 (カラーピッカー) 』 を参照ください。
E 『長方形選択ツール』 にて駅の 『白い』 部分を範囲選択します。
F 『塗りつぶしツール』 にて範囲選択部分(駅の白い部分)を 描画色 『白』 で塗りつぶします。
駅名を書きます。
G 『ツールボックス』 の 『縦書き文字ツール』 を選択します。
・横書き文字ツール』 アイコンの右下をクリックし続けると 『縦書き文字ツール』 が表示されます。
・文字フォント、サイズを設定し、駅名を書きます。
文字の入力については、 『 文字の入力 (作成) 』 を参照ください。
![]() |
|
5. 地域図を描く − 道路を描く |
|
![]() 長方形選択ツールにて道路を描く |
道路を描きます。 『長方形選択ツール』、 『選択範囲の境界線を描く』、 『消しゴムツール』 などで道路を描きます。 |
まず道路を描きます。
@ 『ツールボックス』 から 『長方形選択ツール』 を選択します。
A 道路の部分を 『長方形選択ツール』にて範囲選択します。
B 『メニューバー』 から 『編集』 → 『選択範囲の境界線を描く』を選択します。
『境界線』 ダイアログが表示されます。
幅:2px カラー:黒 を設定し、OKをクリックします。
OKをクリックした時点で境界線(点線)部分が設定したカラーで描かれます。
例では、黒になります。
C 交差点部分の道路には、 『黒い線』 が描かれています。 この不要な黒い線は 『消しゴムツール』 で消します。
消す時は、消しゴムのサイズを小さく、表示倍率を大きくするときれいに消すことができます。
D 斜めの道路は、 『ツールボックス』 から 『ラインツール』 を選択し、開始点から終了点までのドラッグで描きます。
『ラインツール』 は、線を書く毎にレイヤーが作成されますので、消しゴムツールで消す時には該当するレイヤーをクリックし、アクティブにしておき線を消します。
![]() |
|
6. 地域図を描く − 建物を描く |
|
![]() 長方形選択ツールにて建物を描く |
建物、川を描きます。 『長方形選択ツール』、『選択範囲の境界線を描く』、『消しゴムツール』などで建物、川を描きます。 基本的には道路と同じ方法で描きます。 建物、川は、必要に応じて色を塗りますが、これは『塗りつぶしツール』を使用します。 なお色を塗った後に文字を書きます。最初に文字を書いた場合には、色で塗りつぶせない場合があります。 |
![]() |
|
7. 地域図を描く − 完成イメージ |
|
![]() 地域図 完成イメージ |
詳細地域図の完成イメージです。 |
8. 画像ファイルの保存 ファイルの保存は、「 ファイルを保存 」を参照ください。 この『地域図を描く』ではレイヤーを使用しています。 保存の時にファイル形式を、JPEG形式(サイト掲載用)以外に Photoshop形式(*.PSD)で保存しておくと レイヤーで作成した内容を後で変更することができます。 |