こんにちは。デザイナーの藤田です。
久しぶりにPhotoshopのtips記事をお届けします。
皆さんは“水しぶき”などの背景が透けた画像の切り抜きに苦戦したことはありませんか？
ただ背景を切り抜くだけだと、透明感をなかなか表現できませんよね。
そこで今回は、“水しぶき”などの透け感がある画像をみずみずしく切り抜く方法をご紹介いたします。
※今回の記事で使用している画像は下記サイトのものです。
- water splash
- Psd Soda Can Mock-Up Template
http://nihongo.istockphoto.com/stock-photo-13225547-water-splash.php
http://www.pixeden.com/psd-mock-up-templates/psd-soda-can-mock-up-template
Photoshopで“水しぶき”画像を切り抜く手順
1. アルファチャンネルを使用して背景を切り抜く
切り抜きをする素材を配置したら、メニューバーから［ウィンドウ］> ［チャンネル］を選択し、「コマンド（Ctrl）」を押しながらRGBチャンネルのサムネイルをクリックします。
上記で作成された選択範囲をコマンド「（Ctrl）+shift+i」で反転するとオブジェクトに沿った選択範囲が作成されます。
2. 切り抜き画像を複製する
先ほど作成された選択範囲を保持したままレイヤーパレットに戻り、「コマンド（Ctrl）+ｊ」で選択範囲に沿った、画像の複製を行います。
この状態では水の質感が薄いので、水の質感が出るまで数回「コマンド（Ctrl）+ｊ」で画像の複製を行います。
レイヤーパレットでは複製された画像レイヤーが重なります。
3. フリンジを削除する
上記の手順で作成された画像を黒背景に重ねてみると、オブジェクトのエッジに白いフリンジが残っているかと思いますので、こちらを除去していきます。
作成されたオブジェクトのレイヤーをすべて選択し、「コマンド（Ctrl）+e」でレイヤーを結合した後に、「コマンド（Ctrl）」を押しながらレイヤーのサムネイルをクリック、選択範囲を作成します。
選択範囲を作成したら、選択ツールを選択して［境界線を調整］ウィンドウを開きます。
ウィンドウ内にてエッジの調整と不要なカラーの除去を行えば、エッジに残った白いフリンジが削除できます。
これで“水しぶき”画像の切り抜きは完了です。
まとめ
いかがでしたか？
作成された切り抜き画像を缶ジュースの上に重ねるだけで、一気にシズル感のある画像に早変わりしました。プロダクトの「防水機能」の訴求画像などにも今回のテクニックは応用できそうですね。
今後も、自分の勉強も兼ねてPhotoshopのtips系記事を更新していきますので、ご期待ください。
※サンプル画像は水しぶきの「描画モード」を「輝度」にして重ねております。
今回の記事はこちらのサイトを参考にさせていただきました。
- Extracting Transparent Elements
http://planetphotoshop.com/extracting-transparent-elements.html
【おすすめPhotoshopのテクニック集】
※ Photoshopを快適カスタマイズできるオススメ無料プラグイン6選
※ Webデザインを効率化するPhotoshopの機能まとめ
※ Photoshopで人物の髪の毛を「境界線の調整」を使って簡単に切り抜く方法
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
