Web 2.0な画像テク - 第1回 Web2.0的サイトのグラフィック表現 (MYCOMジャーナル)

その昔、凸状のリンクボタンが「ホームページ」の象徴だったように、Web 2.0的なサービスを提供しているサイトにも好んで採用されているグラフィック表現というものがあるように思えます。そんな「なんかWeb2.0」なデザインパターンを見つけ出し、実際にAdobe Photoshop CS2で実現するための方法をご紹介して行きましょう。

おもしろそうなので早速挑戦。

でも自宅にPhotoShop CSは持っていないので、5.5でやってみました。

まず、つまずくのが「角丸長方形ツール」。 PhotoShop 5.5にはこんな高度なツールは付いていません（泣）
手動でやるのは面倒なので、 penta.comさんのRounded Cornerというプラグインで代用します。
これはレイヤーを角丸にしてくれるプラグインです。これはとても便利なのでおすすめです。

１・まず、レイヤーに角丸を作るので、仕上がりサイズで新規ドキュメントを作成します。

２・レイヤーをひとつ作り、黒で塗りつぶして、Rounded Cornerプラグインで10Rくらいに角を丸めます。

３・次にまた5.5には無い機能グラデーションオーバーレイというのが出てくるので、
普通のグラデーションツールを使ってサイトの通りにグラデーション色を設定。

４・レイヤーの選択範囲を読み込んで、先程設定したグラデーションをかける。

サイト名でも適当に入れて・・・っと。

なんだ、もうできてしまった（笑）

これだけではつまらないので、もういっちょ！

これは、Photoshop Tutorial- Polished Text　こちらのチュートリアルで作りました。

こちらもチュートリアルではCS2使用ですが、5.5でできました。

サイトを見ればすぐにわかると思いますが、5.5での手順を。

１・背景を#13171Bで塗る→文字を#01B6EBで書く。

２・文字にドロップシャドウをかける。

３・新しいレイヤーにハイライト部分を作成して白で塗り、文字レイヤーの選択範囲で抜く。

４・ハイライト部分の透明度を30-50%くらいにする。

５・文字とハイライトのレイヤーを複製して垂直反転。それっぽい変形をしてみたり・・・。

６・映り込みレイヤーはドロップシャドウを外してレイヤー順を一番下へ。

７・クイックマスクを適当にかけ、選択範囲を削除。映り込み完成。

プギャー2.0ｗ