SEO対策

本日人気の記事

ECサイトの画像をより美しく見せるためのPhotoshopを使った背景白抜き方法

ECサイトの画像をより美しく見せるためのPhotoshopを使った背景白抜き方法

今回はPhotoshopを使った背景切り抜き方法を解説します。
背景の切り抜きは特にAmazonへの出品時には必須作業となります。

まずは加工対象の画像をPhotshopで開きます

まずは加工対象の画像をPhotshopで開きます。

Photoshopで加工したい画像を開く

ペンツールを選択します。

ペンツールを選択

若干内側をクリックして選択していきます。

切り取りたい範囲の若干内側を選択していく

ふたたびペンツールを選択しますが、
この時ペンツールを左クリックしたらそのままマウスから指を離さず押し続けてください。
しばらくするとメニューが出てきますので、「アンカーポイントの切り替えツール」を選択します。

アンカーポイントの切り替えツールを選択

アンカーポイントの選択ツールに切り替わったら、
先ほどペンツールで選択したポイントをドラッグしてパスを調整していきます。
今回は丸見を帯びた器なので大雑把に調整していきます。

大雑把に選択していく

このように調整していき、最終的には以下のようにします。

パスで全体を選択した状態

右側のメニューから「パス」を選択します。

Photoshop右側のメニューからパスのメニューを選択

「パス」のメニューが見当たらなければ、
上部メニューから

を選択します。

Photoshop右側のメニューからパスのメニューを選択その2

パスのメニューが開いたらパスを選択範囲に変換アイコンをクリックします。

パスが選択範囲に変換させる

すると、先ほど作成したパスの範囲が点線に変わります。

パスが選択範囲に変換された画面

続けてパスのメニューから選択範囲をマスクする機能アイコンをクリックします。

選択範囲をマスク

このように背景が飛んだ状態になります。
今回は白背景なので、そのままjpg形式で保存します。

背景が切り取られた、飛んだ状態

上部メニューの

を選択します。

Photoshopで加工したい画像をWEB用に保存する

書き出しはJPEGにし、画質は100のままで保存します。
画像サイズを小さくしたり大きくしたい場合もこの画面で調整可能です。

Photoshopで加工したい画像をWEB用に保存するその2

2. まとめ

今回はPhotoshopで背景切り抜きの方法を解説しました。
複雑な画像の場合は、ペンツールで選択する箇所を増やしましょう。

Photoshop以外のツールを使った背景切り抜き方法は以下を参考にしてください。

この記事を書いた人

Profile image
代表取締役の徳増です。
WEB制作、運営、人事など業務全般に携わっています。
中学時代から自分は社長になると思い込んでいました。現在、社長です。
元々美術関係やゲームが好きで、「ゲーム作ろっと!」と思い立ち、
高校卒業後に親の反対を振り切って単身東京のプログラミング専門学校へ。
卒業し、第一志望のSEGAは一次試験であっさり落ちてしまい、
内定していた第二志望の某ゲーム会社の通知をムシャっとしてクシャる。
情報処理の会社に入社し4年間倉庫管理システム構築業務に従事。
2007年、帰郷し独立。2013年8月法人化。

僕は最近こんな記事を書きました。是非見てください( ´,_ゝ`)♪

ブログのランキングサイトに参加中!クリックで応援お願いします!

毎日クリックして応援してください(>人<;)
ブログランキング・にほんブログ村へ
にほんブログ村

人気ブログランキングへ

コメントをお寄せください

*
*
* (公開されません)