バナー作成が捗る!1分で出来る!Photoshopでの写真合成の初歩

公開日: 

こんにちはハカセです。

楽天やYahoo!のみならず、自社サイトでのネットショップ運営において、無くてはならないと言っていいほどに重要なものの一つが「写真」でございます。前職でも売上げを伸ばせた要因の一つに写真の力があると思っています。

楽天の三木谷社長もその力を判っていたからこそpinterestに出資したのだと思います。その後なんかアレな感じで音沙汰ないですが・・・。

ネットショップでは写真が無いと商品が何なのか全くと言っていいほどわからない事すらあります。特に食品やファッションなんかのジャンルでは重要です。

例)結構大きめでかまぼこみたいな形のカッコイイかばんポイント10倍!

カバンだって事は理解出来ますし、大きめなのはわかりますが、それ以外の情報はかなり曖昧です。これじゃあ欲しいと思うどころか、何なのかを理解する前にページを見るのを辞めてしまいそうです。

kaban

じゃあ誰もが知っている様な商品なら写真がいらないかと言えば、そんな事はありません。

iphoneのイメージ

明らかに写真があった方がその商品をイメージ出来ますし、その商品を手にする事を想像しやすくなり、衝動買い・ついで買いなどがおこりやすくなり、購入へのハードルが下がります。

型番商品を大量に販売しているショップさんで、商品画像まで手が回らずに型番と価格と最低限の情報だけで販売していたのを、バイトを雇って全商品に画像を入れたところ他に何もしていないのに売上げが1.5倍ほどになったという実例もあるそうです。

写真が残念でもどうにか出来る!Photoshopがあれば。

この様に非常に重要な商品の写真ですが、「プロのカメラマンを雇ってきちんと撮影している」って店舗さんはかなり限られているのではないでしょうか。私の前職では店舗の規模もそこそこ大きかったので、ほとんどの商材はプロのカメラマンさんに撮ってもらっていましたが、知り合いのショップさんでは、店長さんや運営スタッフなどが苦労しながら撮影していました。

私はカメラマンでは無いので、撮影に関してはたいしたアドバイスは出来ませんが、デザイン畑出身の私には非常に強い武器があります。

そうですPhotoshopです。

Photoshopってよく聞くけど「何なの?」

Photoshopイメージ

Adobe Photoshop(アドビ・フォトショップ)
主に写真編集(フォトレタッチ)としての役割を担うソフトウェアとして、画像加工、イラストレーション、印刷業界などあらゆる画像分野で使用されており、この分野では代表的な存在である。主に写真などの加工に適しており、さまざまなフィルタやプラグインを追加することによって、機能を拡張することができる。また、Illustrator や InDesign といった同社の他のソフトとは、シームレスな連携がはかられている。
Photoshop の標準画像ファイルフォーマットはPSD形式であり、レイヤーやパス、印刷情報や著作権情報などを付加して保存できる。また多くの画像フォーマットに対応しており、ビットマップ画像だけでなくベクターイメージを扱うこともできる。
wikipedia「Adobe Photoshop」より

これだけ聞くとなんだか良くわかりませんが、画像に関する事なら何でも出来ると思っておいて間違いありません。Photoshopにできない事は他のソフトでも出来ないのです。(大げさです)

私はもう十年以上使ってますが、未だに良くわからない事もありますし、バージョンアップの度に新機能がどんどん追加されるので、Photoshopのパワーを100%使いこなせている人って居ないんじゃないかってくらいに奥の深いソフトですが、世間が思っているほどハードルは高くありません。店舗運営をされている方は導入をご検討下さい。世界が広がりますよ。

「でも、お高いんでしょ?」

以前は高価なソフトの代名詞みたいなイメージでしたが、現バージョンからCreative Cloudというダウンロード販売に統合され、Photoshop単品なら月額3,000円で使用出来る様になりました。

