ほっせかい。

「法施(人に伝えること)」+「世界」で「ほっせかい」です。illustratorとPhotoshop初心者のシングルマザーが、WEBデザイナースクール「DLL」にてゼロからデザインを学んでいます。WEBデザインのオンラインスクールに入ろうか迷っている方、どんな内容を勉強するのか知りたい方等…。少しでもあなたの役に立ちますように。

illustratorについてです 初心者がデザインを学ぶ

illustratorで地図を作成してみよう。オンラインスクール「DLL」のワークブック!

投稿日:

おはようございます。

山田秀平さんの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」にして保存しましょう。

 

 

ということで今回は以上です。

地図とか難しいわ!って思いましたが、やってみると楽しいですねこれ!

 

ちょうど本業でも「地図描いて」と言われたので、また練習を兼ねて描いてみます。

最後までお読みいただきありがとうございました。

また次回!

 

 

 

 

-illustratorについてです, 初心者がデザインを学ぶ

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

【紫色について】個性を出すならこの色!

おはようございます。 今日から9月ですね! セプテンバーですね! 9月にカラオケに行った日には、RADWIMPSの「セプテンバーさん」を歌わずにはいられない私です。 では今回は紫・バイオレットのイメー …

WEBデザイナースクール「DLL」を受講してから1年が経ってしまったのだが

皆さま、ご無沙汰しております。 kaedeです。   ずっとブログも更新できておらず…。 それなのに多くのアクセスと応援をいただき、心から感謝申し上げます。 誠にありがとうございます。 &n …

【illustrator】グラデーションツールの使い方とグラデーションスライダーの使い方

おはようございます。 3ヵ月で稼げるWEBデザイナーになるスクールです。 授業は10日目、でしたっけ。(記憶があいまいです) さっそく進めていきましょう。 illustratorのグラデーションツール …

【Photoshop】単体プランとフォトプランの違いとは

私は今、かの有名なデザインソフト「Photoshop」をインストール(購入)しようとしています。 しかし、 Photoshopには単体プラン(月額2,480円)とフォトプラン(月額980円)があるんで …

WEBデザイナースクール「DLL」のワークブック。ランディングページの作成実践編!

おはようございます。 現在、WEBデザイナースクール「DLL」にて最後のワークブックに取り組んでいるわたくしです。 11/1にDLLに送った、ランディングページのファーストビューと共感部を送りました。 …