ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

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月の人気記事ランキング