レトロ感を楽しみながら学ぶ デザイン素材づくり講座 - miroom

レトロ感を楽しみながら学ぶ デザイン素材づくり講座

Illustratorを使って、レトロな雰囲気のあるさまざまなフレームの作り方を学びます。

Happy Afro先生|ビジネス|Webデザイン

Happy Afro先生

ビジネス

Webデザイン

PDF資料あり

136

学習内容

■拡張子について
■ワークスペースの設定について
■フォントをダウンロードする方法
■使用ツールの紹介
■llustratorの環境設定の方法
■様々な形のフレームの作り方
■色を決めるときのポイント
■文字の配置のコツ
■模様の作り方
■全体のバランスの調整方法
■アレンジのバリエーション
■装飾の入れ方

講座の紹介

こんにちは!

素材デザイナーのHappy Afroです。



この講座では、グラフィックツール「Adobe Illustrator」を使用して、レトロ風のフレームやちょっとしたパーツを作る方法をレクチャーします。



懐かしくて可愛くて、不思議な魅力を持つレトロデザイン。

そんなデザインを作りながら、バナー制作のテクニックを楽しく学んでいきましょう!

Illustratorの基本からマスター

いきなりデザインを作り始めるのはハードルが高いので、講座ではまずIllustratorの基本的な使い方を学びます。



「パソコンのソフトって、機能が多すぎてよくわからない……」

そんな不安を抱えている方も、ご安心ください。

講座で使用するツールを一気にまとめてご紹介しますが、それぞれの詳しい使い方については、実際にフレームを作っていく中で丁寧にお教えします。



まずは便利なツールがたくさんあるのを確認しながら、少しずつ操作に慣れていきましょう!

6種類の多彩なフレーム



基本を身につけたあとは、早速レトロフレームの制作に入ります。

さまざまな図形と講座のはじめに取り込んだレトロなフォントを組み合わせることで、様々なテクニックを習得することが出来ます。



背景の作り方から文字の配置まで、手順をひとつひとつ丁寧に解説しますよ。

すべて作り終える頃には、テクニックの幅が広がり、出来るようになることがぐっと広がっているのを実感できるはずです!



細部にこだわって完成度を高める

デザインは、細かい部分にこだわることで一段と引き立つもの。

ですので講座では、それぞれのフレームについて装飾や微調整の仕方などを徹底解説。



今回は「昭和レトロ感」がコンセプトですが、そのようなコンセプトを作り込むためのポイントもしっかり学ぶことができますよ!



デザインの基礎を身につけることで、フリー素材の販売や副業にも繋げられます。

レトロな雰囲気を味わいながら、楽しんで学んでいきましょう!

こんな方におすすめ!

✓レトロな雰囲気がお好きな方
✓自分でデザインを作れるようになりたい方
✓新しい趣味を見つけたい方


カリキュラム

Icon course curriculum 2全17回のレッスンで構成されています。

Icon course curriculum 1何度でも動画を見返すことができます。

LESSON
1

レトロなフォントを取り込もう

レトロなフォントを取り込もうのサムネイル

レトロ感を醸し出すうえで欠かせない要素のひとつである、文字のフォント。パソコンならインストールするだけで簡単に可愛らしいフォントが使えるようになります。手順を丁寧に解説するので、パソコンが苦手という方も安心してご覧ください!

〈このレッスンで学べること〉
■フォントの「拡張子」について
■やっておくと良い最初の設定について
■フォントをダウンロードして取り込む方法

  • オープニング

    00:00
  • はじめに

    00:20
  • 使用道具

    01:35
  • 拡張子について

    02:02
  • ワークスペースの設定

    04:59
  • フォントをダウンロードする方法

    07:09
  • さらに2種類のフォントをインストールする

    10:39
LESSON
2

ツールについて学ぼう

ツールについて学ぼうのサムネイル

続いて、今回の講座で使うツールを見ていきましょう!Illustratorには便利なツールがたくさんあり、それらを使いこなしていくことで思い思いのデザインが可能になるのです。具体的な使用方法はこの後のレッスンでお話しするので、ここではどんなツールがあるのかをまずは確認しておきましょう。

〈このレッスンで学べること〉
■選択ツールについて
■ペンツールについて
■文字ツールについて
■直線ツールについて
■長方形ツールについて
■ブラシツールについて
■回転ツールについて
■拡大・縮小ツールについて
■グラデーションツールについて
■スポイトツールについて
■ブレンドツールについて
■虫眼鏡ツール・手のひらツールについて
■カラーツールについて
■Illustratorの環境設定の方法

  • オープニング

    00:00
  • はじめに

    00:20
  • 選択ツール

    01:30
  • ペンツール

    03:53
  • 文字ツール

    04:54
  • 直線ツール

    05:41
  • 長方形ツール

    06:20
  • ブラシツール

    06:47
  • 回転ツール

    07:09
  • 拡大・縮小ツール

    08:21
  • グラデーションツール

    08:43
  • スポイトツール

    09:47
  • ブレンドツール

    10:28
  • 虫眼鏡ツール・手のひらツール

    11:21
  • カラーツール

    12:37
  • Illustratorの環境設定

    14:17
  • おわりに

    20:37
