そろそろ反射ブームも終わりかけの様な気がしますが、Mac OS X 10.5のDockもジョブズ氏が7年磨き続けてツルツルピカピカになったし(笑)よく聞かれるので作り方を。



Photoshopを使ってますが、他の画像編集ソフトも名称は似たような物なので、大丈夫でしょう。

まず、画像を用意します。今回は、iTunes7のアイコンを拝借。






カンバスのサイズを変更します。

下方向に元の画像の半分位増やします。

レイヤーをコピーします。

コピーしたレイヤーを選択し、垂直方向に反転させます。

反転したレイヤーにレイヤーマスクを追加しても良いのですが、今回はもう1つレイヤーを重ねます。

パレットでグラデーションツールを選択し、グラデーションを調整します。

良い感じに調整出来たら、カンバスの下から２つの画像の境界線までグラデーションを適用します。この時、shiftを押してマウスをドラッグすると簡単に直線になります。

一番下に背景を用意し、完成です。

今回は黒でしたが、背景の色を決め、作ったグラデーションにカラーオーバーレイで同じ色を付ければ良いです。

グラデーションレイヤーを別で作っておけば、同じサイズの画像を幾つも作るときにグラデーションを再度作らなくて良いので便利かな。

---

序でに便利なスクリプトを使う場合。

Reflection.jsからReflection.jsをダウンロードしてきます。現在はバージョン1.7。

MIT-styleライセンスらしいので有る程度自由に使う事ができます。詳しく知りたい方は、自分で調べて下さい。

サポートされているブラウザは、

Internet Explorer 5.5+

Firefox 1.5+

Opera 9+

Safari 2+

ダウンロードしたらreflection.zipを解凍し、reflection.jsをScript用フォルダを作ってサイトに追加する事にします。

次に、head内で外部スクリプトを読み込みます。

<script tyle="text/javascript" src="フォルダ名/reflection.js"></script>

この作業が終われば、反転反射したい画像のタグで、class指定をreflectにしてあげるだけです。

<img src="iTunes7.png" alt="iTunes7" class="reflect"/>

反射画像の高さを変更したい場合は

rheightを追加します。

<img src="iTunes7.png" alt="iTunes7" class="reflect rheight100"/>

透明度も変更出来ます。

<img src="iTunes7.png" alt="iTunes7" class="reflect ropacity100"/>

高さや透明度はパーセント指定です。

javaScriptを自由にアップロードして使える環境ならば、こちらこ方が背景が柄物でも画像作りで悩まなくて良いので楽ですね。時間短縮にもなります。

ただ、ブラウザによってはちゃんと読めないか、見る側がjavaScriptを許可してないと意図したとおりに表示出来ないのがネックです。

「今日の一曲」

16曲目：酒井法子「涙色」