ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopで3Dスタジオの作品紹介サイトを作る方法

Photoshopで3Dスタジオの作品紹介サイトを作る方法

投稿日:2009年03月27日   レベル:中級者    ソフトウェア:PhotoShop
このチュートリアルでは、3Dスタジオの作品紹介サイトを作ってみたいと思います。

Step1:はじめに

新規ドキュメントを作成します。
サイズは760ピクセル×770ピクセル、背景は白です。

背景レイヤーを複製します(対象のレイヤーを選択し、「Ctrl」+「J」キーを押したら複製できます)。

複製した新しいレイヤーを選択して、「フィルタ」−「ノイズ」−「ノイズを加える」で次のように設定します。

ノイズを加える

「Ctrl」+「I」キーを押して階調を反転させます。
背景が黒くなりますが、この変化は正常ですので心配する必要はありません。

作業しているレイヤーの上に新規レイヤーを作成します(「Ctrl」+「Shift」+「Alt」+「N」キーを押せば作成できます)。

前景色を「#f3b502」に、背景色を「#da5d03」にします。

グラデーションツールグラデーションツールでキャンバスの上から下にかけて線を描きます。

その後マウスボタンを離して、ブレンドモードを「差の絶対値」に変更します。

「差の絶対値」に変更する

Step2:ベースを作る

角丸長方形ツール角丸長方形ツールを使って白いシェイプを作ります。

角丸長方形ツールを使って白いシェイプを作る

同じツール角丸長方形ツールでもう一つシェイプを作ります。
今回はやや小さめでライトグレー(色は「#ebebeb」)のシェイプを作ります。

ライトグレー(色は「#ebebeb」)のシェイプを作る

Step3:フィルタをかける

グレーのシェイプの選択範囲を読み込みます。
選択範囲を読み込むには、次の画像のようにレイヤーのサムネイルの上で「Ctrl」キーを押しながらマウスを左クリックします。

グレーのシェイプの選択範囲を読み込む

グレーのシェイプが選択されます。

グレーのシェイプが選択される

新規レイヤーを作成(「Ctrl」+「Shift」+「Alt」+「N」キーを押すと作成できます)してから、「D」キーを押します。
この動作で色が黒と白に戻ります。

「フィルタ」−「描画」−「雲模様」を選択します。
するといい感じの雲ができます。

雲ができる

「Ctrl」+「D」キーを押して選択を解除したら、雲の不透明度を40%に下げます。

雲の不透明度を40%に下げる

すると次のようになります。

不透明度を下げた結果

Step4:破れ目を描く

背景以外のレイヤー全部を選択して、「Ctrl」+「E」キーを押します(このショートカットキーを使うと選択したレイヤーが一つに結合されます)。

背景以外のレイヤー全部を選択

この作業に使えるブラシを準備してみました。
www.photo-shop-brush.comで入手できます。
ブラシセットをダウンロードしてPhotoshopに読み込みましょう。

それからこのブラシセットを使って、次のように破れ目を描きます。

ブラシセットを使って破れ目を描く

ブラシのサイズを小さくした消しゴムツール消しゴムツールで次のようになるまでレイヤーの描画箇所を消します。
レイヤーの描画箇所を消す

別の新規レイヤーを作成してから(「Ctrl」+「Shift」+「Alt」+「N」キーを押すと作成できます)、Talk-Mania Big-Pack(有償)のシングルブラシを使います。
このブラシのパックをご存じない方に説明すると、ここでは4,000種類のブラシが3つのサイズで入手できます(ブラシの数は12,000になります)。
このブラシのパックがない場合は、時間の節約になるので購入することをお勧めします。

このパックを使うと今回の作業時間は20分以内になります。

Step5:完成

数秒後には次のようになります。

完成

ここで3Dのトラックの画像を配置します。
同時に文字ツール文字ツールでテキストを入力します。
これで完成です。ぜひお役立てください!
完成


引用:Web Design Library 著者:www.talk-mania.com 翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

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