GIMPで描く地図

企業サイトなんかを作っていると、会社情報として地図をつくる必要がでてくる。以下は、自分なりに右往左往した結果。右往左往した先は、就職活動サイトに登録している中小企業のページ。大手企業の子会社など、サイトのデザイン自体を親会社のものを流用して作ってたりするのだけれど、地図は流用の仕様がないようで、かなり悪いデザインのものが多数見受けられたが、当然良いものもあった。それらを参考にした結果が以下、というわけ。

・道路、線路
Googleマップをスクリーンショットとして撮り、これをパスでトレースする。スクリーンショット自体を、「選択エディタ」からすべてパス化することができるが、手動で必要な道をパスで作っていったほうが速い。道路にしろ、線路にしろ、パスを作ったのち、選択したレイヤーに対してストローク描画して、描いていく。横幅400px程度の画像を作るとして、線路は7ptの黒でストローク描画し、その後に5.5ptの白の破線をストローク描画する。このときの破線は、「パスをストローク描画」-「線種」から「破線パターン」を設定して行なう。「既定の破線」から「中破線」を選択すると良い。

道路は、道路自体を描画せず、道じゃない部分に色をつけ、道を白ヌキにする方法にした。これだとあまり失敗せずに、ある程度のレベルの一定したデザインが出来る。方法としては、道路のパスを黒でストローク描画しこのレイヤを、『道じゃない部分のレイヤを逆マスク(白(完全不透明))としたときのレイヤーマスク』として貼り付ける。これにより道じゃない部分のレイヤに対して、道の部分を透明化させるというやり方です。道じゃない部分は単純な色、例えば黒一色で作って、後から透明度を調整して背景色白と合成して、色の灰色の具合を調整していく、というやり方がカンタンです。

・建物
目的地の建物は、絵筆11px程度の円を1クリックして、円を描画する。そのほかの建物は、選択領域の描画で四角を描画して、それを回転して作っていく。建物を説明する文字は、アンチエイリアスを適用させない。これは、小さな文字ほどアンチエイリアスを適用すると、文字が潰れて見えにくくなる、というのがその理由。目的地の文字を、装飾した上で大きい文字にするならば、アンチエイリアスを適用すべき。

今のところはこんな感じ。Googleマップを会社情報用の地図に変換するようなScript-Fuがあると、かなり便利かも知れないです。