フォトショップ エレメンツ ビギナーのために
                        Windows編

グラデーション

ホームページ作成において掲載写真の各種画像編集が必要になります。 当サイトでは、PhotoshopElements初心者を対象として ホームページ作成・運営で必要な各種画像編集を中心とした操作を紹介します。

グラデーション − 概要



ホームページのタイトル画像に文字を入れる時、背景との関係で文字が見ずらくなる場合があります。 この時、タイトル画像にグラデーションをかけると文字が見易くなります。 また画像にグラデーションをかけることにより他の写真とは一味違った雰囲気となりページの飾りにもなります。

この『グラデーション』 ページでは、タイトル用画像の飾りおよび文字を見易くするため 『白』 のグラデーションをかける操作を説明します。

■ グラデーションイメージ ■

グラデーション


グラデーション − 操作方法


1. 画像を開く

ファイルの開き方は、「 ファイルを開く 」を参照ください。
2. オリジナル画像の表示
オリジナル画像の表示
オリジナル画像の表示
オリジナル画像が、
表示倍率 25% で表示されています。



3. 新規レイヤーの作成
レイヤーの作成
レイヤーの作成
レイヤーを作成します。

レイヤーパレット(ウインドウ右側)の 『新規レイヤーを作成』 ボタンをクリックします。
『レイヤー1』 の名称でレイヤーが作成されます。
レイヤーに名称を付けることもできます。
『レイヤー1』 の選択されている部分(青色部分)を右クリック、 『レイヤー名を変更』 で名称を変更できます。
4. グラデーションツールの選択
グラデーションツール

グラデーションツール
ツールボックスから 『グラデーションツール』 を選択します。
5. グラデーションツール (グラデーションエディターの選択)
グラデーションエディター
グラデーションエディターの選択
オプションバーの 『編集』 をクリックし、  『グラデーションエディター』 ダイアログを表示します。
6. グラデーションツール (グラデーションエディターの設定)
グラデーションエディター
グラデーションエディター プリセットの選択
『グラデーションエディター』 ダイアログが表示されます。

『プリセット』 から 『描画色から透明に』 (上の左2番目)を選択します。
選択すると『グラデーション名』 に 『描画から透明に』 が表示されます。

  プリセットの 『描画から透明に』 は、 『赤』 のグラデーション設定になっています。

まずは、この 『赤』 の状態でグラデーションをかけてみましょう。

『OK』 をクリックします。
7. グラデーションツール (試しに『赤』のグラデーション 範囲の設定)
グラデーション範囲
グラデーション範囲の設定
『グラデーションエディター』 ダイアログが閉じられてオリジナル画像が表示されている状態に戻ります。

ツールボックスから 『長方形選択ツール』 をクリックします。

次にグラデーションをかけたい範囲をドラッグし決めます。
例では、Aからドラッグ開始し、Bでドラッグ終了しています。
黄色い線(実際は点線)がグラデーションの範囲になります。
8. グラデーションツール (試しに『赤』のグラデーション グラデーション実施)
グラデーション
グラデーションの実施
『再度、ツールボックスから『グラデーションツール』を選択します。

次に実際にグラデーションをかけてみます。
ドラッグの開始から終了までの方向がグラデーションのかかる方向になります。

例では、Aからドラッグ開始し、Bでドラッグ終了します。
ドラッグが終了した時点で、『赤』 のグラデーションが 『右』 から 『左』 へ選択範囲の中で反映されます。
9. グラデーションツール (試しに『赤』のグラデーション グラデーション実施)
グラデーション
赤のグラデーション
ドラッグの終了時点で 『赤』のグラデーションが掛かります。

※ドラッグを複数回実施すると、その都度グラデーションが実施され、色が重なって描画されます。
設定変更などで再実施するには、次に説明する 『取り消し』 後に実施してください。

さて、この赤のグラデーション結果は、試しに実施しているだけであり、本来は 『白』 のグラデーションをかける予定です。
このため 『赤』 のグラデーション結果を取り消し、『白』 のグラデーションをかけてみましょう。
10. グラデーションツール (試しに『赤』のグラデーション グラデーション取り消し)
グラデーション取り消し
グラデーションの取り消し
『メニューバー』 の 『編集』から 『グラデーションの取り消し』 を選択します。
これで『赤』が取り消しになり、グラデーション実施前の状態に戻ります。


