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