ブログ

2016.04.08

【続編】初心者でもできる!商品写真を簡単に加工する方法と押さえたいポイント
【続編】初心者でもできる!商品写真を簡単に加工する方法と押さえたいポイント

Web制作

こんにちは、青木です。
弊社では、楽天、Yahoo!などでECサイトを運用しており、商品の撮影や写真加工もしております。

以前の記事で、商品写真を簡単に加工をする方法を紹介させていただきました。その時に背景を白にすると、どの商品とでも相性が良いと書きましたが、さらに背景を加えたり工夫をすると競合と差別化が出来て、ユーザーに見てもらいやすくなります。

実際にこちらの商品は、なかなか購入に結び付かない商品でした。背景を加えた商品写真に変更したら、購入に結び付きました。商品画像の背景が変わったことが直接的な要因かは定かではありませんが、一理あるでしょう。
82537349

そこで今回は、デザイナー向けに以前の記事の続編として、商品写真の背景の抜き方とその活用方法をご紹介させていただきます。また、応用編として人物写真の背景の抜き方のポイントも一緒にご紹介させていただきます。

今回も以前の記事同様に、Photoshopを使用した加工の方法です。Photoshopにあまり触れた事がなく、商品写真を加工する担当になった方や、Photoshop初心者でも商品写真を加工できるように、加工の方法を紹介させていただきます。

※Photoshop CS6の画面を使ってご説明させていただきます。

目次

 

1.選択ツールで境界線の調整

編集したい画像をPhotoshopへ表示させます。
レイヤーを見たときに、背景になっていますので、鍵ボタンをダブルクリックして、新規レイヤーを作成します。尚、Photoshop CCの場合は、鍵マークをダブルクリックするだけで、鍵を外すことが出来ます。
ロック解除

Photoshopの選択ツールにはいくつか種類がありますが、まずはクイック選択ツールを使用していきます。
クイック選択ツールの特徴としては、画像の上をブラシでなぞるだけで選択範囲を自動的に作成する機能となっております。
クイック選択ツール

続いて、下記画像のようにブラシのサイズをブラシピッカーをクリックして、選択範囲の大きさを変更していきます。
ブラシピッカー

選択範囲が足りないときや、選択をしたくない箇所も選択した場合は、「+」で選択範囲の追加。「-」で選択範囲から一部削除することが出来ます。細かい箇所は選択をすることが困難になってきますので、商品画像を拡大させると選択しやすくなります。
また、なげなわツールや多角形選択ツールも駆使するとさらに綺麗に選択できます。
選択ツール

商品の選択が出来たら選択範囲の反転を行います。選択範囲の反転をしないと背景だけがが残り、商品だけ切り取られてしまいます。今回は商品を残して背景を削除するので、「選択範囲」→「選択範囲を反転」で選択範囲を反転させます。
反転後、バックスペースキーを押すと背景が切り取られます。
背景削除
背景が切り取られて透明になっている箇所は、グレーと白の格子で表示されます。

2.背景と組み合わせる方法

背景にしたい画像をPhotoshop上で開けます。開けた背景上に、先程背景を抜いた画像をファイル」→「配置」で配置させます。
画像配置

大きさなど大まかな配置が決まれば、赤で囲ってある○をクリックすれば背景の上に商品写真が配置できます。
Screenshot_12

また、他の商品を加えたり、ロゴマークも挿入すると、カテゴリーページに案内できるバナーもこのように作成することができます。カテゴリーバナーがあるとどのようなブランドカテゴリーを見ているのか、またブランドのイメージを伝えることが出来ます。
ダニエルウェリントン

応用編 人物画像の背景抜き

左の人物を切り抜いて、右の背景画像に組み込みます。
背景抜き
人物画像の背景を抜くときに、一番苦戦するポイントは髪の毛だと思います。応用編では髪の毛の選択の方法です。しかし、髪の毛も簡単に選択をすることが可能です。
先程のようにクイック選択ツールで全身を選択します。この時に髪の毛は細かく選択しなくても大丈夫です。
選択ができたら「境界線を調整…」をクリックします。
Screenshot_13
①調整ダイアログの「表示▼」をクリック、表示モード「白黒」を選択
②コントロールパネルの「半径調整ツール」を選択、表示モード「レイヤーを表示」を選択後髪の毛の境界線上をなぞる。
③調整ダイアログの「表示▼」をクリック、表示モード「白黒」を選択
境界線を調整比較
選択されている箇所が白く表示されています。①と③を比較すると髪の毛先まで選択されていることが分かります。
後は同じように、選択範囲の反転をして、背景と組み合わせます。
人物
上記のように、背景を変更することによって、この鞄を使うシーンをユーザーに想像させることができます。

まとめ

今回は続編ということで、Photoshopを用いて、初心者の方でも、簡単に綺麗に商品写真の加工が出来る方法をご紹介させていただきました。実物を見ることが出来ないネットショップでは、いかに綺麗に商品写真を見せるか、シーンを想像させることが大事になってきますので、今回の背景を変更して、より商品が良く見えるように試してみてはいかがでしょうか。

WEBコンサルティング

最適化・最大化させる。

制作、集客、解析、改善、検証まで一気通貫した完全オーダーメイドのWebコンサルティング。
お客様のビジネスゴールに向けた戦略的コンサルティングを行います。

VIEW MORE くわしく見る

ホームページ制作

キレイなだけじゃない。

競合分析・サイト設計から更新・運用までトータルサポート。
Web集客のプロが在籍しているアクシスだからこそ実現するデータに基づき最適化されたHPを制作します。

VIEW MORE くわしく見る

ネット集客・広告

来てほしい人が来てくれる。

御社にとっての最適解は、本当にリスティング広告で集客することですか?
リスティング運用者全員がWebコンサルタントのアクシスでは、そこから話を始めます。

VIEW MORE くわしく見る

解析・分析・改善

あなたのサイトを丸裸に。

Webサイトの現状を正しく把握し、目指すべき姿とのギャップを知る。
“2軸思考”であなたのWebサイトを丸裸にし、Webサイトで今何が起きているかを正しく把握します。

VIEW MORE くわしく見る

お問い合わせ

メールフォームからの
お問い合わせ