【Photoshop】文字ベースの配信バナーをゼロから作成してみよう

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Photoshop（フォトショップ）を使って文字ベースでデザインされたライブ配信用バナーをゼロから作る方法をフォトショ初心者の方に詳しく解説します。
写真やイラスト素材が無くてもOK！

フォトショップでよく使う基本機能を網羅的に学習できます。これからPhotoshopを始められる方にオススメのコンテンツですよ！

この記事の目次

何が作れるの？

上記の様なライブ配信用バナーがゼロから作成できます。
ドキュメントサイズの指定、レイヤースタイルを組み合わせた文字デザインや背景デザインなど、Photoshopの便利な機能を網羅的に身に付けられます。フォトショップを使ったクリエイティブに応用が利くのでフォトショスキル向上をされたい方にオススメですよ。

配信バナーの作り方

それでは文字ベースの配信バナーの作り方を解説します。
順に進めていけば初心者の方でも再現可能ですよ！

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はAdobe公式サイトから導入できます。
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

ドキュメントを作成＆文字入力

STEP.1

新規ドキュメントを作成

新規ドキュメントを作成します。サンプルは下記のYouTubeサムネサイズです。

幅：1280px
高さ：720px
解像度：72pixel/inch
カラーモード：RGBカラー
※アートボードのチェックは無し

STEP.2

文字を入力

[ 文字ツール ] で文字を入力します。
文字のカラー：お好みで
サンプルのフォントは [ ADSストロング ] を使用しました。

サンプルの雑談配信は雑・談・配・信と個別の文字として入力します。

STEP.3

波形で変形する

[ 移動ツール ] で文字のレイアウトを行います。[ Ctrl + T ] (Mac：⌘ + T) で自由変形ができるので回転させたりして文字に遊びを入れてみましょう。

最後に4つのテキストレイヤーは [ Ctrl + G ] (Mac：⌘ + G) でグループ化しておきます。

画面右上に文字を入力します。
サンプルは「だらっと話そうや！」と入力しました。お好みで文字を入力しましょう。

入力した文字に対してPhotoshop画面上部のオプション内にある [ ワープテキストを作成 ] を適用します。
※文字ツールでテキストをクリックし、編集可能状態にするとワープテキストが使用できます。

サンプルのワープテキストは下記設定です。
スタイル：アーチ
水平方向にチェック
カーブ：+10%
水平方向のゆがみ：0%
垂直方向のゆがみ：0%

[ 移動ツール ] で文字のレイアウトを行ったらベースとなる文字が設定完了です。

文字に質感付与を行う①

STEP.1

レイヤーを整理

雑談配信のレイヤーグループをクリックしてアクティブにし、[ Ctrl + J ] (Mac：⌘ + J) でレイヤーグループをコピー。

サンプルはグループ名を上から「ドット用グループ」、「ベース質感用グループ」としました。

「ドット用グループ」の塗りを0%にしましょう。（レイヤーパネル右上で設定）

次に「ベース質感用グループ」をクリックしてアクティブにします。

STEP.2

グラデーションオーバーレイを追加

レイヤーパネル下部の [ fx ] → [ グラデーションオーバーレイ ] を追加します。

グラデーションオーバーレイの設定です。
描画モード：通常　不透明度：100%
グラデーション：次参照　シェイプ内で作成にチェック
スタイル：線形　角度：90°
比率：100%　方法：クラシック

グラデーションの詳細設定です。
カラー①：#12d6df　位置：11
カラー②：#ff2ef3　位置：81

文字グループに対してシアンとパープルのグラデーションが追加できました。
※色やグラデーションの向きはお好みでカスタマイズして下さい。

STEP.3

境界線を追加

レイヤースタイルの左メニューから [ 境界線 ] を追加します。（見つからない場合は画面左下の [ fx ] → [ 境界線 ] で追加可能）

サイズ：9px　位置：外側
描画モード：通常　不透明度：100%
オーバープリントにチェック
塗りつぶしタイプ：カラー
カラー：#ffffff

レイヤースタイル左メニュー内の境界線右側にある [ + ] をクリックし、コピーします。コピー後は下に位置するレイヤースタイルを編集します。

サイズ：14px　位置：外側
描画モード：通常　不透明度：100%
オーバープリントにチェック
塗りつぶしタイプ：カラー　カラー：1e8ddd
すると境界線が2つ重なった表現ができます。

STEP.4

ドロップシャドウを追加

引き続きレイヤースタイルの左メニューから [ ドロップシャドウ ] を追加します。（見つからない場合は画面左下の [ fx ] → [ ドロップシャドウ ] で追加可能）

描画モード：通常　カラー：#1e8ddd
不透明度：100%　角度：123°
包括光源を使用にチェック
距離：19px　スプレッド：100%　サイズ：16px
画質の項目は初期設定のまま

