webデザイン

境界線が複雑な模様やイラストを切り取りせずに合成する裏ワザ的フォトショップ【CS6】技術

フォトショップで画像を合成させるためには、さまざまな切り取り方法があるので最適な方法を試すことができます。

合わせて読みたい関連記事:フォトショップ初心者でもできる!プロ並みの画像合成で自然になじませる方法を解説。

合成元画像

しかし輪郭線が複雑な模様や形状をしたものの場合、自動選択ツールで一発切り取りすると細かい部分がカスカスになってしまったりしてなかなか思い通りに切り取ることができなかったりします。

画像を重ねる

そんな時はレイヤーマスクという機能を使って切り取りを回避しちゃおう。

レイヤーマスクの使い方

まず、はじめに模様の画像を複製します。

レディッシュブラウン塗りつぶし

さらに元の模様画像の背景を複製して、複製したレイヤーにマスクを付けます(右下の日本国旗みたいのを押す)。

ピンライト統合

マスク部分にカーソルを合わせAltを押しながらクリックすると画像がマスク部分(現状は白)に切り替わります。

比較(明)

初めに複製した画像を選択範囲 》すべて選択をして元画像のマスク部分にドラッグして放り込みます。

複製を切り取り

すると元の状態に戻ったようになりますが、レイヤーを確認すると白だったマスク部分に模様が入ったことが確認できます。

オーバーレイ

そのマスク部分の模様をイメージ 》色調補正 》階調の反転すると模様以外の部分が見事に透けました。

彩度を調整しぼかす

模様の黒い部分も若干透けていますがこれは元画像が完全な黒では無かったということ、必要に応じてそのレイヤーを複製し色を濃くして統合すればOK。

境界線をなじませる

合成したい画像を開き、そこに作成した模様レイヤーをドラッグしてサイズを調整。

合成

これでグラデーションやドロップシャドウといった効果を付けることが可能になります。

合成

ゴールドちっくに見せるためディティールを加えて完成です!

合成

関連記事:金色(ゴールド)の文字を表現してクオリティの高いロゴを作る方法

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

ピックアップ記事

  1. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  2. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  3. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  4. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  5. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…

関連記事

  1. webデザイン

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本語のチュートリアルで…

    ここではスリームデザインが実際に仕事をする際に使っているほぼ全ての技術…

  2. webデザイン

    コンバージョン率を2倍に上げるデザインとは?という考え方が間違っているその理由について。

    「ウェブサイトにおけるデザインの役割はとても重要だ!」と今更声をあげて…

  3. webデザイン

    photoshopで映画タイトルロゴのようなメタリックでカッコ良い文字を作るチュートリアル!

    スパイダーマンやアイアンマンなどいかにもMARVELの映画で出てきそう…

  4. フォトショップ

    印刷用データを入稿する際に「インキ総使用量を300%以下にしてください」ってマジかっ!?Photos…

    デザインが完成したぁっ~!!ってことで印刷業者さんへデータを送ったら「…

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

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

最近の記事

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

思考系のおもろい記事

ブログラ
  1. コピーライティング

    「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  2. キュレーション

    必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  3. 3分の話

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  4. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  5. webデザイン

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