LESSON
3

レトロフレーム①-(1)

レトロフレーム①-(1)のサムネイル

フォントとツールを学んだところで、ここからはいよいよフレームの作成に入ります。簡単な四角形+ちょっとしたアレンジで、初心者の方にもレトロ風の素敵なデザインを作ることができますよ。習うよりも慣れるのが一番。Illustratorの操作に慣れるというのも兼ねて、作業していきましょう!

〈このレッスンで学べること〉
■四角いフレームの作り方
■色を決めるときのポイント
■文字の配置のコツ

  • オープニング

    00:00
  • はじめに

    00:20
  • 使用道具

    01:08
  • 書類を立ち上げる

    01:49
  • 四角い図形を作る

    03:21
  • 内側に四角を作る

    07:57
  • 内側にもう1つ四角を作る

    10:33
  • パレットに色を追加する

    13:50
  • 内側の四角を線にする

    15:26
  • 文字を入れる

    18:19
LESSON
4

レトロフレーム①-(2)

レトロフレーム①-(2)のサムネイル

前回のレッスンでほとんど完成したように見えるデザインですが、実は上下の余白の幅や文字の位置などが微妙にずれていたりします。そうした細かい部分にまで気を配ることで、より美しいデザインになります。また、図柄も入れてさらに華やかにしていきますよ。

〈このレッスンで学べること〉
■文字位置の調整方法
■四隅の装飾模様の作り方

  • オープニング

    00:00
  • はじめに

    00:20
  • 文字位置を調整する

    00:47
  • 画像を読み込んで配置する

    03:22
  • 中心の楕円を作る

    10:22
  • 楕円を複製して模様を作る

    13:09
  • サイズを調整して配置する

    15:34
LESSON
5

レトロフレーム①-(3)

レトロフレーム①-(3)のサムネイル

仕上げとして、真ん中に映写機のイラストを配置しましょう。「映写機の絵なんて描けない……」と思われた方もご安心ください。前回の装飾同様、図形を組み合わせてイラストを作ります。イラストが入るだけで、全体のレトロ感がよりアップしますよ。

〈このレッスンで学べること〉
■アイコンイラストの作り方

  • オープニング

    00:00
  • はじめに

    00:20
  • 映写機の土台を作る

    00:55
  • 映写機のパーツを作る

    01:49
  • 映写機の足を作る

    04:37
  • パーツの位置を微調整する

    08:12
  • 歯車を作るパーツの位置を微調整する

    10:10
  • 歯車を複製する

    14:26
  • 映写機を配置する

    17:44
LESSON
6

レトロフレーム①-(4)

レトロフレーム①-(4)のサムネイル

全体のバランスを整えれば、最初のデザインの完成。今回は映画祭をテーマとしたデザインにしてみましたが、同様の作り方でさまざまなアレンジが可能です。絵柄や色を変えて、みなさんだけのレトロデザインを仕上げてみても楽しいですね。

〈このレッスンで学べること〉
■全体のバランスの調整方法
■アレンジのバリエーション

  • オープニング

    00:00
  • はじめに

    00:20
  • 全体のバランスを調整する

    00:39
  • 線の太さを調整する

    04:06
  • バリエーションについて

    05:41
  • 完成♪

    06:24
LESSON
7

レトロフレーム②

レトロフレーム②のサムネイル

今度は文字を縦書きにした、和風レトロなデザインを作っていきます。背景にちょっとした模様を入れるだけでも、レトロ感を演出することができるのです。今回もアレンジ方法までご紹介するので、ぜひ参考にしてみてください!

〈このレッスンで学べること〉
■縦縞模様の作り方
■文字を縦に書くときのコツ
■上部の装飾パーツの作り方
■アレンジのバリエーション

  • オープニング

    00:00
  • はじめに

    00:20
  • 使用道具

    01:14
  • ファイルを作成する

    01:42
  • 四角を作る

    02:39
  • 内側に四角を作る

    04:14
  • 内側の四角に模様を入れる

    06:02
  • 文字を入れる

    11:30
  • 飾りの図形を作る

    14:13
  • アレンジ例

    20:22
  • おわりに

    21:42
LESSON
8

レトロフレーム③-(1)

レトロフレーム③-(1)のサムネイル