STEP.5

シャドウ（内側）を追加

レイヤースタイルの左メニューから [ シャドウ(内側) ] を追加します。（見つからない場合は画面左下の [ fx ] → [ シャドウ(内側) ] で追加可能）

描画モード：乗算　カラー：#010026
不透明度：35%　角度：123°
包括光源を使用にチェック
距離：5px　チョーク：100%　サイズ：5px
画質の項目は初期設定のまま

文字の内側に落ち影が追加でき、立体感が出せましたね。以上で「ベース質感用グループ」の設定は完了です。

右上の文字デザイン

右上に配置している「だらっと話そうや！」の文字には複数の境界線を追加しています。
境界線①
サイズ：3px　位置：外側　カラー：#1e8ddd
境界線②
サイズ：10px　位置：外側　カラー：#ff8dee
境界線③
サイズ：16px　位置：外側　カラー：#1e8ddd

文字に質感付与を行う②

STEP.1

ドット用グループをアクティブにする

レイヤーパネルを開いて「ドット用グループ」をアクティブにします。
先に塗りを0%にしているので文字の塗りが無い状態です。

STEP.2

パターンを追加

レイヤーパネル下部から [ fx ] → [ パターンオーバーレイ ] を追加します。
描画モード：通常　不透明度：100%
パターン：コチラからダウンロードしたzip内のdot.patをダブルクリックしてインストール
角度：0°　比率：6%　レイヤーにリンクにチェック

※パターンの作成・登録方法はコチラで解説。

すると左図の様な黒いドット模様が表示されます。

STEP.3

スマートオブジェクトに変換

「ドット用グループ」を右クリックメニューから [ スマートオブジェクトに変換 ] しましょう。

STEP.4

カラーオーバーレイで色変え

STEP.3でスマートオブジェクト化したレイヤーに [ fx ] → [ カラーオーバーレイ ] を適用します。
描画モード：通常
カラー：#ffffff
不透明度：100%

レイヤーパネル右上の [ 不透明度 ] を40%にすると左図の様なドット模様が追加できます。
以上で雑談配信の質感付与が完成しました。

背景を作成

STEP.1

グラデーションの背景を追加

レイヤーパネルを開き、パネル下部の [ 塗りつぶしまたは調整レイヤーを新規作成 ] → [ グラデーション ] を追加します。

STEP.2

グラデーションを設定

グラデーション：次参照
スタイル：線形　角度：105°
比率：100%
選択範囲内で作成にチェック
方法：滑らかに

グラデーション①：#6df7ff　位置：0
グラデーション②：#f5e5ff　位置：32
グラデーション③：#f5e5ff　位置：68
グラデーション③：#fbafff　位置：100

STEP.3

背景の完成

背景にグラデーションが追加できました。色味はお好みでカスタマイズして下さい。

あしらいをデザイン

STEP.1

あしらいパーツを配置

フキダシと星形のオブジェクトをあしらいとして配置します。コチラの素材をダウンロード後にzipを解凍し、各png画像を配置しましょう。（左右反転の方法はコチラの記事で解説しています。）

レイアウトはお好みで調整して下さい。

STEP.2

星パーツに境界線を追加

星形のオブジェクトには先に解説した方法で境界線を複数重ねています。（グループ化後にレイヤースタイルを適用すると一括で境界線が適用できます。）

境界線①　サイズ：3px　カラー：#1e8ddd
境界線②　サイズ：10px　カラー：#ff8dee
境界線③　サイズ：14px　カラー：#1e8ddd

左図の様な見た目にできます。

STEP.3

フキダシの質感付与

最後にフキダシパーツの質感付与を行いましょう。
[ Ctrl + J ] (Mac：⌘ + J) でフキダシレイヤーをコピーし、名称を「ドット用」、「シャドウ用」に変更します。

「ドット用」の塗りは0%に変更。

「シャドウ用」をアクティブにし、レイヤーパネル下部の [ fx ] → [ ドロップシャドウ ] を追加します。

描画モード：通常　カラー：#ff91ef
不透明度：100%　角度：123°
包括光源を使用にチェック
距離：15px　スプレッド：100%　サイズ：0px
画質の項目は初期設定のまま

「ドット用」にレイヤーパネル下部の [ fx ] → [ パターンオーバーレイ ] を追加します。
描画モード：通常　不透明度：100%
パターン：先に追加したドットパターン
角度：0°　比率：6%
レイヤーにリンクにチェック

設定後は [ OK ] をクリック。

「ドット用」を右クリックメニューから [ スマートオブジェクトに変換 ] し、レイヤーの不透明度を58%に変更。

