Photoshopでバナー制作

Photoshop基本操作

1. レイヤー操作

• クリッピングマスク（Alt ＋ 境界線クリック）
  • 用途1： 写真を「枠（四角や丸）」の中にはめる。
  • 用途2： 色補正レイヤーを「特定の写真」だけに効かせる。
  • 構造： 上にあるレイヤーが、すぐ下のレイヤーの形に切り抜かれる。
• グループ化（Ctrl ＋ G）
  • バラバラのレイヤー（例：写真・枠・補正のセット）を1つのフォルダにまとめる。整理整頓の基本。

2. 配置とサイズの調整

• 自由変形（Ctrl ＋ T）
  • 写真や図形の大きさを変える。角をドラッグして調整。終わったら Enter で確定。
• 移動ツール（V）と整列
  • レイヤーを2つ以上選んだ状態で、画面上の「整列ボタン」を押すと、1pxの狂いもなく真ん中に揃う。
  • ※重なってしまう時は「揃えたいものだけ」選んでいるか確認。

3. 文字を「プロの見た目」にする

• 文字詰め・行間（Alt ＋ 矢印キー）
  • Alt + ← / →：文字の間隔（字間）を詰める・広げる。
  • Alt + ↑ / ↓：行の間隔（行間）を詰める・広げる。
  • 根拠： 隙間を埋めることで視線が散らず、情報がパッと入るようになる。

4. 写真の色を整える（レタッチ）

• 調整レイヤー（レイヤーパネル下の「半月マーク」）
  • [明るさ・コントラスト] や [色相・彩度] を選ぶ。
  • 根拠： 4枚の写真の「トーン（明るさや鮮やかさ）」を揃えることで、寄せ集め感を消し、1つのデザインとして統一感を出す。

5. 困った時のトラブルシューティング

• メニューが選べない（グレーアウト）時：
  • 対象のレイヤーを右クリック ➔ [レイヤーをラスタライズ] して、直接編集できる状態にする。
• 機能が思い通りにいかない時：
  • 数値やボタンに頼りすぎず、矢印キー（トントン叩く）やマウスの目見当で「お手本と同じ見た目」になるよう手動でねじ伏せる。

6. 仕上げと書き出し

• 答え合わせ： 自作レイヤーを「不透明度50%」にしてお手本と重ね、ズレを確認する。
• 書き出し： [ファイル] ＞ [書き出し] ＞ [PNGとしてクイック書き出し]。お手本レイヤーを非表示にするのを忘れずに！

---

Photoshopを使ってバナーを作ろう

---

1. 見本を探す
   
   • 今すぐGoogle画像検索で「バナー 初売り」や「バナー クリスマス」等で検索。
   • 「これなら自分でも作れそうかも？」という、文字が少なめのバナーを1枚デスクトップに保存。
     
     
2. Photoshopの設定
   
   • Photoshopを開き、「新規作成」で保存した画像と同じサイズ（例：300x250px）のキャンバスを作る。
   • 保存した見本画像をそこにドラッグ＆ドロップして、一番下のレイヤーに置く。
     
     
3. 8px設定にする
   
   • これがプロの隠し技。Ctrl + K（環境設定）→左側のリストから「ガイド・グリッド・分割」をクリック。
   • グリッドの設定値を書き換える
   • グリッド線： 「8」と入力し、右側の単位を必ず 「pixel（ピクセル）」 に変える。
   • 分割数： 「1」にする。
   • これで移動ツールを選択した状態で、Shiftを押しながら矢印キーを叩けば、正確に8pxずつ動かせるようになる。
     
     
4. グリッドを表示・非表示にする
   
   • 設定しただけでは画面に線は出ない。
   • Ctrl + @を押すたびに、グリッド線の表示・非表示が切り替わる。

---

---

移動ツールを便利にする３つの鉄則

1. 「V」キーを左手の定位置にする

他のツール（文字ツールや長方形ツール）を使っていても、作業が終わったらすぐに「V」キーを押して移動ツールに戻るクセをつける。

• 理由： 移動ツールこそがPhotoshopの「基本モード」だから。

2. 「自動選択」の切り替えをマスターする

移動ツールのとき、左上のオプションバーにある「自動選択」をあえてOFFにするプロも多い。

• ONの場合： クリックしたものが直接選ばれる（直感的だが、細かい重なりに弱い）。
• OFFの場合： レイヤーパネルで選んでいるものだけが動く（HTMLのID指定で操作するような確実性がある）。 自分に合う方でOKだが、「思い通りのものが動かない！」となったらここを疑おう。