11. グラデーションツール (『白』のグラデーション グラデーションエディターの選択)
グラデーションエディター
グラデーションエディターの選択
再度、オプションバーの 『編集』 をクリックし、 『グラデーションエディター』 ダイアログを表示します。
12. グラデーションツール (『白』のグラデーション グラデーションエディターの設定)
グラデーションエディター
グラデーションエディター プリセットの選択
『グラデーションエディター』ダイアログが表示されます。

『プリセット』 から 『描画色から透明に』 (上段の左から2番目)を選択します。
選択すると『グラデーション名 』に 『描画から透明に 』が表示されます。
プリセットの 『描画から透明に』 は、『赤』 のグラデーションになっています。 この 『赤 』を 『白』 に変えます。

グラデーションは2つ以上の色より作成されます。この赤のプリセット『描画色から透明』では、『赤』 → 『赤』 → 『透明』 に色が変わる様に設定されています。
最初の 『赤』 がカラー分岐点1に、次の 『赤』 がカラー分岐点2に設定されています。この分岐点の色を 『白』 に変えます。

まずカラー分岐点1のアイコンをダブルクリックします。すると 『カラーピッカー』 ダイアログが表示されます。

13. グラデーションツール (『白』のグラデーション グラデーションカラーの設定)
カラー分岐点へのカラーの設定
カラー分岐点1への『白』の設定
『カラーピッカー』 ダイアログが表示されます。

『白』 を選択します。 左上の白い部分をクリックするか、
あるいは右下のカラー番号RRGGBB形式で
白:ffffffを指定します。

白を選択したら 『OK』 をクリックします。


14. グラデーションツール (『白』のグラデーション グラデーションカラーの設定)
カラー分岐点へのカラーの設定
カラー分岐点2へ『白』の設定
カラー分岐点2は、 カラー分岐点1と同様に 『白』 を選択します。

カラー分岐点2のアイコンをダブルクリックすると 『カラーピッカー』 ダイアログが表示されます。
カラーピッカーでは、 左上の白い部分をクリックするか、あるいは右下のカラー番号RRGGBB形式で白:ffffffを指定します。
白を選択したら 『OK』 をクリックします。


※『カラーピッカー』 の画像掲載は省略しています。
15. グラデーションツール (『白』のグラデーション グラデーションエディターの設定)
不透明度の分岐点の設定
不透明度の分岐点の設定
カラー分岐点1および2に 『白』 を設定すれば、色の設定は終了です。

次に 『白』 から 『透明』 に変わる分岐点を設定します。
この設定は、『不透明度の分岐点』 により行います。

『不透明度の分岐点1』 のアイコンを左右にドラッグします。ドラッグした値は右下の 『位置』 に%で表示されます。
これで設定終了です。

例では 『白』 から 『白』に代わりグラデーション範囲の20%くらいから透明に変わっていきます。

OKをクリックします。
16. グラデーションツール (『白』のグラデーション グラデーションの実施)
グラデーション
グラデーションの実施
再度、ツールボックスから 『グラデーションツール』 を選択します。

グラデーション選択範囲内をドラッグしグラデーションをかけてみます。
ドラッグの開始から終了までの方向がグラデーションのかかる方向になります。

例では、Aからドラッグ開始し、Bでドラッグ終了します。
ドラッグが終了した時点で、 『白』 のグラデーションが 『右』 から 『左』 へ選択範囲の中で反映されます。
17. グラデーションツール (『白』のグラデーション グラデーションの実施)
グラデーション
『白』のグラデーション
『白』 のグラデーションができました。

『グラデーションエディタ』の 『不透明度の分岐点』 の設定により白・透明の比率が変わりイメージが違ったものになります。
色々と試してください。

なお 『カラー分岐点』 を追加することもでき複数の色によるグラデーションを作成することができます。
グラデーション
『白』のグラデーション完成イメージ
『白』 のグラデーション完成イメージです。

18.画像サイズの縮小

画像サイズの縮小は、「 画像サイズの縮小 」を参照ください。
19. 画像ファイルの保存

ファイルの保存は、「 ファイルを保存 」を参照ください。

グラデーション (この様なグラデーションもできます。)


20. グラデーションツール (おまけのグラデーション グラデーションエディターの設定)
『グラデーションエディター』の設定
『グラデーションエディター』の設定
『グラデーションエディター』の設定で カラー分岐点を複数追加しています。
21. グラデーションツール (おまけのグラデーション 複数色のグラデーション)
複数色のグラデーション
複数色のグラデーション
複数色のグラデーションです。