Photoshopでグラデーションオーバーレイを使っていると、「保存後や書き出し後に色の位置が変わる」「比率が小さくなって端に寄る」「最大スケールでも狭い」といった現象が起きることがあります。特にカンバスサイズとレイヤーサイズの関係を理解していないと、プレビュー時と完成データで見え方が変わってしまい混乱しやすいポイントです。この記事では、Photoshopのグラデーションオーバーレイの仕様と、書き出し時に崩れないための実践的な対策をわかりやすく解説します。
Photoshopのグラデーションオーバーレイは何を基準にしている？
まず重要なのは、Photoshopの「グラデーションオーバーレイ」は単純にカンバス基準ではないという点です。
実際には以下の要素が影響します。
| 影響する要素 | 内容 |
|---|---|
| レイヤーサイズ | オーバーレイの基準になることが多い |
| スマートオブジェクト | 内部サイズに依存する場合がある |
| 書き出し方法 | アートボードやトリミングで変化する |
| 変形状態 | 拡大縮小の影響を受ける |
特に「レイヤーサイズ依存」で挙動が変わるケースが非常に多いです。
保存や書き出しでグラデーションがズレる原因
保存前と保存後で見え方が変わる場合、主な原因は以下のどれかです。
レイヤーサイズが実際は大きい
透明部分を含めたレイヤーサイズが広いと、グラデーションの基準範囲も広がります。
そのため、実際の表示範囲では「グラデーションが端に寄った」ように見えます。
スマートオブジェクト内部サイズ問題
スマートオブジェクトを使用している場合、外見ではなく内部ドキュメントサイズが基準になることがあります。
これにより、最大スケールでも狭く感じるケースがあります。
書き出し時のトリミング
「書き出し形式」「アートボード」「透明部分をトリミング」などの設定で、基準サイズが変わることがあります。
特にPNG書き出しで起きやすい現象です。
最大スケールでも狭い理由
Photoshopのグラデーションオーバーレイは、単純な「画面全体」に対してではなく、レイヤーサイズ基準でスケール計算されます。
例えば、
- レイヤーサイズが5000px
- 実際の表示部分が1000px
という状態だと、100%でも非常に狭く感じます。
この場合、「スケール最大でも広がらない」という現象になります。
一番効果的な対策は「レイヤーをトリミング」すること
最も効果的なのは、不要な透明領域を削除することです。
方法
- 対象レイヤーを選択
- Ctrl+クリックで選択範囲化
- 「イメージ」→「切り抜き」
または、スマートオブジェクト内部を開いて余白を削除します。
透明余白が原因になっているケースは非常に多いです。
グラデーションをカンバス基準に近づける方法
どうしてもカンバス全体基準で使いたい場合は、専用レイヤーを作る方法が安定します。
おすすめ手順
- カンバスサイズと同じ塗りレイヤーを作成
- そこにグラデーションオーバーレイを適用
- クリッピングマスクで対象へ適用
これなら、カンバスサイズ基準に近い挙動になります。
書き出し時に崩れない設定
Photoshopでは書き出し設定によって見え方が変わることがあります。
推奨設定
| 設定 | 推奨 |
|---|---|
| アートボード使用 | 必要時のみ |
| 透明部分トリミング | OFF推奨 |
| 別名保存 | PSD保持推奨 |
| 書き出し形式 | 書き出し前確認 |
特に「透明部分を削除」が有効になっていると、サイズ基準が変わることがあります。
実際によくあるケース
例えばYouTubeサムネイル制作やWebデザインで、背景に大きなグラデーションを使う場合、
「保存後だけグラデーションが縮む」
という相談はかなり多いです。
原因を調べると、ほとんどが「巨大な透明余白を含むレイヤー」になっています。
代替案として通常グラデーションレイヤーを使う方法
レイヤースタイルではなく、「グラデーション塗りレイヤー」を使う方法もあります。
こちらは位置調整がしやすく、カンバス基準で管理しやすいメリットがあります。
複雑なUIデザインでは、こちらの方が安定するケースも多いです。
まとめ
Photoshopのグラデーションオーバーレイは、単純にカンバスサイズだけで動いているわけではなく、レイヤーサイズやスマートオブジェクト内部サイズに強く影響されます。
そのため、保存後や書き出し後に「端へ寄る」「比率が変わる」という現象が発生します。
対策としては、不要な透明領域を削除し、必要に応じてカンバスサイズと同じ専用レイヤーを作る方法が非常に効果的です。
特にWeb用画像やサムネイル制作では、PSD内部のレイヤーサイズ管理を意識するとトラブルをかなり減らせます。
コメント