Photoshop

【バナー】わんこフォトコンテスト

【バナー】わんこフォトコンテスト
nabana

Photoshopの学びの覚書として作成しています。

POINT: ペット系ポータルサイトが企画する、「うちのわんこフォトコンテスト」ページへ誘導するためのバナーデザイン

BANNER:Web・SNS

SIZE: 1,540px × 1,040px

COLOR: RGB

DPI: 72dpi

FONT: 筑紫A丸ゴシック Bold         

作成のポイント

【バナー】わんこフォトコンテスト
  • レイアウトの計画
  • 複数のシェイプの複製
  • レイヤースタイル → カラーオーバーレイで色を変える
  • 不透明度の調整

作成の流れ

  1. レイアウトを計画する
  2. クリッピングマスクの土台を作る
  3. タイトル部分の文字組をする
  4. クリッピングマスクで写真を配置する
  5. PDFファイルを保存し、JPGを書き出す

作成の詳細

レイアウトを計画する

写真と写真の間のマージンは20pxとする。

計算すると、1枚の写真のサイズは360px × 235px となる。

クリッピングマスクの土台を作る

解説【バナー】わんこフォトコンテスト

キャンバスの左上に適当な塗り色の360px × 235pxの長方形を作成し、10pxの角丸をつける。

長方形を左上にぴったり合わせ、Shift+矢印で上と左に20pxのマージンを確保する。

作成した長方形をAlt+ドラッグで複製してぴったり合わせ、Shift+矢印で20px空ける。

解説【バナー】わんこフォトコンテスト

さらに複製して、長方形を全部で16個作成する。

中央の4つの長方形を削除する。

タイトル部分の文字組をする

解説【バナー】わんこフォトコンテスト

中央に長方形を作成する。サイズはスマートガイドを使って調整し、10pxの角丸をつける。

レイヤーサムネイルをダブルクリックして色を調整し、レイヤースタイル → 境界線で枠を付ける。

「うちのわんこ…」のテキストを配置。

カメラのアイコンを配置、レイヤースタイル → カラーオーバーレイで色を変え、不透明度を10~15%にする。

テキスト、カメラのアイコン、中央の長方形の3つを選択して中央揃えにする。

肉球のアイコンを配置して、カラーオーバーレイで色を変える。

タイトル部分のレイヤーをグループ化する。

クリッピングマスクで写真を配置する

12個の長方形に写真を一つずつクリッピングマスクで配置する。

写真と土台をそれぞれグループ化し、さらに12個のグループを一つにまとめる。

ABOUT ME
なばな
なばな
Webデザインを勉強中の主婦です。シンプルで快適な暮らしを日々模索中。デザインの学びの記録と暮らしのヒントを綴ります。
記事URLをコピーしました