リアルなステンレスの背景とテキストをデザインする[Photoshop Tutorial]

WebデザイナーやWebマスターは、以前はクールなスチールやメタリックのような効果が好きでした。 Web 2.0 暴風雨とすべてを洗い流した。を残す WWW 光沢のある、虐待的なグラデーションWebサイト. Apple.com 常に優れたWeb 2.0インターフェイスデザインと関連してきましたが、これらの人たちはクールな黒や銀色の効果を失うことはなく、デザインやタイポグラフィを改善することに失敗することもありませんでした。.

彼らのデザインに触発されて、私はこれらのスタイルを私の個人的なデザインに取り戻そうとしていて、そしてそれでいくらか堅実な何かを作成して、そしてステンレス鋼の金属片のように少し見えます。ジャンプ後のフルPhotoshopチュートリアル.

ステンレス鋼の背景

ステップ1

空白の新しい文書を600×400のサイズで作成します。新しいレイヤーを作成して名前を付けます 'バックグラウンド' そして灰色の[＃c0c0c0]で塗りつぶします。複製する 'バックグラウンド' layer、新しいレイヤーに名前を付けますスチールバックグラウンド'そしてそれを上に置くバックグラウンド'.

ステップ2

「スチールバックグラウンド」レイヤーを選択して適用 フィルタ - >ノイズを追加 次の設定を入力してください。

• 金額：14.21
• 分布：ガウス分布
• 単色チェック

ステップ3

とスチールバックグラウンド'レイヤーはまだ選択されています フィルタ -> ぼかし -> モーションブラー 次の設定を入力してください。

• 天使：0
• 距離：34ピクセル

右クリック 'スチールバックグラウンド'、選択 ブレンドオプション 次の設定を入力します。 グラデーションオーバーレイ - グラデーションエディタ：

カラーストップ1

• カラー：＃000000
• 不透明度：50％
• ロケーション：0％

カラーストップ2

• カラー：#ffffff
• ロケーション：50％

カラーストップ3

• カラー：＃000000
• 不透明度：50％
• ロケーション：0％

メタルテキスト

ステップ4

あなたのステンレス鋼の背景は基本的に行われています、私達はそこからマッチングのように見えるべきである金属のテキストを挿入し続けます。使用 テキストツール, 真ん中に何かを書く、できれば太ったフォントを考えて（ここではMyriad Pro Boldを使っている）。テキストレイヤーを右クリック（またはダブルクリック）して ブレンドオプション ダイアログ.

1. 影を落とす

• 不透明度：38％
• 距離：1ピクセル
• スプレッド：1％
• サイズ：2px

• 深さ：100％
• サイズ：0px
• 柔らかくする：0px
• 不透明度をハイライト表示：42％
• 影の不透明度：32％

あなたのテキストは以下のようになります。.

ステップ5

これはあなたがしっかりとフォローする必要があるものです. 保留制御キー （Mac：Commandキー）そしてテキストレイヤーを左クリックしてそのアウトラインをハイライトさせる。アウトラインがまだあることを確認してください、 'を選択してくださいスチールバックグラウンド'レイヤー、 Control + Jを押す （Mac：Command + J）

これを行うことによって、あなたはあなたのテキストの形で鋼鉄背景を複製しています。レイヤーの名前を 'に変更しますテキストの背景'そしてそれを一番上に移動する.

ステップ6

変化する 'テキストの背景へ カラーバーン, 持ってきて 不透明度 至るまで 67％.

最終的な出力は以下の画像のようになります。.

.PSDファイルをダウンロードしてください.