レイヤーエフェクト
グラデーションオーバーレイ
Gradient / 「グラデーションオーバーレイ」の解説：
レイヤーに存在するピクセルに対して一括でグラデーションを施します。すでにある内容にグラデーションを被せるため、このようなエフェクトはデザインツールでは一般的に「グラデーションオーバーレイ」と呼ばれます。
グラデーションとは、あるカラーから他のカラーに徐々に色合いを変化させる表現技法のことです。同じカラーでも徐々に濃度を変えたり明度を変えて変化させていくこともグラデーションといえます。
- レイヤーエフェクトなのでレイヤー内にピクセルがペイントされていなければ何も起こらない
- 後付けでグラデーションを被せるので、本来のカラー（オリジナルのペイント内容）はレイヤー内に保持されている。オリジナルに直接手を加えることなく何度でも気軽に試行錯誤できるように、必要に応じてオンオフできるように…というのがオーバーレイの考え方であり、便利なところである。
＜グラデーションオーバーレイの項目・設定方法＞
エフェクトをかけたいレイヤーを選択している状態でレイヤータブ内「Add Effect」ボタンを押し、ドロップダウンリストから「Gradient」を選ぶと設定パネルが追加される。
- 効果オンオフ切り替えスイッチ：レイヤーエフェクト共通の機能。設定を保持したままエフェクトのオンオフを切り替えることができる。
- レイヤーエフェクトの削除：こちらも共通の機能。外見は「閉じるボタン」のそれだが、これを押した瞬間に確認も警告もなしに管理パネルから削除されるので十分に注意を（削除した直後なら「Undo」で復活させることができる）。
- キーカラーの追加・削除、編集：
- グラデーション内容は並んでいるキーカラーのいちばん左から始まり、いちばん右のカラーで終了するように表現される
- つまり作成したいグラデーションの色順にキーカラーを並べていけばいい
- ドラッグで並び順を簡単に変更できる
- PhotoshopやIllustratorのようなバー状UIによる細かな比率配分はできない。キーカラーはもちろん同じ色を何度使っても構わないので工夫してグラデーションを表現することになる
- 「赤青赤青赤」と並べて色の移り変わりを繰り返すグラデーションなど
- 「赤青青青赤」と並べて青が占める部分を広くするという変化付けにも
- キーカラーは始点と終点の最低２色が必要。初期設定では「赤」「青」の２色がグラデーションをエフェクト一覧から追加した瞬間に自動で設定され、この開始色と終了色の２枠は絶対に削除できないようになっている。
- Angle:「グラデーションの角度」：Pixelmashでは線形グラデーションのみ扱うことができる。ジョグダイヤル状の回転つまみを操作して、グラデーションの流れる角度（向き）を設定できる。
- ダイヤル内の青い丸が始点として扱われるため、虹のグラデーションを適用するときにダイヤルの青丸が11時方向に位置していれば、11時の赤から5時の紫まで中央を横切って「↘」状に虹帯が流れる。
- ダイヤルを縦に分割したとしてダイヤルの青丸が左側にあれば順目（キーカラーの並び順通りにグラデーションが流れる）、右側なら逆目にグラデーションが流れることになる
- Steps:「表現ステップ数」：設定したそれぞれのキーカラーへの変化の移行具合を何ステップで表現するかを変更できる。グラデーションの分割数と言い換えることもできる
- ステップ数が少ない＝荒いグラデーション（ピクセルアートらしさが出るともいえる）
- ステップ数が多い＝滑らかなグラデーション
- 色の移行具合もピクセルで表現することにはちがいないので、グラデーションで塗りたい物体のピクセルサイズが小さいと滑らかにできる段階にも限度がある
- 下の作例のように48ピクセルのバーに対して60ステップを要求しても無意味
- 色の境目が目立たないような滑らかなグラデーションを描画したいのであれば相応のピクセル数が必要
＜グラデーションの適用のされ方を確認しよう＞
１枚のレイヤー内に存在するピクセル要素に一括してグラデーションのオーバーレイがかかっていることを確認できる。
- レイヤーは1枚のみで、レイヤーエフェクトが上から「テキスト」「グラデーション」「ドロップシャドウ」と3つのエフェクトが適用されている。
- この作例ではドロップシャドウ部はレイヤーエフェクトの重ね順（＝適応順）でグラデーションエフェクトの下に位置しているためかかっていない（レイヤーエフェクトの重ね順をドラッグ操作でグラデーションの上に入れ替えるとドロップシャドウ部にもグラデーションが適用される）
＜グラデーションをアニメーションに転用・活用した作例＞
レイヤー名・レイヤー構造に記述しているが、アニメーションしているのはグロブダーから放たれるレーザー部分だけである。
レーザーのレイヤーに虹色のグラデーションを設定し、そのなかでレーザー（7分割）が高速で前進して画面外に消失するアニメーションを21コマ(アイドリング2コマ含む)で作成している。
なお、レーザーは白色の2x15ピクセルの長方形を7つ並べているだけだが、レイヤー自体にグラデーションがかかっているため、そのレイヤー上で移動するピクセルにグラデーションがオーバーレイされて虹色レーザーが発射されているように見せかけている。
- とはいってもPixelmashの「存在しているピクセルだけに一括で設定したグラデーションがかかってしまう」仕様上、このレーザーの見え方はそれなりに美しいが本家グロブダーとは微妙に異なってしまっている（完全に再現するならグラデーションを使わずに色ピクセルで長方形を描き分けたほうが絶対早い）
最終更新：2022年05月18日 01:27