ちなみに全シリーズ使用可能なフルバージョンでも月額5,000円なので単体で使用するより断然お得です。年間6万円と考えると結構高価に感じるかも知れませんが、サイトのコーディングに欠かせないDream Weaverや、映像編集のPremiere、その他Illustrator、Flashなど総額ウン十万円分(CS6までのパッケージ販売換算)のソフトが使える事や、バージョンアップに費用が掛からない事、必要なくなったら契約解除すればOKって事を考えると、むしろお得なのかも知れません。

一つのライセンスで2つのパソコンにインストール出来ます(同時使用不可)ので、MacとWindowsなどの使い分けにも便利ですし、オフィスのパソコンとノートパソコン両方に入れたい方にもおすすめです。ちなみに私はデスクトップPC(Windows)とノートパソコン(Mac)で使い分けてます。

実際にやってみよう

Photoshopで画像を合成するやりかたはいくつもありますが、今回は初歩の初歩と言う事で見本の様なものを作る事を想定します。

見本
猫キーボード

元となる写真
猫
キーボード

画像はここから拝借しました。
WEB制作向け無料写真素材/ぱくたそ [browser-shot width=”200″ url=”http://www.pakutaso.com/”]

必要な画像のサイズの書類を作る

まずはPhotoshopで必要なサイズの新規書類を作ります。

「ファイル」から新規(N)を選びます。
01

プリセット℗はwebを選んどきましょう。
02

幅(W)と高さ(H)に必要なサイズを入力して「OK」をクリック。

元となる写真を開く

元になる写真を選びドラッグしてPhotoshop画面の図のあたりで離す。
(または「ファイル」開く(O)から該当ファイルを選択)
03

開きました。
04

元となる写真の大きさを調整

「イメージ」画像解像度(I)を選択。幅(D)に必要なサイズを入力。
(縦横比を固定するマークにチェックが入っているのを確認)
05

この時PhotoshopCS6までバージョンを使っている場合、再サンプルをバイキュービック法(シャープ)を選んでおきましょう。縮小時の写真のボケを抑えてくれます。

写真(レイヤー)をコピー

レイヤーウインドウの右上をクリック、レイヤーを複製(D)を選択
06 保存先-ドキュメントは先程作った書類を選択して「OK」を押す。

もう一個も移動します。

レイヤーマスクを追加

猫のレイヤーを選択したまま、レイヤーウインドウ下部にある「レイヤーマスクを追加」のボタンをポチッと。
07

なんか出来た!
08

出来たレイヤーマスクが選択選択された状態でグラデーションツールで「描画色から透明に」のグラデを選んで
09

画像の上を図の様にドラッグ。
10

キーボードが見えた!
11

さらに白い部分を消す様に調整。

位置や大きさを調整する

直感に基づいて大きさや位置を調整。
(Don’t think. feel!)
12

適当に文字とか入れてみる。

出来た!
猫キーボード

まとめ的な何か

いかがでしょうか? 「1分じゃ無理だろ?!」 いえ、そんな事はありません。覚えてさえしまえば1分もかからず合成自体は可能です。レイアウトや調整などには時間が掛かるかと思いますが、非常に早いスピードで合成が可能です。そして、ただ単に2枚の画像を重ねるより幾分かは「プロっぽい」仕上がりになるはずです。

さらに今回は説明していませんが、レイヤーマスクの形を工夫すれば応用方法は無限にあります。合成だけじゃなく「不要な部分を自然に切り取る」時にもこのテクニックは非常に役に立つはずです。

ページのレイアウトにあわせてカメラマンに撮影してもらう事は、現実的に難しいと思います。この記事がお客さんにとって「見やすい」「わかりやすい」ページ作りの手助けになれば幸いです。

今回もまた面白いことがひとつも言えなかったので、次回こそは「でっち上げ面白エピソード」でも披露しようと思っています。

それではまた。

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Twitter

ページ先頭に戻る