感覚で作るWeb2.0的アクア風アイコン
Web2.0的といわれるサイトで多く使われているアクア風のアイコン。
みなさんはどうやって作っていますか？感覚的に作れますか？思い道理の色が作れますか？
今バイト先の先輩が「Web2.0的デザインが２週間で身に付く！！」なんて題して、メールで課題を社内の人に出しているんですが、そこにも出てきたアクア風のグラデーション。
元々はAppleがMacOSXでボタン等に使い出した事が始まりだとは思うんですが、最初自分もPhotoshopで作ろうと色々試行錯誤したんです。ベベルをかけて、サテンをかけて…なんてやってたのですが上手くいかなかったんですよね。
その頃私は高校生の始め頃だったと思うのです。当時も解説サイトは沢山あったんですが、どれもいまいち。今はサンプルも沢山あって、グラデーションだけでいいのか！とかすぐそういうヒントがあるのですよね。本当に良い時代になった物だ…。
では、今回はアクア風のアイコンの色付けの原理（？）を覚え、好きな色で色々なアクア風アイコンを作れるようになりましょう！
アクア風アイコンって何だ？
私は画像のような潰れた筒状の物だと考えています。それを元に考えて行くとグラデーションをイメージしやすくなるはずです！
では3Dソフトを使って画像を作ってみたので解説して行きましょう。
立体的に考えるアクア風アイコン
色の付いているのは潰れた筒状の半分だけなので、半分に割って、色をつけてみました。普通の青の板です。
（少しグラデーションがかかっていますが、光の加減です）
黒から、青、白へのグラデーションがかかりました。
ここで、よく見て頂きたいのは、上から光が当たっている為、半分にした筒の上の方は暗くなっているという事です。
次に、割って使ってなかったもう半分の筒を透明にして合わせてみました。
このように、潰れた筒状の物の手前が半透明になっていて、上から光を受けている状況がアクア風と言われる画像のイメージに近いと思いませんか？
まだよく分からないかもしれませんが、後ろ半分が上から下へ明るくなるグラデーション、手前半分が上の真ん中あたりまで明るく、下に行くにつれて、薄れて行く白いグラデーションで出来ていますよね。
じゃあ、これを前から見てみましょう
すると、普段見ているアクアのアイコンのイメージにかなり近い物になったと思います。
これが私の考えるアクア風アイコンのリアルなイメージです。
簡単にいうと、
「手前は上部に光が当たり、奥は下部に光が当たったグラデーションのイメージ。」
イメージを元にPhotoshopで作ってみよう！
まずは先ほどの筒でいう後ろの部分のグラデーションは上から、黒、青、明るい青というグラデーションでした（１）。
そして、手前の部分は真ん中までが明るく、その後はかすかなグラデーション（２）。
このグラデーションを作る際は、色は白のみで、透明度のみでこのグラデーションを表現して下さい。
あとはこれを重ね合わせればOK!!
どうですか？イメージはしやすくなったでしょうか。
ではこの概念を応用したPhotoshopでのグラデーションの作り方をに次回の記事で行いたいと思います。
お楽しみに！
訂正 2007/08/08
寝ぼけて記事を書いていた為、意味が分からない記事になっていたので、元を崩さずになるべく分かりやすくなるように全体を訂正致しました。
前回の記事では、誤字脱字等沢山あり、見難い記事を書いてしまいすみませんでした。 実は、バイト先の社員さんに突っ込まれて気付いたんですよね、お恥ずかしい限りです(´▽｀ ;) 修正してもまだ分かりにく...