続いては円形のデザインを作成します。フレームを作り文字を入れるだけで、今回も素敵なデザインに仕上がりますよ。文字のフォントはこれまでとは少し違うものを使っていますが、こちらもまたレトロな雰囲気があって素敵なフォントです。

〈このレッスンで学べること〉
■円形の作り方
■円の形に沿って文字を入れるときのコツ
■点線装飾の入れ方

  • オープニング

    00:00
  • はじめに

    00:20
  • 使用道具

    01:12
  • 新しいファイルを開く

    01:39
  • 丸を作る

    02:43
  • 内側にフレームを作る

    04:48
  • 内側にもう1つ丸を作る

    07:33
  • 文字の土台を作る

    08:38
  • 文字を入れる

    09:05
  • 点線で装飾する

    16:05
LESSON
9

レトロフレーム③-(2)

レトロフレーム③-(2)のサムネイル

下が少し空いていて寂しいので、装飾を入れていきます。ツールを駆使すれば綺麗な模様が簡単に作れます。今回のデザインは円形なので、印刷してまるで本物の純喫茶に置いてありそうなコースターを作るのもおすすめですよ。

〈このレッスンで学べること〉
■装飾模様の作り方
■アレンジのバリエーション

  • オープニング

    00:00
  • はじめに

    00:20
  • ブラシで装飾する

    00:51
  • 装飾を微調整する

    03:19
  • 丸筆のブラシで装飾する

    05:50
  • 装飾の不透明度を調整する

    07:07
  • 左右対称に装飾をする

    08:32
  • アレンジ例

    11:06
  • 完成♪

    12:11
LESSON
10

レトロフレーム④-(1)

レトロフレーム④-(1)のサムネイル

今度は大正ロマンなデザイン。Illustratorに元から入っている素材をフルに活用して作っていきますよ。レトロな雰囲気をかもし出すには、形だけでなく色合いも大切です!カラーピッカーでの色の決め方に注目してご覧ください。

〈このレッスンで学べること〉
■Illustratorに元から入っている素材で出来ること
■市松模様の作り方
■八角形の作り方
■配色の決め方

  • オープニング

    00:00
  • はじめに

    00:20
  • 使用道具

    01:22
  • 新しいファイルを開く

    01:50
  • 四角を作る

    02:29
  • 市松模様を作る

    03:47
  • 八角形を作る

    08:21
  • 八角形の周りに線を作る

    09:49
  • 内側にもう1つ線を作る

    11:19
  • 文字を配置する

    12:12
  • 文字の後ろに帯を置く

    14:51
  • 文字の位置をそろえる

    18:31
LESSON
11

レトロフレーム④-(2)

レトロフレーム④-(2)のサムネイル

ちょっとした模様でも、あるのとないのとでは全体の印象が変わります。フレームの真ん中に綺麗に合わせる方法も含めて、学んでいきましょう。背景の模様を変えることでもアレンジ可能ですよ♪

〈このレッスンで学べること〉
■上下の装飾模様の作り方
■アレンジのバリエーション

  • オープニング

    00:00
  • はじめに

    00:20
  • 模様を作る

    00:59
  • 花の模様を作る

    04:06
  • 左右対称の図形を作る

    09:41
  • 位置を調整する

    10:28
  • 模様の色を変える

    15:50
  • 模様を複製する

    16:49
  • アレンジ例

    19:33
  • 完成♪

    20:57
LESSON
12

レトロフレーム⑤-(1)

レトロフレーム⑤-(1)のサムネイル

ここからはデザインによりこだわったフレームを作っていきます。これまでよりも少し複雑になりますが、学んできたことを思い出しつつ、私と一緒に作業を進めていけばきっと大丈夫です。楽しみながら作りましょう!

〈このレッスンで学べること〉
■曲線形のフレームの作り方
■左右対称に作る方法

  • オープニング

    00:00
  • はじめに

    00:20
  • 使用道具

    01:13
  • 新しいファイルを開く

    01:41
  • 下地になる図形を作る

    03:37
  • フレームの形の基本形を作る

    04:52
  • フレームを作る

    13:58
  • 図形の色と線を変える

    17:18
  • 色を登録する

    18:30
LESSON
13

レトロフレーム⑤-(2)

レトロフレーム⑤-(2)のサムネイル

フレームを作ったので、中に文字を入れましょう。文字もただ書くだけでなく、円形に配置したりフォントを変えたり、いろいろな調整をすることでより見栄えがよくなりますよ。下の部分では、リボンの中に文字を入れます。

〈このレッスンで学べること〉
■文字バランスの取り方
■動きのあるリボンの作り方

  • オープニング

    00:00
  • はじめに

    00:20
  • 文字を入れる

    00:49
  • 装飾を加える

    09:44
  • リボンを作る

    13:43
  • リボンの色を変える

    20:14
