creatersnest-復元

Photoshopで簡単に「飛び出す写真」を作る方法


今回のチュートリアルはPhotoshopで飛び出す写真を作る方法です。
飛び出すというとなにか立体的なものが画像から飛び出すような感じですが、そうではありません。
画像の中にフレームを作り、そのフレーム枠から画像の一部が抜け出しているような写真をつくります。

原理は簡単

原理は非常に簡単で、Photoshopのレイヤーマスクの機能を使います。まず写真内にフレームの枠をつくって、
枠の外側をレイヤーマスクでマスクして見えなくします。さらに被写体(ここでは子猫)を選択範囲で囲み、
選択範囲の外側をマスクで見えなくします。レイヤーマスクを2回かけるのが種明かしです。
これはレイヤーマスクのしくみを理解するににいいチュートリアルになります。

まず写真を用意

写真を用意します。今回はこのジャンプしている猫の写真です。写真はどんなものでもできますが、
今回のように動きのあるような写真を使うと、できたときにインパクトがあります。

写真1
画像出典 「写真AC」

写真を背景からレイヤーにします

レイヤーパネルを開き、背景レイヤーをマウス右クリックして「背景をレイヤーにする」を選びます。
これで背景が通常のレイヤーになり「レイヤー0」という新しいレイヤーになりました。

写真2

レイヤーメニューからレイヤーの複製を選びます。これでレイヤーパネルにはレイヤー0とレイヤー0の
コピーの2つのレイヤーができますね。

写真3

さらにレイヤー0を選んで、レイヤーパネル下の「新規レイヤーを作成」ボタンをクリックして
新しいレイヤーをつくります。この名前を「フレーム枠」と変えます。

写真3x

フレームを作ります

写真の中にフレーム枠を作ります。フレーム枠レイヤーを選んでおいての下半身の部分を囲むような選択範囲をつくります。
このとき多角形選択ツールなどを使えば飛び出すような効果を強調できます。

写真4

境界線に白い枠をつけます

選択範囲ができたら、編集メニューから「境界線を描く」をクリックし、画面のように設定します。

写真5

できあがったら、レイヤーパネルからレイヤー0のコピーを非表示にします。
すると境界線が指定した色で現れます。

写真6

 

フレーム内を選択してレイヤーマスクをかけます

フレームの内側部分で選択範囲をつくります。フレーム枠レイヤーを選んでおき、自動選択ツールを選び、
コントロールパネルの「隣接」にチェックを入れます。フレームの内側でクリックして選択範囲をつくります。
フレーム枠の内側が選択されます。

写真8

次にレイヤー0をアクティブにしてレイヤーパネル下のレイヤーマスク作成ボタンをクリックします。

写真8x

猫の切り抜きをつくる

レイヤー0のコピーを表示し、アクティブにします。適当な選択ツールで猫のフレームから飛び出している部分を
選択範囲で選びます。ここではマグネット選択ツールを使って選択範囲をつくりました。

写真9

選択範囲をレイヤーマスクでマスクします

レイヤーパネルでレイヤー0のコピーを選んだままパネル下のレイヤーマスク作成をクリックします。

写真10

最後に背景を作ります

レイヤーパネルで新規レイヤーをつくり、塗りつぶして背景にします。名前を背景として、
レイヤーパネル上で背景レイヤーの重なり順を一番下にします。

写真11

これで完成です。

おわりに

いかがでしたか。飛び出す写真といってもPhotoshopの使い方をある程度知っていれば簡単にできます。
ただテクニックだけでなく、こんな効果ができることに気付くのはなかなか大変です。
日頃からそんなアイデアを考えながらPhotoshopを使っていると上達は早くなります。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next ArticleIllustratorでの作業を効率化して時間短縮できるテクニックまとめ