Photoshopを使いこなそう!修復と合成の上級テクニック5選


Photoshopを使いこなそう!修復と合成の上級テクニック5選

Photoshopを使った写真編集の醍醐味は、切り取りや合成ではないでしょうか?美しい写真に仕上げる修復作業はもちろん、クリエイティブな合成写真が作成できれば、表現の幅も広がります。そこで今回は、選択や切り取り/合成を中心とした、Photoshopの上級テクニックをご紹介します。

目次
  1. Photoshopの操作で覚えておきたいキーワード
  2. レイヤー
  3. マスク
  4. Photoshop上級編:身につけておきたい5つのテクニック
  5. 「コンテンツに応じる」で不要なオブジェクトを削除する
  6. 切り抜きツールを使った合成
  7. レイヤーマスクによる合成
  8. Photoshopテンプレートを使用してデザイン作業をすばやく
  9. Webで使用する画像の作成
  10. まとめ

Photoshopの操作で覚えておきたいキーワード

レイヤー

Photoshopで画像を編集する際、必ずと言ってよいほど使うのが「レイヤー」です。「レイヤー」は直訳すると「層」という意味です。Photoshopでの画像編集は、何枚もの画像を層のように重ねて管理できるという特徴があります。

画像を「レイヤー」に分けることで、表現や効果の幅が広がり、画像の管理と編集が楽になります。

マスク

マスクは「覆う」「覆い隠す」という意味です。Photoshoppにおける「マスク」は一部を隠すという意味で使われます。

「レイヤーマスク」「アンシャープマスク」など他の用語と一緒に用いられる場合が多い言葉です。ちょっと頭の片隅に入れておくと、画像編集の工程が予想できるようになるでしょう。

Photoshop上級編:身につけておきたい5つのテクニック

「コンテンツに応じる」で不要なオブジェクトを削除する

image

写り込んでしまった不要なものを削除する作業は、写真編集で最も多く使う作業です。「コンテンツに応じる」を選択すれば、Photoshopが自動的に適切な画像処理をしてくれます。写真編集のスピードアップのために、身につけたおきたいテクニックです。

写真に写り込んだ不要な部分を、周囲になじませて削除する方法を「コンテンツに応じる塗りつぶし」と言います。初級編(リンク)の「サイズを調整する」でもでてきた「コンテンツに応じる」という機能は、「周囲になじませる機能」と覚えておくと作業内容が理解しやすくなります。

1.なげなわツールを使用し、削除したい対象物とその周囲を選択します。

image

2.メニューから「編集→塗りつぶし」を選び「コンテンツに応じる」にチェック。

image

選択範囲が周囲とブレンドするよう「カラー適用」を選択してOKをクリックします。

3.対象物が周囲に馴染んで、消えたような画像加工となります。

image

切り抜きツールを使った合成

image

一枚の画像からオブジェクトを切り抜き、もう一枚の画像に貼り付ける操作方法です。単純に二枚を重ね合わせているのですが、切り抜く範囲設定には、様々な方法があります。

切り抜きの方法は、なげなわツールの他、マグネット選択/多角形選択などがあり、画像を細かに設定して切り抜くことができます。

1.合成したい画像を開く

ショートカットキー「Ctrl+O(オー)」で背景となる画像と、切り抜きたいオブジェクトのある画像を、それぞれ開いておきます。 「選択範囲のレイヤーを複製」を選び、切り抜いた「月」だけをレイヤーとして作成します。

2.マグネット選択ツール

image

月の輪郭を選択するため、今回は「マグネット選択ツール」を使用しました。なげなわツールよりも、より細かな範囲指定ができるので、複雑な形をした画像の切り抜きにもおすすめです。

3.移動ツールで合成

image

背景となる画像に、移動ツールで「月」のレイヤーを移動します。

単純な合成作業はこの手順ですが、途中でオブジェクトの微調整ができるよう、合成するオブジェクトはレイヤーにしておくと良いでしょう。最後に適切な形式で画像を保存します。

レイヤーマスクによる合成

image

Photoshopでよく出てくる「レイヤー」とは「層」の意味です。Photoshopでは複数のレイヤーを重ね合わせて合成しているという考え方が一般的です。

レイヤーマスクとは、レイヤーで一部を覆う=マスクするという考え方で、こちらもPhotoshopでは頻繁に使用するテクニックです。

被写体の境界線が細かい場合は、選択範囲の設定がその後の合成を左右します。レイヤーマスクによる合成を行うことで、周囲がフワフワしているもの、アクティブに動く人などの合成も、自然な仕上がりになります。

1.編集したい写真を開く

ショートカットキー「Ctrl+O(オー)」で編集したい写真を全て開きます。ヒストリーのサムネイル(小)を表示させておくことで、作業手順が一目で確認できます。

2.ワークスペースの切り替え

image

メニューから選択範囲→選択とマスク「Ctrl+Alt+R」を選択し、ワークスペースに切り替えます。この時、右側「属性パネル」の表示モードで「オーバーレイ」を選択することで、選択範囲をハッキリと確認できます。

3.クイック選択での切り抜き

クイック選択ツールを使って、切り抜き後に表示させたい部分をドラッグで選択していきます。もしも、不要な部分まで選択してしまった場合は、「Alt+ドラッグ」で元に戻せます。

