アイキャッチ画像に本の写真をなじませてみる

アイキャッチに本の写真を使うテクニック

MENくん
本のレビューを書いたんだけど、アイキャッチ画像どうしよう
くま3号
本の画像に表紙をくっつければええんや!
MENくん
なるほど!やってやんよ!

こんな感じにくっつけてみた

Before
After
MENくん
これで本に見えるようになった!

こんなところを意識してつくってみました
  • 立体感がでるように
  • 本に見えるように
  • SANGOになじむように
使ったもの・ソフト
  1. カメラ(スマホでも可)
  2. 撮影用のボックス(無くても可)
  3. lightroom(写真補正用:無くても可)
  4. photoshop(写真調整用:必須)
  5. Adobe stockのイラスト(あると最高)
  6. illustrator(文字や背景と組み合わせる:必須)

本の写真を撮る

手元にある商品は自分で撮影するとオリジナル感がでますよね。 ぼくは撮影ボックスとカメラを使って写真を撮っています。  

お手頃撮影ボックス

5,000円以下 簡単に折り畳める
 

低価格モデル

RAW画像が撮影可 4K動画も撮れる
 
ぼくが使っている撮影ボックスやカメラはこちらで紹介しています。
アイキャッチ画像と商品画像アイキャッチ画像に商品写真をキレイになじませる方法 撮影ボックスやカメラを使わないとダメという訳ではありません。 写真を撮るだけなのでスマホでも大丈夫です。
MENくん
ぼくは無駄なところにこだわるクセがあります
くま3号
ほんと、そだね

夏だし髪を斬りに行こう!

夏だしどっか行こう!

写真を加工

撮影した写真はこちらです。 元の写真 RAWで撮影した画像は暗く見えるので、加工ソフトでちょめちょめしていきます。

Lightroomで写真を編集

lightroom
ぼくはRAW画像を加工・編集するのでLightroomを使います。JPGやPNGならPhotoshopや写真加工アプリでもできちゃいます。
lightroomでやったこと
  • トリミング(正方形)
  • ホワイトバランス選択
  • 露光量アップ
  • ハイライト・白レベルアップ
  • コントラストちょいアップ
  • 明瞭度とかの微調整

編集後の写真

Lightroom編集後   暗かった画像もキレイに明るくなりました。 次はPhotoshopでもう少しキレイにしていきます。

Photoshopで加工

photoshop
今回使うのは表紙の部分だけなので、その部分をキレイに切り取ります。その後ちょっとだけ加工していきます。
photoshopでやったこと
  • 背景からレイヤーに変更
  • ペンツールで表紙部分をなぞる
  • パスで選択範囲を作成
  • Shift+Ctrl+Iで選択範囲を反転
  • Deleteキーで表紙以外を削除
  • Ctrl+Dで選択を削除
  • イメージ>色彩補正>明るさ・コントラスト調整
  • Shift+Ctrl+Alt+SでWEB用に保存

加工した写真

Photoshopで加工後 表紙の部分だけを新品みたいに切り取りました。 最後はIllustratorでこの画像を使っていきます。

Illustratorで表紙を本にくっつける

いよいよ本題ですね。 基本的には素材に本の表紙をくっつけるだけです。  
素材
今回使用するこちらの素材はAdobeStockでダウンロードしました。

こちらの素材を使って、表紙をくっつけていきます。
STEP 1
素材と写真の配置
アイキャッチ用の背景に素材(左)と本の表紙(右)を配置します。
STEP 2
表紙を付けたいところをコピー
表紙を付けたい部分だけコピーします。
STEP 3
高さを揃える
コピーしたものを基準に表紙の写真の高さを揃えます。
STEP 4
前面にする
コピーした灰色の部分が前面に来るようにします。選択してCtrl+]でできます。
STEP 5
エンベローブ
2つを選択した状態でオブジェクトエンベローブ最前面のオブジェクトで作成をします。 するといい感じの表紙が出来上がります。
STEP 6
完了
もとの位置に戻して、タイトルを付けたら完成です。
MENくん
立体的になりました!
くま3号
いい感じに仕上がったな
 
商品の写真をキレイに配置するときはこちら
アイキャッチ画像と商品画像アイキャッチ画像に商品写真をキレイになじませる方法  
イラストレーターの使い方はこちら
アイキャッチ画像をキレイに配置するイラストレーター編アイキャッチ画像に商品写真をキレイになじませる イラストレーター編