なげやりろぐ

フテイキコウシン

 少し遊んでみる

なんもせずに休みを終えるのもどうかと思ったので、先日取り上げたRK Launcherのアイコンに反射効果をつけるためのアレコレなど。


ていうかコレ書いてる間に翌日になってしまったし・・・・(笑)


ナニをもってWeb2.0というのかよくワカラナイのですが、そういった流れの中で取り上げられるサイトなりブログなりのタイトルはプラスチックっぽい文字とかアイコンなどが使われていて、それらが下に写り込んでいるってのが定番ぽいですよね。
で、Mac OSX LeopardのDockアイコンもそれに倣ったのかどうかはワカリマセンがアイコンが写り込んでいるわけでして、コレをWindows環境のDockアプリで再現するためにはいちいちそういった画像を用意しないといけないわけです。
で、今回は現在使用しているRK Launcherのiconsフォルダに格納しておくための画像をソレっぽくしておこうと思ったわけでして。


基本的にPhotoshop限定*1の方法でして、それ以外のツールをお持ちの方には参考にならないということでアレなんですけどね・・・


特に面倒なことをしているわけでもなくすでに知っている人も多いと思いますし、”Photoshop”と”Reflection”とか”写り込み”とか”反射”などのワードで検索すればいろんなやりかたがHitしますので、そのうちのヒトツってコトで見ていただければと思います。*2


白背景のWebページ用ならば、反射部分に透明から白へのグラデーションを重ね書きで表現できますが、今回の方法は透過情報を持つpng画像を作成しますので、背景のカラーには依存しません。

ここからは画像を多用しますので、興味のあるかただけどうぞ。

以下、画像にテキトウな説明付きで

まず、反射効果をつけたい画像を用意。
ココではネットから拾ったPhotoshop CS3 Enhanced用の128x128px pngフォーマットの画像を使用しました。右下部分は透過されていますので、このままでも背景画像がある程度透けて見えます。
使用した画像は背景に透明部分がありますが、背景付きのモノでもシーンに合わせて色を変えるなり切り抜くなりすればいいかと。

Edit(編集)>Free Transform(自由変形)で、反射効果を追加するためのスペースを確保するために縮小します。
ココでは他のアイコンとサイズを合わせて85%にしてみました。
リンクアイコンを押してWもしくはHのボックスに数値を入力することでもう一方にも同じ数値が設定されます。

変形を確定したら、今後の作業をしやすくするために新規レイヤーを追加しレイヤーオーダーを一番下へ。
このレイヤーを白色で塗りつぶし白背景レイヤーを作っておきます。
その後、先ほど縮小したレイヤー(Layer 0)をクリックし、右クリメニューからDuplicate Layer(レイヤーの複製)を実行。
Layer 0 copyが追加されます。

細かいことを言うならば、ココでLayer 0とLayer 0 copyのオーダー(順番)を入れ替えておくほうがいいのですが、今回は反射部分が薄くなるので気にせずこのまま作業を続けます。*3
ツールパレットで移動ツールを選択し、メイン画像となるlayer 0を上へ移動し下の方へ反射部分のためのスペースを作ります。
次にLayer 0 copyを選択し、メニューからEdit(編集)>Transform(変形)>Flip Vertical(垂直方向へ反転)をクリック。画像が反転したら先ほど移動したLayer 0から反射して見える位置へと移動しておきます。

ここからは反射部分を加工していきます。
Layer 0 copyレイヤーを選択した状態で、Magic Wand(自動選択ツール)で背景部分をクリック。Selection(選択)>Invent Selection(選択部分の反転)で、反射部分の画像を選択しておきます。*4

反射部分の画像が選択された状態で、レイヤーパレットの下にあるAdd Layer Mask(レイヤーマスクの追加)ボタンを押してLayer 0 copyへ選択部分のレイヤーマスクを追加します。

ツールパレットからグラデーションツールを選択。
パレットのカラーが標準状態(黒が前面、白が背景)ならば下から上へ、あるいはパレットを反転して上から下へクリック&ドラッグ。

レイヤーマスクにグラデーションが適用されるとこんな感じになります。
グラデーションのかかり方には好みもありますので、始点と終点をイロイロ試して見た方が良いかもしれません。

これで一応完成としても良いのですが、今回はDockアプリに使うということもあり他のアイコン画像とのバランスも考えなければいけません。
最初から用意されているアイコン群と透過具合をあわせるために、反射画像のOpacity(透明度)を調整します。

最後に、作業時の確認用に用意していたBackGround(白背景レイヤー)を非表示にしたのち、透過pngフォーマットで保存して完成です。

DockアプリにPhotoshopのexeファイルをD&Dして、新規に登録された画像を右クリして出てくるDockアイテムのプロパティから先ほど保存した画像を指定すればOK.


バリバリのPhotoshop使いなヒトやすでに知ってる人にはなーんだ、ってなもんでしょうけど意外と白背景用の作り方やツールはあってもグラデーションで透過させるためのチュートリアルって少なかったような気がしたのでエントリーしてみました。
なのでコレがどなたかのお役に立ってくれれば幸いです。





さて、寝るかー・・・

*1:使用バージョンはPhotoshop CS3 Enhanced 英語版。多分6.0〜以降でもOKかな・・・

*2:ブログタイトルなどにソレっぽいのを作るときにも役に立つかもシレマセンしね。

*3:気になる場合はココでレイヤーを入れ替えるか、Layer 0 copyをメイン画像としてLayer 0を反射側として作業を進めるとイイでしょう。

*4:反射部分に使用した画像が透過部分を含まないのであれば、Selection(選択)>Load Selection(選択部分の読み込み)をクリックして透明部分を抽出することでお手軽に出来ます。