こんにちは。Halcana（@halcana21）です。
2回続けて広告バナーのトレースです！またアパレル系に戻ってきました。
振り返り
PAL CLOSETのバナーは2回目ですね！前回の分析ではジャンプ率を取り上げました。
タイムは90分。結構かかってしまったかなという印象です。グラデーションツールの使い方がいまいちわからず、１時間以上かかってしまいました。
photoshop操作 – グラデーションツールの使い方
今回はグラデーションツールの使い方をまとめます！グラデーションに塗るのにもいくつか方法があると思いますが、ここではレイヤー効果を編集する方法でやっていこうと思います。
グラデーションエディターを開く
まずレイヤースタイルを変更するためのウィンドウを出します。アートボードの上にグラデーションに塗りたい図形を作り、右のパネルから該当のレイヤーを右クリック→一番上の「レイヤー効果」を選んでください。
すると「レイヤースタイル」のウィンドウが開きます。左のチェックボックスの「グラデーションオーバーレイ」をクリックする（①）と上の写真のようにグラデーションの調整ができます。色を変更していきたいので、グラデーションのバーをクリックします（②）。開いた「グラデーションエディター」のウィンドウで色の調整をしていきます。
グラデーションエディターの編集
続いて、色の調整をしてグラデーションを作っていきます。
ちなみに、プリセットを使えば簡単にグラデーションが作れるので、こちらの利用もおすすめです。上の写真ではPurples（紫系）のプリセットが表示されていますが、他の色系統も品揃え豊富です。
次はいよいよグラデーションを作っていきます。
カラー分岐点
まずはグラデーションエディターの各パーツの名称を紹介します。以下の３つの点を使ってグラデーションを作ります。
まずはカラー分岐点を使ってグラデーションを作りましょう。
カラー分岐点をクリックすると色を変更できます。色を変更すると、自動的にカラー分岐点に設定した色のグラデーションを作成してくれます。
また、複数色のグラデーションにすることも可能です。グラデーションが表示されているバーの下側（ちょうど「カラー分岐点」や「中間点」の赤い四角があるあたり）をクリックすると新しいカラー分岐点が追加されます。3色、4色のグラデーションを作ることもできます。
グラデーションが完成したら、「OK」を押してグラデーションエディターを閉じます。
今回は青→紫→ピンクの3色でグラデーションを作ってみました。
（3色で作るなら赤→青→黄色とか全く違う色味で作った方がわかりやすかった…痛恨のミス…！笑）
中間点
続いて中間点を操作していきます。
中間点を使うと、グラデーションの色が切り替わる場所を調整することができます。つまり、それぞれの色の範囲を調整できます。カラー分岐点をクリックすると、その両側の中間点が表示されるので、ドラッグで移動して場所を決定します。
上のように中間点をピンク寄りにすると… （ちなみに青側の中間点も青寄りに移動してあります。）
最初に作ったグラデーションより紫寄りの範囲が広がったのがわかるでしょうか。
以上のように、色の調整はカラー分岐点で行います。次はグラデーションの透明度を調整しましょう！
透明度分岐点
続いて、透明度分岐点の使い方です。
透明になっているのが見やすいように、ここでは私のプロフィール画像にグラデーションのレイヤーをかけます。
基本的にはカラー分岐点と同じ使い方です。今度はグラデーションが表示されているバーの上側の透明度分岐点をクリックし（①）、不透明度を調整します（②）。
透明度分岐点も、バーの上側をクリックすれば増やすことが可能です。
今回は両端を不透明度80％にしてみました。
これはこれでなんかオシャレ…*^^*
続いて、ピンク寄りの透明度分岐点を不透明度100％に変更し、ドラッグで中央の方に移動してみます。
上半分が隠れました。透明度もしっかりグラデーションになっています！
おまけ – グラデーションのスタイル
今回はグラデーションエディターの編集をメインに行いましたが、そもそもグラデーションの形を変えたい！という方は、レイヤースタイルのウィンドウから変更可能です。最後に一例を紹介して終わろうと思います。
上の写真の「スタイル」からグラデーションの形を選べます。今回は円形を選びましたが、他にも「菱形」「反射」などいくつか種類があります。
円形を選ぶとこんな感じです。先ほど設定した透明度が残っているので、中央あたりが若干透けていますね。
他にも、「スタイル」のすぐ下の「角度」を調整してグラデーションの方向を変更することもできます！細かい調整も可能なので、色々試してみてくださいね。
まとめ
今回は広告バナートレースを題材にグラデーションツールの使い方を取り上げました。前回の広告バナートレースの時も書きましたが、文字組バナーはそろそろ終了かな、と思っています。次回からはもう少し難易度を上げていきたいです！
次のバナートレースはこちらから！
コメント