3ステップで学ぶ！ロゴ、ショップカード、バナー制作テクニック【#3 Webバナー編】
こんにちは、Web/UIデザイナーの松下絵梨です。
『PsとAiを実践的に学ぶ！クリエイター直伝のテクニック集』のSeason 3では、3回にわたって、ロゴの作り方、ショップカードの作り方、そしてWebバナーの作り方をお伝えします。
第3回目の今回は、Photoshopを使い、WebページやSNSなどで使えるバナーを作成する方法について解説していきます。
この記事では、デザイン初心者の方でもすぐに実践できる手順を分かりやすく解説します。サンプルファイルも用意していますので、記事を最後まで読み進めながら実際に試してみてくださいね。
これを機に、Photoshopの基本操作を活用して魅力的なバナーを作成してみましょう。
※この記事では、Adobe Photoshop 2025 （バージョン26.1）を使用しています。
こんな方におすすめ：
- Photoshopを使い始めたばかりの方
- Webバナーの作り方を学びたい方
- IllustratorやPhotoshopを連携して使う方法を知りたい方
完成イメージ
第1回目に作成したロゴと、第2回目に作成したコーヒー豆のアイコンを使用して、架空の猫カフェのバナーを作成します。 InstagramやXへの投稿にも使えそうな、スタイリッシュなデザインに仕上げていきましょう。
目次
- 準備
- ファイルを開く
- 楕円形を描画する
- テキストを入力する
- ロゴを配置する
- コーヒー豆のアイコンを配置する
- 猫の写真を配置する
- 猫の写真をマスクする
- バナーを完成させる
- 書き出しを行う
- 完成
- まとめ
- 次回予告
準備
Photoshopの画面レイアウト
この記事では、Photoshopのワークスペースの設定を［初期設定］の状態で解説を進めていきます。ワークスペースとはPhotoshopのパネルのレイアウトのことです。
①メニューバーの［ウィンドウ］をクリックし、②［ワークスペース］にカーソルを当てて、③［初期設定］をクリックします。
④メニューバーの［ウィンドウ］→［ワークスペース］→［初期設定をリセット］をクリックします。
単位の設定
⌘ + K（Windowsの場合はCtrl + K）を押して［環境設定］ダイアログボックスを表示し、［単位・定規］カテゴリの［単位］を以下のように設定してください。
- 定規：pixel
- 文字：pixel
補足： Webで使用する単位について
バナー制作やWebデザインでは、単位はピクセル（px）を使用するのが一般的です。Webでは画面表示がピクセル単位で構成されており、物理的な寸法を基準とするmmやptではデバイスやブラウザによって表示が異なるからです。
サンプルファイルのダウンロード
サンプルファイルを使って、本記事の解説内容を実際に試せます。ダウンロードして、ぜひ一緒に試してみましょう。
上記をダウンロードすると以下のファイルが入っています。
- 作業用のファイル：catCafeBanner_try.psd
- 素材（ロゴとアイコン）：catCafe_parts.ai
- 素材（写真）：cat.jpg
- 完成見本：catCafeBanner_finish.psd
ファイルを開く
「catCafeBanner_try.psd」をPhotoshopで開き、作業していきましょう。
アートボード「banner」に、レイヤー「sample」が配置されています。
このレイヤーはこれから配置していくパーツの位置の目安となるものです。確認したら、［表示の切り替え］アイコンをクリックして、「sample」レイヤーを非表示にします。
必要に応じて適宜、レイヤーの表示/非表示を切り替えながら作業してください。
楕円形を描画する
猫の背景に置く正円を描画しましょう。
シェイプの塗りと線を定義する
まず描画するシェイプの塗りと線を定義します。
①［楕円形ツール］を選択し、②［ツールモード］を［シェイプ］にし（デフォルトのまま）、③［シェイプの塗り］をクリックします。
①［カラーピッカー］アイコンをクリックし、②［カラーピッカー（塗りのカラー）］ダイアログボックスを以下のように設定し、③［OK］をクリックします。
- カラー値：#9e7f66
①［シェイプの線の種類］をクリックし、②［カラーなし］をクリックします。
数値を指定して楕円形を描画する
①カンバス上をクリックし、②［楕円を作成］ダイアログボックスを以下のように設定して③［OK］をクリックします。
- 幅：600（px）
- 高さ：600（px）
楕円形の位置を調整する
［プロパティ］パネルを以下のように設定します。
- X：240（px）
- Y：400（px）
テキストを入力する
正円に沿ってテキストを入力します。
パス上文字を作成する
①［横書き文字ツール］を選択します。
②メニューバーの［ウィンドウ］→［文字］をクリックします。
［文字］パネルが開くので、以下のように設定します。
- フォントファミリ：Longhand LP Bold
- フォントサイズ：60（px）
- ベースラインシフト：30（px）
- カラー：#52382d
①「楕円形1」レイヤーを選択している状態で、②楕円形の左端にカーソルを移動します。
③カーソルの形が図のような形に変わったらクリックします。
文字を入力する
「New Open!」と入力します。
テキストの位置を調整する
［パス選択ツール］を選択し、文字の先頭付近にカーソルを置きます。
①カーソルの形が図のような形に変わったら、②ドラッグして文字の位置を少し上に移動させます。
文字の位置は、「sample」レイヤーを参考にしてください。
ロゴを配置する
Illustratorで作成されたパーツをPhotoshopに配置しましょう。
Illustratorからロゴをコピーする
「catCafe_parts.ai」をIllustratorで開き、ロゴを選択して⌘ + C（Windowsの場合はCtrl + C）を押してコピーします。
Photoshopにロゴペーストする
Photoshopに戻り、①⌘ + V（Windowsの場合はCtrl + V）を押してペーストします。
②［ペースト］ダイアログボックスで［スマートオブジェクト］を選択し、［OK］をクリックします。
［完了］をクリックします。
デフォルトではアートボード中央にアートワークがペーストされます。
補足：スマートオブジェクト形式でペーストする理由
IllustratorのデータをPhotoshopにペーストする際に「スマートオブジェクト」を選択すると、ベクター形式のままデータを取り込めるため、配置した後に拡大縮小を行っても画質が劣化しません。
ロゴの位置を調整する
［プロパティ］パネルを以下のように設定し、ロゴの位置を調整します。
- X：450（px）
- Y：50（px）
レイヤーが増えてくると、どのレイヤーが何を示すのかが分からなくなり困ります。
内容を瞬時に把握できるようにレイヤー名を適切に変更するようにしましょう。
今回は、レイヤー名を「ロゴ」に変更します。
コーヒー豆のアイコンを配置する
アートワークの装飾として、コーヒー豆のアイコンを配置しましょう。
Illustratorからアイコンをコピーする
「catCafe_parts.ai」のコーヒー豆のアイコンを選択して⌘ + C（Windowsの場合はCtrl + C）を押してコピーします。
Photoshopにアイコンをペーストする
Photoshopに戻り、①⌘ + V（Windowsの場合はCtrl + V）を押してペーストします。
②［ペースト］ダイアログボックスで［スマートオブジェクト］を選択し、［OK］をクリックします。
［完了］をクリックします。
コーヒー豆のアイコンの角度と位置を調整する
［プロパティ］パネルで①［回転］に「20（°）」、②［X］に「830（px）」、［Y］に「420（px）」と入力します。
コーヒー豆のアイコンを複製する
レイヤー名を「コーヒー豆1」に変更します。
①⌘ + J（Windowsの場合はCtrl + J）を押してレイヤーを複製します。
②複製されたレイヤーのレイヤー名を「コーヒー豆2」に変更します。
「コーヒー豆2」の角度と位置を調整します。
［プロパティ］パネルで①［回転］に「30（°）」、②［X］に「880（px）」、［Y］に「480（px）」と入力します。
猫の写真を配置する
写真を配置する
①メニューバーの［ファイル］→［埋め込みを配置］をクリックし、②「cat.jpg」を選択して［配置］をクリックします。
［完了］をクリックします。
写真の位置を調整する
［プロパティ］パネルを以下のように設定します。
- X：0（px）
- Y：260（px）
猫の写真をマスクする
猫の周りの背景を非表示にするために、レイヤーマスクを設定します。
選択範囲を作成する
［被写体を選択］をクリックします。
写真内の主要な被写体（猫の輪郭）がおおまかに選択されます。
選択範囲を調整する
選択範囲を確認し、必要に応じて調整します。
メニューバーの［選択範囲］→［選択とマスク］をクリックします。
作業画⾯が［選択とマスク］ワークスペースに切り替わります。
［表⽰モード］の［表⽰］を、［オーバーレイ］に設定します。
選択されていない部分（マスクして非表示にする部分）が、半透明の赤色で表示されます。
毛の細かい部分が検証され、自動的に選択範囲が調整されます。
レイヤーマスクを作成する
選択範囲の調整が終わったので、選択範囲をどのような状態で出⼒するかを指定します。
①［出力設定］の左の［>］アイコンをクリックし、②［出力先］を［レイヤーマスク］にして③［OK］をクリックします。
選択範囲を元にレイヤーマスクが作成され、猫の周りの背景が非表示になりました。
バナーを完成させる
バナーの背景色を設定する
アートボード「banner」をクリックして選択し、［プロパティ］パネルで［アートボード背景色］を［白］から［その他］に変更します。
②［カラーピッカー（塗りのカラー）］ダイアログボックスが開くので、以下のように設定し、③［OK］をクリックします。
- カラー値：#d1b197
書き出しを行う
WebページやSNSで使用できる形式に書き出しを行います。
①メニューバーの［ファイル］→［書き出し］→［PNGとしてクイック書き出し］をクリックし、②任意の保存場所を指定して［保存］をクリックします。
ファイル名にはアートボード名が反映されるので、必要に応じて変更してください。
完成
シェイプや文字、写真を組み合わせて、バナーを作成することができました。
まとめ
今回のバナー作成で使用した主なテクニックは以下の3つです。
パス上文字
アートワークのアクセントとして、［パス上文字］機能を使用しました。曲線や円に沿って文字を配置することで、バナーに動きや遊び心を演出できます。
被写体を選択
画像の切り抜き作業では、［被写体を選択］機能を使用しました。この機能を使うことで、ワンクリックで簡単に写真内の主要な被写体を⾃動的に選択することができます。
髪の毛を調整
［髪の毛を調整］機能を活用し、選択範囲を自然に仕上げました。この機能を使うことで、髪の⽑や動物の毛などの複雑な部分の処理が大幅に改善されます。
3回にわたってお送りしてきた「ロゴの作り方、ショップカードの作り方、Webバナーの作り方の解説」は今回で終了です。ご覧いただきありがとうございました！
お伝えしたテクニックを組み合わせることで、視覚的に魅力的でアートワークを効率的に作成できます。PhotoshopとIllustratorの機能を最大限活用して、ぜひ様々な作品を作成してみてください！
次回予告
12月から書き手はいとくにさんに変わって、「遊びながら学ぶ！初心者でも簡単にできる、オシャレなデザイン」をお送りします。
お楽しみに！