ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopで金属的な3D文字を作る方法

Photoshopで金属的な3D文字を作る方法

投稿日:2009年10月13日   レベル:初心者    ソフトウェア:PhotoShop

このチュートリアルでは、Photoshopで金属的な3D文字を作ってみたいと思います。

Step1:はじめに

600ピクセル×600ピクセルのドキュメントに、文字を入力してください。

はじめに



Step2:遠近効果をつける

レイヤースタイルに行き、グラデーションオーバーレイを適用してください。
グレーと青の組み合わせを選択してください。

グラデーションオーバーレイ

次に、文字レイヤーを複製し、それをラスタライズしてください。
そして、「フィルタ」-「描画」-「逆光」に行き、文字の中心の上方にこの効果を適用してください。

逆光

不透明度を35%にしてください。

不透明度を35%

2つの文字レイヤーを選択してください。
それらを1つに結合して、「変形」-「遠近法」で変形してください。

遠近法

そして、自由変形を使って、下の画像のようにしてください。

自由変形





Step3:3D効果をつける

レイヤーを複製し、最初のレイヤーの後ろに置いてください。

3D効果をつける

それでは描き始めましょう。
そのために、長方形選択ツール長方形選択ツールを使います。
次の数ステップで描くどの部分に対しても、新しいレイヤーを開いてください。
どのレイヤーに対しても異なった照明効果を与えなければならないため、常に新しいレイヤーを開くことはとても重要です。

3D効果をつける

「S」という文字のように丸い形のときは、次のようにしてください。
新しいレイヤーを開き、丸い形を描いていきます。
まず、下の画像のように文字のレイヤーが、丸を描くレイヤーより上になければいけません。

3D効果をつける

文字を複製したレイヤーを選択し、文字の形の選択範囲を作ってください。
丸を描くレイヤーを選択して、選択範囲を反転し、「Delete」を押してください。

3D効果をつける

境界に注意して、丸を描くレイヤーの欠けている部分を描いてください。

3D効果をつける

前のステップでしたように、すべての文字の側面で同じことをしてください。
下の画像にすべてのレイヤーを示します。

3D効果をつける

それでは、それらにレイヤースタイルを適用しましょう。
まずは、グラデーションオーバーレイです。

グラデーションオーバーレイ

次にグラデーションオーバーレイのスタイルを「円形」に変えて適用してください。

グラデーションオーバーレイ

そして、画像のようにもう一度グラデーションオーバーレイを適用してください。

グラデーションオーバーレイ

すべてのレイヤーに色を塗ると、このようになっています。
幾らかの部分はブラシツールブラシツールを使って塗ってもかまいません。
それでは、背景に色を塗ってください。

3D効果をつける

「フィルタ」-「描画」-「照明効果」に行き、画像のように効果を適用してください。

照明効果

画像のように設定を変えて、「照明効果」をもう一度繰り返してください。

照明効果



Step4:反射を作る

「照明効果」を加えた後、背景レイヤー以外の全てのレイヤーを選択し、それらを1つのセットにして複製してください。
そしてこのセットを画像のように下に移動させてください。

反射を作る

不透明度を25%にしてください。

反射を作る



Step5:影を作る

影を作ります。
新しいレイヤーを開いてください。
新しい選択範囲を作り、グラデーションツールグラデーションツールを使います。
グラデーションエディタの「描画色から透明に」を選択してください。
そして上の点から下にグラデーションを適用してください。

影を作る

ほかの場所も同じようにしてください。

影を作る



Step6:完成

照明で照らし出されたように、金属的で立体的な文字を作ることができました。

完成



引用:Web Design Library 著者:www.stutorials.com 翻訳:日下部



スポンサードリンク

コメント

ランダム記事5件

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