デザインするなら必須!画像を段々と透明にするグラデーションマスク



マスクグラデーションで透過
非常にパワフルな機能。
これを知っているのと知らないのでは大違い、もったいないので是非覚えて欲しいと思う。
マスク処理で画像を切り抜く超基本の説明はこちら
マスク処理は単に画像を切り抜くだけでなく、透明度も指定できる。
グラデーションを使った透明度を変える処理をやって解説する。

何でもよいので画像を用意する。
画像をPhotoshopで読み込んだら、
[Ctrl+A]を押すと全体が選択状態になるので、そのままマスクをかける。
※画像を読み込むとその画像は背景レイヤーになっている。
 そのままでは扱えないので別レイヤーを用意して張り付ける。
そしたら、こんな感じになる。
全体マスク

マスクの原理はわかるかな。
白い部分が表示部分、黒い部分が非表示で隠れてしまう部分。
そして、その間のグレーの色だと半分透けて見える状態になる。
つまり黒い度合いが透過の度合いだと考えればいい。
なので、マスクが白から黒に向かってグラデーションするとそれに合わせて画像も透過されていく。
レイヤー上のマスク部分をクリックして選択。
そのまま、グラデーションツールで白から黒のグラデーションをかける。
こんな感じ。
マスクのグラデーション
そして、画像はこうなる。
マスクのグラデーション

透過されているのがわかりやすいように、下のレイヤーに画像を入れてみる。
背景画像の挿入
そうするとこんな感じに。
背景画像の挿入

こういう風にして、グラデーションのかかったきれいな画像が作られる。
いろいろなホームページで使われている技法。
この原理を覚えておくといろいろなことができるので、ぜひ知っておこう。

Related Posts Plugin for WordPress, Blogger...

One Response to “デザインするなら必須!画像を段々と透明にするグラデーションマスク”

  1. [...] 引き続きマスクの作業。 このままだと透明感が無いので、透明感を出すために中央を透明にする。 水晶の縁が近くなるに従って透明度が下がる感じで、マスクにグラデーションをかける。 デザインするなら必須!画像を段々と透明にするグラデーションマスク [...]

Leave a Reply