Photoshop入門その4:画像を編集しよう(後編)

サルでき.jp > 11.サルにもできるiPhoneアプリの作り方(旧アメブロ記事) > Photoshop入門その4:画像を編集しよう(後編)

2010/02/26 09:00 投稿先 11.サルにもできるiPhoneアプリの作り方(旧アメブロ記事) 投稿者 カワサキ タカシ

ォトレタッチソフトはフォトをレタッチしてナンボ。(繰り返し)

ということで、
Photoshop講座、今回も画像を編集してみましょうって内容でお届けします。
前回から引き続いての後編です。
Photoshop入門その3:画像を編集しよう(前編)

前回は編集とは言えサイズ変えるくらいしかやっていませんでしたので、
今回はもう少し背伸びした内容にしてみます。

では、レッツトライ!

まず、いつも通り前回作ったファイルを開けて下さい。
今回は最初っからレイヤーをいじります。

レイヤーウィンドウで、
Photoshop入門その4:画像を編集しよう(後編)
犬のレイヤーを複製します。

犬レイヤーを選択した状態で、右クリック。
メニューがズラッと出てきますので、「レイヤーを複製」を選択しましょう。
上手くいくと「犬のコピー」というレイヤーが作られます。

犬レイヤーが2個になりましたので、オリジナルの方は非表示にしておいてください。
レイヤー左の目のアイコンをクリックです。

で、今回まずやることなんですけど、
この犬の周囲の空の部分を削除します。今回欲しいのは犬だけですので。

やり方その1
Photoshop入門その4:画像を編集しよう(後編)
メニューバーから、なげなわツールを選んで下さい。
左側の上から2番目にあります。

このツールは、マウスでなぞった部分を選択してくるツールですので、
慎重に慎重に犬の周りをなぞっていけば、いつかは犬だけを切り離すことができます。

がんばって!

無理!

そりゃ無理ですわ。
そんな胃を雑巾バリに絞るような作業。

さて。
ここまで何も言ってきませんでしたが、
私がこの犬の絵を選んだのは単に犬好きだからという理由だけではございません。

犬の周りの色が単色(空色)に近いこと。
犬と犬の周りの色がある程度くっきり違うこと。

この2点でこの画像を選んでおります。

こんな機能を使うためです。
Photoshop入門その4:画像を編集しよう(後編)
メニューから 選択範囲>色域指定 をオープン。

こういうのがフォトレタッチソフトの腕の見せ場ってヤツでして。
この機能では、選んだ色だけを選択してくれます。
(許容量は「その色とどのくらい近い色まで一緒に選ぶか」を指定するものです)

試しに空の一部をクリックして指定したのがこちら。
Photoshop入門その4:画像を編集しよう(後編)

見事に犬以外の部分が選択されていますね。

画面の右の真ん中あたり、
スポイトマークにプラスの文字が付いているボタンがあるのですが、
これは指定する色を追加するボタンで、ここでも微妙な調整が可能です。

気が済むまで選択範囲を調整したら、Delボタンで消してみましょう。
Photoshop入門その4:画像を編集しよう(後編)
はい、バッチリ。空だけ消えました。

こういう対象だけを残すやり方は
映画でCGと人やモノを合成する時なんかに使う手法で、ブルースクリーンなんて言いますね。

ブルーやグリーン単色のスクリーンの前で人やモノを撮影して、後で他の画像や映像と一緒にする。
その時に人やモノだけを切り抜くには、
後ろが「単色&人やモノと明らかに違う色」であれば一発で切り抜けます。

あらためてこの画像を見ていただくと、
切り抜きやすいタイプの画像ってことがわかりますよね。

さて。
ここで一旦犬のコピーレイヤーを非表示にして、
オリジナルの方の犬レイヤーを表示して下さい。

こっちのレイヤーはいじってませんので、消した空も残ってますね。

今度は、メニューバーから多角形選択ツールを選びます。
Photoshop入門その4:画像を編集しよう(後編)
なげなわツールと同じ場所、裏に隠れていますので、引っ張り出しましょう。

多角形選択ツールは、
文字通りマウスでクリックした場所を頂点として、多角形で選択範囲をしていするツールです。

今このレイヤーで何を選択するかと言うと、写真枠からはみ出る部分を選択します。
Photoshop入門その4:画像を編集しよう(後編)
こんな感じ。

ざっくり選択したら、Delボタンで削除して下さい。
Photoshop入門その4:画像を編集しよう(後編)
消えましたね。

さて、ここで先程非表示にした犬のコピーレイヤーを表示してみましょう。
犬レイヤーもそのまま表示でOKです。

こんな感じになっていれば正解。
Photoshop入門その4:画像を編集しよう(後編)
写真枠の外の空が消えて、犬が少しだけ飛び出しました。

おや?
よーく見ると、左下の方にまだ写真枠外の地面がありますね。
これは、犬のコピーレイヤーの方の地面です。先程は空色の部分しか消していませんでした。

多角形選択ツールで枠ぎりぎりを選択して消しておきましょう。

消した後がこちら!
Photoshop入門その4:画像を編集しよう(後編)
おお~。それっぽ~い。

背景が白でも良いのですが、
写真枠が見えないとなんだかよくわからなかったりしますので、
背景を黒にしてみましょう。
Photoshop入門その4:画像を編集しよう(後編)
新規レイヤーを背景の上に足して、黒で塗りつぶしてみました。

黒バージョンがこちら!
Photoshop入門その4:画像を編集しよう(後編)
おお~。おお~?

なんだか犬の毛が妙に青くないですか?

この辺は仕方がない部分ではあるのですが、
光の反射や背景の透過具合によって、どうしても地の色が残ってしまうことがあります。

どうしましょう?
切り抜ききれなかった部分は、色を変えてしまいましょう。

次は色替えに挑戦です。

メニューから イメージ>色調補正>色の置き換え… を選んで下さい。
Photoshop入門その4:画像を編集しよう(後編)
なんとなーくさっきの色域指定に似てますね。
大体同じです。

STEP1 まずは変更したい色(今回は毛の青色)がある部分をクリックして
STEP2 ほどよく選択されたら
STEP3 置き換え枠の各スライダー「色調」「彩度」「明度」をスライドさせて
STEP4 結果の枠に希望の色が出てくるまで調整して
STEP5 満足したらOKを押す

この流れでばっちり色を変えられます。

ここで色について少しだけ補足をしておきますね。
色調:色自体と思って下さい。赤とか、青とか、黄色とか。
彩度:鮮やかさです。高いと赤ー!青ー!って色になり、低いと灰色になります。色の無い世界。
明度:明るさです。高いと真っ白になっていき、低いと真っ黒になっていきます。

今回は犬の毛を後ろの黒背景に馴染ませたいので、
灰色っぽい色にしてみましょう。彩度目一杯下げて、明度も結構下げて、

はい、ドン。
Photoshop入門その4:画像を編集しよう(後編)
できた~。

今度は毛の部分も背景に馴染みました。
黒背景に白い写真枠と犬、クッキリ。誰がどう見ても飛び出しています。

この短期間で作ったとは思えないクオリティ。
これがフォトレタッチソフトの力です。覚えて損しないですわよ。奥様。

さてさて。
画像編集編、いかがでしたか?
Photoshopにできることはまだまだ沢山ありますので、是非いろいろ試してみて下さい。

レイヤーを複製しておけば何やっても大丈夫。
この感覚が身に付いてくると、気分的にもグッと楽になってくると思います。

ではでは。
次回は文字の編集をやってみましょう。

関連する記事:


Advertisement