おはようございます。
山田秀平さんの3ヵ月でWEBデザイナーになるスクール「DLL」にて、課題（ワークブック）に取り組んでいるkaedeです。
絶対3ヵ月では無理だわｗと思っているWEBデザイン初心者であります。
「3ヵ月」という枠に捕らわれないよう、そして辛くならないように、のんびりやっていきましょう。
今回のお題は「illustratorで好きな場所の地図を描いてみよう！」です。
illustratorでの地図の作成方法
完成形はこちらです。
この地図は長野県伊那市高遠町にある、「満月」という中華料理屋さんを示しています。
ここの中華めっちゃ美味しいからおススメです。
私は中華料理あんまり好きでないんですが、ここは美味しくてまた食べたいと思っています。
店内も高級感漂うおしゃれな空間でデートにもおススメですよ。
illustratorで新規ドキュメントを作成します。
WEBデザインなので「WEB」のタグから作成します。
Googleマップのスクリーンショットを撮ります。
Googleマップでイラストにしたい場所を表示します。
スクリーンショットを撮るには、Windowsのキーボードだと「Print Screen」を押します。
略して「PrtSc」となっている場合もあります。（私のはこれです。）
一回ポンっと押すだけでOKです。
Macのキーボードでは「shift」＋「command」＋「3」を同時に押します。
スクリーンショットで撮った画像をillustratorに張り付ける
スクリーンショットを撮ったらそのままillustratorに移動して、「ctrl」＋「ｖ」を押します。
Macだと「command」＋「ｖ」です。
するとアートボード上にスクショ画像が出てきます。
ただ、画像サイズがかなり大きくなっていると思うので「拡大・縮小ツール（ｓ）」で分かりやすいサイズまで縮小しましょう。
「拡大・縮小ツール（ｓ）」を選択して、「Enter」を押して数値を入力して小さくします。
「90％」か「80％」くらいで様子をみながら縮小させます。
Googleマップを透けさせます（不透明度を下げます）
illustratorの上の方に「不透明度」があるので「50％」に下げます。
こうすることでイラストを描く時に作業しやすくなります。
イラストを描く用のレイヤーを新規追加します。
薄くしたGoogleマップはクリックしてロックを掛けておきましょう。
ダブルクリックでレイヤーの名前を変えておくと、分かりやすいです。
まずは白黒グレーで描いていきます
色は後でつけます。
イラストを描く用のレイヤーを選択します。
薄くなったGoogleマップの上から、ペンツール（ｐ）や長方形ツール（ｍ）で「道路」や「川」をなぞっていきます。
今回はなんか直線がカッコいいかなと思って、あえて曲線は使いませんでした。
あんまり関係ない細い道は描きません。
「分かりやすさ」を重視します。
国道や県道は線を太めにするなどして、メリハリをつけます。
目安となる建物、道路や川の名前をテキストツール（ｔ）で入れていきます。
「HERE!」は長方形ツール（ｍ）と多角形ツールで三角を作って組み合わせました。
ペンツールでもできそうですね。
Googleマップを非表示にしてイラストだけの状態にしましょう。
Googleマップのレイヤーの「目」のマークをクリックすると非表示にできます。
色を付けます。基本的に3色か4色だけにしましょう。
それ以上色を使うと、まとまりのないデザインになってしまいます。
お店のところだけ目立つように赤にしたら完成です！
頑張りましたね！
線を変えてあげても良い感じ！
画像として保存しましょう。
「ファイル」→「書き出し」→「書き出し形式」を選びます。
「ファイルの種類」を使い勝手のいい「JPEG」にして保存しましょう。
ということで今回は以上です。
地図とか難しいわ！って思いましたが、やってみると楽しいですねこれ！
ちょうど本業でも「地図描いて」と言われたので、また練習を兼ねて描いてみます。
最後までお読みいただきありがとうございました。
また次回！