LESSON
14

レトロフレーム⑤-(3)

レトロフレーム⑤-(3)のサムネイル

最後に細かい位置を調整しましょう。この微調整は感覚的な部分があるので、みなさんのお好みに応じて、納得のいくまで調整してみましょう。また、今回もアレンジの例をいくつかご紹介します。色やフォントを変えて、デザインを楽しんでくださいね♪

〈このレッスンで学べること〉
■リボンに文字を入れるときのポイント
■文字に流れをつける方法
■位置の調整方法
■アレンジのバリエーション

  • オープニング

    00:00
  • リボンに文字を入れる

    00:45
  • 位置を調整する

    05:36
  • アレンジ例

    09:01
  • 完成♪

    11:43
LESSON
15

レトロフレーム⑥-(1)

レトロフレーム⑥-(1)のサムネイル

最後のフレームはこれまでのデザインとは少し変えて、ポップな色合いと形で仕上げますよ。まずは背景から作っていきますが、ツールを駆使して正円を組み合わせる方法をレクチャーします。

〈このレッスンで学べること〉
■背景の円が並んだ模様の作り方
■パターンを複製して均等な模様を作る方法

  • オープニング

    00:00
  • はじめに

    00:20
  • 使用道具

    01:03
  • 新しいファイルを開く

    01:31
  • 外側のフレームを作る

    02:45
  • 正円を作る

    04:41
  • 正円を複製する

    05:54
  • 正円を均等に並べて1つのパーツにする

    10:28
  • ドットのパーツで背景を作る

    12:04
LESSON
16

レトロフレーム⑥-(2)

レトロフレーム⑥-(2)のサムネイル

背景の上に、メインの文字が入る楕円形を置きます。完成したデザインを見たときにはほとんど目に入ってこないようなごくわずかな線の太さの違いなどで、実はぱっと見の印象が変わることがあります。

〈このレッスンで学べること〉
■楕円形のフレームの作り方
■文字を曲線に合わせて綺麗に配置するコツ

  • オープニング

    00:00
  • はじめに

    00:20
  • 楕円を作る

    00:42
  • 文字を入れる

    04:37
  • 文字の位置を調整する

    07:28
  • 内側の楕円形を作る

    10:03
LESSON
17

レトロフレーム⑥-(3)

レトロフレーム⑥-(3)のサムネイル

文字と装飾を入れて、デザインを完成させましょう!さまざまなテイストのフレーム作りを通して、デザインのポイントがつかめる頃です。

〈このレッスンで学べること〉
■文字の下の装飾の作り方
■アレンジのバリエーション

  • オープニング

    00:00
  • はじめに

    00:20
  • センターに文字を入れる

    00:42
  • 装飾を入れる

    06:26
  • 文字位置を調整する

    11:09
  • アレンジ例

    13:36
  • 完成♪

    15:23

テレビや雑誌などメディアにも紹介多数

ミルーム(miroom)とは

  • 定額制オンラインレッスンサービス

    ご契約期間内はいつでもどこでも
    繰り返し受講できます。

    定額制オンラインレッスンサービス
  • 講座が全て受講し放題

    たくさんのカテゴリ、1,500以上の講座が
    無制限で好きなだけ受講可能。

    講座が全て受講し放題
  • 6ヶ月単位で受講

    ¥17,880(税込)(月額¥2,980相当)で6ヶ月間の
    受講が可能。教室に比べてずっとお得!

    料金・受講期間

先生の紹介

Happy Afro先生|ビジネス|Webデザイン

Happy Afro先生
Happy Afro先生公式インスタグラム happyafroproject

インタビュー

Q. 先生がデザイン制作を描き始めたきっかけは何ですか?


A. 10代の頃、デザイナーに憧れていましたが、自身の才能に悩み一旦挫折しましたが、パソコンとIllustratorが私の夢を叶えてくれました♪



Q. 先生が思うデザイン制作の魅力は何ですか?


A. デザインの考え方次第で、お客様の商品が売れて喜ばれたりする時に、考え方の答え合わせが出来る所かな?と思います。



Q. 初心者ですが、大丈夫でしょうか?


A. デザインを楽しもう♪というワクワク感があれば、初心者•経験者問わず、楽しんでいただける内容なので、ご安心くださいね♪



Q. 受講される方々へ一言お願いします♪


A. 楽しいから出来た!を感じていただける講座を目指しています。楽しいと勝手にデザインの引き出しやテクニックが身に付きます。本講座は、才能や経験は全く関係ありません!先ずは、楽しむ!気持ちで、是非ワクワクと参加してみてくださいね♪皆様のご参加、心待ちにしています☺️🍀どうぞ宜しくお願いいたします。