Photoshop講座|画像加工(初級編)

みなさんこんにちは。WEB改善事例記事担当です。画像加工ソフトとして多くの人に利用されているPhotoshopですが、機能が多く、使いこなせる自信がないと敬遠している方も多いのではないでしょうか。

今回、この記事ではPhotoshopで画像加工する方法についてご紹介したいと思います。

目次

画像加工(明るさ調整・切り取り・サイズ)

まずはじめに、カラーモードを確認します。カラーモードとは文字通り色の様式を表しており、基本的にはR(レッド)G(グリーン)B(ブルー)の3色を組み合わせて画像を表示するRGBカラーや、C(シアン)M(マゼンタ)Y(イエロー)K(ブラック)の4色を組み合わせて画像を表示するCMYKカラーがあります。WEB媒体で使用するのであればRGBカラー、紙媒体で使用するのであればCMYKカラーを選択しましょう。今回はRGBカラーを選択します。

メニューバーからRGBカラーを選択

カラーモードの確認が終わったら次は画像を編集する前の準備を行います。まずは背景レイヤーをコピーします。失敗したときや比較するときのために元画像を残す癖をつけましょう。レイヤーの名前を「元画像」などにしても良いかもしれません。

次に画像をスマートオブジェクトに変換します。スマートオブジェクトに変換することで画像に効果をかけても後から変更が可能になります。その他にもスマートオブジェクトに変換するメリットはたくさんありますが、またの機会にご紹介いたします。

スマートオブジェクトに変換

準備が終わったらいよいよ画像の調整に入ります。まずは明るさを調整してみましょう。

画像調整の方法には「メニューバータイプ」タイプと「レイヤーパネルタイプ」タイプの2種類あります。

メニューバータイプ

レイヤーパネルタイプ

メニューバータイプ レイヤーパネルタイプ
長所 スマートオブジェクトに変換した画像の下に「スマートフィルター」として重なっていくのでレイヤーがバラける事はない。 調整レイヤーとして生成されるので選択範囲などで部分的な範囲を指定できる。
短所 レイヤーに対して効果をかけるので部分的に効果をかけることができない。 レイヤーとして生成されるのでかさばり、管理がしづらい。

メニューバーから「イメージ」→「色調補正」→「レベル補正」を選択し画像の明るさを調整します。レベル補正ではシャドウ、ハイライト、中間色のつまみを調節することで画像の明るさを調整することができます。

次に「イメージ」→「色調補正」→「トーンカーブ」を選択し、画像の明るさとコントラストを微調整します。トーンカーブでは画像のヒストグラムを基にカーブを作成し、画像の明るさとコントラストを微調整することができます。

明るさ、コントラストの調整が終わったら次は彩度を調整します。「イメージ」→「色調補正」→「自然な彩度」を選択し、画像の色調を補正します。自然な彩度では画像の彩度を調整することができます。基本的には0から50以内での調整がおすすめです。

今回は「イメージ」から画像を調整する方法をご紹介しましたが、レイヤーパネル下部の「調整レイヤーの新規作成」から同様の調整を行うことができます。ここまでが画像調整の基本となります、画像によっては大きな調整が必要ないこともあります。残した元画像と見比べつつ、自身が納得のいく画像調整をおこないましょう。

人物などの切り取り

画像を編集するにあたって習得しておきたい切り取りスキル。次はそんな切り取りスキルをご紹介していきたいと思います。

切り取りに使用される主なツール

【なげなわツール】
自身の手で選択範囲を指定できるツール。自由に選択範囲を指定できるが操作が難しい。

【長方形選択ツール】
楕円や四角形などの形で選択範囲を指定できるツール。細かく範囲を指定することが難しい。

【マグネットツール】
画像の色の境界線を自動で検知し、境界線に沿って選択範囲を指定できるツール。境界線が曖昧な画像などには向いていない。

【クイック選択ツール】
画像の色の境界線を自動で検知し、近似色を選択範囲に指定できるツール。境界線が曖昧な画像だとうまく選択範囲をとってくれないことがある。

【自動選択ツール】
指定した色の範囲を検知し、選択範囲を指定できるツール。近似色でないとうまく検知できないことがある。

【ペンツール】
自身の手でパス(線)を描いて選択範囲を指定できるツール。曲線などにも強いが、操作が難しい。

用途によって適したツールは違ってきますが今回は最も汎用性が高く、使用頻度の高いペンツールでの画像切り抜きについてご紹介いたします。

1. 切り抜きたい画像を開く

画像をPhotoshopで開き、コピーしたあとスマートオブジェクトに変換します。(癖をつけましょう)画像の境界線が見えにくい場合は明るさ調整などで画像を調整します。

メニューバーから「イメージ」→「モード」→「色調補正」→「シャドウ・ハイライト」を選択し、シャドウを「0」、ハイライトを「100」にする。これで境界線がはっきりして切り抜きしやすくなります。

2. ペンツールでパス(線)を作成

ペンツールを選択(この時にパスのパネルを開いておく)し、切り抜きたい画像のパスを作成する。

パス、アンカーポイント、ハンドルの説明

【パス】
ペンツールで作成した線のこと。

【アンカーポイント】
パスの起点・分岐点。パスに角や曲線を持たせたい場合や、パス同士をつなぐために必要になります。

【ハンドル】
パスの操作をおこなう部分。パスを伸ばす方向や曲線の大きさなどを調整することができます。

パスを作成する際はオプションバーの「シェイプが重なる領域を中マド」を選択しておきましょう。人の髪の毛や動物の毛など細かい部分は大まかにパスを作成しても大丈夫です。切り抜きたい画像をなぞり終わったらパスを閉じます。するとパスパネルに「作業用パス」のレイヤーが作成されます。「作業用パス」レイヤーをダブルクリックし、パスを保存します。

3. 選択範囲の調整

保存したパスレイヤーを選択した状態でパスパネル下の点線の丸のアイコンをクリックすると作成したパスの形の選択範囲が作成されます。その状態のままクイック選択ツールを選択し、オプションバーの「選択とマスク」をクリックします。するとマスクモードになるので「境界線調整ブラシツール」を選択します。髪の毛などの細かい選択範囲を調整していきます。

選択範囲の調整

調整が終わったら「出力設定」から「不要なカラーの除去」にチェックを入れ、「適用量」を調整したあとにOKをクリックし選択範囲を確定させます。これで切り抜きは完了となります。

まとめ

今回この記事ではPhotoshopでの画像調整と切り抜きの方法をご紹介いたしました。ペンツールでの画像の切り抜きは慣れが必要ですが、できるようになれば画像加工の幅が広がることは間違いないと思います。これを機にチャレンジしてみてはいかがでしょうか。