webデザイン

これは知らないと損!背景が透明なPNG画像の輪郭をなじませるPhotoshopの使えるテクニック《動画解説付き》

人物と背景を合成したい場合、予め人物の背景を透明にしたままでPNG画像保存をしておくことで、さまざまな別の背景画像に入れ替えることが可能になり、バリエーションを増やすことができます

関連記事 ⇒ これさえ身につけてしまえば、ほぼ思い通りの作品が作れるようになるPhotoshopの切り取りテクニック。

しかし、背景の色によっては合成したい画像がうまくなじまず、”カスカス”してしまう部分が出てくることがあるので、ここではカスカスさせることなく、うまく背景になじませるテクニックを解説します。(動画は最下部です↓)

Photoshopを使っている人であれば、ブログのヘッダーデザインをする際などに、かなり役立つテクニックなので覚えておいて損はないと思います。

背景が透明なPNG画像があるとバリエーションを作るのがとても簡単!

例えば、このような白い背景のヘッダーデザインをしてみます。

header-synthesis01

背景が透明なPNG画像をPhotoshopで開き、ヘッダーにドラッグします

header-synthesis02

これでPNG画像は不要になるので×でウィンドウを閉じます。

header-synthesis03

移動ツールで任意の場所にレイアウトすれば完成です。すごく簡単ですね!

header-synthesis04

髪の毛などの複雑な部分も綺麗に切り取られていれば、白い背景にちゃんとなじみます。

header-synthesis05

ただ・・

背景に色を入れたいと思い、塗りつぶしツールで塗ってみると・・カスカスしてしまう部分が出てくることがあります。

header-synthesis06

PNG画像の輪郭をなじませる工程

基本的な考え方としては、3つのレイヤーを用意して、1番後ろのレイヤーの描画モードを乗算に変更し、真ん中のレイヤーの輪郭をぼかしながら切り取り最前面のレイヤーで最終調整するイメージです。

Photoshopに慣れている人であれば、この解説だけで再現できると思います。

header505

人物レイヤーを複製します。

header-synthesis07

複製したレイヤーは、目のマークをはずし一旦非表示にして、複製元のレイヤーの描画モードを乗算に変更します

header-synthesis08

今度は逆に、乗算にしたレイヤーを非表示にして、複製したレイヤーの背景部分を自動選択ツールで選択し、境界線を調整をクリック

header-synthesis09

人物の輪郭部分をなぞります。

header-synthesis10

結構内側まで切り抜くので、エッジをシフトを強めに調整し、ぼかしも入れます。(このあたりは使用する画像によって感覚で調整してみてください。)

header-synthesis11

調整ができたらOKをして、Delキーで切り取ります。

header-synthesis12

ここで非表示にしていた乗算レイヤーを表示すると、髪のカスカスしていた部分が無くなり、背景になじませることができました

ただ、今度は体の輪郭部分が濃くなってしまっているようです

header-synthesis13

乗算レイヤーを再度複製し、描画モードを乗算から通常に戻して体以外の部分を切り取ります(多少ぼかしながら)。

header-synthesis14

1番後ろの乗算レイヤーと、真ん中の輪郭を切り取ったレイヤーを表示させ、最前面の体だけのレイヤーの不透明度を調整して完成です

header-synthesis15

この簡単なテクニックを使えるようにしておくことで、背景を入れ替えながらヘッダーデザインのバリエーションを増やすことが可能になります。ぜひ応用しながら活用してみてください。

全工程動画ダイジェスト

header-sy01

関連記事:これで完璧っ!5種類のphotoshop切り抜き方法を使い分けて輪郭線を背景になじませるクオリティの高い合成をマスターしよう。

スリームデザインの無料メールマガジン

ピックアップ記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  2. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  3. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  4. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  5. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…

関連記事

  1. webデザイン

    わずか3秒っ!Photoshopで文字を中央に配置する方法

    Photoshopで文字や図形などを画像の中央(上下左右バッチリ均等)…

  2. webデザイン

    「コレがやりたかった!」GIFアニメ(動く画像)のPCモックアップ画像の作り方【Photoshop編…

    JPGなどの画像をパソコン画面にはめ込んだモックアップを作りたい場合に…

  3. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画のまとめ

    Photoshopには写真を補正するだけではなく、デザインに必要とされ…

  4. webデザイン

    最近、123RFとゆー画像素材のストックフォトがめちゃめちゃ安くてハンパない件。

    つい最近までは画像素材を使用する際にはもっぱらiStockとFotol…

Wordpress日本語テーマのまとめ
photoshop日本語チュートリアル

よく読まれている人気の記事

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本…
  2. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  3. Photoshop CCのメニュー文字やツールバーが異常に小…

思考系のおもろい記事

ブログラ
  1. 3分の話

    フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  2. SNS

    思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  3. コピーライティング

    「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  4. 3分の話

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  5. webデザイン

    「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
PAGE TOP