• LIGの広告成功事例
WEB

Photoshopで“水しぶき”などの背景が透けた画像をカンタンに切り抜く方法

Photoshopで“水しぶき”などの背景が透けた画像をカンタンに切り抜く方法

こんにちは。デザイナーの藤田です。
久しぶりにPhotoshopのtips記事をお届けします。

皆さんは“水しぶき”などの背景が透けた画像の切り抜きに苦戦したことはありませんか?
ただ背景を切り抜くだけだと、透明感をなかなか表現できませんよね。
そこで今回は、“水しぶき”などの透け感がある画像をみずみずしく切り抜く方法をご紹介いたします。

※今回の記事で使用している画像は下記サイトのものです。

Photoshopで“水しぶき”画像を切り抜く手順

1. アルファチャンネルを使用して背景を切り抜く

blog_eyecatch2

切り抜きをする素材を配置したら、メニューバーから[ウィンドウ]> [チャンネル]を選択し、「コマンド(Ctrl)」を押しながらRGBチャンネルのサムネイルをクリックします。

img2
上記で作成された選択範囲をコマンド「(Ctrl)+shift+i」で反転するとオブジェクトに沿った選択範囲が作成されます。

blog_eyecatch

2. 切り抜き画像を複製する

先ほど作成された選択範囲を保持したままレイヤーパレットに戻り、「コマンド(Ctrl)+j」で選択範囲に沿った、画像の複製を行います。

blog_eyecatch2
この状態では水の質感が薄いので、水の質感が出るまで数回「コマンド(Ctrl)+j」で画像の複製を行います。

blog_eyecatch2

レイヤーパレットでは複製された画像レイヤーが重なります。

img4

3. フリンジを削除する

上記の手順で作成された画像を黒背景に重ねてみると、オブジェクトのエッジに白いフリンジが残っているかと思いますので、こちらを除去していきます。

blog_eyecatch2

作成されたオブジェクトのレイヤーをすべて選択し、「コマンド(Ctrl)+e」でレイヤーを結合した後に、「コマンド(Ctrl)」を押しながらレイヤーのサムネイルをクリック、選択範囲を作成します。
選択範囲を作成したら、選択ツールを選択して[境界線を調整]ウィンドウを開きます。

blog_eyecatch

ウィンドウ内にてエッジの調整と不要なカラーの除去を行えば、エッジに残った白いフリンジが削除できます。

blog_eyecatch2

これで“水しぶき”画像の切り抜きは完了です。

まとめ

blog_eyecatch2

いかがでしたか?
作成された切り抜き画像を缶ジュースの上に重ねるだけで、一気にシズル感のある画像に早変わりしました。プロダクトの「防水機能」の訴求画像などにも今回のテクニックは応用できそうですね。
今後も、自分の勉強も兼ねてPhotoshopのtips系記事を更新していきますので、ご期待ください。

※サンプル画像は水しぶきの「描画モード」を「輝度」にして重ねております。

今回の記事はこちらのサイトを参考にさせていただきました。

 

【おすすめPhotoshopのテクニック集】

Photoshopを快適カスタマイズできるオススメ無料プラグイン6選

Webデザインを効率化するPhotoshopの機能まとめ

Photoshopで写真をリアルな鉛筆画に加工する方法

Photoshopで人物の髪の毛を「境界線の調整」を使って簡単に切り抜く方法

Photoshopで人物の髪の毛を切り抜く方法

この記事を書いた人

藤田
藤田 デザイナー 2013年入社
デザイナーの藤田です。 野球とビールと猫が好きです。 ジョブズの「来る日も来る日もこれが人生最後の日と思って生きるとしよう。」という言葉が好きです。言葉の通り毎日、全力投球で頑張っております。 どうぞ、よろしくお願い致します。