バナー講座 - 最終課題 | SkillhubAI(スキルハブエーアイ)

バナー講座 - 最終課題

課題と作成要件

下記バナーを、後記の制作条件(3点)を守ってトレースして下さい。
100%完璧に重ならず、多少ズレても良いです。

▽完成見本(右クリックでDLできます)
file

こういった練習を、デザイントレース(模写)と言います。
デザイントレースを行うことで、制作に必要な加工や装飾の操作に慣れることができ、更に自分の中にあるデザインストックを増やすことにも繋がります。

制作会社では新人研修でバナートレース30本、などがカリキュラム化されていることもあるほど有効なデザイン練習方法です。

本課題だけではなく「良いな」と思うバナーを見つけたらストックして、時間のあるときにバナートレースを行っていきましょう。模写を沢山行うことで、あまり考え込まずとバナーデザインが出来るようになっていきます。

課題の提出について

課題の提出は必要ありません。
今回の課題内容はトレースとなりますので、トレース元(見本画像)と重ねてセルフチェックを行って下さい。

課題の制作条件

1.制作サイズとソフト

制作サイズは横600px × 縦500pxとします。
画像の加工はPhotoshop、配置はIllustratorで行ってみましょう。

2.素材(男性の写真)

バナー作成に必要な素材(画像)を探す にて紹介した、ファイル番号435547841のプレビュー版を使用して下さい。

写真の背景はレッスンで行ったのと同様に、Photoshopのマスクを使って透過して下さい。

3.フォント(書体)

メインコピーは“凸版文久見出しゴシック Std EB”もしくは“凸版文久見出しゴシック StdN EB”を使用します。

それ以外の箇所は“源ノ角ゴシック JP (Bold)”を使用しています、 Adobe fontsにありますので、「源ノ角ゴシック」で検索してアクティベートして下さい。

file

課題作成のヒント

解説でも作り方を説明していますが、仕事をしていくうえでは「作りたいデザインの作成方法を調べて、取り入れてる」ということも非常に重要です。 ヒントでは調べるための検索ワードも紹介していますので、実務形式で調べながら制作すると更に大きな実力アップが期待できます。

もちろん、上手く作成が出来ない・見本をコピーするための方法が調べられない……という場合は解説を見ていただいて構いません。解説を見ながら作ってみて下さい。

▼解説は以下講座にあります▼
【課題解説】IllustratorとPhotoshopでつくるバナー制作講座

①二重の袋文字の作成ヒント

メインコピーも文字は、Illustratorのアピアランスパネルで設定しています。
ポイントは“グループの抜き”をONにすること。
file

そのものズバリの作り方は無いかもしれませんが、検索で「Illustrator 縁取り グループの抜き」と入れると、同じような文字装飾方法はいくつも出てきます。

下記に簡単な設定手順を記載しています。
検索したリファレンスと見合わせつつ挑戦してみて下さい。

【アピアランス設定手順】

1.文字ツール(塗り黒)でメインコピーを入力

2.文字全体の不透明度から“グループの抜き”をONにする

3.新規塗りを追加 - 効果を加える
fx > パスの変形 > 変形 → 移動(両方2pxずつ)
fx > パス > パスのオフセット → オフセット3px

4.新規塗りを追加 - 効果を加える
fx > パス > パスのオフセット → オフセット3px
不透明度 → 0%に変更

5.新規塗りを追加

【アピアランス設定の見本】
file

②背景の放射線(集中線)作成ヒント

Illustratorの円ツール+破線で作成しています。
「Illustrator 放射線 作り方」で検索すると、作り方紹介が見つかるでしょう。

色は「日本初!」の背景色から、明度を上げたものを使っています。
file

今回の課題はトレースですので、見本バナーからスポイトで色をとっても構いません。
file