4.より精密に切り抜く「境界線調整ブラシ」の使用

image

ツールバーから「境界線調整ブラシ」を選択。ブラシのサイズを調整して、境界線上のフサフサした部分をドラッグします。細かな作業となりますので、「Ctrl+(+/-)」を使って拡大縮小、スクロールしながらドラッグすると良いでしょう。

5.作成した選択範囲をレイヤーマスクとして追加する

右側の「属性パネル」の下部にある「出力設定>」から、出力先を「レイヤーマスク」に設定します。「レイヤーパネル」で、レイヤーマスクが追加されていることが確認できます。

6.移動ツールを使用して合成

image

背景とレイヤーはそれぞれ別画面となっています。ウインドウのサイズ調整をして、切り離して見られるようにしておきましょう。移動ツールを選択し「Shift&ドラッグ」で合成は完了です。

Photoshopでの画像加工の基本が「レイヤー」=「層」という考え方から、「合成」というよりも、画像を「移動して重ねる」という動きになるということを、覚えておくと作業がスムーズに感じるようになります。

Photoshopテンプレートを使用してデザイン作業をすばやく

image

Webデザインにも使用されるPhotoshopですが、Web用の画像編集では、各パーツのデザインを素早く作成することも重要なポイントです。AdobeStockで無料提供されているテンプレートを使うことで、ロゴやマークの製作がスピードアップします。

なお、この機能はAdobe Photoshop CC(2017)からの新機能となります。

1.新規ドキュメントを作成

image

写真、ポスター、Webなど種類に応じて、オプションを選びながら新規作成ができます。今回はテンプレートをダウンロードして作成します。

2.移動ツールで合成

image

組み合わせたい写真を表示します。画像を「選択範囲→すべて選択」とします。移動ツールで、テンプレートに画像をドラッグして移動します。ズレが生じた場合は、「編集→コンテンツに応じて拡大縮小」を選びテンプレートに画像がピッタリ合うように調整します。

3.さらに効果を出したい場合

image

作成した画像をアーティスティックに仕上げたい場合には「フィルター」を使用します。ここでは「フィルター→ノイズ→ノイズを加える」を選択し、変化を持たせています。最後に適切な画像形式で保存して、作業は完了です。

Webで使用する画像の作成

image

FacebookやTwitterなど、ソーシャルメディアで使用できる画像をPhotoshopで作るには、今までのテクニックを総合的に用いることになります。

背景写真の編集、テキスト、アートワークなど今まで個別に作成してきたテクニックを一つにまとめることで、アイキャッチ効果の高い画像が作成できるようになります。

1.背景となる画像をぼかし加工する

image

テキストを効果的に見せるため、背景となる写真全体をぼかします。「フィルター→ぼかし→ぼかし(ガウス)」を選択。ぼかす半径の値を設定してOK。プレビューウインドウで確認しながらすすめましょう。

2.テキストの背景用に半透明の円を追加する

image

円のみを半透明にするため、レイヤーを分けて作業をします。「レイヤー→新規→レイヤー」で新規レイヤーを作成します。右側の「レイヤーウインドウ」で、確認しながら作業を進めましょう。

長方形ツールから楕円形ツールを選択します。「Shift+ドラッグ」で円を描きます。Shiftを押すことで真円が描けます。この円を「スウォッチパネル」で色を選択し「編集→塗りつぶし→描画色」で塗りつぶします。円の位置は「移動ツール」を使用し背景の中心に配置します。

作成した円を半透明にするため「不透明度スライダー」を使用します。レイヤーウインドウの右端にある「不透明度」の横の矢印をクリックし、スライダーをドラッグして不透明度を調整します。

3.円の中にテキストを加える

image

横書き文字ツールを選択。オプションバーからサイズを選択し、文字を見やすい大きさに設定します。フォントは後から変更が可能です。

文字を入れたい場所をクリックし、テキストを入力します。中央揃えに設定し、移動ツールで円の真ん中にテキストを配置します。

4.保存と書き出し

image

Web用に作成した画像は、保存と書き出しの2つの作業が必要です。まず、保存は「ファイル→別名で保存」を選択。Photoshop形式で保存をすることで、レイヤーを後から編集できる形式で保存されます。レイヤー毎に編集できることで、Webサイトの更新や一部の修正の際、作業の手間が大幅に短縮されます。

また、ブログやWebサイトにアップロードするためには「書き出し」が必要です。 「ファイル→書き出し→PNGとしてクイック書き出し」を選択します。ここで作られたPNG形式の画像をWebサイトにアップロードします。

一流デザイナーのスキルが身に付く

無料カウンセリングはこちら

まとめ

Photoshopの操作で上級と言われるテクニックの習得も、作業のくり返しで徐々に慣れてくるものです。素早く無駄のない手順を身につけることで、あらゆる画像編集が可能になります。特に、Web用に使用する写真やロゴ入りの画像は、クライアントに数多く提示する場合も考えられますので、Photoshopならではの自動機能を駆使して、スピードアップを図りましょう。

Photoshopのサブスクリプション契約後は、無料サンプル画像を使い、テクニックを応用したアーティスティックな写真編集にも、挑戦してみてくださいね。


関連記事

まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp