【Photoshop】デバイスの画面から飛び出すデザイン

画面から飛び出す動物たち

今回は、Photoshopでデバイスの画面から飛び出したような画像を作ってみたいと思います。

まずは、利用するデバイス(スマホ)と生き物の画像を準備しましょう。
私は今回、UnsplashさんとPixabayから素材をお借りして作業します。利用させていただいた画像は以下のURLの素材です。

■デバイス(スマホ)

https://unsplash.com/ja/%E5%86%99%E7%9C%9F/%E7%99%BD%E3%81%84%E6%90%BA%E5%B8%AF%E9%9B%BB%E8%A9%B1-dBESAHgPL6c

■クジラ

https://pixabay.com/photos/whales-cabos-mexico-sea-cancun-5269077/

作業開始

何はともあれ、Photoshopを立ち上げてデバイス(スマホ)の画像を開きましょう。

選択範囲の作成

最初の作業はスマホの画面(白い部分)を選択範囲にしましょう。左に並んだツールから自動選択ツールを選択します。

スマホ画面の白い部分をクリックすると選択範囲が作成されます。

選択範囲を塗りつぶし

選択範囲が出来たらその範囲を何色でもいいので塗りつぶしましょう。
塗りつぶしは、レイヤーパネルの下にあるアイコンから選択できます。

ベタ塗り…を選択するとカラー選択画面が出ますので、お好きな色で塗りつぶして下さい。

合成する画像を配置

ベタ塗りレイヤーができたら、その上に合成したい画像を配置します。

レイヤーパネルから、画像の不透明度を下げて、合成したい画像の位置やサイズを調整します。

調整できたら不透明度を「100%」に戻しましょう。

スマホが斜めに傾いているのと、クジラの写真に海の水平線がありましたので、画面に合わせて角度を変えてみます。

 

画像を切り抜き

クジラのレイヤーを選択した状態で、左の自動選択ツールをクリックし、上のメニューから「被写体を選択」をクリックします。
クジラと海面の一部が選択されますのでctrl+Jを押して選択範囲を複製します。

下のイルカの画像を右クリック(もしくはレイヤーパネルの3本線から)して、クリッピングマスクを作成します。

このクリッピングマスクでスマホの背景に海が設置されます。

切りぬいたクジラをマスク

一番上に置かれたクジラのレイヤーに余計な海面がありますので、ブラシを使って削除していきます。

レイヤーパネルの下にあるマスクをクリックして下さい。

クリックすると切り抜いたクジラに長方形のマスクがかかります。このマスクを黒のブラシで塗って表示させる範囲を作っていきます。

ブラシで塗る

後歯ブラシの描画色を黒にしてスマホの縁に沿って塗りましょう。

ブラシの大きさや柔らかさはAltを押しながらマウスの右を押し続け、上下左右にドラッグすると自在に変化しますので、適宜調整してみて下さい。

マスクはこんな感じに塗れています。

完成

今回使った画像はあまりおすすめの素材ではありませんでした。水平線を意識したことにより平べったさが否めない作品となったのが残念です。やはり素材は重要ですね。

Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.112 Safari/537.36  / 85

関連記事

36 2
飲兵衛の聖地と言われる東京「赤羽」で朝から飲めるお店をご紹介します! 朝7時から飲める激安店立ち飲みいこい支店 全国の飲兵衛...
105 2
Netflixで2024年9月3日から配信されているNetflixコメディシリーズ『トークサバイバー!ラスト・オブ・ラフ』。 いよ...
51 3
ゆっくりと画像が変化するアハ体験動画。今回はドイツの世界遺産「シュトラールズント」です。そして今回は2箇所変化します! どこが変わ...
47 3
ゆっくりと画像が変化するアハ体験動画。今回はイタリアの世界遺産「ドロミテ地方」のソラピス湖です。 どこが変わっているか気づくとスッ...