こんにちは。
フェノメナエンターテインメント デザイン担当の山男です。
画面デザインを行う際など、Photoshopを使用する機会は多いと思います。
僕もほとんどの場合、最終的な画面デザインはPhotoshopで完成させています。
今回はそんなPhotoshopについて、テキストに関する意外な落とし穴を紹介します。
上の画像を見て、既に「変だな」と思った人も居るかもしれません。
上の画像は、Photoshopで黒(RGB 0,0,0)のテキストレイヤーを作成し、それを不透明度50％に変更、そしてテキストレイヤーをラスタライズするという流れを再現しています。
テキストレイヤーを作成した直後は不透明度100％ですから、そこから不透明度50％にすると、薄く見えるようになるのは当然のことです。
しかし、不透明度50％のままラスタライズした一番下の文字が、ラスタライズする前の文字よりも濃く見えていることにお気付きでしょうか。
試しに画像を統合して濃さを比べてみると、ラスタライズ前が RGB 163,163,163 に対し、ラスタライズ後は RGB 127,127,127 。これはかなり違っていると言えるぐらいの差があります。
結論から言えば、各値 0～255 という範囲の50％、つまり真ん中ですから、ラスタライズ後の RGB 127,127,127 の方が正解です。
Photoshop上でテキストレイヤーを作成して、そのまま不透明度も調整・・・なんてことは、極々普通にやっている手順ですよね。デザイナーがPhotoshop上で不透明度はこれぐらいだろうと調整して、それをプログラマーに数値で伝えようとした場合、もしかするとデザイン時の意図と、実際に出来上がったものが別物になってしまうかもしれません。
ちなみにここではレイヤーの「不透明度」を取り上げて説明していますが、同様に透明の度合いを調整する「塗り」の数値を変更した場合でも、まったく同じ現象が発生します。
シンプルな回避方法としては、レイヤーをラスタライズした状態で不透明度を調整するのが手っ取り早いです。
しかし、後からテキスト自体を編集したりすることが出来なくなってしまいますので、作業途中でラスタライズするのは結構勇気が必要なのではないでしょうか。
実はこの現象、テキストレイヤーをレイヤーフォルダに格納して、レイヤーフォルダの不透明度を変更することで回避することが出来ます。デザインによっては、１つ１つのテキストをわざわざレイヤーフォルダに分けて入れる必要があったり、テキストレイヤー自体を編集するよりも若干面倒ではありますが、ラスタライズして元に戻せなくなってしまうよりは幾分マシだと思います。
最後に、不透明度100～0％まで10％刻みでの見え方を載せておきます。
それにしても、Photoshopは何故こんな現象が放置されているのでしょうか・・・
