Web2.0風な鏡面ロゴを作るPhotoshopチュートリアル

Web2.0風な鏡面ロゴ

今年はWeb2.0風と呼ばれる特徴を持ったデザインが流行りました。その中のひとつに上の画像のような鏡面表示をさせるというものがあります。

今更感が強いですが、おさらいと備忘録も兼ねてPhotoshopでこのようなロゴを作るための手順を書いてみることにします。

以下、スクリーンショット付きの手順。使用したPhotoshopのバージョンはCS2。

詳細手順

1.新規作成で以下のように設定します。幅と高さは任意です。慣れていない場合は大きい方がやりやすいです。
新規作成

2.背景の上にレイヤーを追加して、「background」というレイヤー名をつけます。
レイヤーを追加

3.カラーピッカーの前面の色を「14171b」に設定し、塗りつぶしツールで「background」レイヤーを塗りつぶします。(背景に塗る色は黒っぽい色であれば何でもOK。)
#「14171b」に設定

4.塗りつぶしたら、今度はカラーピッカーの前面の色を「00befc」に設定し、文字ツールで『Reflection』と入力します。ここではフォントは「Trebuchet MS」サイズは「48pt」アンチエイリアスは「滑らかに」と設定しています。(フォントサイズは大きめの方がやりやすいです。)
#「00befc」に設定

テキストは中央やや上寄りに配置する

5.文字入力を確定させたら、レイヤーパレットの「Reflection」レイヤー(文字入力すると自動で出来るはず)を右クリックして、「レイヤー効果」を選択します。
テキストレイヤーにレイヤー効果を設定

6.「ドロップシャドウ」にチェックを入れ、以下のように設定します。
ドロップシャドウの設定

7.「グラデーションオーバーレイ」にチェックを入れ、以下のように設定します。以上2項目が設定できたら「OK」をクリックします。
グラデーションオーバーレイの設定

8.新規レイヤーを一番上に追加し、「highlight」というレイヤー名をつけます。
ハイライト用のレイヤーを追加

9.楕円形選択ツールを選択します。また、カラーピッカーの前面の色を白(ffffff)にしておきます。
楕円形選択ツール

10.「highlight」レイヤーが選択されていることを確認したら、テキストの上半分程度を以下のように選択します。
テキストの上半分くらいを覆うように選択

11.選択したら、塗りつぶしツールを使って選択した部分を白で塗りつぶします。
白で塗りつぶす

12.塗りつぶしたら、レイヤーパレットの「highlight」レイヤーがアクティブになっている状態で「Ctrl」キーを押しながら、「Reflection」レイヤーの「T」の部分をクリックします(下の画像参照)。
クリックする箇所

13.選択範囲が下の画像のように変わります。
選択範囲が変わる

14.この状態で、メニューの「選択範囲」→「選択範囲を反転」をクリックします(shift + Ctrl + I でもOK)。
選択範囲を反転

15.選択範囲が逆転して下の画像のようになります。
テキスト部分以外が選択されている状態に

16.この状態でキーボードの「Delete」キーを押します。そうすると下の画像のようになります。
Delete後

17.「Ctrl + D」を押して選択状態を解除し、「highlight」レイヤーの不透明度を変更します。ここでは45%にしました。適当だと思われる不透明度に変更してください(大体30%~50%くらいが目安な感じです)。
ハイライトの不透明度を下げる

こんな感じになります。
こんな感じに

18.「highlight」と「Reflection」レイヤーを複製します。複製したら、メニューの「レイヤー」→「レイヤーを結合」でこの2つのレイヤーを1つに結合します。結合後は分かりやすいようにレイヤー名を「reverse」としておきます。
テキストとハイライトのレイヤーをコピー

レイヤーを結合

19.「reverse」レイヤーが選択されている状態で、メニューの「編集」→「変形」→「垂直方向に反転」をクリックします。
垂直方向に反転させる

20.反転させたら、「reverse」レイヤーを移動ツールを使って、下側に移動させます。
反転後、このくらいの位置に移動させる

21.移動させたら、「reverse」レイヤーの不透明度を下げます。下げ幅は適切だと思った値にしてください。ここでは「30%」に設定しました。
不透明度を適切な値に下げる

22.最後に、「reverse」レイヤーにレイヤーマスクを追加して、グラデーションツールで以下のグラデーションを使用(描画色はbackgroundレイヤーを塗りつぶした色と同じにする)し、「reverse」レイヤーの下側から上側に向けて適当にグラデーションをかけ、無駄な部分を切り取れば完成です。
レイヤーマスクを追加

グラデーションを「描画色から透明に」

これで完成。
完成

「鏡面」処理に関連した過去のエントリー

▼スポンサードリンク

Posted at 2007年12月23日 | 記事URL | Photoshop | Trackback(1) | Comment(0) | Top↑
1つ後の記事:汚れた感じのデザインの名刺を作るPhotoshopチュートリアル
1つ前の記事:IE7日本語版の自動更新による配信日が決定っぽい














管理者にだけ表示を許可する

トラックバックURL
→http://smallwebmemo.blog113.fc2.com/tb.php/178-dfcd28ed
この記事にトラックバックする(FC2ブログユーザー)
Web2.0風な鏡面ロゴを作るPhotoshopチュートリアル ... 黒田哲司クロニクル【2008/09/30 15:05】
Home