BLOG/サイト構築・デザイン/その他

2021.10.09

楽天でのバナー作成(その3)

【記事の対象となる方】

  • これからPhotoshopを学ぼうとしている方
  • デザイン初心者

【今回の記事の内容】

  • 文字の種類を設定をする
  • 文字のサイズを設定する
  • 文字の配置をする

前回のバナー作成(その2)の続きとして、引き続きバナー作成していきましょう。

Link:バナー作成(その2)

<文字の種類を設定をする>

まずはテキストをどんどん入力してテキストレイヤーを作成します。


テキストツールの「横書きツール」を選択します。
背景をクリックすると入力できる線が出てきますので、文字を入力します。

「▲」は「三角形」と入力して変換キーを押すと入力することが出来ます。


このように入力できましたか?
入力が終わったら、次に進みましょう。

次に文字の種類を変更をします。
文字に関しては「デザインのドリル」という書籍でフォントの種類設定があった為、
そちらから2種類選択しました。

和文フォント「筑紫A丸ゴシック」の「ボールド」
欧文フォント「Fairwater Script」の「Bold」
です。

日本語は「筑紫A丸ゴシック」の「ボールド」に設定します。
英語は「FairwaterScript」の「Bold」に設定します。

このフォントがない!という方は似たような雰囲気のフォントを使用してください。
和文は丸い形のもの。欧文は筆記体のものを探してみましょう。


変更したいテキストのレイヤーの左側の「T」をダブルクリックします。
そうすると変更したいフォントが全選択されます。



全選択された状態で上のオプションバーのフォントをプルダウンで選択していきます。


太さはその横に設定で変更することが出来ます。
どんどん変更していきましょう!

これで日本語と英語の2種類の文字の変更ができました。

<文字のサイズを設定をする>

変更したいテキストのレイヤーの左側の「T」をダブルクリックします。
そうすると変更したいフォントが全選択されます。

全選択された状態で上のオプションバーのフォントサイズを変更します。
フォントの種類の横にあります。

「ファミリーモールの」は40px、「Happy」は110px、「 Christmas!」は130px、「12.20」80px、「▲」40px、「12.24」80px、
「キャンペーン期間中、対象店舗で5000円以上お買い上げの方、」は30px、
「先着1000名様に素敵な商品をプレゼント」は50px
になります。

これでフォントのサイズを変更することが出来ました。

<文字の配置をする>

四角に余白をあけたいので、上下左右に余白をあけましょう。
ガイド線を上下左右に引いて余白を意識するように配置します。

メニューバーの表示→定規にチェックをして定規を表示させます。


定規をクリックしてドラッグしたら青い線が出るので、余白を開けたい長さをとります。
(余白の上下左右の長さは自由に決めてください)

<フォントを移動させる>


「移動」ツールをクリックして、テキストを移動させます。
移動させたいテキストをクリックして移動させます。

右側のフォントをこのようにピッタリと合わせて並べてください。

「 ▲ 」の向きの変更ですが、
右側の三角形のレイヤーパネルを選択します。
「T」をダブルクリックすると「▲」が全選択されます。


上にある「編集」パネル→変形→90°回転(時計回り)をクリックします。
そうすると、「▲」が90度回転させることが出来ます。


その後に「12.20」の位置を揃えます。

次に左側のフォントを揃えます。
「ファミリーモールの」を移動ツールで移動させます。


文字自体の字間を調整したいので「文字パネル」で編集します。
「ファミリーモールの」のレイヤーを選択します。
文字パネルを表示させて字間の幅を調整したいので数値を入力します。
今回は「-60」と入力してください。

「Happy」と「 Christmas!」の文字を変形させて文字を回転させます。

「Happy」のレイヤーを選択して、「編集」→「変形」→「自由選択」。


回転する矢印が出るので、回転させます。


同じく「 Christmas!」も変形させてテキストを回転させましょう。


これで文字の配置が完了しました。

<背景色をつける>


ツールパレットの一番下のカラーを選択してカラーピッカーを表示させます。
#のところに配色コードの「f6edde」を入力してOKを押します。


レイヤーの一番下の「+」をクリックして新規レイヤーを作成します。
長方形ツールを選択します。
はみ出してもいいのでフレームの端から端まで、ドラック&ドロップします。


色のついた長方形を作成することが出来ました。
もし文字が隠れてしまう方はレイヤーの位置が原因です。
長方形のレイヤーを選択して、下にドラックすると矢印が手のようなマークに変化して長方形レイヤーの位置を変更することが出来ます。

<イラストを配置する>


「ファイル」→「埋め込みを配置する」をクリック。
配置したいイラストファイルを選択する。

「デザインのドリル」という書籍か素材を選択する場合はイラストレーターを起動させて、
使用したい画像を選択します。
コピー(ショートカット 【command(WindowsはControl+C)】をして、フォトショップに戻り、貼り付け【command(WindowsはControl+V)】をします。

<サイズを調整する>

変形させたいレイヤーを選択する自由変形のショートカットを使用する
【command(WindowsはControl+V)】サイズは自由に調整しましょう。

<文字の色を変更する>

「Happy」と「 Christmas!」を全選択する。


テキストツールのカラーをクリックしてカラーピッカーを表示させる。
#に「ddc65d」を入力させる。


「ファミリーモールの」のレイヤーを選択して「ル」と「の」の間をクリックして選択する。
「ファミリーモール」の部分をドラックする。


テキストツールのカラーをクリックしてカラーピッカーを表示させる。
#に「ddc65d」を入力する。

雪の結晶を増やす


レイヤーの右側の3本線をクリックします。


「レイヤーを複製」を押すと複製することが出来ます。
複数複製させたら、自由に配置しましょう。


これでバナーの完成です。

いかがでしたでしょうか。
全3回に分けて、バナー作成についてご説明させていただきました。

終わりに:楽天などのECショップの運営代行、運用代行について

弊社はECの制作代行を実施しております。
弊社へのご依頼などは、以下フォームにご入力いただき、ご連絡いただけますと幸いです。

    入力内容を確認して「送信」ボタンをクリックしてください。

    お問い合わせありがとうございます。
    折り返し担当よりご連絡させていただきますので、今しばらくお待ち下さいますよう、お願い申し上げます。

    は必須項目です。

    氏名(漢字)
    氏名(かな)
    貴社名
    電話番号
    メール
    ウェブサイトURL
    お問い合わせ内容

    こちらからご確認ください