連続階調(グラデーション)

グラデーションとは徐々に色が変わって行く物を指します。このHPのリンクバナーでも使われています。
グラデーションは効果的では有りますが、使うのがなかなか難しい加工法だと思います。
特に256色しか使えない GIF 形式で綺麗に見せるには有る程度のテクニックが必要だと思います。



グラデーションは多色で構成すると結構難しい
グラデーションを使う上でありがちな問題は使う色が3色以上になる場合に、使う色を適当に選ぶと色と色の中間部分が黒っぽく ( くすんだ色に ) なってしまう事でしょう。実はこれを回避する色使いを簡単に得る方法があります。
ツールパレットの描画色をクリックしてカラーピッカーを表示してみて下さい。
パレットの真ん中辺りに虹色の部分がありますね?これを使います。
これを見ると赤とピンクや緑と黄色、オレンジと黄色は隣り合っています。
これらの順番をそのまま組み合わせてグラデーションを作ると中間部が黒っぽくなることは殆どありません。
また、これらを元にグラデーションツールオプションで色々な組み合わせをおのおので探ってみて下さい。

ここからが本題 (^^;
普通のグラデーションを掛けるだけであればグラデーションツールを使って簡単に出来ますので面白くない。と、言う訳でここでは白−任意の1色しか使わないシンプルなものですが「グラデーションツールを使わずにグラデーション、それもグラデーションの方向が一定にせずにグラデーションを掛ける」方法を紹介してみます。


まずは文字を
文字にグラデーションを掛けますので、文字ツールを使います。今回は色は白−任意の1色なので、文字は白で入れます。任意の1色の明るい色−暗い色のグラデーションを掛けたい場合は白に近いグレーを使えば OK 。
( Photoshop5.5 以降はここで文字をラスタライズします ) 文字を入れたらレイヤーパレットの透明部分の保護をチェックします。こうすることで文字以外の部分は加工の対象から外れます。


エアブラシで文字を塗っていきます
描画色を黒に変え、エアブラシツールに持ち替えます。エアブラシオプションで強さを5%程度に設定します。
ブラシは最初かなり大きい物を選択します。この例では最初は100ピクセルの大きさで始めました。
ブラシをWクリックするとブラシオプションを変更することが出来ますね?グラデーションの距離をぼかしの開始位置で調整します。慣れないうちは0%にするのが失敗しにくいと思います。
これを確認したら文字がまだら模様になるようにの黒をお好きな形に吹き付けます。一度で塗ろうとはせず、少しずつ何度も塗って行く方がうまく塗るコツです。
段階的にブラシのサイズを小さくして濃い部分と淡い部分の差を付けて行きます。


とりあえずこんな感じで塗りました。(ここでは便宜上、赤い背景を入れてあります)
モノトーンで良ければこのままでもグラデーション部分は完成と言えますが、これではちょっと寂しいのでこれに色を付け、目立つ工夫をしていきます。



カラーのグラデーションへ
[イメージ] - [色調補正] - [色相・彩度] を選択し、 [色彩の統一 ]をチェックし、色相スライダを左右に振ってみて好みの色を見つけたら決定します。
彩度は色の淡さを決める要素、明度は明るさを決定する要素ですので、ここも色々変化させてみても良いかもしれません。今回は彩度や明度はいじらず、色相だけを -130 に設定して青のグラデーションとしてみました。

これでグラデーション部分は完成です。
今回はページの背景にグレーを使い、ドロップシャドウで影を付け、さらにグラデーション部分が背景に溶け込んでしまうのを防ぐためにグラデーションの周りに白の縁取りを入れます。


これで完成です。

グラデーションツールで作るとグラデーションの方向は一方向ですが、それとはちょっと違ったグラデーションが出来上がりです。




戻る