3. 整列パネルの活用

移動ツールを選択している時だけ、画面の上に「整列アイコン」が出てくる。

• これを使えば、複数の要素を選んで中央揃えや上下中央がボタン一つでできる。
• 手で動かしてスナップさせるより、これを使うほうが「1ピクセルの狂いもない正解」に一瞬で辿り着ける。

---

設定が整い、移動ツールとスマートガイドも使えるようになった。
これで「数値に基づいた正確なデザイン」ができる準備はすべて完了！

---

---

---

色調補正

デザイン初心者の方がレタッチで沼にハマるのを防ぐために、「これだけやれば、写真が『広告』としてマシに見える」という3つの鉄則。

1. 「明るさ」をちょっとだけ上げる（+10〜20）

Webバナーは、スマホやPCの液晶で見られる。 素の写真は、液晶で見ると意外と「暗くて沈んで」見えがち。

• やり方： [明るさ・コントラスト] の「明るさ」のスライダーを右に少し動かす。
• 根拠： 人は明るい写真に「清潔感」「ワクワク感」を感じるから。

2. 「コントラスト」をちょっとだけ上げる（+5〜10）

「明るさ」を上げると、全体が白っぽくボヤけることがある。

• やり方： 「コントラスト」を少しだけ上げる。
• 効果： 黒い部分が引き締まり、写真がハッキリして「プロが撮った感」が出る。

3. 「自動補正」をボタン1つで使う（Photoshopにお任せ）

もしスライダーを動かすのも面倒であれば、Photoshopに「正解」を聞こう。

1. [イメージ] ＞ [自動トーン補正] （※レイヤーをラスタライズしている場合のみ。ショートカットは Shift + Ctrl + L）
2. これだけで、Photoshopが「これが一番綺麗だよ」という色に一瞬で整えてくれる。
   • もし変になったら Ctrl + Z で戻せばOK
     
     
     
     4枚の写真を並べて見て、「1枚だけやけに暗い（または色が薄い）やつがないか？」だけ確認しよう。
   • 1枚だけ暗い： その写真の「明るさ」を上げる。
   • 1枚だけ色が薄い： 「色相・彩度」で「彩度」を少し上げる。
   • 「なんとなく4枚のトーンが揃っている」 これさえクリアしていればOK。

---

模写をするための正しい手順

1. 「お手本」を半透明にして重ねる

プロが模写をするとき、目分量ではやらない。一番確実なのは、お手本の画像を一番上に置いて、たまに透かして見る方法。

• 手順：
  1. お手本の画像をPhotoshopに読み込み、レイヤーの一番上に置く。
  2. レイヤーパネルの上にある「不透明度」を50%くらいに下げる。
  3. レイヤーの左にある「目（👁）」のアイコンをカチカチ押して、自分の作った図形が、お手本とピッタリ重なっているか確認する。

2. 「色」は自分で作らず、お手本から盗む

「似たような赤」を探す必要はない。

• 手順：
  1. スポイトツール（ショートカット：I）を選ぶ。
  2. お手本の画像の中の、使いたい色の上でクリック。
  3. これで全く同じ色が「描画色（現在の色）」として設定される。あとは長方形ツールなどで描けば、同じ色になる。

3. 文字は「打つ」だけではなく「整える」

ただ文字を打っただけだと、バラバラに見える。文字を入れたら、必ず「文字パネル」（メニューの「ウィンドウ」→「文字」）で以下の3つを確認する。

• フォントサイズ： お手本と大きさを合わせる。
• 行間（上下の隙間）： 文字が2行以上のとき、ここを調整して読みやすくする。
• 字間（左右の隙間）： 文字同士が詰まりすぎていたり、空きすぎていたりしないか調整する。

4. 迷ったら「移動ツール（V）」に戻る

先ほど解決した通り、「何かをしたい（動かす、揃える、サイズを変える）」ときは、必ず移動ツールに持ち替えてから、そのレイヤーをクリックするのがPhotoshopの鉄則。

---

---

模写でピタリ合わせるための「最強の武器」：矢印キー


整列ボタンで「だいたい」の位置に持っていったら、最後は移動ツール（V）でレイヤーを選び、キーボードの「矢印キー（↑↓←→）」でトントンと叩いて調整する。

・矢印キー1回： 1px動く
・Shift + 矢印キー： 10px動く

「数値」や「機能」よりも、「お手本と重なった時に違和感がないか」という自分の目を信じるのが、模写においては正解。

---

プロが必ずやる4つの当たり前

1. レイヤーに「名前」をつけて「グループ化」する

