グラデーション背景でメリハリアップ-Affinity Photo
も・く・じ
ここではAffinity Photoの数ある機能の中から主にブログサイトや商品・サービス紹介サイトでの利用を前提としたweb用画像の作成・加工についての使い方をご紹介します。
（記事中の画像もAffinity Photoで作成してます）
このページは知ってればより効率アップのTips系記事になります。
Affinity Photoの基本的な使い方はこちらにまとめてあります。
無地の単色背景に少しのグラデーションをかけるだけで、趣きがちょっと違ってきたりします。
ここではAffinity Photoでのグラデーションのかけ方をご紹介します。
2つのグラデーションツール
サンプルとして下のようなグラデーションのかかった背景を作ってみます。
ちなみに単色背景でのサンプルがこちら↓。
単色背景の方はのっぺりとした感じがするのに対し、グラデーションをかけた方は立体感や奥行感が強調されてオシャレで洗練された感が加味されたように感じませんか。
※パン画像は『女子力アップ素材集【MdNコーポレーション】』の収録素材です。
グラデーションのかけ方には2つのやり方があります。
一つはレイヤーエフェクトのグラデーションオーバーレイ。
こちらがその設定画面。
ほとんどの設定はこの画面内で完了します。
形状を選択したり色を変更したり中心点を変更したりするとその都度グラデーションの変化が実際の画面に反映はされるんですが、いかんせん数値の変更による調整になるため、慣れない方は思い描いた通りにグラデーションがかかるまで時間を要するでしょう。
デジタル脳で細かく調整したい方には向いてるかもしれませんが個人的にはあまりおススメしません。
メリットとしては、レイヤーエフェクトなので修正時には設定画面を出すだけで即座に調整作業に入れるってことでしょうか。
ただグラデーションの変化を直感的に感じながらではなく、前述したように基本的には設定バーのドラッグや数値の直接入力による調整になるので慣れが必要かと。
これに対しもう一つのやり方である塗りつぶしによるグラデーションの方は、マウス操作でグラデーションの変化をリアルタイムに見極めながらの直感的な作業になります。
慣れない方にはこちらをおススメします。
グラデーションのかけ方（基本編）
ここからは「塗りつぶし」から設定可能なグラデーションのかけ方についてご紹介していきます。
（設定画面のいくつかはレイヤーエフェクトのグラデーションオーバーレイと共通のものもあります）
こちらが冒頭でご覧に入れた完成画像の背景部分です。
まずはシェイプツールから長方形ツールを使って背景用の四角形を作ります。
（デフォルトでは白の図形になる？）
ここにグラデーションをかけていくんですが、コンテキストバーのオプション画面にある「塗りつぶし」のカラー枠をクリックします。
するとカラー設定画面が出てくるので”グラデーション”タブをクリックします。
まずはグラデーションの端の色を指定してみます。
（特にここから始めなきゃならないってことではないです）
帯状の両端にあるポイント（※丸印）がグラデーションの薄い方と濃い方の色指定ポイントになります。
（この時点ではどっちが薄い方？とかは考えずに適当に色指定してもOK）
とりあえず左端のポイント（開始点）をクリックして、そのポイントがもう片方のポイント（終了点）よりも少し大きくなってる（※選択確定状態）ことを確認したら「カラー」をクリックして色を選択していきます。
続いてもう一方の色も指定します。
最後にグラデーションの形状を選択します。
（今回のサンプルは”放射状”です）
ここでちょっと寄り道。
グラデーションの形状はデフォルトで4種類用意されてます。
線形
線状にグラデーションがかかります。
線の方向（角度）や開始地点・終了地点の変更も可。
楕円形
文字通り楕円形にグラデーションが広がります。
開始地点・終了地点の変更も可。
放射状
こちらも文字通り放射状にグラデーションが広がります。
開始地点・終了地点の変更も可。
円錐形
言葉で説明するのが難しいので下のサンプル画像をご覧ください。
開始地点・終了地点の変更も可。
細かい調整はあとでするとしてとりあえず最低限の設定が完了した結果がこちら↓。
ん～、先ほどのサンプルのような放射状にはなってませんね。
実はこれ、放射状の中心点が端っこにあるからなんです。
（※作業手順によっては必ずしもこうならないこともあります）
そこで中心を適当な位置までずらしてみます。
そのためには一度グラデーションツールに切り替える必要があります。
するとハンドルが表示され、同時に開始点や終了点が現れます。
ここからはマウスでの操作になります。
まず開始点を長方形の中心近くまでドラッグします。
これで放射状の中心が端から中心に変わります。
［shift］キーを押しながらだと垂直・水平の移動になります。
続いてハンドルを移動させたことで長方形の範囲外に出てしまった終了点を、グラデーションの変化を見ながら同じように適当な位置までドラッグします。
これで中心が淡く周囲に行くに連れて濃くなる放射状のグラデーションが完成です。
このようにマウスで調整しながら直感的に設定できるのがレイヤーエフェクトのグラデーションオーバーレイと大きく異なるところです。
今回は”放射状”というプリセットに従って開始点をある意味”お任せ”で始めましたが、任意の位置からスタートさせることもできます。
たとえば先ほどのグラデーションを放射状でなく線形でしかも斜めに、さらには途中だけにグラデーションをかけたいと思ったらそう思った通りにマウスでドラッグするだけで一気に変更できます。
線形だけでなく楕円形・放射状・円錐形でも同様にマウスドラッグで角度や広がり具合を調整できます。
反転
先に『どっちが薄い方？とかは考えずに適当に色指定してもOK』と開始点や終了点は特に気にしなくても大丈夫みたいに書きましたが、反転という機能を使うとグラデーションの開始点と終了点をが入れ替わって色の変化を全く逆にすることができるんです。
中間点
中間点の数値を変更するとグラデーションのかかり方（まさに中間の色具合）が変わります。
実際には数値を変更するよりもマウスでドラッグしながらの方が直感的でわかりやすいです。
塗りつぶしのグラデーションとレイヤーエフェクトのグラデーションオーバーレイを同時にかけた場合、グラデーションオーバーレイの設定が優先されます。
2つの設定が連動してくれればどちらを使ってもいいんですが実際には全く別物っぽいので、どちらか一方のみしかグラデーション効果は使えないということになります。
グラデーションのかけ方（応用編）
グラデーションの形状には4つのプリセットが用意されてますが、線形でよく使う”中央から両端に広がるグラデーション”のプリセットがAffinity Photoにはないんです。
こういうヤツです。
これ、最初はどうやって作るかかなり試行錯誤しました。
でもある機能を使えばあっという間に作れることがわかりましてね。（悩んでた時間は何だったのか...）
それが”挿入”という機能。
作り方
長方形ツールで四角形を作り、グラデーション（線形）を選択します。
グラデーションツールに切り替えた後、上から下に
キーを押しながらマウスでドラッグします。
（開始点や終了点はあとで微調整）
「挿入」をクリックします。
するとポイントが一つ増えます。
「挿入」を使わなくても、線上でマウスクリックすればその位置にポイントを増やすこともできます。
両端のポイントに同じカラーを設定します。
最後に真ん中のポイントに別のカラーを設定すれば完成です。
あとは細かい調整のみ。
「挿入」で追加されるポイントは選択したポイントの右側に追加されます。
ただし右端のポイントの右隣には追加できません。
（左端・右端のポイントは固定）
その他の設定
ついでに他の設定も見ていきましょう。
①位置：選択したポイントの位置です。50%で中央になります。
（マウスで直接ドラッグしてもOK）
②中間点：選択したポイントの右側にある中間点の位置です。50％なら選択したポイントとその右側にあるポイントの真ん中に中間点が位置するということです。
（マウスで直接ドラッグしてもOK）
③コピー：選択したポイントの色と同じ色のポイントが右側に追加されます。これに対し「挿入」は色が伴わないシンプルなポイントの追加になります。
④削除：選択したポイントを削除します。
④不透明度：グラデーション全体の透明度です。数値が小さいほど見えにくく（透明に）なっていきます。
ポイントを増やしてみる
ポイントをさらに増やしてみたサンプルがこちら↓。
形状を変えれば（線形→楕円形）この通り。
こんなふうにグラデーションを覚えると表現の幅がぐっと広がります。
【Affinity Photo ver.1.10.4で検証済】
スポンサーリンク
記事はお役にたてましたか?
記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