スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeフォトショップ講座 > Photoshopでモニターから飛び出す3Dの画像を作る方法

Photoshopでモニターから飛び出す3Dの画像を作る方法

投稿日:2010年02月12日   レベル:初心者    ソフトウェア:PhotoShop

このチュートリアルでは、Photoshopでモニターから飛び出す3Dの画像を作ってみたいと思います。

Step1:はじめに

ある日、インターネットを見ていたら、
コンピューターのモニターから車が飛び出しているように見える広告を見つけました。
車が飛び出す効果がクールです。3Dではないですが、感じは確かに出ています。

まずコンピューターのモニターの画像を用意します。画面に少し角度がついていると
効果がつきやすくなります。ここでは次の画像を使うことにします。

モニター画像



Step2:モニターに使う画像を縮小する

次に、モニターに使う画像を探します。
どの部分を3D効果でモニターから飛び出すようにするかを考えます。

ここでは車の画像を使います。

車の画像

ご覧のように、この画像はスクリーンに入れるには大きすぎます。
「イメージ」−「画像解像度」を選択して希望するサイズになるまで画像を縮小します。
解像度を72ピクセル/インチ以上にしないと、画像を大きくする場合に画質が劣化します。

希望するサイズを設定したら、移動ツール移動ツール(あるいは「V」キーを押して)を使って次のようにドラッグします。

移動ツールでドラッグ





Step3:不透明度を変更する

次に、車の写真のレイヤーの不透明度を60%程度まで下げます。
この操作はモニターが透けて見えるようにするための一時的な処置です。

不透明度変更



Step4:画像を変形して遠近を整える

写真を変形して遠近を整えます。
「編集」−「変形」−「ゆがみ」を選択します。
写真の端をドラッグして車の写真の上下と左右をモニターの形に合わせます。

このステップでは画面のサイズに合わせることはしません。

ゆがみ

遠近がついたら、写真を移動させてモニターの画面全体をカバーします。
写真をどれだけ飛び出させるかを決めます。
ここでは、ドライバー側のヘッドライトとタイヤの領域を飛び出させてみます。

画像を飛び出させる



Step5:ペンツールを使って3D領域を決める

ペンツールペンツールを使ってイメージをモニターの画面にぴったり合わせます。
不透明度を減らしたことが役立つのは、後ろが透けて見えるのでどこでクリックするかがわかるためです。

飛び出す3D領域を決めたら、周辺を選択します。
ペンツールペンツールで作ったパスの始点まで操作を続け、パスを閉じます。
作業対象の画像をズームインして不透明度を調整します。どんな作業も簡単になります。

パスの作成



Step6:選択範囲を作成する

パスを閉じたら、選択範囲に変換します。レイヤーパレットのパスのタブをクリックします。
それから、作業用パスを右クリックして「選択範囲を作成」からぼかしの半径を1ピクセルに設定します。
設定が終わったらレイヤータブをクリックします。

選択範囲を作成

すると選択範囲が作られます。

選択範囲



Step7:完成

「選択範囲」−「選択範囲を反転」を指定して「Delete」キーを押します。
不要な領域が削除されます。「Ctrl」+「D」キーを押して選択範囲を解除します。
不透明度を100%に戻したら完成です。

次のようになります。

完成

3Dのモニターが完成しました!
同様に、このような作品を作成することも出来ます。

別のパターン01 別のパターン02



引用:Web Design Library 著者:showandtell-graphics 翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング