1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

【Photoshop入門】画像の合成の仕方を徹底解説!

Pocket

Photoshop(フォトショップ)が、多くの人々に愛される理由の1つに、画像の合成・編集機能があります。今回は、他の画像から切り出してきた画像を、別の画像にカンタンに重ね合わせる方法を学んでいきましょう。画像の切り出し方法は、こちらを参照ください。

背景画像に合成したい素材をコピーする

今回、背景画像は雪原を使用します。こちらの画像と、こちらの記事で作成したペンギンの画像を組み合わせて、合成画像を作っていきます。

そのためには、まずペンギンを雪原の上に乗せましょう。ペンギンをまずコピーするために、選択ツールを用います。ここでは、「長方形選択ツール」をクリックで選択します。

「長方形選択ツール」でペンギンが全て含まれるように四角のサイズを調節して選択します。選択し終わったら、右クリックでコピーか、ショートカット「Ctrl+C」でコピーしましょう。

次に、雪原のファイルを別ファイルで開きましょう。開けたら、先ほどコピーしたペンギンの画像を右クリックでペーストを選択、もしくはショートカット「Ctrl+V」 でペーストします。

すると、雪原のど真ん中にペンギンが現れました。この時点では、ペンギンのサイズも位置も考慮されていませんので、調整していきましょう。

まずは、「移動ツール」を選択してペンギンの位置をずらしましょう。このとき、「バウンディングボックスを表示」にチェックを入れましょう。これにより、ペンギンの周りにバウンディングボックスが出てくるので、後でサイズ変更をするときに便利です。

ペンギンの位置を変えることができました。このままでは、ペンギンのサイズが大きいので調整していきましょう。バウンディングボックスの角を選択すると、サイズを変えることができます。サイズを変更するときには必ず、Shiftを押しながらバウンディングボックスの角をクリックし、拡大・縮小しましょう。Shiftを押しながら拡大・縮小することで、画像の比率を保つことができます。

Shiftを押さないままで拡大・縮小してしまうと、せっかくの画像が荒れてしまうので、注意しましょう。

雪原とペンギンが融合しました。ですが、これだけだとどうもペンギンが周りに比べて浮いているように見えますね。もう少し周りに自然に溶け込ませるために、影をつけてみましょう。

影をつける

影を作る方法はいくつかありますが、今回は影用のレイヤーを作るやり方で行ってみます。まず、ペンギンのレイヤー(ここではレイヤー1)を複製します。

次に、影の形になるようペンギンを変形させます。
ここでは、「編集」>「変形」>「自由な形に」を選択し、図のようにバウンディングボックスを変形させます。

この状態だと、影のように見えないため、適度にぼかしていきましょう。「フィルター」>「ぼかし(ガウス)」を選びましょう。

影っぽく仕上がりました。

また、影に多少ペンギンの色が入り混じっているので、影の色を統一していきます。今回は、ペンギン自体の色がモノクロに近いので、この部分は省略してもいいかもしれません。「レイヤースタイルを追加(レイヤーのfxボタン)」>「カラーオーバーレイ」を選びましょう。

次に、色や透明度を選んでいきます。今回は、デフォルトのものでよさそうなのでそのまま進めていきます。

レイヤーの順序を入れ替える

よく見ると、ペンギンの影がペンギンの体の前に来ているようです。これをペンギンの体の後ろにしていきましょう。Photoshopでは、レイヤーの順序で上にあるものが、一番手前に見えます。ですので、影のレイヤーをペンギンの後ろにくるように変更しましょう。

レイヤーの順序を入れ替えた結果、影がペンギンの後ろにきました。いい感じの影ができました。

最終的にできたペンギン画像は、以下のようになりました。影を入れることでだいぶ自然に見えるので、ぜひ試してみましょう。

おわりに

一見、難しそうな「合成」も、1つずつ順序を追っていけば誰でもカンタンにできます。また、今回試した影のつけ方も、数あるやり方の中のほんの一例です。Photoshop内にあるツールを使えば、他にもいろいろな影のつけ方ができるので、試してみましょう。

おすすめ記事
【Photoshop入門】自動選択ツールとクイック選択ツールを使用した画像の切り抜き方
【Photoshop入門】レイヤーを使用し、イラストをデザインしてみよう!

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

おすすめスクール

全国30校舎で展開されるヒューマンアカデミーのWeb講座は修了者数4万人超、講師とカリキュラムの満足度がどちらも9割を超えています。就職や転職に必要なレベルの実務スキルを身に付けられます。

WebCampは、一ヶ月の短期集中でWebデザイン、プログラミングスキルを習得するスクールです。学習効果の高い反転授業(自主学習でインプット、講義でアウトプット)を採用し、年間1000名を輩出しています。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

イチ押しランキング

1リナックスアカデミー

リナックスアカデミー

2システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ

3WEB塾

WEB塾
ページ上部へ戻る