HTMLでいう<div>で囲む作業と同じだが、フォトショでは「フォルダ」で管理する。

• 当たり前の手順：
  1. 関連するレイヤー（例：ボタンの四角と、その上の文字）を複数選択。
  2. Ctrl + G を押してグループ（フォルダ）に入れる。
  3. フォルダ名をダブルクリックして「button」など名前をつける。
• なぜやるか： レイヤーが30枚、50枚と増えたときに、名前がないと「どれがどのパーツか」探すだけで日が暮れてしまうから。

2. 「整列機能」で機械的に揃える

「だいたい真ん中」は、デザインではNG。

• 当たり前の手順：
  1. 移動ツール（V）を選択。
  2. 「背景の四角」と「その上の文字」の両方を選択。
  3. 画面上のオプションバーに出る「整列アイコン」（棒と四角のマーク）をクリック。
• なぜやるか： 人間の目は1pxのズレも「違和感」として察知する。ソフトの計算で「完璧な中央」にするのが当たり前。

3. 文字の「行間」と「字間」を調節する

文字は打ったまま（デフォルト）では使わない。

• 当たり前の手順：
  1. 文字パネル（ウィンドウ ＞ 文字）を出す。
  2. 「行間」：2行以上の文章のとき、文字が重ならないよう、かつ離れすぎないよう数値を調整する。
  3. 「字間（カーニング）」：文字と文字の間の隙間を調整して、読みやすくする。
• なぜやるか： 読みやすさがバナーの「クリック率」に直結するから。

4. 最後に「書き出し」をする

フォトショのデータ（.psd）のままではネットに上げられない。

• 当たり前の手順：
  1. ファイル ＞ 書き出し ＞ Web用に保存（従来） を選ぶ。
  2. 形式を「JPEG」や「PNG」にして保存。
• なぜやるか： これで初めて、ブラウザで見れる「画像」になる。

---

模写でやるべき「当たり前」のスタイル

動画の真似をして「ペタペタ」やるのではなく、最初から「整理しながら作る」クセをつけるのが上達への近道。
具体的には、こう考えよう。

1.「ボタン」を作ったらすぐ Ctrl + G （四角と文字を選んでグループ化し、名前を “button” にする）
2.「メインビジュアル」を作ったらすぐ Ctrl + G （写真とキャッチコピーをグループ化して “main” にする）


これだけで、レイヤーパネルがスッキリして、「今自分がどこを触っているか」が常に明確になる。迷子がなくなると、作業スピードは逆に上がる。

---

優しい感じのフォントと色の選び方

スクール系バナーでは、親しみやすさを出すために以下の工夫がされている。

• フォント選び：
  • 「丸ゴシック体」を探してみよう（例：小塚丸ゴシック、ヒラギノ丸ゴ、YuGothicなど）。角が丸いだけで一気に柔らかくなる。
    
• 色の選び方：
  • 真っ黒ではなく、「濃いグレー」や「少し茶色がかった黒」にするのが鉄則。
  • やり方： お手本のバナーがあれば、文字の部分を「スポイト」で吸ってみよう。真っ黒ではない数値（例：#333333など）が出るはず。

---

複数の文章を揃える方法（改行 vs 別レイヤー）

特徴・サービスなどのアピールで複数文章がある場合、結論から言うと、「別々のレイヤー」で作るのが正解。

• 理由： 改行で作ると、1行目と2行目の「行間（上下の隙間）」を微調整するのが難しくなる。
  
• やり方：
  1. 例えば、「参加無料」というレイヤーを1つ作る。
  2. それを複製（Ctrl + J）して、別の文章に書き換える。
  3. 3つのレイヤーを選択して、「左揃え」と「垂直方向の等間隔に分布」（整列パネルのアイコン）を使えば、プロのように完璧に揃う。

3. CTAボタンと文字を「きっちり」合わせる方法

基本的には「整列」機能を使う。

• ボタンの作り方：
  • 例えば、「角丸長方形ツール」で枠を作る。
  • その上に「詳しくはこちら」の文字を置く。
    
• 合わせるコツ：
  1. レイヤーパネルで「枠のレイヤー」と「文字のレイヤー」を両方選択（Ctrlを押しながらクリック）。
  2. 移動ツールを選んだ状態で、画面上のメニューにある「水平方向中央揃え」と「垂直方向中央揃え」のアイコンをポチポチッと押す。
  3. これで1pxの狂いもなく真ん中に配置される。

---

「なんとなく置く」のではなく、「整列機能を使って数学的に配置する」。これができるようになると、見た目の「ガタつき」が消える。