後はレイヤーパネル下部の [ fx ] → [ カラーオーバーレイ ] を追加し、下記設定を加えましょう。
描画モード：通常　カラー：#fcafff
不透明度：100%

FINISH

配信バナーの完成

水色のフキダシも同様の処理を加えましょう。
水色のカラー：#79f0ff

以上で文字ベースの配信バナーが完成しました。YouTube等の配信バナーとして最適です。指定サイズのドキュメント、文字入力、文字やあしらいの装飾、背景の作成など。Photoshopでよく使う機能を網羅的に活用したクリエイティブですよ。

サンプルのレイヤー構成です。要素ごとにグループ化して整理しておくと管理しやすいですよ。

なお、JPEGやPNGへの書き出し方法はコチラの記事で解説しています。

高品質なPSD形式のバナー素材

商用利用可能で高品質なPSD形式のバナー素材を厳選しました。
使用頻度の高い素材なので持っておくと作業効率が劇的に向上しますよ！

#01 Web Banner Layout Set 4

16種類ものバナーサイズが収録されたWebバナーテンプレートの決定版です。バナーサイズやレイアウトに迷った時はこのテンプレートを活用すればあっという間に解決できますよ。

ダウンロードする

#02 12 Social Media Banner Layouts

ソーシャルメディアに適したバナーテンプレートのPSD素材です。12種類のデザインパターンが収録されており、様々な分野のバナーに応用できますよ。

ダウンロードする

#03 Beauty Web Banner Set

美容系の業界に特化したバナー4種セットです。スクウェア型と横長バナーが収録されているPSD素材ですよ。

ダウンロードする

#04 Web Banner Layout Set 1

16種類のバナーサイズが収録されたテンプレートPSDです。同じ要素で異なるレイアウトが多数収録されているので、デザイン制作の参考になりますよ。

ダウンロードする

#05 Social Media Post Layout Set with Pink and Yellow Accents

ピンク色を基調としたポップで可愛い世界観のスクウェア型のバナーテンプレート素材です。6種類のデザインパターンが収録されたPSD。Instagram（インスタグラム）の投稿用素材に最適ですよ。

ダウンロードする

#06 Black Friday Social Media Banners

ブラックフライデーに特化したソーシャルメディア向けバナー素材です。文言を変更する事で簡単に別のセールや訴求用バナーに改造できますよ。

ダウンロードする

#07 Square Social Media Banner Kit

フード系に適したスクウェアサイズのバナーテンプレートのPSD素材です。9パターンのデザインが収録されており、フード系以外のコンテンツにも流用可能です。

ダウンロードする

#08 Social Media Posts Layout with Blue and Green Accents

くすみカラーのブルートグリーンで構成されたスタイリッシュなソーシャルメディア向けバナーテンプレート素材です。企業の投稿用テンプレ等に向いています。

ダウンロードする

#09 6 Social Media Banner Layouts with Blue and Yellow Accents

ブルーとイエローで構成された夏カラーのスクウェアサイズバナーテンプレート素材です。パンチのある見た目なので訴求力が高いバナーデザインに仕上がっています。

ダウンロードする

#10 Set of Web Banners with Cross Shape

13種類のスタンダードなバナーサイズが収録されたバナーテンプレートのPSD素材です。太くてインパクトのある文字とクロスがモチーフのモノクロ系デザインがカッコいいですね。

ダウンロードする

様々なバナー素材

【商用可】高品質なバナーテンプレート50選！秒速でバナーデザインを実現【Photoshop・Illustrator】

様々な世界観で作成された高品質なバナー素材です。Photoshopだけでなく、Illustratorで作成されたバナーも必要な方は是非チェックしてください。

ワンランク上のテンプレート素材

Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。

例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート45選

デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い！
相手に舐められない名刺テンプレート50選

バナーはフォトショップを練習する上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選

紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差を付けてより高みを目指しましょう！
デジタル媒体向けポートフォリオテンプレ素材35選

制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬！
様々なモックアップテンプレート57選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください！

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

おわりに

以上、Photoshop（フォトショップ）を使って文字ベースの配信バナーをゼロから作る方法でした。当記事のテクニックはPhotoshopでよく使う機能を網羅的に活用したクリエイティブなので、YouTubeのサムネ画像制作全般などに応用が利きます。

今後ご自身でオリジナルの制作をされる際に役立つこと間違いなし！
更にクリエイティブを加速させてください！

ではまた！

テキストエフェクトの作り方まとめ

Photoshopでテキストエフェクトをゼロから自作する方法、そして1分で超高品質で商用利用可能なテキストエフェクトが作れるPSD素材の使い方と作例を解説しています。
ロゴデザイン、Webデザイン、バナーデザイン、各種DTPデザイン、UIデザイン、ポートフォリオ制作等。幅広いクリエイティブに活用できる内容です。